<返回更多

关于Jquery选择器的介绍?

2021-06-24    开课吧科科
加入收藏

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

关于Jquery选择器的介绍?

 

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代替)

代码如图:

关于Jquery选择器的介绍?

 

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

index(element)

代码如图:

关于Jquery选择器的介绍?

 

对包装集进行筛选

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

代码如图:

关于Jquery选择器的介绍?

 

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

代码如图:

关于Jquery选择器的介绍?

 

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

代码如图:

关于Jquery选择器的介绍?

 

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

代码如图:

关于Jquery选择器的介绍?

 

选择器综合示例

<!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>
声明:本站部分内容来自互联网,如有版权侵犯或其他问题请与我们联系,我们将立即删除或处理。
▍相关推荐
更多资讯 >>>