本篇文章链接:
http://blog.csdn.net/xkcode/article/details/20047521
30中css选择器:
http://www.360doc.com/content/14/0104/22/15643_342679505.shtml
css官方文件:
https://www.w3.org/Style/CSS/specs
1.什么是jQuery选择器?
选择器就是jQuery的根基,在jQuery中,对事件处理、遍历DOM和Ajax操作有依赖于选择器。
2.jQuery选择器的优势
(1). 简洁的写法
- document.getElementById("id") //使用JavaScript通过ID获取元素
- $("#id") //使用jQuery通过ID获取元素
- document.getElementsByTagName("div"); //使用JavaScript通过标签名获取元素
- $("div") //使用jQuery通过标签名获取元素
(2). 支持CSS1.0到CSS3.0选择器
(3). 完善的处理机制
3.jQuery基本选择器
jQuey基本选择器和css基本选择器相同,他继承了css选择器的语法和功能,主要由元素标签名、class、id和多个选择器组成通过基本选择器可以实现大多数页面元素的查找。
(1). 标签选择器 $("h2") 选取所有h2元素
(2). 类选择器 $(".title") 选取所有class为title的元素
(3). ID选择器 $("#title") 选取所有id为title的元素
(4). 并集选择器 $("div,#title,.title") 选取所有div、id为title和class为title的元素
(5). 交集选择器 $("h1.title") 选取所有class为title的h1元素
(6). 全局选择器 $("*") 选取所有元素
4.jQuery层次选择器
jQueyr层次选择器和css层次选择器相同,它们都是根据获取元素与其父元素、子元素、兄弟元素等关系而构成的选择器。
(1). 后代选择器 $("#menu span") 选取#menu下所有的<span>元素
(2). 子选择器 $("#menu>span") 选取#menu下的子元素<span>元素
(3). 相邻元素选择器 $(#menu+span) 选取紧邻#menu之后的同辈元素
(4). 同辈元素选择器 $("#menu~span") 选取#menu之后的所有同辈元素
5.jQuery属性选择器
属性选择器就是通过HTML元素属性选择元素的选择器,它与CSS中的属性选择器语法构成完全一致。
(1). $("[href]") 选取含有href属性的元素
(2). $("[href='#']") 选取href属性值为“#”的属性
(3). $("[href!='#']") 选取href属性不为“#”的元素
(4). $("[href^='ch']") 选取href属性值以“ch”开头的元素
(5). $("[href$='ch']") 选取href属性值为“ch”结尾的元素
(6). $("[href*='ch']") 选取href属性值含“ch”的元素
(7). $("li[id][title=name]") 选取含有id属性和title属性为“name”的<li>元素
6.基本过滤选择器
(1). $("li:first") 选取所有<li>元素中的第一个
(2). $("li:last") 选取所有<li>元素中的最后一个
(3). $("li:not(.three)") 选取class不是three的元素
(4). $("li:even") 选取索引是偶数的所有<li>元素
(5). $("li:odd") 选取索引是奇数的所有<li>元素
(6). $("li:eq(1)") 选取索引等于1的<li>元素
(7). $("li:gt(1)") 选取索引大于1的<li>元素
(8). $("li:lt(1)") 选取索引小于1的<li>元素
(9). $(":header") 选取网页中的所有标题元素 如:<h1>、<h2>、<h3>、<h4>...
(10). $(":focus") 选取当前获取焦点的元素
注:索引从0开始
7.可见性过滤选择器
(1). $(":visible") 选取所有可见元素
(2). $(":hidden") 选取所有隐藏元素
8.jQuery选择器注意事项
(1).选择器中含有特殊符号
HTML:
- <div id="id#a">aa</div>
- <div id="id[2]">bb</div>
jQuery错误书写:
- $("#id#a");
- $("#id[2]");
jQuery正确书写:
- $("#id\\#a");
- $("#id\\[2\\]");
(2).选择器中含有空格
- $(".test :hidden") //选取class为test的内部隐藏元素
- $(".test:hidden") //选取class为test并且隐藏的元素
(第1讲)jQuery选择器
最新推荐文章于 2022-07-09 09:36:55 发布