Rumah > Artikel > hujung hadapan web > jQuery之常用的选择器分享
jQuery之常用的选择器分享
- 巴扎黑asal
- 2017-07-18 17:04:501320semak imbas
1、jQuery:（使用jQuery一定标明我们使用的版本号）
它是一个使用原生的JS来封装的常用的方法的类库（解决了浏览器的兼容问题）
2、jQuery中提供的方法
选择器
通过传递对应规则的内容（ID、标签名、样式类名...），获取到页面中指定的元素/元素集合
<!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>Atas ialah kandungan terperinci jQuery之常用的选择器分享. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：JavaScript高级程序设计介绍Artikel seterusnya：关于AMD和CMD以及UMD三种模块的规范以及写法格式详解