领先的免费Web技术教程，涵盖HTML到ASP.NET

网站首页 > 知识剖析 正文

关于Jquery选择器的介绍? jquery选择器的使用

nixiaole 2024-11-10 12:33:31 知识剖析 17 ℃

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>

    <!--size()方法jQuery1.8中被废弃，使用length代替-->

    <div>这个是div1</div>

    <div id="id_div">这个是div2</div>

    <div>这个是div3</div>

</body>

</html>



Tags：

猜你喜欢

最近发表
标签列表