Maison > Article > interface Web > Partage des sélecteurs couramment utilisés dans jQuery
Partage des sélecteurs couramment utilisés dans jQuery
- 巴扎黑original
- 2017-07-18 17:04:501320parcourir
1. jQuery : (Lorsque vous utilisez jQuery, vous devez indiquer le numéro de version que nous utilisons)
Il s'agit d'une bibliothèque de classes qui utilise JS natif pour encapsuler les méthodes couramment utilisées. (Problèmes de compatibilité du navigateur résolus)
2. Méthodes fournies dans jQuery
Sélecteur
En passant le contenu de la règle correspondante (ID, nom de balise, nom de classe de style...), l'élément/collection d'éléments spécifié dans la page est obtenu
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id='div1'>
<div>
<span></span>
<span></span>
<span></span>
</div>
<div></div>
<div id='div3'></div>
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<script>//原生JS获取到的结果属于元素对象/元素集合/节点集合...他们可以使用浏览器为其提供的那些天生自带的属性和方法//原生的JS对象不能直接的使用jQuery中提供的属性和方法var oDiv = document.getElementById('div1')
oDiv.clientWidth
oDiv.getAttribute//jq获取到的结果是一个jQuery对象，可以使用jQuery里面提供的属性和方法，但是不能直接的使用浏览器内置的属性和方法var $oDiv = jQuery("#div1")//$("#div1") $oDiv.innerWidth();
$oDiv.attr//关于原生JS对象和jQuery对象之间的转换//1)、原生的转变成jQuery:$(原生JS对象) $(oDiv)//2)、jQuery转化成原生：直接通过索引获取对应的元素对象即可$oDiv[0]
$oDiv.get(0)//<==>$oDiv[0]都是通过索引来获取指定位置的元素（JS原生对象）//更多的jQuery选择器$('#div1')
$('div')
$('.w100')
$('*')
$('#div1,div,.w100')//把每一个选择器获取到的jQuery对象最后融合在一起，最后一起获取到$('#div1 li')//在子子孙孙级中进行查找$('#div1>li')//在子级中进行查找$('#div3+')//获取它的下一个弟弟$('#div3+ul')//获取它的下一个弟弟并且标签名是ul的$('#div3~')//获取它的所有的弟弟元素$('#div3~ul')//获取它的所有的弟弟元素并且标签名为ul的$('#div1>div:not(.w100)')//#div1下的所有子集div样式类名不包含w100的$('#div1>div:eq(0)')//通过索引获取到集合中的某一个，但是获取到的结果依然是一个jQuery对象（而get方法也是通过索引获取，但是获取到的是一个JS原生对象）$('#div1>div:gt(1)')//大于索引1的（不包含索引1的）$('#div1>div:lt(1)')//小于索引1的（不包含索引1的）$('#div1 li:contains("我")')//获取所有的li内容包含“我” 的$('#div1 div:has(ul)')//在所有的div中包含ul的$('#div1>*:nth-child(1)')//获取所有的子元素的第一个$('#div1>*:eq(1)')//获取所有的子元素的第二个（索引为1）</script>
</body>
</html>Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!
Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Introduction à la programmation avancée JavaScriptArticle suivant：Introduction à la programmation avancée JavaScript