jQuery选择器速查表
jQuery选择器之基本选择器与层次选择器
本文主要是通过表格向大家展示了jQuery选择器之基本选择器与层次选择器，方便大家对比学习，有需要的小伙伴参考下。
基本选择器基本选择器是jQuery中最常用的选择器，也是最简单的选择器，它通过元素id、class 和标签名等来查找DOM元素。
在网页中，每个id名称只能使用一次，class允许重复使用。
选择器描述返回示例#id根据给定的id匹配一个元素单个元素$("#test")选取id为test的元素.class根据给定的类名匹配元素集合元素$(".test")选取所有class为test的元素element根据给定的元素名称匹配元素集合元素$("p")选取所有的<p>元素*匹配所有的元素集合元素$("*")选取所有的元素selector1,selector2,...selectorN将每一个选择器匹配到的元素合并后一起返回集合元素$("div,span,p.myclass")选取所有<div>,<span>和拥有class为myclass的<p>标签的一组元素层次选择器如果想通过DOM元素之间的层次关系来获取特定元素，例如后代元素、子元素、相邻元素和同辈元素等，那么层次选择器是一个非常好的选择。
选择器描述返回示例$("ancestor descendant")选取ancestor元素里的所有descendant(后代)元素集合元素$("div span")选取<div>里所有<span>元素$("parent>child")选取parent元素下的child元素，与$("ancestor descendant")有区别，$("ancestor descendant")选择的是后代元素集合元素$("div>span")选取<div>元素下元素名是<span>的子元素$("prev+next")选取紧邻在prev元素之后的next元素集合元素$(".one+div")选取class为one的下一个<div>同辈元素$("prev~siblings")选取prev元素之后的所有siblings元素集合元素$("#two~div")选取id为two的元素后面的所有<div>同辈元素$("prev+next")选择器与next()方法的等价关系选择器方法等价关系$(".one+div")$(".one").next("div")$("prev~siblings")选择器与nextAll()方法的等价关系选择器方法等价关系$("prev~div")$("#prev").nextAll("div")以上就是本文的全部内容了，希望大家能够喜欢更多信息请查看IT技术专栏。
01-jQuery选择器
进阶练习二
• 1、选中This is a <div> wi我们的动力！
Your potential
Our passion!
• 1、选择所有含title属性的div • 2、选择所有的checkbox • 3、选择所有的radio • 4、选中所有小狗的图片 • 5、选中所有带<label>节点的div • 6、选中所有div里面的<label>节点 • 7、选中所有包含alt的img标签 • 8、选中C++那一行
进阶练习一
• 1、选中CSS1，CSS2，CSS3 • 3、选中表格的表头 • 4、选中表格的奇数行，不包含表头 • 5、选中<ul class=“myList”>里面的第一个和最后
一个ul内容 • 6、选中Basic XPath • 7、选中Basic Xpath, Form selectors, Only Child
jQuery选择器
最考验技术的部分
基础选择器
层次选择器
Table的直接子节点是 thead
后面不是里面，是在外面； 同一级别的节点属性
可见性过滤器
属性过滤器
子元素过滤器
nth-child(Xn+Y)表示从 第Y个开始，递增X
表单选择器
表单过滤器
jQuery选择器实验室
基础练习题
JQuery选择器全集
集合元素
:parent
选取含有子元素或者文本的元素
集合元素
可见性过滤选择器
选择器
描述
返回
:hidden
选取所有不可见元素
集合元素
:visible
选取所有可见元素
集合元素
属性过滤选择器格式：[attribute +符号+ value]
符号
描述
符号
描述
[attribute]
集合元素
:header
选取所有的标题元素
集合元素
:animated
选取当前正在执行动画的所有元素
集合元素
:focus
选取当前获取焦点的元素
集合元素
内容过滤选择器
选择器
描述
返回
:contains(text)
选取含有文本内容为“text“的元素
集合元素
:empty
选取不包含子元素或文本的空元素
集合元素
:has(selector)
选取所有的不可见元素
集合元素
集合元素
:first-child
选取每个父元素的第一个子元素
集合元素
:last-child
选取每个父元素的最后一个子元素
集合元素
:only-child
选取每个父元素中，唯一情况下的子元素
集合元素
表单对象属性过滤选择器
选择器
描述
返回
:enabled
选取所有可用元素
集合元素
:disabled
选取所有不可用元素
层次选择器
选择器
描述
返回
$(“ancestor descendant”)
JQUERY选择器大全
JQuery选择器大全jQuery的选择器可谓之强大无比，这里简单地总结一下常用的元素查找方法$("#myELement")选择id值等于myElement的元素，id值不能重复在文档中只能有一个id值是myElement所以得到的是唯一的元素$("div")选择所有的div标签元素，返回div元素数组$(".myClass")选择使用myClass类的css的所有元素$("*")选择文档中的所有的元素，可以运用多种的选择方式进行联合选择：例如$("#myELement,div,.myclass")层叠选择器：$("form input")选择所有的form元素中的input元素$("#main>*")选择id值为main的所有的子元素$("label+input")选择所有的label元素的下一个input元素节点，经测试选择器返回的是label标签后面直接跟一个input标签的所有input标签元素$("#prev~div")同胞选择器，该选择器返回的为id为prev的标签元素的所有的属于同一个父元素的div标签基本过滤选择器：$("tr:first")选择所有tr元素的第一个$("tr:last")选择所有tr元素的最后一个$("input:not(:checked)+span")过滤掉：checked的选择器的所有的input元素$("tr:even")选择所有的tr元素的第0，2，4......个元素（注意：因为所选择的多个元素时为数组，所以序号是从0开始）$("tr:odd")选择所有的tr元素的第1，3，5......个元素$("td:eq(2)")选择所有的td元素中序号为2的那个td元素$("td:gt(4)")选择td元素中序号大于4的所有td元素$("td:lt(4)")选择td元素中序号小于4的所有的td元素$(":header")选择h1、h2、h3之类的$("div:animated")选择正在执行动画效果的元素内容过滤选择器：$("div:contains('John')")选择所有div中含有John文本的元素$("td:empty")选择所有的为空（也不包括文本节点）的td元素的数组$("div:has(p)")选择所有含有p标签的div元素$("td:parent")选择所有的以td为父节点的元素数组可视化过滤选择器：$("div:hidden")选择所有的被hidden的div元素$("div:visible")选择所有的可视化的div元素属性过滤选择器：$("div[id]")选择所有含有id属性的div元素$("input[name='newsletter']")选择所有的name属性等于'newsletter'的input元素$("input[name!='newsletter']")选择所有的name属性不等于'newsletter'的input元素$("input[name^='news']")选择所有的name属性以'news'开头的input元素$("input[name$='news']")选择所有的name属性以'news'结尾的input元素$("input[name*='man']")选择所有的name属性包含'news'的input元素$("input[id][name$='man']")可以使用多个属性进行联合选择，该选择器是得到所有的含有id属性并且那么属性以man结尾的元素子元素过滤选择器：$("ul li:nth-child(2)"),$("ul li:nth-child(odd)"),$("ul li:nth-child(3n+1)")$("div span:first-child")返回所有的div元素的第一个子节点的数组$("div span:last-child")返回所有的div元素的最后一个节点的数组$("div button:only-child")返回所有的div中只有唯一一个子节点的所有子节点的数组表单元素选择器：$(":input")选择所有的表单输入元素，包括input,textarea,select和button$(":text")选择所有的text input元素$(":password")选择所有的password input元素$(":radio")选择所有的radio input元素$(":checkbox")选择所有的checkbox input元素$(":submit")选择所有的submit input元素$(":image")选择所有的image input元素$(":reset")选择所有的reset input元素$(":button")选择所有的button input元素$(":file")选择所有的file input元素$(":hidden")选择所有类型为hidden的input元素或表单的隐藏域表单元素过滤选择器：$(":enabled")选择所有的可操作的表单元素$(":disabled")选择所有的不可操作的表单元素$(":checked")选择所有的被checked的表单元素$("select option:selected")选择所有的select的子元素中被selected的元素选取一个name为”S_03_22″的input text框的上一个td的text值$(”input[@name=S_03_22]“).parent().prev().text()名字以”S_”开始，并且不是以”_R”结尾的$(”input[@name^='S_']“).not(”[@name$='_R']“)一个名为radio_01的radio所选的值$(”input[@name=radio_01][@checked]“).val();$("A B")查找A元素下面的所有子节点，包括非直接子节点$("A>B")查找A元素下面的直接子节点$("A+B")查找A元素后面的兄弟节点，包括非直接子节点$("A~B")查找A元素后面的兄弟节点，不包括非直接子节点1.$("A B")查找A元素下面的所有子节点，包括非直接子节点例子：找到表单中所有的input元素HTML代码:<form><label>Name:</label><input name="name"/><fieldset><label>Newsletter:</label><input name="newsletter"/></fieldset></form><input name="none"/>jQuery代码:$("form input")结果:[<input name="name"/>,<input name="newsletter"/>]2.$("A>B")查找A元素下面的直接子节点例子：匹配表单中所有的子级input元素。
jQuery速查表
对 象 访 问
context eq(positon) get() get(index) index(subject) data(name)
数 据 缓 存
data(name,value) removeData(name) queue() queue(callback) queue(queue) dequeue()
层 级
基 本 过 滤 器
内 容 过 滤 器 表 单 过 滤 器
可见 :hidden 过 滤器 :visible
[attribute] [attribute=value] 属 性 过 滤 器 [attribute!=value] [attribute^=value] [attribute$=value] [attribute*=value] [attributeFilter1] [attributeFilter2] [attributeFilterN] 子 元 素 过 滤 器 :nthchild(index/even/odd/equ ation) :first-child :last-child :only-child :input :text :password :radio :checkbox 表 单 :submit :image :reset :button :file :hidden G.3 分类 属性 方法名称 attr(name) attr(properties) 属性 attr(key,value) attr(key,fn) removeAttr(name)
G.1 分类
基础 方法名称 jQuery(expression,[conte nt]) jQuery(html,[owner Document]) jQuery(element) jQuery(callback) each(callback) length/size() selector
jquery属性速查
Jquery 速查表核心∙jQuery 核心函数o jQuery(expr, [context])o jQuery(html, [ownerDoc])o jQuery(html, props)o jQuery(elements)o jQuery()o jQuery(callback)∙jQuery 对象访问o each(callback)o size()o lengtho selectoro contexto get()o get(index)o index(subject)∙数据缓存o data([name], [value])o data(obj)o removeData(name)o$.data([el], [key], [val])∙队列控制o queue(name ,[cb|queue])o dequeue(name)o clearQueue([queueName])∙插件机制o jQuery.fn.extend(object)o jQuery.extend(object)∙多库共存o jQuery.noConflict([ex])属性∙属性o attr(name)o attr(properties)o attr(key, value)o attr(key, fn)o removeAttr(name)∙CSS 类o addClass(class | fn)o removeClass([class | fn])o toggleClass(class|fn [, sw])∙HTML代码/文本/值o html( [val | fn] )o text( [val | fn] )o val( [val | fn | arr] )CSS∙CSSo css(name)o css(properties)o css(name, value | fn)∙位置o offset([coordinates])o position()o scrollTop( [val] )o scrollLeft( [val] )∙尺寸o height( [val] )o width( [val] )o innerHeight()o innerWidth()o outerHeight(options)o outerWidth(options)选择器∙基本o#ido elemento.classo*o selector1,selector2,selectorN ∙层级o ancestor descendanto parent > childo prev + nexto prev ~ siblings∙基本o:firsto:lasto:noto:eveno:oddo:eqo:gto:lto:headero:animated∙内容o:containso:emptyo:haso:parent∙可见性o:hiddeno:visible∙属性o[attribute]o[attribute=value]o[attribute!=value]o[attribute^=value]o[attribute$=value]o[attribute*=value]o[attrSel1][attrSel2][attrSelN]∙子元素o:nth-childo:first-childo:last-childo:only-child∙表单o:inputo:texto:passwordo:radioo:checkboxo:submito:imageo:reseto:buttono:fileo:hidden∙表单对象属性o:enabledo:disabledo:checkedo:selected文档处理∙内部插入o append(content | fn)o appendTo(content)o prepend(content | fn)o prependTo(content)∙外部插入o after(content | fn) o before(content | fn) o insertAfter(content) o insertBefore(content)∙包裹o wrap(html)o wrap(elem)o wrap(fn)o unwrap()o wrapAll(html)o wrapAll(elem)o wrapInner(html)o wrapInner(elem)o wrapInner(fn)∙替换o replaceWith(content) o replaceAll(selector)∙删除o empty()o remove([expr])o detach([expr])∙复制o clone()o clone(true)筛选∙过滤o eq(index)o first()o last()o hasClass(class)o filter(expr | fn) o is(expr)o map(callback)o has(expr)o not(expr)o slice(start, [end])∙查找o children([expr])o closest([expr])o find(expr)o next([expr])o nextAll([expr])o nextUntil([expr])o offsetParent()o parent([expr])o parents([expr])o parentsUntil([expr])o prev([expr])o prevAll([expr])o prevUntil([expr])o siblings([expr])∙串联o add(expr, [context])o andSelf()o contents()o end()事件∙页面载入o ready(fn)∙事件处理o bind(type, [data], fn)o one(type, [data], fn)o trigger(type, [data])o triggerHandler(type, [data])o unbind([type], [data])∙事件委派o live(type, [data], fn)o die([type], [fn])∙事件切换o hover(over, out)o toggle(fn, fn2, [fn3, fn4, ...])∙事件o blur( [fn] )o change( [fn] )o click( [fn] )o dblclick( [fn] )o error( [fn] )o focus( [fn] )o focusin( [fn] )o focusout( [fn] )o keydown( [fn] )o keypress( [fn] )o keyup( [fn] )o mousedown(fn)o mousemove(fn)o mouseout(fn)o mouseover(fn)o mouseup(fn)o resize(fn)o scroll(fn)o select( [fn] )o submit( [fn] )o unload(fn)效果∙基本o show()o show(speed, [callback])o hide()o hide(speed, [callback])o toggle()o toggle(switch)o toggle(speed, [callback])∙滑动o slideDown(speed, [callback])o slideUp(speed, [callback])o slideToggle(speed, [callback])∙淡入淡出o fadeIn(speed, [callback])o fadeOut(speed, [callback])o fadeTo(speed, opacity, [fn])∙自定义o animate(param,[dur],[e],[fn])o animate(params, options)o stop([clearQueue], [gotoEnd])o delay(duration, [queueName])∙设置o jQuery.fx.offAjax∙Ajax 请求o$.ajax([options])o load(url, [data], [callback])o$.get(url, [data], [fn], [type]) o$.getJSON(url, [data], [fn])o$.getScript(url, [callback])o$.post(url, [data], [fn], [type])∙Ajax 事件o ajaxComplete(callback)o ajaxError(callback)o ajaxSend(callback)o ajaxStart(callback)o ajaxStop(callback)o ajaxSuccess(callback)∙其它o$.ajaxSetup([options])o serialize()o serializeArray()工具∙浏览器及特性检测o$.supporto$.browsero$.browser.versiono$.boxModel∙数组和对象操作o$.each(object, [callback])o$.extend([d],tgt,obj1,[objN])o$.grep(array, fn, [invert])o$.makeArray(obj)o$.map(array, callback)o$.inArray(value, array)o$.toArray()o$.merge(first, second)o$.unique(array)o$.parseJSON(json)∙函数操作o$.noopo$.proxy(function, scope)∙测试操作o$.contains(container, contained) o$.isArray(obj)o$.isFunction(obj)o$.isEmptyObject(obj)o$.isPlainObject(obj)∙字符串操作o$.trim(str)∙URLo$.param(obj, [traditional])∙插件编写o$.error(message)。
jQuery插件select2利用ajax高效查询大数据列表（可搜索、可分页）
jQuery插件select2利⽤ajax⾼效查询⼤数据列表（可搜索、可分页）select2是⼀款jQuery插件，是普通form表单select组件的升级版。
可以定制搜索、远程数据集（Remote data，本篇主要介绍点）、⽆限滚动（数据分页功能，这⼀点很妙）、还有很多⾼端的参数设置（有需要的下次介绍）。
内置了40种国际化语⾔，不过这⾥我们只需要⽤到中⽂。
同时⽀持现代和传统浏览器内置，甚⾄包括惹⼈不⾼兴的IE8。
那么，现在让我们开始⼀段select2的奇幻之旅吧！⼀、惊艳的效果，来⼀睹为快吧本地实战结果⼆、导⼊css和js到⽹站上1.使⽤CDN，节省⾃⼰⽹站的流量<link href="https:///ajax/libs/select2/4.0.3/css/select2.min.css" rel="external nofollow" rel="stylesheet" /><script src="https:///ajax/libs/select2/4.0.3/js/select2.min.js"></script>2.下载⽂件到本地，可以做⼀些个性的定制（⽐如说修改提⽰语）<!-- select2 --><link rel="stylesheet" type="text/css" href="${ctx}/common/select2/css/select2.css" rel="external nofollow" /><script type="text/javascript" src="${ctx}/common/select2/js/select2.full.js"></script><!-- 中⽂国际化还需要进⾏参数设置 --><script type="text/javascript" src="${ctx}/common/select2/js/i18n/zh-CN.js"></script>三、真⼑真枪的⼲起来第⼀步、定制页⾯个性化元素<select name="parentid" class="js-data-example-ajax" href="${ctx}/member/loadMembersInfo.do?uid=${mem.uid}" rel="external nofollow" style="width:400px" inputMessage="请输⼊会员编号(可部分匹配)"><option selected="selected" value="666">沉默王⼆</option></select>Java端通过name属性可获得select的value值。
JQuery元素快速查找与操作
JQuery元素快速查找与操作⾸先，我们来看看jquery中如何查找到想要的结点。
第⼀步：sizzle选择器基于元素的id、类、类型、属性、属性值等"查找"（或选择）HTML元素，简单的说是基于css选择器，除此之外还有⼀些特定的选择器。
第⼆步：查询祖先parent()返回被选元素的直接⽗元素，该⽅法只会向上⼀级对 DOM 树进⾏遍历parents()可以使⽤可选参数来过滤对⽗元素的搜索返回被选元素的所有祖先元素，它⼀路向上直到⽂档的根元素parentsUntil()返回介于两个给定元素之间的所有祖先元素，下⾯是例⼦：$(document).ready(function(){//会返回span开始到div为⽌的祖先元素$("span").parentsUntil("div");});第三步：查询⼦孙children()可以使⽤可选参数来过滤对⼦元素的搜索返回被选元素的所有直接⼦元素，该⽅法只会向下⼀级对 DOM 树进⾏遍历find()可以使⽤可选参数来过滤对元素的搜索返回被选元素的后代元素，⼀路向下直到最后⼀个后代第四步：查询同胞siblings()返回被选元素的所有同胞元素next()返回被选元素的下⼀个同胞元素nextAll()返回被选元素的之后的全部同胞元素nextUntil()返回介于两个给定参数之间的所有跟随的同胞元素$(document).ready(function(){//返回介于 <h2>与<h6>元素之间的所有同胞元素$("h2").nextUntil("h6");});prev()、prevAll() 和 prevUntil()prev()、prevAll()以及prevUntil()⽅法的⼯作⽅式与上⾯的⽅法类似，只不过⽅向相反⽽已：它们返回的是前⾯的同胞元素（在DOM 树中沿着同胞之前元素遍历，⽽不是之后元素遍历）。
jQ的四类基本选择器
jQ的四类基本选择器jQuery的四种选择器jQ选择器与css选择器本质上相差不⼤，但是在使⽤容易混淆格式或属性1.基础选择器$('#id名')$('.类名')$('.类名1 .类名2')$('标签名.类名')2.层级选择器1.⼦代：> children$('基础选择器1>基础选择器2')//,代表选中1的⼦代22.后代：空格$('基础选择器1 基础选择器2')//空格，代表选中所有1的后代2两者还可以通过下标来选中元素$('基础选择器1 基础选择器2')[2]//注意是下标，这⾥代表第三个元素23.过滤选择器eq匹配⼀个给定索引值的元素1.原⽣⽅法通过$(':nth-child(n)') //这⾥的n不是下标，直接代表第⼏个2.jQ⽅法同过$(':eq(n)')//这⾥的n代表的下标，当前元素 = 第（n-1）个，从0开始计数同时jQ⽅法还可以通过奇偶数批量选择元素$('eg:odd')$('eg:even')4.筛选选择器括号的参数参数除了基础选择器之外还可以⽤过滤选择器eq，⽐如：$("#box").children("div:eq(n)")1. .children()不输⼊参数是全选，输⼊参数可以选择指定的元素，2. .find()传⼊参数*可以找到所有的后代元素也可以获得指定的后代元素3. .siblings()获得所有兄弟元素，除了⾃⼰，在实际的使⽤中可以结合排他思想，⽐如选⽤sibilings⽅法设置其他元素，然后设置⾃⼰，⼤幅节约代码传⼊参数可以获得指定的兄弟元素4. .prev()/.next()获得上⼀个或下⼀个兄弟元素5. .prevAll()/.nextAll()获得前⽅或者后⽅的所有兄弟元素6. .parent()/.parents().parent() 这个⽅法⽤来获得所有⽗级元素.parents() 在加了s后表⽰获取所有上级元素，⼀直到document这⾥联系⼀下parentNode和parentElement，他们主要区别是，前者最⾼可以读取到Document，⽽parentElement只能读取到html。
JQ选择器
显示id为divMid元素后的下一个div
层次选择器练习
关键代码 功能 显示id为divMid元素后的所有div 页面效果
显示id为divMid元素后的所有相邻div
练习：将缺失的层次选择器进行填充 层次选择器练习.html
简单过滤选择器
选择器 :first 功能 获取第一个元素，相当于.first() 返回值 元素集合
ancester descendant 与 parent child 选择器不同的地方在于，前者的层次关 系是祖先和后代，而后者是父亲和孩子。
层次选择方法
方法名 .next() .nextAll() siblings() 功能 返回值 相当于prev + next，匹配prev元素后 元素集合 的兄弟元素 相当于prev ~ siblings ，匹配prev元素后所有的兄弟元素 获取元素所有相邻的元素 元素集合 元素集合
获取表单中被选中option的元素
元素集合
表单选择器
选择器 :input 功能 获取input 返回值 元素集合
:text
:password :radio :checkbox :submit :image
获取单行文本框
获取密码框 获取单选按钮 获取复选框 获取提交按钮 获取图像域
元素集合
元素集合 元素集合 元素集合 元素集合 元素集合
JQuery选择器
Hale Waihona Puke 基本选择器选择器 #id 功能 根据给定的ID匹配一个元素 返回值 单个元素
element
.class *
根据给定的元素名匹配所有元素
根据指定的类匹配元素 匹配所有元素
元素集合
元素集合 元素集合
jQuery选择器大全
jQuery选择器大全一基本选择器$("input“) :选择所有是input标签的元素$("#input1"):选择id为input1的元素$(".acss"):选择所有包含acss 这个css类样式的代码<body><a href="">link</a><input id="input1" class="acss"><input id="Text1" class="acss"><input id="Text2" ><script>var oo = $("input"); //oo是以上3个的集合var pp = $("#input1");//pp是第一个var qq = $(".acss");//qq 是前两个的集合</script></body>可以用以上3个尽兴组合式的查询var ww = $("input.acss"); //选择具有acss的input标签元素var ee = $("input#Text1.acss");//选择具有acss 的 id为 Text1的标签为input的元素二、子选择器父节点和直接子节点用(>)隔开，即实现子选择器方式代码<p class="acss"><a href="" id="a1"></a><a href=""></a><a href=""></a><a href=""></a><a href=""></a><a href=""></a><a href=""></a></p><p><a href="" id="a2"></a><a href=""></a><a href=""></a><a href=""></a><a href=""></a><a href=""></a><a href=""></a></p><script>var oo = $("p a "); //选择了p下面的所有的avar pp = $("p>a"); //选择了2个a元素，id为a1 和a2var qq = $("p.acss a"); //选择了id为a1的元素</script>三、特征选择器根据元素特征进行选择 a[href^=http://]代码<div><input id="Text3" name="myInput" /><input id="Text5" name="myput" /><input id="Text4" name="yourInput" /><a id="a3" href=""></a><a id="a4" href=""></a></div><script>var oo = $("a[href^=http://]"); //选择href以 http:// 开头的a。
jQuery 选择器一览表
伪类选择器——根据元素在匹配到的所有元素中的特定次序筛选元素
:first :last :even :odd :eq(index) :gt(index) :lt(index) 1.0 1.0 1.0 1.0 1.0 1.0 1.0 $("p:first") $("p:last") $("tr:even") $("tr:odd") $("li:eq(3)") $("li:gt(2)") $("li:lt(2)") 第一个<p>标签 最后一个<p>标签 所有偶数<tr>标签 所有奇数<tr>标签 第4个li标签(index从0开始算起) 所有index大于2的li标签(第4、5、6……个li标签) 所有index小于2的li标签(第1、2个li标签)
:button
:image :file
1.0
1.0 1.0
$(":button")
$(":image") $(":file")
所有<button>标签(不区分type)和type="button"的<input>元素
所有type="image"的<input>元素 所有type="file"的<input>元素
jQuery怎样使用选择器获取元素？常用的选择器列举
jQuery中的选择器非常多，对于初学者来说，并没有必要全部掌握，只记住常用的选择器即可。
首先jQuery的基本选择器，它和CSS选择器非常类似，常用的基本选择器如表1所示。
表1基本选择器为了使读者更好地理解，通过代码进行演示。
1<divclass="nav">navdiv</div>2<script>3console.log($(".nav"));4</script>上述代码执行后，即可看到获取结果，如图1所示。
图1使用选择器获取元素从图1可以看出，索引为0的元素就页面中的DOM对象，length属性表示匹配到符合条件的DOM对象个数，若没有匹配到合适的结果为0。
其中，类选择器、标签选择器等可以获取多个元素，id选择器只能获取1个元素。
当需要使用其他不熟悉的选择器时，可以通过查阅文档查看具体的解释。
一些其他在发中可能会用到的选择器。
2.获取同级元素使用“+”或“~”可以获取同级元素，如表2所示。
表2获取同级元素3.筛选元素在jQuery中还有一些选择器可以筛选元素，如表3所示。
表3筛选元素4.属性选择器jQuery中还了根据元素的属性获取指定元素的。
例如，含有class属性值为current的元素。
常用的属性选择器如表4所示。
表4属性选择器5.子元素选择器利用子元素选择器可以对子元素进行筛选，常用的如表5所示。
表5子元素选择器6.表单选择器jQuery还了针对表单元素的选择器，用来方便表单发，如表6所示。
表6表单选择器需要注意的，$("input")与$(":input")虽然都可以获取表单项，但它们表达的含义有一定的区别，前者仅能获取表单标签<input>的控件，后者则可以同时获取页面中所有的表单控件，包括表单标签<select>以及<textarea>的控件。
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中还了根据元素的属性获取指定元素的。
任务1jQuery开发基础知识2jQuery选择器及元素的查找方法网页特效任务驱动式教程
基本选择器： ID选择器、标记名选择器、类选择器、通用选择器、组选择器
层级选择器： 包含选择器、子对象选择器、相邻选择器和兄弟选择器
兄弟选择器 格式：$("prev~siblings") 选定的是siblings选择器所指定的元素，这组元素必须是位于prev选 择器指定元素的后面，且与prev选择器指定元素同级，若是省略 siblings，则选择prev选择器指定元素后面的所有兄弟元jQuery选择器获取的结果都是以伪数组的方式存在的，如果需要 精准找到其中的一个DOM元素，则需要使用过滤器eq()方法或者伪 类选择器:eq()
用法： $(selector).eq(index) $("selector:eq(index)") 两者作用相同
jQuery中的伪类选择器
向上查找祖先元素
查找直接父元素parent()方法 格式：$(selector).parent(filter)。 获取每个匹配元素的直接父元素，获取的结果不论有几个元素，都是以组的 方式存在。 例如：$("span").parent("p")，查找的是span元素的父元素p，如果span元 素的父元素不是段落，则查找不会返回，如果段落不是span元素的父元素， 则查找也不会返回。
查找祖先元素parents()方法 格式：$(selector).parents(filter)。 该方法沿着DOM树向上遍历每个层级，直至文档根元素的所有路径，默认情况 下最后一个找到的一定是根元素html。
JQuery选择器速查表
JQuery选择器速查表:visible匹配所有的可见元素查找所有可见的tr元素:$("tr:visible"):nth-child(3n+2):first-child匹配第一个子元素':first'只匹配一个元素，而此选择符将为每个父元素匹配一个子元素在每个ul中查找第一个li: $("ul li:first-child"):last-child匹配最后一个子元素':last'只匹配一个元素，而此选择符将为每个父元素匹配一个子元素在每个ul中查找最后一个li:$("ul li:last-child"):only-child如果某个元素是父元素中唯一的子元素，那将会被匹配如果父元素中含有其他元素，那将不会被匹配。
在ul中查找是唯一子元素的li:$("ul li:only-child")9.表单过滤器Form Filters名称说明解释:enabled匹配所有可用元素查找所有可用的input元素:$("input:enabled"):disabled匹配所有不可用元素查找所有不可用的input元素:$("input:disabled"):checked匹配所有选中的被选中元素(复选框、单选框等，不包括select中的option)查找所有选中的复选框元素: $("input:checked"):selected匹配所有选中的option元素查找所有选中的选项元素:$("select option:selected")。
jQuery选择器详解
jQuery选择器详解根据所获取页⾯中元素的不同。
可以将jQuery选择器分为：四⼤类，其中过滤选择器在分为六⼩类jQuery选择器基本选择器层次选择器过滤选择器简单过滤选择器内容过滤选择器可见性过滤选择器属性过滤选择器⼦元素过滤选择器表单对象属性过滤选择器表单选择器基本选择器是jQuery中使⽤最频繁的选择器，它是由元素Id,Class,元素名，多个选择符组成，通过基本选择器可以实现⼤多数页⾯元素的查找，基本选择器选择器功能返回值#id根据给定的ID匹配⼀个元素单个元素element根据给定的元素匹配所有元素元素集合.class根据给定的类匹配元素元素集合*匹配所有元素元素集合selector，selectorN将每个选择器匹配到元素合并后⼀起返回元素集合层次选择器⽤过DOM元素间的层次关系获取元素，其主要的层次关系包括后代，⽗⼦，相邻，兄弟关系，通过其中某类关系可以⽅便快捷地定位元素层次选择器选择器功能返回值ancestor descendant根据祖先元素匹配所有的后代元素元素集合parent>child根据⽗元素匹配所有的⼦元素元素集合prev+next匹配所有紧接在prev元素后的相邻元素元素集合prev~siblings匹配prev元素之后的所有兄弟元素元素集合过滤选择器下的简单过滤选择器根据某类过滤规则进⾏元素的匹配，书写时都以冒号（：）开头;简单过滤器选择器是过滤器中使⽤最⼴泛的⼀种，简单过滤选择器语法选择器功能返回值first() 或：first获取第⼀个元素单个元素last() 或：last获取最后⼀个元素单个元素：not(selector)获取除给定选择器外的所有元素元素集合：even获取所有索引值为偶数的元素，索引号从0开始元素集合：odd获取所有索引值为奇数的元素，索引号从0开始元素集合：eq(index)获取指定索引器的元素，索引号从0开始单个元素：gt(index)获取所有⼤于给定索引器的元素，索引号从0开始元素集合：lt(index)获取所有⼩于给定索引器的元素，索引号从0开始元素集合：header获取所有标题类型的元素，如h1,h2......元素机会：animated获取正在执⾏动画效果的元素元素集合过滤选择器下的内容过滤选择器根据元素中的⽂字内容或所包含的⼦元素特征获取元素，其⽂本内容可以模糊或绝对匹配进⾏元素定位，内容过滤选择器选择器功能返回值：contains（text）获取包含给定⽂本的元素元素集合：empty获取所有不包含⼦元素或者⽂本的空元素元素集合：has(selector)获取含有选择器所匹配的元素的元素元素集合：parent获取含有⼦元素或者⽂本的元素元素集合过滤选择器下的可见性过滤选择器根据元素是否可见的特征获取元素，可见性过滤器语法选择器功能返回值：hidden获取所有不可见元素，或者type为hidden的元素元素集合：visible获取所有可见元素元素集合过滤选择器下的属性过滤选择器根据元素的某个属性获取元素，如ID号或匹配属性值的内容，并以“【”号开始⼀“】”号结束。
jQuery选择器一览
jQuery选择器1.基本选择器选择器描述返回示例#id 根据给定的id匹配一个元素单个元素 $(‘#test’)选取id为test的元素.class 根据给定的类名匹配元素集合元素 $(‘.test’)选取所有class为test的元素element 根据给定的元素名匹配元素集合元素 $(‘p’)选取所有<p>元素* 匹配所有元素集合元素 $(‘*’)选择所有元素selector1, selector2,…… selectorN 将每一个选择器匹配到的元素合并后一起返回集合元素 $(‘div,span,p.myclass’)选取所有<div>,<span>和拥有class为myclass的<p>标签的一组元素2.层次选择器选择器描述返回示例$(‘parent child’) 选取parent元素里是所有child(后代)元素集合元素 $(‘divspan’)选取<div>里的所有的<span>元素$(‘parent>child’) 选取parent元素下的child直接子元素，与$(‘parent child’)的区别，后者是选取的所有后代元素集合元素$(‘div > span’)选取<div>元素下元素名是<span>的直接子元素$(‘pre+next’) 选取紧接在prev元素后的next元素集合元素 $(‘.one+div’)选取class为one的下一个<div>元素$(‘prev~siblings’) 选取prev元素之后的所有siblings元素集合元素 $(‘#two~div’)选取id为two的元素后面的所有<div>兄弟元素3.基本过滤选择器选择器描述返回示例:first 选取第一个元素单个元素 $(‘div:first’)选取所有<div>元素中第一个<div>元素:last 选取最后一个元素单个元素 $(‘div:last)选取所有<div>元素中最后一个<div>元素:not(selector) 去除所有与给定选择器匹配的元素集合元素 $(‘input:not(.myclass)’)选取class不是myclass的<input>元素:even 选取索引是偶数的所有元素，索引从0开始集合元素 $(‘input:even’)选取索引是偶数的<input>元素:odd 选取索引是奇数的所有元素，索引从0开始集合元素 $(‘input:odd’)选取索引是奇数的<input>元素:eq(index) 选取索引等于index的元素(index从0开始) 单个元素 $(‘input:eq(1)’)选取索引等于1的<input>元素:gt(index) 选取索引大于index的元素(index集合元素 $(‘input:gt(1)’)选取索引大于1的从0开始) <input>元素:lt(index) 选取索引小于index的元素(index从0开始) 集合元素 $(‘input:lt(1)’)选取索引小于1的<input>元素:header 选取所有的标题元素，例如h1,h2,h3等集合元素 $(‘:header’)选取网页中所有<h1>,<h2>,<h3>……4.内容过滤选择器选择器描述返回示例:contains(text) 选取含有文本内容为”text”的元素集合元素 $(‘div:contains(‘我’)’);选取含有文本”我”的<div>元素:empty 选取不包含子元素或者文本的空元素集合元素 $(‘div:empty’)选取不包含子元素(包括文本元素)的<div>空元素:has(selector) 选取含有选择器所匹配的元素的元素集合元素 $(‘div:has(p)’)选取含有<p>元素的<div>元素:parent 选取含有子元素或者文本的元素集合元素 $(‘div:parent’)选取拥有子元素(包括文本元素)的<div>元素5.可见性过滤选择器选择器描述返回示例:hidden 选取所有不可见的元素集合元素 $(‘:hidden’)选取所有不可见的元素。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
$(":password")选取所有密码框
:radio
选区所有单选框
$(":radio")选区所有单选框
:checkbox
选取所有多选框
$("checkbox")选取所有多选框
:submit
选取所有提交按钮
$("submit")选取所有提交按钮
:image
选取所有图像按钮
$("image")选取所有图像按钮
:gt(index)
选取索引大于的index元素（index从0开始）
$("input:eq(1)")选取索引大于1的<input>元素
:lt(index)
选取索引小于的index元素（index从0开始）
$("input:eq(1)")选取索引小于1的<input>元素
:header
选取所有标题元素，例如：h1,h2,h3等
:checked
选取所有被选中的元素（单选框、复选框）
$("input:checked")选取所有被选中的<input>元素
:selected
选取所有被选中的选项元素（下拉列表框）
$("select：selected")选取所有被选中的选项元素
[attribute]
选取拥有此属性的元素
$("div[id]")选区拥有属性id的元素
选取ancestor（祖先）元素里的所有descendant（后代）元素
$("div span")选取<div>里的所有<span>元素
$("parent>child")
选取parent（父）元素下的child（子）元素
$("div>span")选取<div>元素下元素名为<span>的子元素
$("prev+next")等价于$(".one").next("div")
:nth-child
选取每个父元素下的(index/even/odd/equation)元素
:eq(index)只匹配一个元素，且index从0开始；:nth-child(index)为每一个父元素匹配子元素，且index从1开始
:first-child
选取每个父元素的第一个子元素
:first只返回单个元素，而:first-child为每个父元素匹配第一个子元素。例如：$("ulli:first-child")选取每个<ul>中的第一个<li>元素
$("ulli:only-child")在<ul>中选取是唯一子元素的<li>元素
:enabled
选取所有可用元素
$("#from1:enabled")选取id为from1的表单内所有可用的元素
:disabled
选取所有不可用元素
$("#from1:disabled")选取id为from1的表单内所有可用的元素
:empty
选取不包含子元素或者文本的空元素
$("div:empty")选取不包含子元素（包含文本元素）的<div>空元素
:has(selector)
选取含有选择器所匹配的元素的元素
$("div:has(p)")选取含有<p>元素的<div>元素
:parent
选取含有子元素或者文本的元素
$("div:parent")选取拥有子元素（包括文本元素）的<div>元素
:reset
选取所有重置按钮
$("reset")选取所有重置按钮
:button
选取所有的按钮
$("button")选取所有的按钮
:file
选取所有上传域
$("file")选取所有上传域
:hidden
选取所有不可见元素
$("hidden")选取所有不可见元素
表单选择器
:input
选取所有的<input>、<select>、<textarea>和<button>元素
$(":input")选取所有的<input>、<select>、<textarea>和<butLeabharlann on>元素:text
选取所有单行文本框
$(":text")选取所有单行文本框
:password
[attribute^=value]
选取属性值以value开始的元素
$("div[title=^value]")选取属性以“test”开始的<div>元素
[attribute$=value]
选取属性值以value结束的元素
$("div[title=$value]")选取属性以“test”结束的<div>元素
选取紧接在prev元素后的next元素
$(".one+div")选取紧接在class为one的下一个兄弟<div>元素
$("prev～siblings")等价于$("#prev").nextAll("div")
选取prev元素之后的所有siblings元素
$("#two～div")选取id为two的元素后面的所有<div>元素
[attribute=value]
选取属性值为value的元素
$("div[title=test]")选取属性title为“test”的<div>元素
[attribute!=value]
选取属性值不等于value的元素
$("div[title!=test]")选取属性title不为“test”的<div>元素，没有属性title的<div>元素也会被选中
*
匹配所有元素
$("*")选取所有元素
selected1，…,selectedN
将每一个选择器匹配到元素合并后一起返回
$("div,span,p.myClass")选取所有的<div>，<span>和拥有class为myClass的<p>标签的一组数据
层次选择器
$("ancestor descendant")
jQuery选择器速查表
分类
选择器
描述
示例
基本选择器
#id
根据给定的id匹配一个元素
$("#test")选取id为test的元素，返回单个元素
.class
根据给定的类名匹配元素
$(".class")选取所有class为test的元素
element
根据给定元素名匹配元素
$("p")选取所有的<p>元素
$(":header")选取网页中的所有的<h1><h2><h3>…
:animated
选取当前正在执行动画的所有元素
$("div:animated")选取正在执行动画的<div>元素
:contains(text)
选取含有文本内容为“text”的元素
$("div:contains('我')")选取含有文本“我”的<div>元素
[attribute*=value]
选取属性值含有value的元素
$("div*=value")选取属性title含有“test”的<div>元素
[selector1]，…，[selectorN]
用属性选择器合并成一个复合属性选择器，满足多个条件。
$("div[id][title$='test']")选取拥有属性id并且title以“test”结束的<div>元素
:even
选取索引是偶数的所有元素，索引从0开始
$("input:even")选取索引是偶数的<input>元素
:odd
选取索引是奇数的所有元素，索引从0开始
$("input:even")选取索引是奇数的<input>元素
:eq(index)
选取索引等于index的元素（index从0开始）
$("input:eq(1)")选取索引等于1的<input>元素
:hidden
选取所有不可见的元素
$(":hidden")选取所有不可见元素。包括<input type="hidden"/>,<div style="display:none;">和<div style="visibility:hidden;">等元素
:visible
选区所有可见的元素
$("div:visible")选区所有可见的<div>元素