常见的jQuery选择器

前言
四大选择器
- 一.jQuery基础选择器
- 1.ID选择器
- 2.全选选择器
- 3.类选择器
- 4.标签选择器
- 5.并集选择器
- 6.交集选择器
层级选择器
- 1.子代选择器
- 2.后代选择器
筛选选择器
筛选方式
:checked选择器

前言

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>

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>

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>

此时同一类的元素被选取出来放在一个伪数组中

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>

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>

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.子代选择器

使用>号，获取亲儿子的层级的元素
但是并不能获取子孙层级的元素

语法:$(“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>

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>

筛选选择器

筛选方式

parents()：筛选所有上级元素，有参数就是返回指定的上级元素

:checked选择器

:checked查找被选中的表单元素

四大常见的jQuery选择器+案例相关推荐

jQuery选择器案例之——index.js
$(function(){//alert('a');///基本选择器//id选择器//$("#div1").css("background","red ...
jquery选择器案例分享
其中选择器都已经注释,需要测试哪个打开注释即可观察效果!! <!DOCTYPE html> <html><head><meta charset="U ...
jQuery选择器经典案例
jQuery选择器经典案例具体讲解内容参照上一篇: 选择器详细讲解基本选择器 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN&qu ...
jQuery学习笔记系列（一）——入口函数，jQuery对象和DOM对象，jQuery选择器、样式操作、效果（显示隐藏、滑入滑出、淡入淡出、自定义动画、停止动画队列）
day01 - jQuery 学习目标: 能够说出什么是 jQuery 能够说出 jQuery 的优点能够简单使用 jQuery 能够说出 DOM 对象和 jQuery 对象的区别能够写出常用的 ...
jQuery（一）—— jQuery 概述 / jQuery 选择器 / jQuery 样式操作 / jQuery 效果
原以为 jQuery 不需要学习,但是接触了一些 VUE 框架,发现用到了好多 jQuery 的知识,于是返回来重新学习.本系列笔记大概分为三篇,陆续更新. 参考:W3school -- jQuery ...
【08】jQuery：01-jQuery介绍、jQuery基本使用、jQuery选择器、jQuery样式操作、jQuery效果、jQuery入口函数、jQuery对象
文章目录 day01 - jQuery 1.1. jQuery 介绍 1.1.1 JavaScript 库 1.1.2 jQuery的概念 1.1.3 jQuery的优点 1.2. jQuery 的基 ...
jQuery介绍 jQuery基本使用 jQuery选择器 jQuery样式操作 jQuery动画效果
1.1. jQuery 介绍 1.1.1 JavaScript 库 JavaScript库:即 library,是一个封装好的特定的集合(方法和函数).从封装一大堆函数的角度理解库,就是在这个库中,封 ...
jQuery选择器和选取方法 http://www.cnblogs.com/MaxIE/p/4078869.html
我们已经使用了带有简单Css选择器的jQuery选取函数:$().现在是时候深入了解jQuery选择器语法,以及一些提取和扩充选中元素集的方法了. 一.jQuery选择器在CSS3选择器标淮草案定义 ...
JQuery-学习笔记07【高级——JQuery高级案例】
Java后端学习路线笔记汇总表[黑马程序员] JQuery-学习笔记01[基础--JQuery基础]--[day01] JQuery-学习笔记02[基础--JQuery选择器] JQuery-学习 ...

四大常见的jQuery选择器+案例