锋利的jQuery读书笔记-第2章 jQuery选择器

一、jQuery选择器是什么

1.jQuery选择器完全集成CSS的风格，主要用于快速和便捷的找出页面特定的DOM元素，然后为之添加行为。选择器是jQuery的基础，所有的行为都是在选定元素后进行的。

2.HTML代码与CSS代码分离是一种很好的编码习惯，分离之后不仅便于阅读和维护，在进行修改时也十分方便。

3.CSS选择器与jQuery选择器一样都是为了找到特定的DOM元素，区别在于：css是给元素添加样式而jQuery是给元素添加行为，并且jQuery的功能更强大、拥有跨浏览器的兼容性。

4.jQuery选择器支持CSS1、2的全部选择器与CSS3的部分选择器，同时拥有少量的独有选择器。

5.jQuery选择器写法简洁并且更加健壮。 针对$("#id")这样的选择器，如果页面中没有该id的元素也不会报错。$("#id")获取的永远是jQuery对象，即便页面上已经没有这个元素了。

针对此特性，判断页面上是否有某个id的元素时就不可以写成 if($("#id")){xxxxx} ,而是需要写成if($("#id".length() >  0)){xxxxx} 或者转为DOM对象判断 if($("#id"[0])){xxxxx}

二、jQuery的选择器有哪些

1、基本选择器，就是我们常用的  #id ， .class，element，* 这些。 

示例： $("span, #kewen").css("background","black")   选择所有的<span>元素和id为kewen的元素将背景色改为黑色。

2、层次选择器：$("div span")为选择div里面所有的span元素， $("div > span")选择div元素下一层中元素名为span的子元素等等。

示例：$("body > div").css("background","black")  将body下层div子元素的背景色全部改为黑色。

3、过滤选择器： :first获取首个元素 , :last获取最后一个元素等等。

示例：$("div:odd").css("background","black")  修改所有索引值为基数的div元素的背景色为黑色。 （div:even 就是选择偶数的div）。

4、内容过滤选择器：按照文本内容进行过滤

示例：$("div:contains(kewen)")  选取包含文本kewen的div元素。

5.、可见性过滤选择器： :hidden隐藏， :visible 可见

示例：$("div:hidden").show(3000) 选取所有隐藏的div元素，显示3000毫秒。

6、属性过滤选择器：选择某一属性是否为指定值的选择器

示例： $("div[title=test]") 选择div中 title属性为test值的div。

7、子元素过滤选择器： 选择某些子元素的过滤器，可以选择首个、最后一个、是否唯一等属性。

示例：$("div.one :nth-child(2)")  选择class为one的div中的第二个子元素。

8、表单对象属性过滤选择器：根据表单元素的属性进行选择，包括是否可用、是否被选中等等。

示例：$("#form1 input:enabled").val("kewen")选择表单form1中的可输入input元素将其中的值设置为kewen。

9、表单选择器：针对表单设计的选择器，选中表单中各种元素。

示例： $("#form1 :password") 选中表单form1中的所有password元素。

三、jQuery选择器中的特例处理

1、针对使用了jQuery保留的特殊字的选择器，可以使用转义符\\进行转义

示例： 获取id为 ”#kewen“的元素，可以写为  $("#\\#kewen")

2、属性选择符@，1.3.1版本以后就不需要用了。

3、选择器中的空格：选择器中的空格不能乱写，多带了空格会完全改变选择器的含义

示例：$(".test :hidden") 和 $(".test:hidden") 看起来一样，但是前者在test之后带了一个空格，两者意义就完全不同了。

    $(".test :hidden")  这个是带空格的，意思是选择class为test元素里面的所有隐藏元素。

    $(".test:hidden") 这个是不带空格的，意思是选择所有隐藏的且class为test的元素。

tips:

1.jQuery还有写其他插件增强jQuery选择器的功能。