一、jQuery基础选择器和层级选择器

1. jQuery 基础选择器

原生JS获取元素方式很多，很杂，而且兼容性情况不一致，因此jQuery给我们做了封装，使获取元素统一标准。

$("选择器") // 里面选择器直接写CSS选择器即可，但是要加引号

名称	用法	描述
ID选择器	$("#id")	获取指定ID的元素
全选选择器	$("*")	匹配所有元素
类选择器	$(".class")	获取同一类class的元素
标签选择器	$("div")	获取同一类标签的所有元素
并集选择器	$("div,p,li")	选取多个元素
交集选择器	$("li.current")	交集元素

2. jQuery 层级选择器

名称	用法	描述
子代选择器	$("ul>li");	使用>号，获取亲儿子层级的元素；注意，并不会获取孙子层级的元素
后代选择器	$("ul li");	使用空格，代表后代选择器，获取ul下的所有li元素，包括孙子等

二、jQuery筛选选择器

语法	用法	描述
:first	$("li:first")	获取第一个li元素
:last	$("li:last")	获取最后一个li元素
:eq(index)	$("li:eq(2)")	获取到的li元素中，选择索引号为2的元素，索引号index从0开始
:odd	$("li:odd")	获取到的li元素中，选择索引号为奇数的元素
:even	$("li:even")	获取到的li元素中，选择索引号为偶数的元素

三、jQuery筛选方法---选取父子元素（重点）

语法	用法	说明
parent()	$("li").parent();	查找父级
children(selector)	$("ul").children("li");	相当于$("ul>li")，最近一级（亲儿子）
find(selector)	$("ul").find("li");	相当于$("ul li")，后代选择器
siblings(selector)	$(".first").siblings("li");	查找兄弟结点，不包括自己本身
nextAll([expr])	$(".first").nextAll();	查找当前元素之后所有的同辈元素
prevAll([expr])	$(".last").prevtAll();	查找当前元素之前所有的同辈元素
hasClass(class)	$("div").hasClass("protected");	检查当前的元素是否含有某个特定的类，如果有，则返回 true
eq(index)	$("li").eq(2);	相当于$("li:eq(2)"),index 从 0 开始

案例：点击某个按钮当前按钮变背景颜色变色，其他按钮不变色

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title><script src="jQuery.min.js"></script>
</head>
<body><div><button>按钮</button><button>按钮</button><button>按钮</button><button>按钮</button><button>按钮</button></div><script>$(function(){//给所有按钮绑定点击事件$("button").click(function(){//当前按钮背景颜色为粉色$(this).css("background","pink");//当前按钮的兄弟无背景颜色$(this).siblings("button").css("background","");})})</script>
</body>

茫茫人海中，一眼选中你！相关推荐

AI在茫茫人海中，看到只有你被Deepfake了丨阿里安全出品
鱼羊发自凹非寺量子位报道 | 公众号 QbitAI 自打有了deepfake,再也不敢相信「眼见为实」了. 要说把朱茵换脸成杨幂,把海王换脸成徐锦江,大家还可以一笑而过. △图源:微博用户@慢 ...
在茫茫人海中发现相似的你——局部敏感哈希（LSH）
一.引入在做微博文本挖掘的时候,会发现很多微博是高度相似的,因为大量的微博都是转发其他人的微博,并且没有添加评论,导致很多数据是重复或者高度相似的.这给我们进行数据处理带来很大的困扰,我们得想办法把 ...
【C语言】如何茫茫人海中找出总分最高的学生
给定N个学生的基本信息,包括学号(由5个数字组成的字符串).姓名(长度小于10的不包含空白字符的非空字符串)和3门课程的成绩([0,100]区间内的整数),要求输出总分最高学生的姓名.学号和总分. / ...
TensorFlow安装配置，茫茫人海中一瞥
深度学习的框架,我们熟知的有caffe,torch和convnet.最近,Google又搞了一个TensorFlow,已经开源:http://www.tensorflow.org/.据说,谷歌的深度学 ...
如何让自己的简历在万人从中一眼就能被HR选中
最近学习任务非常重.一方面十月份是自考月.我要自考.下周末还有4门课要考.另一方面,在学习技术. 同时最近找我改简历的人也非常多.除了IT技术之外,其他技术行业,普通行政岗位也有很多人让我帮忙改简历. ...
Android怎么从云平台上摘取数据_良心推荐：让人看一眼就爱上的8款APP软件
1.咕咚(跑步健身训练课程) 支持平台: Android/iOS 精准的跑步骑行健走记录和运动大数据分析,记录每一次挑战,让坚持运动不在困难,陪伴你运动从第一步到每一步. 轻松绑定智能硬件实现便捷交互 ...
怎么查英文期刊，推荐一下？
作为一个硕士已经毕业多年的论文狗,看到这个问题,特别想为大家解答下,因为不想你们再走我走过的弯路.一篇好的论文,作者前期一定是阅读了海量的材料,然后提出自己的论点,再进行论证(以文科类论文为例). 这 ...
初遇初识初知接下来是什么_初识爱|《傲慢与偏见》书评
[前言] 中华民族自古以来比较含蓄,如何让孩子正确认识"爱情"一直是个比较棘手的教育难题.西方名家大多喜欢将爱情写得娓娓动人.轰轰烈烈,刚刚进入青春期的初中生又对这类问题很感兴趣. ...
你是我生命的一次奢侈
2008-01-21 09:06:41 有人说,美貌是面具,面具是假象,但真相是:人们往往不喜欢所看的真相. --题记刚看到一个故事:她是一个平凡的女孩,戴着面具参加化妆舞会,她成了舞会的焦点.他是 ...

茫茫人海中，一眼选中你！

一、jQuery基础选择器和层级选择器

1. jQuery 基础选择器

2. jQuery 层级选择器

二、jQuery筛选选择器

三、jQuery筛选方法---选取父子元素（重点）

茫茫人海中，一眼选中你！相关推荐

最新文章

热门文章

茫茫人海中，一眼选中你！

一、jQuery基础选择器和层级选择器

1. jQuery 基础选择器

2. jQuery 层级选择器

二、jQuery筛选选择器

三、jQuery筛选方法---选取父子元素 （重点）

茫茫人海中，一眼选中你！相关推荐

最新文章

热门文章

三、jQuery筛选方法---选取父子元素（重点）