jQuery选择器

jQuery选择器类似于CSS选择器，用来选取网页中的元素

jQuery选择器分类

通过CSS选择器选取元素
基本选择器
层次选择器
属性选择器
通过过滤选择器选择元素
基本过滤选择器
可见性过滤选择器

基本选择器

名称	语法构成	描述	示例
标签选择器	element	根据给定的标签名匹配元素	$(“h2” )选取所有h2元素
类选择器	.class	根据给定的class匹配元素	$(" .title")选取所有class为title的元素
ID选择器	#id	根据给定的id匹配元素	$(" #title")选取id为title的元素
并集选择器	selector1,selector2,…,selectorN	将每一个选择器匹配的元素合并后一起返回	$(“div,p,.title” )选取所有div、p和拥有class为title的元素
全局选择器	*	匹配所有元素	*$(“” )选取所有元素**

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>基本选择器</title><script src="js/jquery.js"></script><script>$(function(){//标签$("h1").css("color","red");//类选择器$(".a").css("background","yellowgreen");//id选择器$("#b").css("font-size","30px");});</script></head><body><h1>aaaaaaaaa</h1><h2 class="a">bbbbbbbbbbbb</h2><h3 id="b">cccccccccccccc</h3></body>
</html>

层次选择器

层次选择器通过DOM 元素之间的层次关系来获取元素

名称	语法构成	描述	示例
后代选择器	ancestor descendant	选取ancestor元素里的所有descendant（后代）元素	$(“#menu span” )选取#menu下的span元素
子选择器	parent>child	选取parent元素下的child（子）元素	$(" #menu>span" )选取#menu的子元素span
相邻元素选择器	prev+next	选取紧邻prev元素之后的next元素	$(" h2+dl " )选取紧邻h2元素之后的同辈元素dl
同辈元素选择器	prev~sibings	选取prev元素之后的所有siblings元素	$(" h2~dl " )选取h2元素之后所有的同辈元素dl

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>层次选择器</title><script src="js/jquery.js"></script><script>$(function(){//后代$("ul a").css("font-size","30px");//子选择器$("div>a").css("color","red");//相邻$("ul+a").css("font-size","40px");//同辈元素选择器$("ul~a").css("font-size","50px");});</script></head><body><div><ul><li><a href="#">1</a></li><li><a href="#">2</a></li><li><a href="#">3</a></li><li><a href="#">4</a></li><li><a href="#">5</a></li><li><a href="#">6</a></li></ul><a href="#">1</a><br /><a href="#">2</a><br /><a href="#">3</a><br /></div></body>
</html>

属性选择器

语法构成	描述	示例
[attribute^=value]	选取给定属性是以某些特定值开始的元素	$(" [href^=‘en’]" )选取href属性值以en开头的元素
[attribute$=value]	选取给定属性是以某些特定值结尾的元素	("[href(" [href("[href=‘.jpg’]" )选取href属性值以.jpg结尾的元素
*[attribute=value]**	选取给定属性是以包含某些值的元素	$(" [href* =‘txt’]" )选取href属性值中含有txt的元素

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><script src="js/jquery.js"></script><script>$(function(){$("[href]").css("background-color","yellowgreen")$("[href^='http']").css("color","red");$("[href$='com']").css("font-size","50px");$("[href*='html']").css("font-size","50px");});</script></head><a href="http://www.baidu.com">百度</a><br /><a href="http://www.sougou.com">搜狗</a><br /><a href="http://www.daqiang.com">大枪</a><br /><a href="index.html">基本选择器</a><br /><a href="http://www.taobao.com">taobao</a><br /><body></body>
</html>

过滤选择器

主要分类
基本过滤选择器
可见性过滤选择器
表单对象过滤选择器
内容过滤选择器、子元素过滤选择器……

语法	描述	示例
:eq(index)	选取索引等于index的元素（index从0开始）	$(“li:eq(1)” )选取索引等于1的元素
:gt(index)	选取索引大于index的元素（index从0开始）	$(" li:gt(1)" )选取索引大于1的元素（注：大于1，不包括1）
:lt(index)	选取索引小于index的元素（index从0开始）	$(“li:lt(1)” )选取索引小于1的元素（注：小于1，不包括1）
:header	选取所有标题元素，如h1~h6	$(“:header” )选取网页中所有标题元素
:focus	选取当前获取焦点的元素	$(“:focus” )选取当前获取焦点的元素
:animated	选择所有动画	$(“:animated” )选取当前所有动画元素

语法	描述	示例
:first	选取第一个元素	$(" li:first" )选取所有元素中的第一个元素
:last	选取最后一个元素	$(" li:last" )选取所有元素中的最后一个元素
:not(selector)	选取去除所有与给定选择器匹配的元素	$(" li:not(.three)" )选取class不是three的元素
:even	选取索引是偶数的所有元素（index从0开始）	$(" li:even" )选取索引是偶数的所有元素
:odd	选取索引是奇数的所有元素（index从0开始）	$(" li:odd" )选取索引是奇数的所有元素

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>过滤</title><script src="js/jquery.js"></script><script>$(function(){//索引等于2的$("li:eq(2)").css("background-color","red");//大于$("li:gt(2)").css("background-color","blue");//小于$("li:lt(2)").css("background-color","green");//所有的 h元素$(":header").css("color","yellowgreen");$("input:focus").css("border","1px solid red");$("li:first").css("color","white");$("li:last").css("color","yellow");//奇数  索引$("li:odd").css("font-size","50px");//偶数  索引$("li:even").css("font-size","80px");});</script></head><body><input type="text"><input type="text"><ul><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li></ul><h1>1</h1><h2>2</h2><h3>3</h3></body>
</html>

可见性过滤选择器

语法	描述	示例
:visible	选取所有可见的元素	$(“:visible” )选取所有可见的元素
:hidden	选取所有隐藏的元素	$(“:hidden” ) 选取所有隐藏的元素

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><script src="js/jquery.js"></script><style>.a{display: none;}</style><script>$(function(){$(":visible").hide();//让所有元素隐藏$(":hidden").show();//所有隐藏的可见});</script></head><body><h1 class="a">aaaaaaaaaaaaaa</h1><h2 class="b">bbbbbbbbbbbbbb</h2></body>
</html>

第十四章 jQuery选择器相关推荐

jQuery系列第四章 jQuery框架的选择器
第四章 jQuery框架的选择器 4.1 jQuery选择器说明 jQuery 最核心的组成部分就是选择器引擎.它完全继承了 CSS 的风格,可以对 DOM 元素的标签名.属性名.状态等进行快速准确 ...
《Dreamweaver CS6 完全自学教程》笔记第十四章：使用 CSS 设计网页
文章目录第十四章:使用 CSS 设计网页 14.1 CSS 样式表简介 14.2 CSS 的基本语法 14.3 伪类.伪元素以及样式表的层叠顺序 14.3.1 伪类和伪元素 14.3.2 样式表的层 ...
微信小程序（第二十四章）- 数据交互前置
微信小程序(第二十四章)- 数据交互前置讲解微信小程序前置的原因参考文档理解微信小程序小程序简介作用提问针对提问--uni-app介绍小程序和普通网页开发的区别小程序代码构成文件个 ...
谭浩强《C++程序设计》书后习题第十三章-第十四章
2019独角兽企业重金招聘Python工程师标准>>> 最近要复习一下C和C++的基础知识,于是计划把之前学过的谭浩强的<C程序设计>和<C++程序设计>习题 ...
工程项目管理丁士昭第二版_2021年软考系统集成项目管理工程师知识点预习第十四章第二节...
听说99%的同学都来这里充电吖为了方便大家尽早投入2021年的软考考试备考中,我们已开始连载<系统集成项目管理工程师>知识点,今天带来的是第十四章第二节编制询价~ 知识点:第十四章 ...
fpga驱动rgb液晶屏_正点原子开拓者FPGA开发板资料连载第五十四章基于的数字识别实验...
1)实验平台:正点原子开拓者FPGA 开发板 2)摘自<开拓者FPGA开发指南>关注官方微信号公众号,获取更多资料:正点原子 3)全套实验源码+手册+视频下载地址:http://www.o ...
黑客与画家第十四章
2013/7/16 15:20 写于家第十四章梦寐以求的编程语言编程语言怎么样才能流行起来呢?专家黑客的看法,如果有黑客愿意使用,那么它就有可能流行起来.然后得到反馈,改进,流行.编程语言也是 ...
第十四章降维操作-机器学习老师板书-斯坦福吴恩达教授
第十四章降维 14.1 目标一:数据压缩 14.2 目标二:可视化 14.3 主成分分析 14.4 主成分分析算法 14.5 选择主成分数量 14.6 压缩重建 14.7 使用PCA的建议 14.1 ...
鸟哥的Linux私房菜(服务器)- 第十四章、账号控管： NIS 服务器
第十四章.账号控管: NIS 服务器最近更新日期:2011/07/28 有没有想过,如果我有十部 Linux 主机,这十部主机仅负责不同的功能,事实上,所有的主机账号与对应的密码都相同! 那么我是将 ...

第十四章 jQuery选择器

jQuery选择器

jQuery选择器分类

基本选择器

层次选择器

属性选择器

过滤选择器

第十四章 jQuery选择器相关推荐

最新文章

热门文章