jquery中常用的选择器及其用法（关于Jquery选择器的介绍）

逗爷 2023-06-04 01:57:26 856

jquery中常用的选择器及其用法（关于Jquery选择器的介绍）选择器 JQuery中的基本选择器带有特定语法格式的字符串，用于对页面元素进行筛选包装集将选择器所选择的元素封装在一个类似于数组的JQuery对象中，该对象封装了所选择的元素

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

jquery中常用的选择器及其用法（关于Jquery选择器的介绍）(1)

JQuery第一个版本JQuery1.0发布时间是2006年1月，目前最新版本是JQuery3.1.0，JQuery2.0及后续版本已不再支持IE6/7/8浏览器。

同类JS库：DojoExtjs

选择器

带有特定语法格式的字符串，用于对页面元素进行筛选

包装集

将选择器所选择的元素封装在一个类似于数组的JQuery对象中，该对象封装了所选择的元素

JQuery中的基本选择器

选择器

描述

示例

#id

根据给定的id匹配一个元素

$(“#test”)

获得元素在包装集中的位置

index(element)

代码如图：

jquery中常用的选择器及其用法（关于Jquery选择器的介绍）(2)

对包装集进行筛选

添加元素到包装集：add(expression)

代码如图：

jquery中常用的选择器及其用法（关于Jquery选择器的介绍）(3)

删除包装集中的元素：not(expression)

代码如图：

jquery中常用的选择器及其用法（关于Jquery选择器的介绍）(4)

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

代码如图：

jquery中常用的选择器及其用法（关于Jquery选择器的介绍）(5)

获取包装集的子集：slice(begin end)

代码如图：

jquery中常用的选择器及其用法（关于Jquery选择器的介绍）(6)

选择器综合示例

<!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中常用的选择器及其用法（关于Jquery选择器的介绍）

猜您喜欢：

相关文章