分享

关于Jquery选择器的介绍?

 码农9527 2021-06-23

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

web

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

    同类JS库:DojoExtjs

    选择器

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

    包装集

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

    JQuery中的基本选择器

选择器

描述

示例

#id

根据给定id匹配个元素

$(“#test”)

选取idtest

元素

.class

根据给定类名配元素

$(“.test”)

选取所有class

test的元素

element

根据给定元素匹配元素

$(“p”)

选取所有

<p>元素

Selector1,

Selector2,

Selector3

...

将每一选择器匹配到素合并一起返回

$(“div,span,p.cls”)

选取所有<div><span>

拥有classcls

<p>标签的一组元素

*

匹配所有元素

$(“*”)

选取所有的元素

    选择器语法:

    1、通过ID选取元素

    语法:$("#id")

    2、通过类名获取元素

    语法:$(".className")

    3、通过标签名获取元素

    语法:$("tagName")

    4、一次性获取多个元素

    语法:$("selector1,selector2,select3...")

    确定包装集的大小

    1、使用size()方法(JQuery1.8中被废弃,使用length代替)

    代码如图:

web

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

    index(element)

    代码如图:

web

    对包装集进行筛选

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

    代码如图:

Java

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

    代码如图:

Java

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

    代码如图:

web

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

    代码如图:

web

    选择器综合示例

<!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>

    转藏 分享 献花(0

    0条评论

    发表

    请遵守用户 评论公约

    类似文章 更多