锋利的jQuery读书笔记-第2章 jQuery选择器
2016-12-15 22:11
567 查看
一、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选择器的功能。
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选择器的功能。
相关文章推荐
- 锋利的jquery读书笔记--jquery选择器
- 锋利的jQuery(第二版)学习笔记之一:选择器
- 第2章 jQuery的选择器
- 锋利的jQuery读书笔记---jQuery中Ajax--get、post等方法
- 锋利的JQuery-Jquery选择器
- 1.锋利的jquery之选择器大全
- jQuery学习-对象与选择器(锋利的jQuery)
- 《锋利的jQuery》读书笔记 第2章 jQuery选择器
- 锋利的jQuery | jQuery选择器一览
- jQuery之第2章 jQuery选择器
- 锋利的jQuery读书笔记-第7章 jQuery插件的使用和写法
- 锋利的jQuery读书笔记---jQuery中Ajax--load方法
- 锋利的jQuery读书笔记---jQuery中Ajax--序列化元素、Ajax全局事件
- 锋利的JQuery —— 选择器
- 锋利的jQuery读书笔记-第3章 jQuery中的DOM操作
- 锋利的jQuery读书笔记-第6章 jQuery与Ajax的应用
- 锋利jquery---内容过滤选择器(第二章)
- 锋利的jQuery读书笔记---jQuery中动画
- 锋利的jQuery 要点归纳(一) jQuery选择器
- 锋利的Jquery——学习笔记(二)Jquery选择器