<1>
在Jquery中对标签进行多样式设置的两种方式
<script type="text/javascript">
$(function () {
$("#div1").css("background", "Yellow") //第一中设置方式 A
$("#div2").css("background", "Blue").css("font-size", "20px") //第一中设置方式 B
$("#div3").css({ "background": "Red", "font-size": "20px", "text-decoration": "underline" }) //第二种设置方式
})
</script>
attr（） 设置元素的属性值
$("#banner").attr({ //一次性设置4个属性
src: "banner,gif",
alt: "advertisenment",
width: 720,
height: 64
});
parent()方法 获取当前元素的父元素（注意：这里仅仅是找父元素，不是找父元素的父元素）
| jquery parent() parents() closest()区别
详情参考：jquery遍历之parent()和parents()的区别及parentsUntil()方法详解
<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
</head>
<body>
<div>
<div id="abc">中国</div>
</div>
</body>
</html>
<script>
//---------------parent()方法的作用为：获取当前元素的父元素
alert($("#abc").parent().text()) //获取id=abc的元素父元素的text内容这；这里输出：中国
alert($("#abc").parent().html()) //获取id=abc的元素父元素的html内容; 这里输出：<div id="abc">中国</div>
</script>
jquery中插入节点的方法，以及它们的区别append，appendTo与prepend，prependTo | after， insertAfter 与 Before，insertBefore
<!DOCTYPE html>
<html>
<head>
<title>Index</title>
<script src="~/Scripts/jquery-1.8.2.js"></script>
<script type="text/javascript">
//append与prepend：是向【每个】匹配的元素内部追加内容。appendTo与prependTo：是把所有匹配的元素追加到【指定】的元素元素集合中 。这就是它们区别
$(function () {
$("#a1").click(function () {
$("#div1").append("<span>你好</span>"); //将<span>你好</span>这个元素添加到 $("#div1")这个元素内部的后面去 即：给$("#div1")这个标签添加一个儿子 【注意：这里是将<span>你好</span>这个标签添加到$("#div1")标签内部的后面】
})
$("#a2").click(function () {
$("#div1").prepend("<span>世界</span>");//将<span>世界</span> 这个元素添加到 $("#div1")这个元素内部的前面去 即：给$("#div1")这个标签添加一个儿子 【注意：这里是将<span>你好</span>这个标签添加到$("#div1")标签内部的前面】
})
$("#a3").click(function () {
$("#div2").appendTo($("#div1")); //将$("#div2")这个标签添加到$("#div1")这个元素内部。【注：假如$("#div1")这个标签里面有2个元素，那么就将$("#div2")的这个标签添加到这2个元素的后面】
})
$("#a4").click(function () {
$("#div2").prependTo($("#div1")); //将$("#div2")这个标签添加到$("#div1")这个元素内部。【注：假如$("#div1")这个标签里面有2个元素，那么就将$("#div2")的这个标签添加到这2个元素的前面】
})
/*----------------------after与insertAfter的区别--------------------------------------------------- */
//after()——其方法是将方法里面的参数添加到jquery对象后面去；如：A.after(B)的意思是将B放到A后面去；
//insertAfter()——其实是将元素对调位置； 如：A.insertAfter(B);即将A元素调换到B元素后面；
/*---------------------------------------------------------------------------------------------------*/
$("#a5").click(function () {
$("#div1").after("<span>中国</span>"); //将<span>中国</span>这个标签追加到$("#div1")元素的后面。相当于给$("#div1")添加了一个兄弟 （当点击一次添加：不管$("#div1")后面有多少兄弟，<span>中国</span>这个标签仅仅是添加到$("#div1")元素的后面，紧挨着的）
})
$("#a6").click(function () {
$("#div1").before("<span>德国</span>"); //将<span>德国</span>这个标签追加到$("#div1")元素的前面。相当于给$("#div1")添加了一个兄弟 （当点击一次添加：不管$("#div1")前面有多少兄弟，<span>德国</span>这个标签仅仅是添加到$("#div1")元素的前面，紧挨着的）
})
$("#a7").click(function () {
$("<span>英国</span>").insertAfter($("#div1")); //将<span>英国</span>这个标签添加到$("#div1")元素的后面。相当于给$("#div1")添加了一个兄弟 （当点击一次添加：不管$("#div1")后面有多少兄弟，<span>英国</span>这个标签仅仅是添加到$("#div1")元素的后面，紧挨着的）
})
$("#a8").click(function () {
$("<span>日本鬼子</span>").insertBefore($("#div1")); //将<span>日本鬼子</span>这个标签添加到$("#div1")元素的前面。相当于给$("#div1")添加了一个兄弟 （当点击一次添加：不管$("#div1")前面有多少兄弟，<span>日本鬼子</span>这个标签仅仅是添加到$("#div1")元素的前面，紧挨着的）
})
});
</script>
</head>
<body>
<div>
<div id="div1"><span>海南</span></div>
<div id="div2">我是div2</div>
<br />
<button id="a1">提交1</button> <button id="a2">提交2</button> <button id="a3">提交3</button><button id="a4">提交4</button>
<button id="a5">提交5</button><button id="a6">提交6</button>
<button id="a7">提交7</button><button id="a8">提交8</button>
</div>
</body>
</html>
children()获取下级元素 find()获取所有下级元素 filter()筛选具有某些属性和包含某些文字的标签 has()包含标签 contains()包含文本
contains的用法及find()与filter()的区别
$('div').filter('.div1');//选择div标签中class属性为div1的div元素
$('div').find('em');//选择div标签中的em标签的元素
$("#demo").find("[data-id='1009']") 刷选出id为demo的子级元素中data-id属性值为 1009的元素
filter()是根据括号中的 属性来进行筛选 比如：$("div").filter("p") 这样是不允许的。filter括号里只一些属性，或者包含什么的，不能是一个元素，例如"p"
而find()是获取某些元素。
一
<html>
<head>
<script src="jquery-2.1.3.js"></script>
</head>
<body>
<div class="css"> <p class="rain">测试1</p> </div>
<div class="rain"> <p>测试2</p> </div>
<ul>
<li>中国</li>
<li>美国</li>
<li>德国</li>
</ul>
</body>
</html>
<script type="text/javascript">
$(function () {
//find()会在div元素内 寻找 class为rain 的元素。
var a = $("div").find(".rain"); //相当于 var a= $("div[class=rain]");
alert(a.length); //打印出：1
var b = $("div").find("p"); //相当于 var b=$("div p");
var c = $("div").children("p") //相当于 var c=$("div > p")
//在li元素集合中筛选出包含"中国"，或者包含"美国"的a元素，并计算这样的a有几个。
var li_Count = $("li").filter(":contains(中国),:contains(美国)").length;
alert(li_Count) //打印出：2
var li_Value = $("li").filter(":contains(中国),:contains(美国)").text();
alert(li_Value); //打印出：中国美国
//find()会在div元素内 寻找 class为rain 的元素。
$("div").filter(".css").css("color", "red"); //相当于 $("div[class=css]").css("color", "red");
})
</script>
二
<html>
<head>
<script src="~/Scripts/jquery-1.8.2.js"></script>
</head>
<body>
<ul class="level-1">
<li class="item-i">I</li>
<li class="item-ii">
II
<ul class="level-2">
<li class="item-a">A</li>
<li class="item-b">
B
<ul class="level-3">
<li class="item-1">1</li>
<li class="item-2">2</li>
<li class="item-3">3</li>
<li id="abc">4</li>
</ul>
</li>
<li class="item-c">C</li>
</ul>
</li>
<li class="item-iii">III</li>
</ul>
<div class="css">
<p class="rain">测试1</p>
</div>
<div class="rain">
<p>测试2</p>
</div>
</body>
</html>
<script type="text/javascript">
//----------------------------------------------children()获得选中元素的一下级的子元素
//children及find方法都用是用来获得element的子elements的，但children方法获得的仅仅是元素一下级的子元素，而find方法获是得所有下级元素
$("ul.level-1").children().css('border', '1px solid green');//取得匹配元素的子元素集合,只考虑子元素不考虑后代元素;
//相当于
$("ul.level-1 > li").css('border', '1px solid green');
//----------------------------------------------find() --获取选中元素的所有下级元素 :(指定的对象集合下进行查找)
//将ul 标签下calss属性值level-3的标签的背景颜色设为红色【即:获取ul标签的所有后代，根据find()方法括号里面的参数(选择器)来过滤，即根据find()方法括号里的选择器来取我们需要的元素】
$("ul").find(".level-3").css("background", "red");
$("ul").find(".item-2").css("color", "red"); //将ul 标签下面class属性值为item-2的标签的字体颜色设为红色 ; 所以这条语句等价于下面的这条语句
$("ul .item-2").css("color", "red"); //将ul 标签下面class属性值为item-2的标签的字体颜色设为红色 （注意ul与.之前有一个空格，如果去掉那个空格意思就变成了 将class属性值为item-2的ul标签的字体颜色设置为红色了）
//----------------------------------------------filter() --获取具有某些属性值的标签 :(指定的对象集合进行过滤)
$("li").filter(".item-1") //获取class属性值为item-1的li元素
$("li").filter(":even").css("background", "red"); //获取所有偶数号的li元素,并将它们的背景颜色设为红色
$("li").filter(".item-1,#abc").css("background-color", "yellow"); //获取class属性值为item-1的所有li标签 ，同时获取id属性值为abc的所有li标签
$("p").filter(".selected, :first");//获取class属性值为selected的所有P标签，同时获取第一个P标签
//----------------------------------------------has() --获取标签里包含了某些标签的标签 (has是判断标签的)
$("div").has("p") //获取div标签中包含了p标签的div标签
$("div").has("p").length; //获取 div标签里包含p标签的的长度。即：div标签里面包含了p标签的div的个数，即：像这样的div有几个。其实它就是获取div的个数， 如果这个打印一下的话，打印结果为 2
$("div").has("p").text()//获取div标签中包含了p标签的div的text值 //打印一下，结果为“测试1 测试2”
//----------------------------------------------:contains() --获取标签里包含了某些文字的标签 (contains是判断文本的)
//jQuery:has()和jQuery:contains()两个方法比较类似。不同点在于：has是判断标签的 contains是判断文本的
$("div p:contains('测试')").text(); //获取div标签下包含“测试”的p标签的text值 //打印一下，结果为“测试1 测试2”
//alert($("p").contains("测试").text()); //不能这么用，提示错误“contains不是一个函数”
</script>
wrap() wrapAll() wrapInner() 包裹 | unwrap()清除父级元素 （清除包裹）
<html>
<head>
<title>Wrap</title>
<script src="~/Scripts/jquery-1.8.2.js"></script>
</head>
<body>
<span id="s1">我是S1</span>
<div><span id="s2">我是S2</span></div>
<p><span id="s3">我是S3</span></p>
</body>
</html>
<script type="text/javascript">
$("span").wrap("<div></div>"); //将每个span标签都用div标签包裹起来
$("span").wrapAll("<div></div>");//将所有的span标签用一个div标签包裹起来 注: 如果使用wrapAll后 会将<span>标签从原本包裹它的<p>标签中移出后再用<div>标签将它包裹起来
//例：<p><span id="s3">我是S3</span></p> 使用了$("span").wrapAll("<div></div>") 后 就变成了 <div><span>我是S3</span></div> <p></p>
$("span").wrapInner("<div></div>"); //将span元素的text内容用div标签包裹上。例：<span>abc</span> 使用$("span").wrapInner("<div></div>")后，就变成了<span><div>abc</div></span>
$("span").unwrap(); // 清除所有<span>标签的父元素,父元素为body时除外。 unwrap() 方法用于删除被选元素的父元素。
</script>
contents() 方法获得匹配元素集合中每个元素的子节点，包括文本和注释节点
contents() 查找匹配元素内部所有的子节点（包括文本节点）。如果元素是一个iframe，则查找文档内容
$('div').filter('.div1');//选择div标签中class属性为div1的div元素
$('div').find('em');//选择div标签中的em标签的元素
你懂的
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
<script src="jquery-1.11.2.js"></script>
</head>
<body>
<div>
<div>
<ul id="u1">
<li id="li1">
中国
<ul id="u2">
<li>湖南</li>
<li id="a">广东</li>
</ul>
</li>
<li>
美国
<ul id="u3">
<li>华盛顿</li>
<li>纽约</li>
</ul>
</li>
</ul>
</div>
</div>
</body>
</html>
<script type="text/javascript">
//------------contents() 方法获得匹配元素集合中每个元素的子节点，包括文本和注释节点。-----------------
$(function () {
$("#u1 li").click(function () {
//nodeType 属性可返回节点的类型。它的值有1，2，3，8，9 （1表示：元素element 2表示：属性attr 3表示：文本text 8表示：注释comments 9表示：文档document）
//假如我点击的当前这个元素，它里面包含了文本，又包含了其他的元素，以下这段代码就是指，获取当前元素的文本值，而不是它里面的其他元素
var value = $(this).contents().filter(function () { return this.nodeType == 3 }).text();
alert(value); //单点击一个li的时候就打印出它的text文本值 （点击中国的时候，仅仅打印出“中国”，而不会打印出 湖南 广东）
return false; //取消冒泡
})
})
</script>
<2> 全部内容
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
/*--#div1 { font-size:xx-large; background-color:yellow}-->*/
p {
font-size: xx-large;
background-color: yellow;
}
a {
display: list-item;
width: 80px;
height: 40px;
border: 1px solid #CCC;
background: darkgray;
}
</style>
<script type="text/javascript" src="Scripts/jquery-1.4.1.js"></script>
<script src="Jquery/jquery-1.10.2.js" type="text/javascript"></script>
<script src="script/jquery-1.11.0.min.js" type="text/javascript"></script>
<script type="text/javascript">
$就是一个函数
ps: 平时用到的jquery对象都是通过$()函数制造出来的，$()函数就是一个jquery对象的制造工厂.
建议:如果获取的对象是 jquery对象，那么在变量前面加上$,这样方便容易识别出哪些是jquery对象,
例如:
var $variable = jquery对象;
如果获取的是dom对象，则定义如下:
var variable = dom对象
下面DOM对象与jquery对象之间的转换
var jquer = document.getElementById("div1"); DOM对象
var dom = $(jquer) //将一个DOM对象转换成一个jquer对象
下面代码将演示一个jquery对象转换成dom对象，再使用dom对象的方法
复制代码 代码如下:
var abc=$("#cr"); //jquery对象
var bc = abc[0]; //dom对象 也可写成 var bc=abc.get(0);
alert(bc.checked); //检测这个checkbox是否给选中
1.jQuery对象就是通过jQuery包装Dom对象后产生的对象。
2.Dom对象要想通过jQuery进行操作，先要转换为jQuery对象。
3.$(‘#div1’).html()等价于：document.getElementById("div1").innerHTML。
4.jQuery对象只能调用jQuery对象封装的方法，不能调用Dom对象的方法，Dom对象也不能调用jQuery对象的方法，所以alert($(‘#div1’).innerHTML是错的。
5.Array是JS语言本身的对象，不是Dom对象，因此不需要转换为jQuery对象才能用。
6.将Dom对象转换为jQuery对象的方法，$(dom对象)
document是一个DOM对象 $(document)就是将一个DOM对象转换成一个jquery对象，然后调用它的ready()方法来注册一个事件，那么这个事件的响应函数就是ready()这个括号里的function(){}函数【实际意思就是注册这么一个匿名的函数function(){}来监听ready这么一个事件】
$(document).ready(function(){}) //括号里的函数建议用匿名的，因为可以避免同名函数的冲突。
Jquery中$(document).ready()是一个注册事件的函数，和普通的DOM不一样，不需要在元素中标记on...这样的事件。的作用类似于传统JavaScript中的window.onload方法，不过与window.onload方法还是有区别的。注：DOM的注册事件是：window.onload=function(){alert("我注册了一个事件")}
1.执行时间
window.onload必须等到页面内包括图片的所有元素加载完毕后才能执行。
$(document).ready()是DOM结构绘制完毕后就执行，不必等到加载完毕。
2.编写个数不同
window.onload不能同时编写多个，如果有多个window.onload方法，只会执行一个（没有C#中的+=机制） (只会执行最后面那一个)
$(document).ready()可以同时编写多个，并且都可以得到执行
3.简化写法
window.onload没有简化写法
$(document).ready(function(){})可以简写成$(function(){});
$(document).ready(function () { alert("加载完毕")})
//-------------------------------------------------------------------------------------------------------------------
//Each
$(function () {
$("#bnt").click(function () { alert($("#tex").val()); });
$("div").click(function () { $(this).hide(); }) //this就是当前处理这个元素。
$("input").click(function () { $(this).hide(); })
})
//$.map(array,fn)对数组array中每个元素调用fn函数逐个进行处理，fn函数将处理返回，最后得到一个新数,$.map不能处理Dictionary风格的数组
var arr = [1, 2, 3];
var arr2 = $.map(arr, function (item) { return item * 2 })
alert(arr2);
for (var i = 0; i < arr2.length; i++) {
alert(arr2[i]);
}
var date = new Date();
var arr3 = { "tom": 30, "jie": 20 };
//$.each(array,fn)对数组arry每个元素调用fn函数进行处理，没有返回值
$.each(arr3, function (key, value) { alert(key + "的年龄是" + value); });
$.each(arr3, function (item) { alert(item) }); //得到是key
$.each(arr3, function () { alert(this) }); //得到的是value, this就是当前处理这个元素的值
$(function () { $("input").css("background", "blue") });
//有四个城市，当你点击Button表单时获取你选中了几个城市，及你选中城市的名称。
$(function () {
$("input[value='选择选中项']").click(function () {
//alert( "你选中了"+$("input:checked").val())
var arr = new Array();
$("input:checked").each(function (key, value) {
arr[key] = $(value).val();
$("#pid2").text("您总共选中了" + arr.length + "项：" + arr.join(",")); //arr.join(",")的意思就是把arr的key用"，"分割开来
})
});
})
//--------------------------------------------------------------------------------------------------------
//点击一个id为bnt的控件，让id为tex的控件的value为当前时间 格式为 （时：分：秒）
$(function () {
$("#bnt").click(function () {
$("#tex").val(date.getHours() + ":" + date.getMinutes()+":"+date.getSeconds());
});
});
//点击P标签，弹出一个“点了”的对话框
$(function () {
$("p").click(function () { alert("点了")});
})
//---------------------------------------------------------------------------------------------------------
//find()遍历
//find() 方法获得当前元素集合中每个元素的后代，通过选择器、jQuery 对象或元素来筛选。
//find() 方法返回被选元素的后代元素，一路向下直到最后一个后代。
//示列1>：搜索所有段落中的后代 span 元素，并将其颜色设置为红色：
$("p").find("span").css('color','red');
//示列2>: 下面的例子返回属于 <div> 后代的所有 <span> 元素：
$(document).ready(function(){
$("div").find("span"); //获取div里面有<span>标签的div集合
});
//如果想要在某个元素下寻找特定的元素，仅仅依靠$("#id")，$("#"+"id")，$(this)，$(element)这些方法，就必须对 $("#id")获取的元素进行遍历，获取其子元素。如此一来就显得格外的繁琐，代码量也非常庞大。
//于是这就需要用到find()方法。
$("#id").find("#child")；//获取#id元素里面id为child的元素
$("#id").find(".child")；
$("#id").find("input[type='image']")；
//非常方便好用。
//除了上面的find()方法之外，还有一种查找子元素的方法。
$(".child",parent);
//这种方法与find()方法的结果是一样的，也更加简洁。
//我们举个例子：
function(table){
$("tr",table). css("background-color","red");
}
//这种方法，方便代码的重用，更符合闭包的写法。
//siblings() 获得匹配集合中每个元素的同胞>>>获取所有的p标签，并将这个P标签的背景设为"red",并将其siblings(兄弟) p标签（节点）的背景颜色设为"yellow"
$(function () {
$("p").click(function () {$ (this).css("background-color","red").siblings("p").css("background-color","yellow") })
})
//也可以写成这样
$(function () {
$("p").click(function () {
$(this).css("background-color", "red");
$(this).siblings("p").css("background-color", "yellow")
});
});
//找到每个div的所有同辈元素中带有类名为selected的元素。
$(function(){
$("div").siblings(".selected")
//相当于属性过滤选择器的 $("div[class=selected]") 的用法
})
//获取所有的div标签，给他绑定click监听事件，如果用户点击了一个div标签，那么当前（this）标签背景设为红色，当前标签的后面所有标签背景都设为黄色
$(function () {
$("div").click(function () {
$(this).css("background-color", "red");
$(this).nextAll().css("background-color", "yellow");
})
})
//next的反义词是prev ; $(this).prev()表示获取当前元素的前一个同辈元素。$(this).prevAll()表示获取当前元素前面的所有元素同辈。
$(function () {
$("div").click(function () {
$(this).css("background-color", "red");
//将当前（this）选中的<div>标签后面的所有同辈标签的背景颜色都设为黄色
$(this).nextAll().css("background-color", "yellow");
//也可以在nextAll("p")里面添加标签选择器,那么它就指向了当前选择的<div>标签后面的所有同辈<p>标签，并将其背景颜色设为yellow
$(this).nextAll("p").css("background-color", "yellow");
})
})
//类似与京东的商品评价等级 星星的颜色会移动鼠标移动变化。移动到最后一颗星星就是非常满意啦。
$(function () {
$("table td").html("<img width=40,height=40, src=images/123.png>")
.mousemove(function () {
$("table td").html("<img width=40,height=40, src=images/456.gif>");
$(this).nextAll().html("<img width=40,height=40, src=images/123.png>");
});
})
//********************************************************************************************************************
//JQuery选择器，JQuery选择器用于查找满足条件的元素,语法、意义类似于CSS选择器
1.▲ID选择器：<p id="pid">你好</p>
用$("#控件Id")相当于getElementById：$("#div1").html("<font color=red>hello</font>")
$(function (){
$("#pid").click(function (){
alert("点击了我")
});
})
2.▲标签选择器： <p>你好</p>
$("TagName")相当于getElementsByTagName：$("p").html("我们都是P");
$(function (){
$("p").click(function(){
alert("请不要点我");
});
})
3.▲class选择器
首先定义两个样式
<style type="text/css" >
.class1{color:Red} //定义一个class1样式
.class2{background:yellow} //定义一个class2样式
</style>
<input type="text" class="class1 class2"/> //给这个input标签添加了两个样式，一个是class1样式，另外一个是class2样式，两个样式之间用空格隔开
①将textarea表单的样式设为class1的样式
<textarea class="class1">你好</textarea>
②
$(function(){
$(".class1").click(function() { //获取样式为class1的所有表单，并给它们添加click事件
alert($(this).val());
});
})
----------------------------------------------------------------------------------------------
4.▲<1>多条件选择器
$(function () {
$(".btnClass1,.btnClass2").css("background", "red"); //将具有btnClass1，和btnClass2样式的表单的背景颜色设为红色
$("#b1,#b2").css("color", "blue"); //将id属性为 b1,或者b2的字体颜色设为蓝色
$("input,p").css("color", "yellow"); //将input标签，和p标签的字体颜色设为黄色
$("div.class").css("color","red"); //将class属性值为class1的div的背景设为黄色
$("body *").css("background", "yellow"); //将body下面所有的标签背景颜色设为黄色
})
------------------------------------------------------------------------------------------------
$("div,p,input") //同时选择p标签，div标签，input标签
$(function(){
$("div,p,input").click(function(){
alert("点击了我");
})
})
----------------------------------------------------------------------------------------------------
4.<2>多条件选择器：多条件选择器：<p>你好</p><div>你好</div><span>
$("p,div,span.menuitem")//同时选择p标签、div标签和拥有menuitem样式的span标签元素注意选择器表达式中的空格不能多不能少。易错！
$(function (){
$("p,div input.bnt").click(function (){ //给p标签，div下面 class属性值为bnt的input标签绑定click事件
aler("坏人，请不要点我");
})
})
----------------------------------------------------------------------------------------------------
5.▲层次选择器（没列完）：
①$("div li")//获取div下的所有li元素（后代，子、子的子……）
②$("div > li")//获取div下的直接li子元素
③$(".menuitem+ div")//获取样式名为menuitem之后的第一个同辈div元素（不常用）相当于$(".menuitem").next("div")
④$(".menuitem ~ div")//获取样式名为menuitem之后所有的同辈元素div元素（不常用）相当于$(".menuitem").nextAll("div")
//*******************************************************************************************************************
//基本过滤选择器：
1.:first 选取第一个元素。$("div:first")选取第一个<div>
2.:last 选取最后一个元素。$("div:last")选取最后一个<div>
3.:not(选择器) 选取不满足“选择器”条件的元素，$("input:not(.myClass)")选取样式名不是myClass的<input>
4.:even、:odd，选取索引是偶数、奇数的元素：$("input:even")选取索引是偶数的<input>，index 值从 0 开始，所有第一个元素是偶数 (0)
5.:eq(索引序号)、:gt(索引序号)、:lt(索引序号) 选取索引等于、大于、小于索引序号的元素，比如$("input:lt(5)")选取索引小于5的<input>
6.$(“:header”)选取所有的h1……h6元素（*）
7.$("div:animated")选取正在执行动画的<div>元素。（*）
/*选中<table>标签下的所有<tr>标签，但是排除<tr>标签的索引等于0的那个<tr>标签*/
$("table tr:not(:eq(0))").css("background","Red")
/*选中<table>标签下的所有<tr>标签，但是排除<tr>标签的索引等于0的那个<tr>标签,，然后再排除<tr>标签的索引等于0的那个<tr>标签 【注意：当排除<tr>标签的索引等于0的那个<tr>标签后，那么在它后面的那个<tr>标签的索引就变成0了，然后再次排除<tr>标签的索引等于0的那个<tr>标签。最后的效果就是 选中<table>标签下的所有<tr>标签，但是排除前2个<tr>标签】*/
$("table tr:not(:eq(0)):not(:eq(0))").css("background","Red")
ea
$(function () {
$("#tab2 tr:gt(0)").css("color", "blue"); //因为第一行是表头，不参与奇偶变色，所以用tr:gt(0)排除第一行，然后把除第一行外的所以行背景色设为blue
$("#tab2 tr:first").css("background-color", "#AAAAAA").css("font-size", "30px").css("font-weight", "bolder");
$("#tab2 tr:last").css("background-color", "red");
$("#tab2 tr:gt(0):lt(1)").css("font-size", "20px");
$("#tab2 tr:gt(0):even").css("color", "red");//将除去表头外的奇数行设为red
//也可以这么写，但是这个table就是指所有的表都是这种样式了。
//$("table tr:even").css("color", "red");
//点击id为bnt的表单控件，删除id为tab2的表
$("#bnt").click(function () {
$("#tab2").remove();
});
})
//*******************************************************************************************************************
//属性过滤选择器(过滤器)
1.$("div[id]")//选取有id属性的<div>
2.$("div[title=test]") //选取title属性为“test”的<div>，jQuery中没有对getElementsByName进行封装，用$("input[name=abc]")
3.$("div[title!=test]") //选取title属性不为“test”的<div>
4.$("input[id^=beforeInput]") //选取id属性以beforeInput开头的所有input表单
5.还可以选择开头、结束、包含等，条件还可以复合。（*）包含过滤器：例如： $("a:contains('删除')").click(function () { return confirm("确定要删除吗") }) //对包含"删除"字样的a标签添加click事件
//表单对象过滤选择器：
1.$("#form1:enabled") //选取id为form1的表单内所有启用的元素
2.$("#form1:disabled") //选取id为form1的表单内所有禁用的元素
3.$("input:checked") //选取所有选中的元素（Radio、CheckBox）
4.$("select:selected") //选取所有选中的选项元素（下拉列表）
//表单选择器：
1.$(":input")//选取所有<input>、<textarea>、<select>和<button>元素。和$("input")不一样，$("input")只获得<input>
2.$(":text")//选取所有单行文本框，等价于$("input[type=text]")
3.$(":password")//选取所有密码框。同理还有:radio、:checkbox、:submit、:image、:reset、:button、:file、:hidden。
//-------------------------------------------------------------------------------------------------------------------
//attr()方法读取或设置元素的属性。对Jquery没有封装的属性用attr进行操作
$(function () {
alert($("a:first").attr("href")); //获取第一个a标签的href属性值
$("a:first").attr("href","http://www.baidu.com"); //将第一个a标签的值设置为http://www.baidu.com
alert($("input:last").attr("id")); //获取最后一个input标签的id属性值
alert($("#bnt").attr("type"));
alert($("#pid").attr("class"));
})
//动态创建一个DOM节点
$(function () {
var link = $("<a href='http://www.baidu.com'>百度123</a>");
$("#div3").prepend(link); //在元素内部的开始添加元素（在元素内部添加，相对于给自己添加了一个儿子）
//$("#div3").append(link);//在元素内部的末尾添加元素
$("div:first").append(link);
//$("div:first").prepend(link);
$("div").after(link); //【在元素后面添加元素（相当于给自己添加一个兄弟）】在每个（所有）div后面都添加一个link
$("div").before(link);//【在元素前面添加元素（兄弟）】在每个（所以）div前面都添加一个link
})
//动态为table表添加行
$(function () {
var link = { "百度": "http://www.baidu.com", "新浪": "http://www.sina.com.cn" };
$.each(link, function (key, value) {
var tr = $("<tr><td>" + key + "</td><td><a href=" + value + ">" + key + "</a></td></tr>");
$("#tab3").prepend(tr);
})
})
//选择器以及过滤器的使用，及删除节点的使用
$(function () {
$("#bnt").click(function () {
$("#div4 input[class=n]").remove();
$("div input[class=n]").remove();
$("div> input[class=n]").remove();
//remove()也是有返回值的，它的返回值就是被删除的节点，
var li = $("div:last input[class=n]").remove();
var arr = new Array();
$(li).each(function (key, value) {
arr[key] = $(value).val();
})
alert(arr);
//还可以给删除掉的节点移动到某个位置上呢。哈哈
$("#div1").after(li);
});
});
</script>
</head>
<body>
<a href="http://www.baidu.com" id="嘿嘿">百度</a><br />
<a /><br />
<div id="div1">
这是一个div快，快来点击我拉。
<p id="pid" class="黄">abc</p>
<p>abc</p>
<p>abc</p>
<p>abc</p>
</div>
<span>这是什么是</span>
<div>aa</div>
<div>bb</div>
<p>123456</p>
<p>1abcde</p>
<div>cc</div>
<textarea rows="10" cols="20" class="txt">你笨的就像一只熊</textarea>
<table id="tab2" border="2">
<tr><td>国家</td><td>面积</td><td>人口</td></tr>
<tr><td>中国</td><td>960</td><td>14</td></tr>
<tr><td>美国</td><td>959</td><td>3.5</td></tr>
<tr><td>日本</td><td>37</td><td>1.2</td></tr>
<tr><td>美国</td><td>959</td><td>3.5</td></tr>
<tr><td>日本</td><td>37</td><td>1.2</td></tr>
<tr><td>美国</td><td>959</td><td>3.5</td></tr>
<tr><td>日本</td><td>37</td><td>1.2</td></tr>
<tr><td>汇总</td><td>1980</td><td>18.7</td></tr>
</table>
<table id="tab1">
<tr><td></td><td></td><td></td><td></td><td></td></tr>
</table>
<table id="tab3"></table>
<div id="div3">
<ul>
<li>1231</li>
<li>4643</li>
</ul>
</div>
<div>
<ul>
<li>131346</li>
<li>131346</li>
<li>131346</li>
</ul>
</div>
<div id="div4">
<input type="checkbox" value="长沙" />长沙
<input type="checkbox" value="武汉" class="n" />武汉
<input type="checkbox" value="广州" />广州
<input type="checkbox" value="深圳" class="n" />深圳
<input type="button" value="选择选中项" />
<p id="pid2"></p>
</div>
<input type="text" id="tex" />
<input type="button" id="bnt" value="提交" /><br />
</body>
</html>
CheckBox checked 判断复选框是否被选中
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>each</title>
<script src="~/Scripts/jquery-1.8.2.js"></script>
</head>
<body>
<form id="demoForm">
<input name="goods_weight" type="checkbox" value="20">A(20kg)<br>
<input name="goods_weight" type="checkbox" value="33">B(33kg)<br>
<input name="goods_weight" type="checkbox" value="36">C(36kg)<br>
<input name="goods_weight" type="checkbox" value="49">D(49kg)<br>
<input name="goods_weight" type="checkbox" value="56">E(56kg)<br>
<input name="goods_weight" type="checkbox" value="78">F(78kg)<br>
<input id="btnBuy" type="button" value="订购">
</form>
</body>
</html>
<script type="text/javascript">
$(function () {
$("#btnBuy").click(function () {
var a = 0;
$.each($("#demoForm > input[name=goods_weight]"), function () {
if ($(this).is(":checked")) { //如果当前元素是被选中 那么a就加1； $(this).is(":checked")是判断当前元素是否被选中。
a = a+1;
}
})
alert("您一共选中了"+a+"项");
})
})
//------------------------------------------------------------------------------
$("#btnBuy").click(function () {
var weight = 0;
$.each($("[name=goods_weight]:checked"), function () { //获取所有选中的checkbox
weight += parseInt(this.value); //parseInt(this.value) 是获取当前checkbox的value值，然后将它转换成int
if (weight > 100) {
return false;
}
});
if (weight <= 0) {
alert("没有选择任何商品!");
} else if (weight > 100) {
alert("一次订购的商品重量不能超过100kg!");
} else {
// 订购商品
alert("订购商品成功!");
}
});
</script>
扫一扫
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
