Maison > Article > interface Web > Explication détaillée de jQuery selector_jquery
Explication détaillée de jQuery selector_jquery
- WBOYoriginal
- 2016-05-16 16:30:371317parcourir
Les sélecteurs sont la chose la plus élémentaire dans jQuery. Les sélecteurs répertoriés dans cet article incluent essentiellement tous les sélecteurs jQuery. Peut-être que vous pourrez approfondir votre compréhension des sélecteurs jQuery grâce à cet article. Leur utilisation est très simple. peut améliorer l'efficacité de l'écriture du code jQuery pour les particuliers. Cet article présente tous les sélecteurs jQuery avec des captures d'écran, du code et un résumé simple, et répertorie également certains domaines qui nécessitent une attention et une distinction.
1. Sélecteur de base
1. sélecteur d'identifiant (spécifiez l'élément d'identification)
Définissez la couleur d'arrière-plan de l'élément avec id="one" sur noir. (le sélecteur d'identifiant renvoie un seul élément)
$(document).ready(function () {<br> $('#one').css('background', '#000');<br> });
2. sélecteur de classe (traverse les éléments de classe CSS)
Définissez la couleur d'arrière-plan de l'élément avec class="cube" sur noir
$(document).ready(function () {<br> $('.cube').css('background', '#000');<br> });
3. sélecteur d'éléments (traverser les éléments html)
Définissez la taille du texte de l'élément p sur 12px
$(document).ready(function () {<br> $('p').css('font-size', '12px');<br> });<br>
4. * Sélecteur (traverser tous les éléments)
$(document).ready(function () {<br> // 遍历form下的所有元素，将字体颜色设置为红色<br> $('form *').css('color', '#FF0000');<br> });
5. Sélecteur de colonnes
$(document).ready(function () {
// 将p元素和div元素的margin设为0
$('p, div').css('margin', '0');
});
2. Sélecteur de niveau
1. parent > (élément enfant direct)
$(document).ready(function () {
// 选取div下的第一代span元素，将字体颜色设为红色
$('div > span').css('color', '#FF0000');
});
Dans le code suivant, seul le premier span changera de couleur. Le deuxième span n'appartient pas à la première génération d'éléments enfants du div, et la couleur reste inchangée.
<div>
<span>123</span>
<p>
<span>456</span>
</p>
</div>
2. prev next (élément frère suivant, équivalent à la méthode next())
$(document).ready(function () {
// 选取class为item的下一个div兄弟元素
$('.item + div').css('color', '#FF0000');
// 等价代码
//$('.item').next('div').css('color', '#FF0000');});
Dans le code ci-dessous, seuls 123 et 789 changeront de couleur
<p class="item"></p><br><div>123</div><br><div>456</div><br><span class="item"></span><br><div>789</div>
3. prev ~ siblings (tous les éléments frères de l'élément prev, équivalent à la méthode nextAll())
$(document).ready(function () {<br> // 选取class为inside之后的所有div兄弟元素<br> $('.inside ~ div').css('color', '#FF0000');<br> // 等价代码<br> //$('.inside').nextAll('div').css('color', '#FF0000');});
Avec le code suivant, G2 et G4 changeront de couleur
<div class="inside">G1</div><br><div>G2</div><br><span>G3</span><br><div>G4</div>
3. Sélecteur de filtre
1. Sélecteur de filtre de base
——1.1 :first et :last (prendre le premier élément ou le dernier élément)
$(document).ready(function () {<br> $('span:first').css('color', '#FF0000');<br> $('span:last').css('color', '#FF0000');<br> });
Avec le code suivant, G1 (premier élément) et G3 (dernier élément) changeront de couleur
<span>G1</span><br><span>G2</span><br><span>G3</span>
——1.2:non (prendre un non-élément)
$(document).ready(function () {<br> $('div:not(.wrap)').css('color', '#FF0000');<br> });
Le code suivant, G1 changera de couleur
<div>G1</div><br><div class="wrap">G2</div>
Veuillez toutefois noter le code suivant :
<div> <br> G1 <div class="wrap">G2</div> <br> </div>
Lorsque le div où se trouve G1 et le div où se trouve G2 ont une relation parent-enfant, G1 et G2 changeront de couleur.
——1.3 :even et :odd (prendre un index pair ou un élément d'index impair, l'index commence à 0, pair signifie un nombre pair, impair signifie un nombre impair)
$(document).ready(function () {<br> $('tr:even').css('background', '#EEE'); // 偶数行颜色<br> $('tr:odd').css('background', '#DADADA'); // 奇数行颜色<br> });
La couleur des lignes A et C est #EEE (l'index de la première ligne est 0), la couleur des lignes B et D est #DADADA
| A |
| B |
| C |
| D |
——1.4 :eq(x) (prendre l'élément à l'index spécifié)
$(document).ready(function () {<br> $('tr:eq(2)').css('background', '#FF0000');<br> });
Changez la couleur d'arrière-plan de la troisième ligne. Dans le code ci-dessus, l'arrière-plan de C changera de couleur.
——1.5 :gt(x) et :lt(x) (prendre les éléments supérieurs à l'indice x ou inférieurs à l'indice x)
$(document).ready(function () {<br> $('ul li:gt(2)').css('color', '#FF0000');<br> $('ul li:lt(2)').css('color', '#0000FF');<br> });
L4 et L5 seront rouges, L1 et L2 seront bleus, L3 est la couleur par défaut
- L1
- L2
- L3
- L4
- L5
——1.6 : en-tête (prendre les éléments de titre H1~H6)
$(document).ready(function () {<br> $(':header').css('background', '#EFEFEF');<br> });<br>
Avec le code suivant, la couleur de fond de H1 ~ H6 changera
<h1>H1</h1><br><h2>H2</h2><br><h3>H3</h3><br><h4>H4</h4><br><h5>H5</h5><br><h6>H6</h6>
2. Sélecteur de filtre de contenu
——2.1:contains(text) (récupère l'élément contenant le texte)
$(document).ready(<span style="color: blue">function </span>() {
<span style="color: #006400">// dd元素中包含"jQuery"文本的会变色
</span>$(<span style="color: maroon">'dd:contains("jQuery")'</span>).css(<span style="color: maroon">'color'</span>, <span style="color: maroon">'#FF0000'</span>);
});
Dans le code suivant, le premier dd changera de couleur
- 技术
- jQuery, .NET, CLR
- SEO
- 关键字排名
- 其他
——2.2 : vide (prend les éléments qui ne contiennent pas d'éléments enfants ou qui ont du texte vide)
$(document).ready(function () {<br> $('dd:empty').html('没有内容');<br>});<br>
Le troisième dd ci-dessus affichera le texte "Aucun contenu"
——2.3:has(selector) (prendre l'élément correspondant par le sélecteur)
$(document).ready(function () {<br> // 为包含span元素的div添加边框<br> $('div:has(span)').css('border', '1px solid #000');<br> });
Même si span n'est pas un élément enfant direct de div, il prendra effet
<div> <br> <h2> <br> A <span>B</span><br> </h2> <br> </div>
——2.4 :parent（取包含子元素或文本的元素）
$(document).ready(function () {<br> $('ol li:parent').css('border', '1px solid #000');<br> });
下面的代码，A和D所在的li会有边框
<ol> <br> <li> <br> <li>A</li> <br> <li> <br> <li>D</li> <br> </ol>
3. 可见性过滤选择器
——3.1 :hidden（取不可见的元素）
jQuery至1.3.2之后的:hidden选择器仅匹配display:none或的元素，而不匹配visibility: hidden或opacity:0的元素。这也意味着hidden只匹配那些“隐藏的”并且不占空间的元素，像visibility:hidden或 opactity:0的元素占据了空间，会被排除在外。
参照：http://www.jquerysdk.com/api/hidden-selector
下面的代码，先弹出"hello"对话框，然后hid-1会显示，hid-2仍然是不可见的。
http://www.w3.org/1999/xhtml" ><br><br> <title></title><br> <style type="text/css"><br /> div<br /> {<br /> margin: 10px;<br /> width: 200px;<br /> height: 40px;<br /> border: 1px solid #FF0000;<br /> display:block;<br /> }<br /> .hid-1<br /> {<br /> display: none;<br /> }<br /> .hid-2<br /> {<br /> visibility: hidden;<br /> }<br /> </style><br> <script type="text/javascript" src="js/jquery.min.js"></script><br> <script type="text/javascript"><br /> $(document).ready(function() {<br /> $('div:hidden').show(500);<br /> alert($('input:hidden').val());<br /> });<br /> </script><br><br><br> <div class="hid-1">display: none</div><br> <div class="hid-2">visibility: hidden</div><br> <input type="hidden" value="hello"><br><br>
——3.2 :visible（取可见的元素）
下面的代码，最后一个div会有背景色
<script type="text/javascript"><br /> $(document).ready(function() { $('div:visible').css('background', '#EEADBB'); });</script><br><div class="hid-1">display: none</div><br><div class="hid-2">visibility: hidden</div><br><input type="hidden" value="hello"><br><div>
<br> jQuery选择器大全</div>
4. 属性过滤选择器
——4.1 [attribute]（取拥有attribute属性的元素）
下面的代码，最后一个a标签没有title属性，所以它仍然会带下划线
<script type="text/javascript"><br /> $(document).ready(function() { $('a[title]').css('text-decoration', 'none'); }); </script> <br>
——4.2 [attribute = value]和[attribute != value]（取attribute属性值等于value或不等于value的元素）
分别为class="item"和class!=item的a标签指定文字颜色
<script type="text/javascript"><br /> $(document).ready(function() {<br /> $('a[class=item]').css('color', '#FF99CC');<br /> $('a[class!=item]').css('color', '#FF6600');<br /> });</script>
——4.3 [attribute ^= value], [attribute $= value]和[attribute *= value]（attribute属性值以value开始，以value结束，或包含value值）
在属性选择器中，^$符号和正则表达式的开始结束符号表示的含义是一致的，*模糊匹配，类似于sql中的like '%str%'。
<script type="text/javascript"><br /> // 识别大小写，输入字符串时可以输入引号，[title^=jQuery]和[title^="jQuery"]是一样的<br /> $('a[title^=jQuery]').css('font-weight', 'bold');<br /> $('a[title$=jQuery]').css('font-size', '24px');<br /> $('a[title*=jQuery]').css('text-decoration', 'line-through');</script>
——4.4 [selector1][selector2]（复合型属性过滤器，同时满足多个条件）
将title以"jQuery"开始，并且class="item"的a标签隐藏，那么jQuery事件大全会被隐藏
<script type="text/javascript"><br /> $(document).ready(function() {<br /> $('a[title^=jQuery][class=item]').hide();<br /> });<br /> </script>
5. 子元素过滤选择器
——5.1 :first-child和:last-child
:first-child表示第一个子元素，:last-child表示最后一个子元素。
需要大家注意的是，:fisrst和:last返回的都是单个元素，而:first-child和:last-child返回的都是集合元素。举个 例子：div:first返回的是整个DOM文档中第一个div元素，而div:first-child是返回所有div元素下的第一个元素合并后的集 合。
这里有个问题：如果一个元素没有子元素，:first-child和:last-child会返回null吗？请看下面的代码：
http://www.w3.org/1999/xhtml" ><br><br> <title></title><br> <script type="text/javascript" src="js/jquery.min.js"></script><br> <script type="text/javascript"><br /> $(document).ready(function() {<br /> var len1 = $('div:first-child').length;<br /> var len2 = $('div:last-child').length;<br /> });<br /> </script><br><br><br><div>
<br> <div>
<br> <div></div>
<br> </div>
<br>
</div><br><br>
也许你觉得这个答案，是不是太简单了？len1 = 2, len2 = 2。但实际确并不是，它们俩都等于3。
把上面的代码稍微修改一下：
http://www.w3.org/1999/xhtml" ><br><br> <title></title><br> <script type="text/javascript" src="js/jquery.min.js"></script><br> <script type="text/javascript"><br /> $(document).ready(function() {<br /> var len1 = $('div:first-child').length;<br /> var len2 = $('div:last-child').length;<br /> $('div:first-child').each(function() {<br /> alert($(this).html());<br /> });<br /> });<br /> </script><br><br><br><div>123<br> <div>456<br> <div></div>
<br> </div>
<br>
</div><br><br>
结果却是弹出三个alert，只不过最后一个alert里面是空白的。
——5.2 :only-child
当某个元素有且仅有一个子元素时，:only-child才会生效。
http://www.w3.org/1999/xhtml" ><br><br> <title></title><br> <script type="text/javascript" src="js/jquery.min.js"></script><br> <script type="text/javascript"><br /> $(document).ready(function() {<br /> $('div:only-child').css('border', '1px solid #FF0000').css('width','200px');<br /> });<br /> </script><br><br><br><div>123<br> <div>456<br> <div></div>
<br> </div>
<br>
</div><br><br>
这里:only-child也是三个元素，从最后一个很粗的红色边框（实际是两个元素的边框重叠了）也可以看出来。
——5.3 :nth-child
看到这个就想起英文单词里的，fourth, fifth, sixth……，nth表示第n个，:nth-child就表示第n个child元素。要注意的是，这儿的n不像eq(x)、gt(x)或lt(x)是从 0开始的，它是从1开始的，英文里好像也没有zeroth这样的序号词吧。
:nth-child有三种用法：
1) :nth-child(x)，获取第x个子元素
2) :nth-child(even)和:nth-child(odd)，从1开始，获取第偶数个元素或第奇数个元素
3) :nth-child(xn+y)，x>=0，y>=0。例如x = 3, y = 0时就是3n，表示取第3n个元素（n>=0）。实际上xn+y是上面两种的通项式。（当x=0,y>=0时，等同于:hth- child(x)；当x=2,y=0时，等同于nth-child(even)；当x=2,y=1时，等同于:nth-child(odd)）
下面的两个例子是针对2)和3)的，1)的例子我就不列举了。
例2：
http://www.w3.org/1999/xhtml" ><br><br> <title></title><br> <style type="text/css"><br /> <br /> td {<br /> width: 200px;<br /> height: 32px;<br /> line-height: 32px;<br /> }<br /> <br /> </style><br> <script type="text/javascript" src="js/jquery.min.js"></script><br> <script type="text/javascript"><br /> $(document).ready(function() {<br /> // 偶数行背景红色<br /> $('tr:nth-child(even)').css('background', '#FF0000');<br /> // 奇数行背景蓝色<br /> $('tr:nth-child(odd)').css('background', '#0000FF');<br /> });<br /> </script><br><br><br>
| 1. NBA 2012季后赛 |
| 2. NBA 2011季后赛 |
| 3. NBA 2010季后赛 |
| 4. NBA 2009季后赛 |
| 5. NBA 2008季后赛 |
| 6. NBA 2007季后赛 |
例3（html代码和例2是一样的）：
<script type="text/javascript"><br /> $(document).ready(function() {<br /> $('tr:nth-child(3n)').css('background', '#0000FF');<br /> });</script><br>
6. 表单对象属性过滤选择器
——6.1 :enabled和:disabled（取可用或不可用元素）
:enabled和:diabled的匹配范围包括input, select, textarea。
<script type="text/javascript"><br /> $(document).ready(function() {<br /> $(':enabled').css('border', '1px solid #FF0000');<br /> $(':disabled').css('border', '1px solid #0000FF');<br /> });<br /> </script><br> <div>
<br> <input type="text" value="可用的文本框"><br> </div><br> <div>
<br> <input type="text" disabled value="不可用的文本框"><br> </div><br> <div>
<br> <textarea disabled>不可用的文本域</textarea><br> </div><br> <div>
<br> <select disabled><br> <option>English</option>
<br> <option>简体中文</option>
<br> </select><br> </div>
——6.2 :checked（取选中的单选框或复选框元素）
下面的代码，更改边框或背景色仅在IE下有效果，chrome和firefox不会改变，但是alert都会弹出来。
<script type="text/javascript"><br /> $(document).ready(function() {<br /> $(':checked').css('background', '#FF0000').each(function() {<br /> alert($(this).val());<br /> });<br /> });</script><br><div>
<br> <input type="checkbox" checked value="must">必须勾选</div><br><div>你现在工作的企业属于：<br> <input type="radio" name="radio" checked value="外企">外企<br> <input type="radio" name="radio" value="国企">国企<br> <input type="radio" name="radio" value="民企">民企</div>
——6.3 :selected（取下拉列表被选中的元素）
<script type="text/javascript"><br /> $(document).ready(function() {<br /> alert($(':selected').val());<br /> });</script><br><select><br> <option value="外企">外企</option>
<br> <option value="国企">国企</option>
<br> <option value="私企">私企</option>
<br></select>
四、表单选择器
1. :input（取input,textarea,select,button元素）
:input元素这里就不再多说了，前面的一些例子中也已经囊括了。
2. :text（取单行文本框元素）和:password（取密码框元素）
这两个选择器分别和属性选择器$('input[type=text]')、$('input[type=password]')等同。
<script type="text/javascript"><br /> $(document).ready(function() {<br /> $(':text').css('border', '1px solid #FF0000');<br /> $(':password').css('border', '1px solid #0000FF');</script>
// 等效代码<br> //$('input[type=text]').css('border', '1px solid #FF0000');<br> //$('input[type=password]').css('border', '1px solid #0000FF');<br> });<br>
3. :radio（取单选框元素）
:radio选择器和属性选择器$('input[type=radio]')等同
<script type="text/javascript"><br /> $(document).ready(function() {<br /> $(':radio').each(function() {<br /> alert($(this).val());<br /> });<br /> // 等效代码<br /> /*<br /> $('input[type=radio]').each(function() {<br /> alert($(this).val());<br /> });<br /> */<br /> });</script>你现在工作的企业属于：<br> <input type="radio" name="radio" checked value="外企">外企<br> <input type="radio" name="radio" value="国企">国企<br> <input type="radio" name="radio" value="民企">民企
4. :checkbox（取复选框元素）
:checkbox选择器和属性选择器$('input[type=checkbox]')等同
<script type="text/javascript"><br /> $(document).ready(function() {<br /> $(':checkbox').each(function() {<br /> alert($(this).val());<br /> });<br /> // 等效代码<br /> /*<br /> $('input[type=checkbox]').each(function() {<br /> alert($(this).val());<br /> });<br /> */<br /> });</script><br> 您的兴趣爱好：<br> <input type="checkbox">游泳<br> <input type="checkbox">看书<br> <input type="checkbox" checked value="打篮球">打篮球<br> <input type="checkbox" checked value="电脑游戏">电脑游戏
上面的代码，会将所有额checkbox的value输出出来。若你想选择选中项，有三种写法：
$(':checkbox:checked').each(function() {<br> alert($(this).val());<br>});<br>$('input[type=checkbox][checked]').each(function() {<br> alert($(this).val());<br>});<br>$(':checked').each(function() {<br> alert($(this).val());<br>});
5. :submit（取提交按钮元素）
:submit选择器和属性选择器$('input[type=submit]')等同
6. :reset（取重置按钮元素）
:reset选择器和属性选择器$('input[type=reset]')等同
7. :button（取按钮元素）
:button选择器和属性选择器$('input[type=button]')等同
8. :file（取上传域元素）
:file选择器和属性选择器$('input[type=file]')等同
9. :hidden (récupérer les éléments invisibles)
: Le sélecteur caché est équivalent au sélecteur d'attribut $('input[type=hidden]')
Ce qui précède représente l'intégralité du contenu du sélecteur jQuery, est-il très complet ? S'il manque quelque chose, faites-le moi savoir et cet article continuera à être mis à jour.
Articles Liés
Voir plus- Une analyse approfondie du composant de groupe de liste Bootstrap
- Explication détaillée du currying de la fonction JavaScript
- Exemple complet de génération de mot de passe JS et de détection de force (avec téléchargement du code source de démonstration)
- Angularjs intègre l'interface utilisateur WeChat (weui)
- Comment basculer rapidement entre le chinois traditionnel et le chinois simplifié avec JavaScript et l'astuce permettant aux sites Web de prendre en charge le basculement entre les compétences en chinois simplifié et traditionnel_javascript