下载文档原格式
jQuery选择器⽤法介绍⽬录⼀、jQuery选择器⼆、基本选择器三、层次选择器四、属性选择器五、过滤选择器1、基本过滤选择器2、可见性过滤选择器3、内容过滤器六、表单选择器七、补充1、特殊符号的转义2、选择器中的空格jQuery选择器类似于CSS选择器，⽤来选取⽹页中的元素。
例如：$("h3").css("background-color","red");说明：获取并设置⽹页中所有<h3>元素的背景⾊。
“h3”为选择器语法，必须放在$()中。
$("h3")返回jQuery对象。
⼀、jQuery选择器jQuery选择器功能强⼤，种类也很多，分类如下：1、类CSS选择器基本选择器层次选择器属性选择器2、过滤选择器基本过滤选择器可见性过滤选择器3、表单选择器4、内容过滤器⼆、基本选择器基本选择器语法如下图所⽰：⽰例：<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>jQuery基本选择器⽰例</title><style>#box{background-color: #ffffff;border: 2px solid #000000;padding: 5px;}</style><script src="jquery-3.3.1.js"></script><script>$(function(){// id选择器$("#btn").click(function(){// 标签选择器选择h3标签并将其添加背景颜⾊$("h3").css("background-color","red");// 类选择器选取并设置所有class为title的元素的背景颜⾊$(".title").css("background-color","#09F");// id选择器选取并设置id为box的元素的背景颜⾊$("#box").css("background-color","#09F");// 并集选择器相当于css中的群组选择器选取并设置所有的h2、dt、class为title//的元素的背景⾊$("h2,dt,.title").css("background-color","#09A");// 交集选择器等同于CSS中的指定标签选择器选取并设置class为title的h3标签的背景⾊$("h3.title").css("background-color","yellow");// 全局选择器改变所有元素的字体颜⾊$("*").css("color","blue");});});</script></head><body><input type="button" id="btn" value="显⽰效果" /><div id="box" style="margin-top:10px;">id为box的div<h2 class="title">class为title的h2标签</h2><h3 class="title">class为title的h3标签</h3><h3>热门排⾏</h3><dl><dt><img src="qq.jpg" width="391" height="220" alt="⽃地主" /></dt><dd class="title">⽃地主</dd><dd>休闲游戏</dd><dd>QQ⽃地主是国内同时在线⼈数最多的棋牌游戏......</dd></dl></div></body></html>效果：三、层次选择器层次选择器通过DOM元素之间的层次关系来获取元素，语法如下：请看下⾯的⽰例需求说明：点击标题，使⽤层次选择器选择不同的元素使得其背景⾊为蓝⾊，如下图所⽰：代码：<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>层次选择器演⽰⽰例</title><!--css样式--><style>*{margin: 0px;padding: 0px;line-height: 30px;}body{margin: 10px;}#menu{border: 2px solid #0033cc;padding: 10px;}a{text-decoration: none;margin-right: 5px;}span{font-weight: bold;padding: 3px;}h2{margin: 10px;cursor: pointer;/*⿏标为⼿状*/}</style><!--引⼊jQuery--><script src="jquery-3.3.1.js"></script><!--javascript--><script>$(function(){// 点击h2标题时改变背景⾊$("h2").click(function(){// 后代选择器获取并设置#menu下的span元素的背景⾊$("#menu span").css("background-color","blue");// ⼦选择器获取并设置#travel下的a元素的背景⾊$("#travel>a").css("background-color","red");// 相邻选择器只会选择第⼀个相邻的元素//获取并设置#ticket下的第⼀个a元素的背景⾊$("#ticket+a").css("background-color","red");// 同辈选择器会选择所有的元素//获取并设置#rest下的所有a元素的背景⾊$("#rest~a").css("background-color","yellow");});});</script></head><body><div id="menu"><h2 title="点击查看效果">全部旅游产品分类</h2><dl><dt>北京周边旅游<span>特价</span></dt><dd id="travel"><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow"<a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow"<a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" </dd></dl><dl><dt>景点门票</dt><dd ><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow </dd><dd ><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow </dd></dl><span>更多分类</span></div></body></html>效果：四、属性选择器属性选择器通过HTML元素的属性来选择元素。
JavaScript/jQuery选择器简介【原创】DOM提供的选择器选择器是帮助我们选择页面元素的工具，在网站制作中常常会涉及到某个元素的改变，通过选择器提取这些元素可以很轻易的实现（DOM术语把所说的“元素”称作是“节点”）。
JavaScript的选择器主要是由DOM（文档对象模型，Document Object Model）提供的两种主要的方法实现的，即document.getElementById（）和document.getElementsByTagName（）。
遗憾的是，这两个方法都没有提供做出更细致的选择所需的控制。
下面就这两种方式做一个简要的说明：①document.getElementById（）即通过ID获取一个元素，这意味着找到一个节点，而这个节点使用了一个唯一的ID。
例如，假设我们在网页中定义了这样的一个标题：<h1 id=head>页面元素选择器</h1>那么我们通过document.getElementById（）来抓取这个节点的方式就是document.getElementById（’head’）这行代码的含义是“查找页面上ID为’head’的一个标签”。
通过这样一个选择，我们就可以在自己的JavaScript的代码中对这个标签进行改动了（由于document.getElementById（）语句过长，因此通常把这个语句赋给一个变量，然后对这个变量进行操作）var lookFor= document.getElementById（’head’）②document.getElementsByTagName（）即通过TagName抓取节点，这意味着我们要获取一个元素的列表。
有时候我们想要更多的元素，而不是document.getElementById（）所提供的一个单个元素。
例如，我们需要获取页面上所有指向站点外部的链接，迫使这些链接以新窗口的方式打开。
jQuery选择器和遍历的总结$('*'):全部元素$(this):选中这个元素，this永远指的都是调⽤函数的那个对象$('#intro'):id为intro的元素$('.intro'):class为intro的元素$('li:first'):所有li⾥的第⼀个$('li:last'):所有li⾥的最后⼀个$('li:first-child'):某个⽗元素⾥的第⼀个⼦元素，同时得是li元素$('ul li:first'):第⼀个ul⾥的第⼀个li$('ul li:first-child'):每个ul⾥的第⼀个⼦元素，同时得是li元素$('footer .item:last-of-type'):footer的后代元素，类名是item，是其兄弟元素中的最后⼀个(元素种类不⼀致时每种元素都会出⼀个)$('ul li:nth-child(n)'):每个ul⾥的第n个⼦元素并且同时得是li元素，n从1开始$('ul li:nth-child(n+4)'):每个ul⾥的第4个⼦元素后⾯的元素并且同时得是li元素，包括第4个⼦元素，n从0开始$('ul li:nth-child(-n+4)'):每个ul⾥的第1，2，3，4个⼦元素并且同时得是li元素，包括第4个⼦元素，n从0开始$('ul li:nth-child(3n+1)'):隔⼆取⼀$('ul li:nth-last-child(n)'):倒数第n个，n从1开始$('ul li:nth-of-type(2)'):每个ul⾥的li元素⾥的第⼆个，括号⾥的数字从1开始$('p.intro'):intro类中的p元素$('div>span'):div的直接⼦元素⾥的span$('div span'):div的后代⼦元素⾥的span$('.intro+'):每个类名为intro的元素的下⼀个兄弟元素$('div~p'): div后⾯的兄弟元素⾥的所有p元素$('li:even'):索引值是偶数的li，注意！索引值从0开始$('li:odd'):索引值是奇数的li$('li:lt(3)'):索引值⼩于3的li$('li:gt(3)'):索引值⼤于3的li$('li:eq(index)'):按索引值index选中元素，index从0开始$('ul:parent'):是⽗元素的ul$('div:has(span)'):⾥⾯有span元素的div$('div:has(p，span，li)'):⾥⾯同时有p，span和li的div$(':animated'):当前所有动画元素$(':button'):button元素和type='button'的input元素$('[id]'):有id属性的元素$('[id="jQuery"]'):有id属性且属性值等于jQuery的元素。
jquery 中总结十章笔记1. 选择器：- 使用`$()`或`jQuery()`函数来选取DOM元素。
- 可以使用元素名称、类名、ID、属性等进行选择。
- 还可以使用层级关系和过滤器来进一步缩小选择范围。
2. 事件处理：- 使用`on()`方法来绑定事件处理函数。
- 可以使用事件委托来处理动态添加的元素。
- 使用`off()`方法来解绑事件处理函数。
3. DOM操作：- 可以使用`append()`、`prepend()`、`after()`和`before()`方法来插入DOM元素。
- 使用`remove()`方法来删除DOM元素。
- 使用`html()`和`text()`方法来修改元素的HTML内容和文本内容。
4. 动画效果：- 使用`animate()`方法来创建自定义动画效果。
- 可以修改元素的位置、尺寸、透明度等属性。
- 可以设置动画的持续时间、缓动效果和完成时的回调函数。
5. 异步请求：- 使用`$.ajax()`方法发送异步HTTP请求。
- 可以设置请求类型、URL、数据、成功和失败的回调函数等参数。
- 可以使用`$.getJSON()`和`$.post()`等简化的方法来发送常见类型的请求。
6. 特效效果：- 使用jQuery UI库提供的特效效果可以为网页添加交互效果。
- 可以添加拖拽、排序、选项卡、日期选择等功能。
- 可以自定义特效的样式和行为。
7. 表单操作：- 可以使用`val()`方法获取或设置表单元素的值。
- 使用`prop()`方法修改复选框和单选框的选中状态。
- 使用`serialize()`方法将表单元素序列化为字符串。
8. 遍历和过滤：- 使用`each()`方法和回调函数遍历匹配的元素。
- 使用`filter()`和`not()`方法根据条件过滤元素。
- 使用`find()`方法在匹配元素的后代中查找元素。
9. AJAX事件：- 使用`$.ajaxSetup()`方法设置全局AJAX默认选项。
jquery使用技巧总结本文来源于网站建设：/一、简介1.1、概述随着WEB2.0及ajax思想在互联网上的快速发展传播，陆续出现了一些优秀的Js框架，其中比较著名的有Prototype、YUI、jQuery、mootools、Bindows以及国内的JSVM 框架等，通过将这些JS框架应用到我们的项目中能够使程序员从设计和书写繁杂的JS应用中解脱出来，将关注点转向功能需求而非实现细节上，从而提高项目的开发速度。
jQuery是继prototype之后的又一个优秀的Javascript框架。
它是由John Resig 于2006 年初创建的，它有助于简化JavaScript? 以及Ajax 编程。
有人使用这样的一比喻来比较prototype和jQuery：prototype就像Java，而jQuery就像ruby. 它是一个简洁快速灵活的JavaScript框架，它能让你在你的网页上简单的操作文档、处理事件、实现特效并为Web页面添加Ajax交互。
它具有如下一些特点：1、代码简练、语义易懂、学习快速、文档丰富。
2、jQuery是一个轻量级的脚本，其代码非常小巧，最新版的JavaScript包只有20K左右。
3、jQuery支持CSS1-CSS3,以及基本的xPath。
4、jQuery是跨浏览器的，它支持的浏览器包括IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+。
5、可以很容易的为jQuery扩展其他功能。
6、能将JS代码和HTML代码完全分离，便于代码和维护和修改。
7、插件丰富，除了jQuery本身带有的一些特效外，可以通过插件实现更多功能，如表单验证、tab导航、拖放效果、表格排序、DataGrid，树形菜单、图像特效以及ajax上传等。
jQuery的设计会改变你写JavaScript代码的方式，降低你学习使用JS操作网页的复杂度，提高网页JS开发效率，无论对于js初学者还是资深专家，jQuery都将是您的首选。
jQuery选择器之层次选择器⽤法实例分析本⽂实例讲述了jQuery选择器之层次选择器⽤法。
分享给⼤家供⼤家参考，具体如下：前⾯⼀篇介绍了，今天归纳⼀下jQuery的层次选择器。
DOM元素之间的层次关系主要包括元素的⼦元素、后代元素、相邻元素和兄弟元素等，我们可以通过DOM元素之间的层次关系来获取想要的元素。
为了更好的学习，我们先列出⼀段HTML代码：<body><div id="one" class="aaa">id=one，class=aaa的div<br /><div class="mini">class=mini</div></div><div id="two" class="aaa">id=two，class=aaa的div<br /><div class="mini">class=mini的div</div><div class="mini">class=mini的div</div></div><div class="bbb">class=bbb的div<div class="mini">class=mini的div</div><div class="mini">class=mini的div</div></div><span>^^span元素^^</span><span>--span元素--</span></body>1、后代元素选择器选择器：ancestor descendant描述：在给定的祖先元素下匹配所有的后代元素。
jQuery选择器全⾯总结jQuery 的选择器可谓之强⼤⽆⽐，这⾥简单地总结⼀下常⽤的元素查找⽅法jQuery选择器使得获得页⾯元素变得更加容易、更加灵活，从⽽⼤⼤减轻了开发⼈员的压⼒。
如同盖楼⼀样，没有砖⽡，就盖不起楼房。
得不到元素谈何其他各种操作呢？可见,jQuery选择器的重要性。
当然想⼀下⼦掌握所有选择器也是很困难的，这个得靠实践和积累。
现在我们正式进⼊jQuery选择器的学习。
我们将jQuery选择器进⾏分类学习，将jQuery选择器分为以下⼏种：1、基本选择器◦id 根据元素ID选择◦elementname 根据元素名称选择◦classname 根据元素css类名选择举例：复制代码代码如下:<input type="text" id="ID" value="根据ID选择" /><a>根据元素名称选择</a><input type="text" class="classname" value="根据元素css类名选择" />复制代码代码如下:jQuery("#ID").val();jQuery("a").text();jQuery(".classname").val();即可分别得到元素的值。
以上三种为最常见的选择器，其中ID选择器是效率最⾼的，在可能的情况下应该尽量使⽤它。
2、层次选择器◦ancestor descendant 祖先和⼦孙选择器◦parent > child ⽗⼦节点选择器◦prev + next 同级别选择器◦prev ~ siblings 过滤选择器举例：复制代码代码如下:<div id="divTest"><input type="text" value="投资" /><input id="next" type="text" /><input type="text" value="担当" /><input type="text" title="学习" value="学习" /><a>1</a><a>2</a></div>复制代码代码如下://得到div中的a标签内容结果为12jQuery("#divTest a").text();//输出div直接⼦节点结果为投资jQuery("#divTest>input").val();//输出id为next的后⼀个同级别元素结果为担当jQuery("#next+input").val();//同上，并且是有title的元素结果为学习jQuery("#next~[title]").val();3、基本过滤选择器◦:first 找到第⼀元素◦:last 找到最后⼀个元素◦:not(selector) 去除与给定选择器匹配的元素◦:even 匹配索引值为偶数的元素从0开始计数◦:odd 匹配索引值为奇数的元素从0开始计数◦:eq(index) 匹配⼀个给定索引值元素从0开始◦:gt(index) 匹配⼤于给定索引值元素◦:lt(index) 匹配⼩于给定索引值元素◦:header 选择h1,h2,h3⼀类的标签 (⽬前没⽤过)◦:animated 匹配正执⾏动画效果的元素 (⽬前没⽤过)举例：复制代码代码如下:<div id="divTest"><ul><li>投资</li><li>理财</li><li>成熟</li><li>担当</li><input type="radio" value="学习" checked="checked" /><input type="radio" value="不学习" /></ul></div>复制代码代码如下://第⼀个li内容结果为投资jQuery("li:first").text();//最后⼀个li内容结果为担当jQuery("li:last").text();//input未被选中的值结果为不学习jQuery("li input:not(:checked)").val();//索引为偶数的li 结果为投资成熟jQuery("li:even").text();//索引为奇数的li 结果为理财担当jQuery("li:odd").text();//索引⼤于2的li的内容结果为担当jQuery("li:gt(2)").text();//索引⼩于1的li的内容结果为投资jQuery("li:lt(1)").text();4、内容过滤器◦:contains(text) 匹配包含给定⽂本的元素◦:empty 匹配所有不包含⼦元素或者⽂本的空元素◦:has(selector) 匹配含有选择器所匹配的元素举例：复制代码代码如下:<div id="Test"><ul><li>hyip投资</li><li>hyip</li><li></li><li>理财</li><li><a>投资</a></li></ul></div>复制代码代码如下://包含hyip的li的内容结果为hyip投资 hyipjQuery("li:contains('hyip')").text();//内容为空的li的后⼀个li内容结果为理财jQuery("li:empty+li").text();//包含a标签的li的内容结果为投资jQuery("li:has(a)").text();5、可见性过滤器◦:hidden 匹配不可见元素◦:visible 匹配可见元素举例：复制代码代码如下:<ul><li>可见</li><li style="display:none;">不可见</li></ul>复制代码代码如下://不可见的li的内容结果为不可见jQuery("li:hidden").text();//可见的li的内容结果为可见jQuery("li:visible").text();6、属性过滤器◦[attribute=value] 匹配属性是给定值的元素◦[attribute^=value] 匹配属性是以给定值开始的元素◦[attribute$=value] 匹配属性是以给定值结束的元素◦[attribute*=value] 匹配属性包含给定值的元素举例：复制代码代码如下:<input type="text" name="hyipinvest" value="hyip投资" /><input type="text" name="investhyip" value="投资hyip" /><input type="text" name="google" value="HYIP" />//name为hyipinvest的值结果为hyip投资alert(jQuery("input[name='hyipinvest']").val());//name以hyip开始的值结果为hyip投资alert(jQuery("input[name^='hyip']").val());//name以hyip结束的值结果为投资hyipalert(jQuery("input[name$='hyip']").val());//name包含oo的值结果为HYIPalert(jQuery("input[name*='oo']").val());jQuery选择器就总结到这⾥，这些基本上都是在学习过程中遇到的，还有极少部分没有总结出来。
jQuery中的选择器非常多，对于初学者来说，并没有必要全部掌握，只记住常用的选择器即可。
当需要使用其他不熟悉的选择器时，可以通过查阅文档查看具体的解释。
为了方便读者查阅，接下来简单介绍一些其他在发中可能会用到的选择器。
1.获取同级元素选择器功能描述示例prev+next 获取当前元素紧邻的下一个同级元素$("div+.title")获取紧邻<div>的下一个class名为title的兄弟节prev~siblings 获取当前元素后的所有同级元素$(".bar~li")获取class名为bar的元素后的所有同级元素节<li>2.筛选元素在jQuery中还有一些选择器可以筛选元素，如表2所示。
表2筛选元素选择器功能描述示例:gt(index) 获取索引于index的元素$("li:gt(3)")获取索引于3的所有<li>元素:lt(index) 获取索引小于index的元素$("li:lt(3)")获取索引小于3的所有<li>元素:not(seletor) 获取除指定的选择器外的其他元素$("li:not(li:eq(3))")获取除索引为3外的所有<li>元素:focus 匹配当前获取焦的元素$("input:focus")匹配当前获取焦的<input>元素:animated 匹配所有正在执行动画的元素$("div:not(:animated)")匹配当前没有执行动画的<div>元素:target 选择由文档URI的格式化识别码表示的目标元素若URI为http://example./#foo，则$("div:target")将获取<divid="foo">元素:contains(text) 获取内容包含text文本的元素$("li:contains('js')")获取内容中含“js”的<li>元素:empty 获取内容为空的元素$("li:empty")获取内容为空的<li>元素:has(selector) 获取内容包含指定选择器的元素$("li:has('a')")获取内容中含<a>元素的所有<li>元素:parent 选取带有子元素或包含文本的元素$("li:parent")选取带有子元素或包含文本的li元素:hien 获取所有隐藏元素$("li:hien")获取所有隐藏的<li>元素:visible 获取所有可见元素$("li:visible")获取所有可见的<li>元素3.属性选择器jQuery中还了根据元素的属性获取指定元素的。
