属性、表单过滤器
属性过滤选择器：
$("div[id]")选取有id属性的<div>
$("div[title=test]")选取title属性为“test”的<div>，jQuery中没有对getElementsByName进行封装，用$("input[name=abc]")
$("div[title!=test]")选取title属性不为“test”的<div>
还可以选择开头【name^=值】、结束【 name$=值】、包含【 name*=值】等，条件还可以复合。【[属性1=a][属性2=b]…】（*）
表单对象属性选择器（过滤器）：
$("#form1 :enabled")选取id为form1的表单内所有启用的元素
$("#form1 :disabled")选取id为form1的表单内所有禁用的元素
$(“input:checked”)选取所有选中的元素（Radio、CheckBox）,这个中间不能加空格.
$("select :selected")选取所有选中的选项元素（下拉列表）
===================================================================
//$("#form1:enabled"); //不加空格表示的是,所有启用的表单,这样就变成过滤器了
//$("#form1 :enabled"); //加空格表示的是先选取这个表单,表单下所有启用的元素
===================================================================
元素的each
$(function () {
$('#dv input[type=checkbox]').click(function () {
var checks = $('#dv :checked');
var len = checks.length;
var arr = [];
checks.each(function (k, v) {
arr[arr.length] = $(v).val();
});
$('#msgNames').text('共选中了' + len + '内容为' + arr.toString());
});
});
表单选择器
$(":input")选取所有<input>、<textarea>、<select>和<button>元素。和$("input")不一样， $("input")只获得<input>
:input比input级别高,包含input texarea select button
$(":text")选取所有单行文本框，等价于$("input[type=text]"),$(‘input[type=text]’),$(‘:text’);
$(“:password”)选取所有密码框。
同理还有:radio、:checkbox、:submit、:image、:reset、:button、:file、:hidden。
代替了$(‘input[type=***]’);
其他过滤器(*)
内容过滤器：
:contains(text),过滤出包含给定文本的元素。(innerText中包含。)
:empty,过滤出所有不包含子元素或者文本的空元素。
:has(selector),过滤出元素中包含（即子元素中）selector选择器能选择到的元素。
:parent,过滤出可以当做父元素的元素（即该元素有子元素或者元素中包含文本。）
========================================================================
//$('div:contains(x)').css('backgroundColor', 'blue'); //包含字母x的背景色为蓝色
//$('div:empty').css('backgroundColor', 'blue'); //div中没有任何元素(文本)背景为蓝色
//$('div:has(a)').css('backgroundColor', 'blue');//所有div中包含a标签的div背景为蓝色
//$('div:parent').css('backgroundColor', 'blue');//有子元素为父元素的背景为蓝色
子元素过滤器(*)
:first-child,与:fisrt的区别,:first只能选取第一个，而:first-child，则能选取每个子元素的第一个元素。
$(‘ul li:first’);只返回一个li元素。
$(‘ul li:first-child’);//为每个父元素（ul）都返回一个li。
:last-child
:only-child,匹配当前父元素中只有一个子元素的元素。
:nth-child,对比eq()来理解，eq()值匹配一个，nth-child()为每个父元素都要匹配一个子元素。
:nth-child(index),index从1开始。
:nth-child(even)
:nth-child(odd)
:nth-child(3n),选取3的倍数的元素
:nth-child(3n+1),满足3的倍数+1的元素。
.children()方法,只考虑子元素，不考虑后代元素。
===========================================================================
//$('ul li:first').css('backgroundColor', 'red'); //表示的是获取所有的li中的第一个
//$('ul li:first-child').css('backgroundColor', 'red');//表示的是所有ul中第一个li
//$('ul li:nth-child(2)').css('backgroundColor', 'red');//表示的是所有ul中第二个li
jQuery的Dom操作
1、使用html()方法读取或者设置元素的innerHTML：
alert($("a:first").html());//innerHTML
$("a:first").html("hello");
2、使用text()方法读取或者设置元素的innerText：
alert($("a:first").text());
$("a:first").text("hello");
3、使用attr()方法读取或者设置元素的属性，对于jQuery没有封装的属性（所有浏览器没有差异的属性）用attr进行操作。
alert($("a:first").attr("href"));
$("a:first").attr("href", "http://www.rupeng.com");
attr({‘key’:’value’,’k’:’v’});
4、使用removeAttr删除属性。删除的属性在源代码中看不到，这是和清空属性的区别。attr(‘name’,’’)
========================================================================
$('#chk').attr('checked', 'true');//jq中让checkbox选中
$('#chk').attr('class', 'cls'); //jq中为checkbox添加类样式
$('#chk').attr('class', ''); //这么写属性还有
$('#chk').removeAttr('class');//这么写属性是真的移除了
动态创建Dom节点
使用$(html字符串)来创建Dom节点，并且返回一个jQuery对象，然后调用append等方法将新创建的节点添加到Dom中：
var link = $("<a href='http://www.baidu.com'>百度</a>");
$("div:first").append(link);
$()创建的就是一个jQuery对象，可以完全进行操作
var link = $("<a href='http://www.baidu.com'>百度</a>");
link.text(“百度");
$(“div:first”).append(link);。
创建radio，使用$(‘<input name=“”/>’);，而不要在创建好后通过attr(‘name’,’gender’).//通过attr()设置name,在IE6下有问题。
append方法用来在元素的末尾追加元素（最后一个子节点）。增加元素末尾(儿子)
prepend，在元素的开始添加元素（第一个子节点）。增加元素开始(儿子)
after，在元素之后添加元素（添加兄弟）增加元素后面(兄弟)
before：在元素之前添加元素（添加兄弟）增加元素前面(兄弟)
其他追加方法(将自己追加到某元素)
子元素.appendTo(父元素);//主动巴结!到最后一个
子元素.prependTo(父元素);//主动巴结到第一个。
(*)A.insertBefore(B);将A加到到B的前面，等同于B.before(A);
(*)X.insertAfter(Y);将X加到到Y的后面，等同于Y.after(X);效果都一样
删除节点
empty();
清空某元素下的所有子节点
内部实现：while(ele.firstChild){ele.removeChild(ele.firstChild);}//不同版本可能不一样。
remove(selector)
删除当前元素，返回值为被删除的元素。还可以继续使用被删除的节点。比如重新添加到其他节点下：
var lis = $("#ulSite li").remove();
$("#ulSite2").append(lis);
参数expr,是一个选择器，如果没有选择器，表示把选中的元素删掉，如果有选择器则表示在选中的元素中，再过滤出expr匹配的元素删除掉。
案例：清空ul中的项，代码见备注。$("ul li.testitem").remove(); 删除ul下li中有testitem样式的元素。
权限选择：var items = $(“#select1 option:selected”).remove(); $(“#select2”).append(items); 更狠的：$(“#select1 option:selected”).appendTo($(“#select2”))；//在jQuery1.4.1下不太一样。
=====================================================案例=============================================
$(function () {
$('#btn1').click(function () {
$(‘div’).empty();//div里面内容没了
});
$('#btn2').click(function () {
//$(‘div’).remove();//div没了
$(‘div’).remove(‘.cls’);//应用这个类样式的div删了
});
});
================================empty和remove=================================
$('#toRight').click(function () {
$('#se1 option:selected').appendTo('#se2');
});
$('#toLeft').click(function () {
$('#se2 option:selected').appendTo('#se1');
});
$('#toAllLeft').click(function () {
$('#se1 option').appendTo('#se2');
});
$('#toAllRight').click(function () {
$('#se2 option').appendTo('#se1');
});
=====================================权限选择============================
<div style=" margin-left:400px; margin-top:10px;">
<select multiple="multiple" style="float: left; width: 40px; height: 100px;" id="se1">
<option>添加</option>
<option>删除</option>
<option>修改</option>
<option>查询</option>
<option>打印</option>
</select>
<div style="width: 50px; float: left; ">
<input type="button" name="name" value=">" style="width: 50px;" id="toRight" />
<input type="button" name="name" value="<" style="width: 50px;" id="toLeft" />
<input type="button" name="name" value=">>" style="width: 50px;" id="toAllLeft" />
<input type="button" name="name" value="<<" style="width: 50px;" id="toAllRight" />
</div>
<select multiple="multiple" style="float: left; width: 40px; height: 100px;" id="se2">
</select>
</div>
======================================================================
补充
写代码的好习惯，{、(写完开始就写结束，省得忘了。，在jQuery中这样写就不容易写错了。
如果报错“例外被抛出”等，很可能是选择器表达式有问题，比如单词拼写错误、加了不必要的空格等。val是方法不是属性。jQuery是完全按照JavaScript的语法写出来的JavaScript函数库，没有任何的魔法，任何看似怪异的写法都是很合法的JavaScript语法。jQuery就是一堆写好的JavaScript函数库而已，没有什么特殊的，你也可以写出来，因此完全可以和普通JS代码混着用。最好不要dom、jQuery方式混着用。
注意不同jQuery版本的区别。
节点操作
替换节点：
$("br").replaceWith("<hr/>");
用<hr/>替换br
$(‘<br/>’).replaceAll(‘hr’); //调用者也得是选择器选择到的元素。
用<br/>元素替换所有的hr
红色为选择器；蓝色为要替换的内容（动态创建的元素）。
包裹节点：
wrap()方法用来将所有元素逐个用指定标签包裹：【wrapAll()】
$(“p”).wrap(“<font color=‘red’></font>”) 将所有粗体字红色显示
结果：<font color=‘red’><p></p></font>
wrapInner()//在内部围绕
样式操作
获取样式 attr("class")，设置样式attr("class","myclass")，追加样式addClass("myclass")(不影响其他样式)，移除样式removeClass("myclass")，切换样式（如果存在样式则去掉样式，如果没有样式则添加样式）toggleClass("myclass")，判断是否存在样式：hasClass("myclass")
练习：网页开关灯的效果
<style type="text/css">
.dark
{
background-color:Black;
}
</style>
<script type="text/javascript">
$(function() {
$("#btn").click(function() {
$("body").toggleClass("dark");
});
});
</script>