jquery选择器大全

发布时间：2020-05-25 03:27:08 所属栏目：PHP 来源：互联网

导读：没有什么新意，全是从网上摘抄的，如果哪天忘了，就来查查吧。选择器是jQuery最基础的东西，本文中列举的选择器基本上囊括了所有的jQuery选择器，也许各位通过这篇文章能够加深对jQuery选择器的理解，它们本身用法就非常简单，我更希望的是它能够提升个人编写

<p style="padding: 0px; margin: 12px auto; font-size: 14px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 25px; orphans: auto; text-align: left; text-indent: 0px; text-transform: none; white-space: normal; widows: auto; word-spacing: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; background-color: #eff4fa; color: #333333; font-family: Georgia,san-serif;"> 选择器是jQuery最基础的东西，本文中列举的选择器基本上囊括了所有的jQuery选择器，也许各位通过这篇文章能够加深对jQuery选择器的理解，它们本身用法就非常简单，我更希望的是它能够提升个人编写jQuery代码的效率。本文配合截图、代码和简单的概括对所有jQuery选择器进行了介绍，也列举出了一些需要注意和区分的地方。

<h1 style="padding: 5px; margin: 0px; border-width: 0px; font-style: normal; font-variant: normal; letter-spacing: normal; line-height: 25px; orphans: auto; text-align: left; text-indent: 0px; text-transform: none; white-space: normal; widows: auto; word-spacing: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; font-size: 26px; font-weight: normal; background-color: gray; color: white; font-family: Georgia,san-serif;">一、基本选择器
<h3 style="padding: 0px; margin: 0px; border-width: 0px; font-style: normal; font-variant: normal; letter-spacing: normal; line-height: 25px; orphans: auto; text-align: left; text-indent: 0px; text-transform: none; white-space: normal; widows: auto; word-spacing: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; background-color: #eff4fa; font-size: 18px; font-weight: normal; color: #333333; font-family: Georgia,san-serif;">1. id选择器（指定id元素）
<p style="padding: 0px; margin: 12px auto; font-size: 14px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 25px; orphans: auto; text-align: left; text-indent: 0px; text-transform: none; white-space: normal; widows: auto; word-spacing: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; background-color: #eff4fa; color: #333333; font-family: Georgia,san-serif;">将id="one"的元素背景色设置为黑色。（id选择器返单个元素）

<pre class="code">$(document).ready(function () {
$('p').css('font-size','12px');
});
<h3 style="padding: 0px; margin: 0px; border-width: 0px; font-style: normal; font-variant: normal; letter-spacing: normal; line-height: 25px; orphans: auto; text-align: left; text-indent: 0px; text-transform: none; white-space: normal; widows: auto; word-spacing: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; background-color: #eff4fa; font-size: 18px; font-weight: normal; color: #333333; font-family: Georgia,san-serif;">4. 选择器（遍历所有元素）
<pre class="code">$(document).ready(function () {
// 遍历form下的所有元素，将字体颜色设置为红色
$('form ').css('color','#FF0000');
});
<h3 style="padding: 0px; margin: 0px; border-width: 0px; font-style: normal; font-variant: normal; letter-spacing: normal; line-height: 25px; orphans: auto; text-align: left; text-indent: 0px; text-transform: none; white-space: normal; widows: auto; word-spacing: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; background-color: #eff4fa; font-size: 18px; font-weight: normal; color: #333333; font-family: Georgia,san-serif;">5. 并列选择器
<pre class="code">$(document).ready(function () {
// 将p元素和div元素的margin设为0
$('p,div').css('margin','0');
});

<hr style="padding: 0px; margin: 0px; font-size: 14px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 25px; orphans: auto; text-align: left; text-indent: 0px; text-transform: none; white-space: normal; widows: auto; word-spacing: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; background-color: #eff4fa; color: #333333; font-family: Georgia,san-serif;">
<h1 style="padding: 5px; margin: 0px; border-width: 0px; font-style: normal; font-variant: normal; letter-spacing: normal; line-height: 25px; orphans: auto; text-align: left; text-indent: 0px; text-transform: none; white-space: normal; widows: auto; word-spacing: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; font-size: 26px; font-weight: normal; background-color: gray; color: white; font-family: Georgia,san-serif;">二、层次选择器
<h3 style="padding: 0px; margin: 0px; border-width: 0px; font-style: normal; font-variant: normal; letter-spacing: normal; line-height: 25px; orphans: auto; text-align: left; text-indent: 0px; text-transform: none; white-space: normal; widows: auto; word-spacing: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; background-color: #eff4fa; font-size: 18px; font-weight: normal; color: #333333; font-family: Georgia,san-serif;">1. parent > child（直系子元素）
<pre class="code">$(document).ready(function () {
// 选取div下的第一代span元素，将字体颜色设为红色
$('div > span').css('color','#FF0000');
});
<p style="padding: 0px; margin: 12px auto; font-size: 14px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 25px; orphans: auto; text-align: left; text-indent: 0px; text-transform: none; white-space: normal; widows: auto; word-spacing: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; background-color: #eff4fa; color: #333333; font-family: Georgia,san-serif;">下面的代码，只有第一个span会变色，第二个span不属于div的一代子元素，颜色保持不变。

<pre class="code"><p class="item"></p>
<div>123</div>
<div>456</div>
<span class="item"></span>
<div>789</div>

<h3 style="padding: 0px; margin: 0px; border-width: 0px; font-style: normal; font-variant: normal; letter-spacing: normal; line-height: 25px; orphans: auto; text-align: left; text-indent: 0px; text-transform: none; white-space: normal; widows: auto; word-spacing: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; background-color: #eff4fa; font-size: 18px; font-weight: normal; color: #333333; font-family: Georgia,san-serif;">3. prev ~ siblings（prev元素的所有兄弟元素，等同于nextAll()方法）
<pre class="code">$(document).ready(function () {
// 选取class为inside之后的所有div兄弟元素
$('.inside ~ div').css('color','#FF0000');
// 等价代码
//$('.inside').nextAll('div').css('color',san-serif;">下面的代码，G2和G4会变色

<pre class="code"><div class="inside">G1</div>
<div>G2</div>
<span>G3</span>
<div>G4</div>

<hr style="padding: 0px; margin: 0px; font-size: 14px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 25px; orphans: auto; text-align: left; text-indent: 0px; text-transform: none; white-space: normal; widows: auto; word-spacing: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; background-color: #eff4fa; color: #333333; font-family: Georgia,san-serif;">三、过滤选择器
<h3 style="padding: 0px; margin: 0px; border-width: 0px; font-style: normal; font-variant: normal; letter-spacing: normal; line-height: 25px; orphans: auto; text-align: left; text-indent: 0px; text-transform: none; white-space: normal; widows: auto; word-spacing: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; background-color: #eff4fa; font-size: 18px; font-weight: normal; color: #333333; font-family: Georgia,san-serif;">1. 基本过滤选择器
<p style="padding: 0px; margin: 12px auto; font-size: 14px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 25px; orphans: auto; text-align: left; text-indent: 0px; text-transform: none; white-space: normal; widows: auto; word-spacing: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; background-color: #eff4fa; color: #333333; font-family: Georgia,san-serif;">——1.1:first和:last（取第一个元素或最后一个元素）

<p style="padding: 0px; margin: 12px auto; font-size: 14px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 25px; orphans: auto; text-align: left; text-indent: 0px; text-transform: none; white-space: normal; widows: auto; word-spacing: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; background-color: #eff4fa; color: #333333; font-family: Georgia,san-serif;">——1.3:even和:odd（取偶数索引或奇数索引元素，索引从0开始，even表示偶数，odd表示奇数）

<pre class="code"><table width="200" cellpadding="0" cellspacing="0">
<tbody>
<tr><td>A</td></tr>
<tr><td>B</td></tr>
<tr><td>C</td></tr>
<tr><td>D</td></tr>
</tbody>
</table>

<p style="padding: 0px; margin: 12px auto; font-size: 14px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 25px; orphans: auto; text-align: left; text-indent: 0px; text-transform: none; white-space: normal; widows: auto; word-spacing: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; background-color: #eff4fa; color: #333333; font-family: Georgia,san-serif;">——1.4:eq(x)（取指定索引的元素）

<p style="padding: 0px; margin: 12px auto; font-size: 14px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 25px; orphans: auto; text-align: left; text-indent: 0px; text-transform: none; white-space: normal; widows: auto; word-spacing: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; background-color: #eff4fa; color: #333333; font-family: Georgia,san-serif;">——1.5:gt(x)和:lt(x)（取大于x索引或小于x索引的元素）

<pre class="code"><h1>H1</h1>
<h2>H2</h2>
<h3>H3</h3>
<h4>H4</h4>
<h5>H5</h5>
<h6>H6</h6>

<h3 style="padding: 0px; margin: 0px; border-width: 0px; font-style: normal; font-variant: normal; letter-spacing: normal; line-height: 25px; orphans: auto; text-align: left; text-indent: 0px; text-transform: none; white-space: normal; widows: auto; word-spacing: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; background-color: #eff4fa; font-size: 18px; font-weight: normal; color: #333333; font-family: Georgia,san-serif;">2. 内容过滤选择器
<p style="padding: 0px; margin: 12px auto; font-size: 14px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 25px; orphans: auto; text-align: left; text-indent: 0px; text-transform: none; white-space: normal; widows: auto; word-spacing: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; background-color: #eff4fa; color: #333333; font-family: Georgia,san-serif;">——2.1:contains(text)（取包含text文本的元素）

<pre class="code">$(document).ready(function () {
// 为包含span元素的div添加边框
$('div:has(span)').css('border','1px solid #000');
});
<p style="padding: 0px; margin: 12px auto; font-size: 14px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 25px; orphans: auto; text-align: left; text-indent: 0px; text-transform: none; white-space: normal; widows: auto; word-spacing: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; background-color: #eff4fa; color: #333333; font-family: Georgia,san-serif;">即使span不是div的直系子元素，也会生效

<p style="padding: 0px; margin: 12px auto; font-size: 14px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 25px; orphans: auto; text-align: left; text-indent: 0px; text-transform: none; white-space: normal; widows: auto; word-spacing: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; background-color: #eff4fa; color: #333333; font-family: Georgia,san-serif;">jQuery至1.3.2之后的:hidden选择器仅匹配display:none或的元素，而不匹配visibility: hidden或opacity:0的元素。这也意味着hidden只匹配那些“隐藏的”并且不占空间的元素，像visibility:hidden或opactity:0的元素占据了空间，会被排除在外。

<p style="padding: 0px; margin: 12px auto; font-size: 14px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 25px; orphans: auto; text-align: left; text-indent: 0px; text-transform: none; white-space: normal; widows: auto; word-spacing: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; background-color: #eff4fa; color: #333333; font-family: Georgia,san-serif;">参照：<a style="padding: 0px; margin: 0px; color: #3d81ee; text-decoration: none; outline-style: none; border-bottom-width: 1px; border-bottom-style: dashed;" href="http://www.jquerysdk.com/api/hidden-selector">http://www.jquerysdk.com/api/hidden-selector

<pre class="code"><html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title></title>
<style type="text/css">
div
{
margin: 10px;
width: 200px;
height: 40px;
border: 1px solid #FF0000;
display:block;
}
.hid-1
{
display: none;
}
.hid-2
{
visibility: hidden;
}
</style>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('div:hidden').show(500);
alert($('input:hidden').val());
});
</script>
</head>
<body>
<div class="hid-1">display: none</div>
<div class="hid-2">visibility: hidden</div>
<input type="hidden" value="hello"/>
</body>
</html>
<p style="padding: 0px; margin: 12px auto; font-size: 14px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 25px; orphans: auto; text-align: left; text-indent: 0px; text-transform: none; white-space: normal; widows: auto; word-spacing: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; background-color: #eff4fa; color: #333333; font-family: Georgia,san-serif;">——3.2:visible（取可见的元素）

<pre class="code"><script type="text/javascript">
$(document).ready(function() {
$('a[title]').css('text-decoration','none');
});
</script>
<ul>
<li><a href="#" title="DOM对象和jQuery对象" class="item">DOM对象和jQuery对象</a></li>
<li><a href="#" title="jQuery选择器大全" class="item-selected">jQuery选择器大全</a></li>
<li><a href="#" title="jQuery事件大全" class="item">jQuery事件大全</a></li>
<li><a href="#" title="基于jQuery的插件开发" class="item">基于jQuery的插件开发</a></li>
<li><a href="#" title="Wordpress & jQuery" class="item">Wordpress & jQuery</a></li>
<li><a href="#" class="item">其他</a></li>
</ul>
<p style="padding: 0px; margin: 12px auto; font-size: 14px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 25px; orphans: auto; text-align: left; text-indent: 0px; text-transform: none; white-space: normal; widows: auto; word-spacing: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; background-color: #eff4fa; color: #333333; font-family: Georgia,san-serif;">——4.2[attribute = value]和[attribute != value]（取attribute属性值等于value或不等于value的元素）

JQUERY的父，子，兄弟节点查找方法

jQuery.parent(expr) 找父亲节点，可以传入expr进行过滤，比如$("span").parent()或者$("span").parent(".class")

jQuery.parents(expr),类似于jQuery.parents(expr),但是是查找所有祖先元素，不限于父元素

jQuery.children(expr).返回所有子节点，这个方法只会返回直接的孩子节点，不会返回所有的子孙节点

jQuery.contents(),返回下面的所有内容，包括节点和文本。这个方法和children()的区别就在于，包括空白文本，也会被作为一个

jQuery对象返回，children()则只会返回节点

jQuery.prev()，返回上一个兄弟节点，不是所有的兄弟节点

jQuery.prevAll()，返回所有之前的兄弟节点

jQuery.next(),返回下一个兄弟节点，不是所有的兄弟节点

jQuery.nextAll()，返回所有之后的兄弟节点

jQuery.siblings(),返回兄弟姐妹节点，不分前后

jQuery.find(expr),跟jQuery.filter(expr)完全不一样。jQuery.filter()是从初始的jQuery对象集合中筛选出一部分，而jQuery.find()

的返回结果，不会有初始集合中的内容，比如$("p"),find("span"),是从

,等同于$("p span")

jQuery 使用 CSS 选择器来选取 HTML 元素。$("p") 选取

元素。$("p.intro") 选取所有 class="intro" 的

元素。$("p#demo") 选取 id="demo" 的第一个

元素。

（编辑：安卓应用网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!