关于Jquery选择器的介绍？ / 开普饭

JQuery是一套Javascript脚本库.使用JQuery将极大的提高编写javascript代码的效率,让写出来的代码更加优雅,更加健壮.

JQuery第一个版本JQuery1.0发布时间是2006年1月，目前最新版本是JQuery3.1.0，JQuery2.0及后续版本已不再支持IE6/7/8浏览器。同类JS库：DojoExtjs选择器带有特定语法格式的字符串，用于对页面元素进行筛选包装集将选择器所选择的元素封装在一个类似于数组的JQuery对象中，该对象封装了所选择的元素JQuery中的基本选择器选择器描述示例#id根据给定的id匹配一个元素$(“#test”)选取id为test的元素.class根据给定的类名匹配元素$(“.test”)选取所有class为test的元素element根据给定的元素名称匹配元素$(“p”)选取所有的<p>元素Selector1,Selector2,Selector3...将每一个选择器匹配到的元素合并后一起返回$(“div,span,p.cls”)选取所有<div>，<span>和拥有class为cls的<p>标签的一组元素*匹配所有元素$(“*”)选取所有的元素选择器语法：1、通过ID选取元素语法：$("#id")2、通过类名获取元素语法：$(".className")3、通过标签名获取元素语法：$("tagName")4、一次性获取多个元素语法：$("selector1,selector2,select3...")确定包装集的大小1、使用size()方法(JQuery1.8中被废弃，使用length代替)代码如图：

获得元素在包装集中的位置index(element)代码如图：

对包装集进行筛选添加元素到包装集：add(expression)代码如图：

删除包装集中的元素：not(expression)代码如图：

对包装集中的元素进行过滤：filter(expression)代码如图：

获取包装集的子集：slice(begin,end)代码如图：

选择器综合示例<!DOCTYPE html><html><head> <meta charset="UTF-8"> <script src="../assets/js/jquery-3.1.1.min.js"></script> <title>选择器</title></head><body> <script> $(function () { alert("包装集的大小"+$("div").length); alert("元素在包装类中的位置"+$("div").index($("#id_div"))); //div和p元素都加上css样式 $("div").add("p").css("background-color","yellow"); //div和p元素不添加样式 $("div").not($("#id_div")).css("background-color","orange"); //对包装集中的元素进行过滤 $("div").filter($("#id_div")).css("background-color","beige"); //获取包装集的子集：slice（begin,end） $("div").slice(1,3).css("background-color","cyan"); }) </script>  <div>这个是div1</div> <div id="id_div">这个是div2</div> <div>这个是div3</div></body></html>

关于Jquery选择器的介绍？

相关推荐