二、jquery选择器

1、css选择器
??? 1）标签选择器： p{} h1{}
??? 2）ID选择器：#menu{}
??? 3）class选择器：.has_children{}
??? 4）群组选择器： h1,h2,h3,p,#menu{}
??? 5）后代选择器：div span{}
??? 6）通配选择器：*{}
??? 7）子选择器：div > span{}
??? 8）相邻选择器：label + input{}
??? 9）伪选择器：a:active{}
??? 10）同辈选择器 form ~ input{}
??? 其中前六种主流浏览器都支持，jquery的选择器完全继承了css的风格,除了支持css选择器外，也有少量独有的选择器。

2、松耦合
??? css 使得网页的内容与样式相分离，css找到元素后给元素添加样式。
??? jquery 使得网页的内容与行为相分离，jquery找到元素后给元素添加行为。

3、判断某个元素是否存在
??? 不管指定的元素是否存在，返回的jquery对象都不会为空，所以要判断jquery对象是否存在需要这样判断
??? if($('#ff').length>0) // to do ... 或者 if($('#ff')[0]) // to do ...

4、jquery选择器
??? 1）基本选择器
??? ??? $("#one").css('background-color', '#bbffaa');??? // id选择器??
??? ??? $('div.mini').css('background-color','#bbffaa'); // class选择器
??? ??? $('div').css('background-color','#bbffaa');????? // 标签选择器
??? ??? $('*').css('background-color','#bbffaa');??????? // 通配选择器，匹配页面中所有元素
??? ??? $('span, #two').css('background-color','#bbffaa'); // 群组选择器,将span的匹配结果与#two的匹配结果合并在一起
??? 2）层次选择器
??? ??? $('body div').css('background-color','#bbffaa');?? //后代选择器
??? ??? $('body > div').css('background-color','#bbffaa'); //子代选择器
??? ??? $('#one + div').css('background-color','#bbffaa'); //相邻选择器向后匹配，完全等价与 $('#one').next("div").css('background-color','#bbffaa');
??? ??? $('#two ~ div').css('background-color','#bbffaa'); //后续兄弟选择器，完全等价与 $('#two').nextAll('div').css('background-color','#bbffaa');
??? ??? $('#two').siblings('div').css('background-color','#bbffaa'); // 兄弟选择器，匹配所有#two的同辈div，不分前后顺序，要区别去后续兄弟选择器
??? 3）过滤选择器
??? ??? (1)基本过滤
??? ??? ??? $('div:first').css('background-color','#bbffaa');??? // 第一个div元素
??? ??? ??? $('div:last').css('background-color','#bbffaa');???? // 最后一个div元素
??? ??? ??? $('div:not(.one)').css("background-color","#bbffaa");? // 不排除指定选择器的div元素
??? ??? ??? $('div:even').css("background-color","#bbffaa");???? // 索引为偶数的元素
??? ??? ??? $('div:odd').css("background-color","#bbffaa");????? // 索引为奇数的元素
??? ??? ??? $('div:eq(3)').css("background-color","#bbffaa");??? // 索引为3的元素，从0开始
??? ??? ??? $('div:gt(3)').css("background-color","#bbffaa");??? // 索引大于3的元素
??? ??? ??? $('div:lt(3)').css("background-color","#bbffaa");??? // 索引小于3的元素
??? ??? ??? $(':header').css("background-color","#bbffaa");????? // <h>系列标题元素
??? ??? ??? $(':animated').css("background-color","#bbffaa");??? // 正在活动的
??? ??? (2)内容过滤
??? ??? ??? $('div:contains("two")').css("background-color","#bbffaa"); // 含有指定文本的div元素
??? ??? ??? $('.mini:empty').css("background-color","#bbffaa");???? // 不含有任何子元素或者文本的class="mini"的元素
??? ??? ??? $('span:has(.mini)').css("background-color","#bbffaa"); // 含有子元素为.mini的span元素
??? ??? ??? $('div:parent').css("background-color","#bbffaa");????? // 含有任何子元素或者文本的div元素
??? ??? (3)可见性过滤
??? ??? ??? $('div:hidden').show(3000).css("background-color","red");? // 选取所有不可见的元素 $('input:hidden')可以选取隐藏域
??? ??? ??? $('div:visiable').css("background-color","#bbffaa");?? // 选取所有可见的元素
??? ??? (4)属性过滤
??? ??? ??? $('div[title]').css('background-color','#BBFFAA');???? // 包含title属性的div元素
??? ??? ??? $('div[title=test]').css('background-color','#BBFFAA');? // 包含title属性并且值为test的div元素
??? ??? ??? $('div[title!=test]').css('background-color','#BBFFAA'); // 包含title属性并且值不为test的div元素与不包含title属性的div元素的集合
??? ??? ??? $('div[title^=te]').css('background-color','#BBFFAA');?? // 包含title属性并且值以te开头的div元素
??? ??? ??? $('div[title$=est]').css('background-color','#BBFFAA');? // 包含title属性并且值以est结尾的div元素
??? ??? ??? $('div[title*=es]').css('background-color','#BBFFAA');?? // 包含title属性并且值包含es的div元素
??? ??? ??? $('div[id][title*=es]').css('background-color','#BBFFAA'); // 包含id属性与title属性并且title属性值包含es的div元素
??? ??? (5)子元素过滤
??? ??? ??? $(':nth-child(2)').css('background-color','#BBFFAA');?? // 为每个父元素匹配索引为2的子元素，索引从1开始
??? ??? ??? $(':nth-child(odd)').css('background-color','#BBFFAA'); // 为每个父元素匹配索引为奇数的子元素, even为偶数
??? ??? ??? $(':nth-child(3n+1)').css('background-color','#BBFFAA');// 为每个父元素匹配索引为3n+1的子元素, n从0开始
??? ??? ??? $(':first-child').css('background-color','#BBFFAA');??? // 为每个父元素匹配第一个子元素
??? ??? ??? $(':last-child').css('background-color','#BBFFAA');???? // 为每个父元素匹配最后一个子元素
??? ??? ??? $(':only-child').css('background-color','#BBFFAA');???? // 为每个父元素匹配有且仅有一个的子元素
??? ??? (6)表单元素属性过滤
??? ??? ??? $('#form1 :enabled');??? ??? ??? // 表单中所有可用的元素
??? ??? ??? $('#form1 :disabled');??? ??? ??? // 表单中所有不可用的元素
??? ??? ??? $('#form1 input:checked');??? ??? // radio或checkbox的选中项
??? ??? ??? $('#form1 select :selected');?? // 下拉列表或多选框的选中项
??? 4）表单选择器
??? ??? $("#form1 :input")??? ??? // 匹配所有表单元素包括input、select、textarea、button,注意与$("#form1 input")的区别
??? ??? $("#form1 :text")??? ??? // 匹配 <input type="text"/>元素
??? ??? $("#form1 :password")??? // 匹配 <input type="password"/>元素
??? ??? $("#form1 :radio")??? ??? // 匹配 <input type="radio"/>元素
??? ??? $("#form1 :checkbox")??? // 匹配 <input type="checkbox"/>元素
??? ??? $("#form1 :submit")??? ??? // 匹配 <input type="submit"/>和<button>元素
??? ??? $("#form1 :image")??? ??? // 匹配 <input type="image"/>图像按钮
??? ??? $("#form1 :reset")??? ??? // 匹配 <input type="reset"/>元素
??? ??? $("#form1 :button")??? ??? // 匹配 <input type="button"/>和<button>元素
??? ??? $("#form1 :file")??? ??? // 匹配 <input type="file"/>元素
??? ??? $("#form1 :hidden")??? ??? // 匹配 <input type="hidden"/>和所有不可见的元素，如<div style="display:none;">元素
???
5、选择器的一些注意事项
??? 1）选择器中含有".","[","("等特殊字符,这种情况下需要对特殊字符转义才行
??? ??? <div id="id.a">aa</div>??? ??? // 获取方式$("#id\\.a")
??? ??? <div id="id#b">bb</div>??? ??? // 获取方式$("#id\\#b")
??? ??? <div id="id[1]">cc</div>??? // 获取方式$("#id\\[1\\]")
??? 2）一些常用的方法
??? ??? $category.is(":hidden") ??? // 判断当前元素是否为隐藏的 is() 返回boolean值
??? ??? $("ul li").filter(":contains('佳能'),:contains('尼康')")??? ??? // 筛选出与指定表达式匹配的元素集合，其中表达式可以是多个选择器的组合
??? ??? addClass("promoted")??? ??? // 可以为匹配的元素添加类名
??? ??? $("div.showmore > a").toggle(fun,fun);??? // 可以给匹配的元素添加一组交互事件