常见的
前言
jQuery唯一个javascrip库,企业网站定制开发里面封装了JavaScript企业网站定制开发常用的的功能代码，优化了DOM操作，事件处理，企业网站定制开发动画设计和Ajax交互。但因为jQuery对象有自己的封装，dom对象不能使用，所以需要选择器将对象选取出来使用
四大选择器
一.jQuery基础选择器
1.ID选择器
ID选择器可以选择指定id的元素
语法：$("#id")
案例:
<body> <div id="test">123</div></body><script> console.log($("#test"));</script>- 1
- 2
- 3
- 4
- 5
- 6
- 7
2.全选选择器
匹配所有元素
语法:$("*")
案例：
<body> <div>我是div</div> <div class="nav">我是nav div</div> <p>我是p</p> <ol> <li>我是ol 的</li> <li>我是ol 的</li> <li>我是ol 的</li> <li>我是ol 的</li> </ol> <ul> <li>我是ul 的</li> <li>我是ul 的</li> <li>我是ul 的</li> <li>我是ul 的</li> <li>我是ul 的</li> </ul> <script> $(function() { //全部字体变粉色 $("*").css("color", "pink") console.log($('.nav')); console.log($('ul li')); }); </script>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
3.
获取同一类class的元素
语法:$(".class")
案例:
<body> <div id="test" class="test">123</div> <p class="test"></p> <span class="no"></span></body><script> console.log($(".test"));</script>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
此时同一类的元素被选取出来放在一个伪数组中
4.标签选择器
获取同一类标签的所有元素
语法:$(“div”)
案例：
<body> <ul> <li>我是ul 的</li> <li>我是ul 的</li> <li>我是ul 的</li> <li>我是ul 的</li> <li>我是ul 的</li> </ul> <script> $(function() { console.log($('ul li')); }); </script></body>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
5.并集选择器
同时选取多个元素
语法:$(“div,p,li”)
案例:
<body> <div id="test" class="test">123</div> <p class="test"></p> <span class="no"></span></body><script> console.log($("p,span")); </script>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
6.交集选择器
交集元素
语法：$(“li.current”)
案例:
<body> <div id="test" class="test">123</div> <p class=""></p> <p class="test"></p> <span class="no"></span></body><script> console.log($("p.test"));</script>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
层级选择器
1.子代选择器
使用>号，获取亲儿子的层级的元素
但是并不能获取子孙层级的元素
语法:$(“ul>li”)
案例:
<body> <ul> <li>我是ul 的</li> <li>我是ul 的</li> <li>我是ul 的</li> <li>我是ul 的</li> <li>我是ul 的</li> </ul> <script> $(function() { console.log($('ul>li')); }); </script>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
2.后代选择器
使用空格表示后代选择器，可以获取包括孙子的元素
语法：$(“div li”)
案例:
<body> <div> <ul> <li>我是ul 的</li> <li>我是ul 的</li> <li>我是ul 的</li> <li>我是ul 的</li> <li>我是ul 的</li> </ul> </div> <script> $(function() { console.log($('div li')); }); </script>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
筛选选择器
筛选方式
parents()：筛选所有上级元素，有参数就是返回指定的上级元素
:checked选择器
:checked查找被选中的表单元素