jQuery简介与选择器

最新推荐文章于 2021-03-25 21:22:11 发布

JM12138

最新推荐文章于 2021-03-25 21:22:11 发布

阅读量279

点赞数

CC 4.0 BY-SA版权

分类专栏： jQuery 笔记文章标签： jQuery 初学者

本文链接：https://blog.youkuaiyun.com/l_jia_ming/article/details/78726582

笔记同时被 2 个专栏收录

12 篇文章

订阅专栏

jQuery

9 篇文章

订阅专栏

本文详细介绍jQuery选择器的各种类型，包括基础选择器、属性选择器、基础过滤选择器等，通过实例帮助理解每个选择器的功能及应用场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

jQuery简介
一、jQuery简介
1 概念：jQuery是一个优秀的JavaScript库，而非JavaScript，它是轻量级的库
2 兼容性：兼容css3，以及各种浏览器
3 版本：
1x ——-兼容低端浏览器
2x ——-兼容从IE9开始以及各种高端浏览器
4 jQuery使用户能更方便的处理HTML、event、实现动画效果，并且更方便的为网站提供Ajax交互。
5 优势：它的文档说明很全，而且各种应用也说的很详细，同时还有许多成熟的插件可供选择。
6 核心理念：write less，do more！

二、jQuery语法
基础语法： $(selector).action( ) (1) 美元符号$ 定义jQuery
(2) 选择符(selector) “查询” 和 “查找” HTML元素
(3) jQuery的action()执行对元素的操作

jQuery选择器

一、基础选择器
1 ” * ” 选择所有元素 $(” * “) 使用可能造成某些浏览器运行缓慢，慎重使用； 2 “.class” 选择给定样式类名的所有元素$ (“.class”);
3 “elements” 根据给定(HTML)标记名称选择所有的元素 $(“element”); 4 “#id” 选择一个具有给定id属性的单个元素语法：$ (“#id”)；
5 混合 Selector(“selector1,selector2,selectorN”) 将每一个选择器匹配到的元素合并后一起返回。$(“1,2,3”)；

演示代码：

HTML部分
<div class="div1" name="aa"> 66666 <a name="a">222</a> </div>
<p id="p1">555</p>
<p>555</p>
<i name="aaa">111</i>
<i name="bbb">333</i>
<i name="ccc">444</i>

<br/>
<div>
    <i name="aaaa dd">111111</i>
    <i name="ccc dd">333333</i>
    <i name="fff dd">444444</i>
    <div style="width: 100px;height: 20px"></div>
    <div  style="width: 100px;height: 20px"></div>
</div>
<div>
    <i name="aaaa dd">aaa</i>
    <i name="ccc dd">ggg</i>
    <i name="fff dd">ssss</i>
    <div style="width: 100px;height: 20px; border: 1px solid red"></div>
    <i></i>
</div>
<div  style="width: 100px;height: 20px;background-color: green"></div>
<div class="div1" name="aa"> 66666 <a name="a">222</a> </div>
<p id="p1">555</p>
<p>555</p>
<i name="aaa">111</i>
<i name="bbb">333</i>
<i name="ccc">444</i>

<br/>
<div>
    <i name="aaaa dd">111111</i>
    <i name="ccc dd">333333</i>
    <i name="fff dd">444444</i>
    <div style="width: 100px;height: 20px"></div>
    <div  style="width: 100px;height: 20px"></div>
</div>
<div>
    <i name="aaaa dd">aaa</i>
    <i name="ccc dd">ggg</i>
    <i name="fff dd">ssss</i>
    <div style="width: 100px;height: 20px; border: 1px solid red"></div>
    <i></i>
</div>
<div  style="width: 100px;height: 20px;background-color: green"></div>

基础选择器js部分
$("#p1").css("color","red");
        $(".div1").css("color","green");
        $("div a").css("color","blue");
        $("*").css("font-size","23px")
        $("#p1,.div1, div a").css("color","red");;
        $("i").css("color","grey");

二、属性选择器
1 Attribute Contains Selector[name|=”value”]
描述：选择指定属性值等于给定字符串或以该字符串为前缀(该字符串后跟一个连接符”-”)的元素
语法：$(“[attribute|=’value’]”)
注意：引号是可选的，可以是不带引号的一个单词或者带引号的一个字符串

2 Attribute Contains Selector[name*=”value”]
描述：选择指定属性包含一个给定子字符串的元素
语法：$(“[attribute*=’value’]”)

3 Attribute Contains Word Selector[name~=”value”]
描述：选择指定属性用空格分隔的值中包含一个给定值的元素
语法：$(“[attribute~=’value’]”)

4 Attribute Selector[“name = ‘value’”]
描述：选择指定属性是给定值的元素
语法：$(“[attribute=’value’]”)

5 Attribute Not Equal Selector[name != value]
描述：选择不存在属性，或者指定的属性值不等于给定值的元素
语法：$(“[attribute!=’value’]”)

6 Attribute End With Selector[“name $= ‘value’”] 描述：选择指定属性以定值结尾的元素，该比较是区分大小写的语法：$ (“[attribute$=’value’]”)

7 Attribute Start with Selector[“name ^= ‘value’”]
描述：选择指定属性是给字符串值开始的元素
语法：$(“[attribute=’value’]”)

8 Has Attribute Selector[name]
描述：选择具有指定属性的元素，该属性可以是任意值
语法：$(“[attribute]”)

属性选择器js演示（HTML同上）

         $("[name='aaa']").css("color","red");
        $("[name*='aa']").css("color","blue");
        $("[name~='dd']").css("color","yellow");
        $("[name|='aaa']").css("color","yellow");
        $("[name!='aaa']").css("color","yellow");
        $("[name$='dd']").css("color","yellow");
         $("[name^='a']").css("color","yellow");
         $("[name]").css("color","yellow");

三、基础过滤

1 :animated Selector
描述：选择所有正在执行动画效果的元素
语法：$(“:animated”)

2 :eq() Selector
描述：在匹配的集合中选择索引值为index的元素
语法：(1) $(“:eq(index)”):index:要匹配元素的索引值(从0开始计数) (2)$ (“:eq(-index)”):-index:要匹配元素的索引值(从0开始计数)，从最后一个元素开始倒计数。

3 :even Selector
描述：选择索引值为偶数的元素，从0开始计数，也可查看odd(奇数)，
语法：$(“:even”)

4 :first Selector
描述：选择第一个匹配的元素
语法：$(“:first ”)

5 :focus Selector
描述：选择当前获取焦点的元素
语法：$(“:focus”)

6 :Header Selector
描述：选择所有标题元素，像h1,h2,h3
语法：$(“:header”)

7 :last Selector
描述：选择最后一个匹配的元素
语法：$(“:last”)

8 :gt() Selector
描述：选择匹配集合中所有大于给定ndex(索引值)的元素
语法： $(“gt(index)”)或者$ (:gt(-index));

9 :lt() Selector
描述：选择匹配集合中所有小于给定ndex(索引值)的元素
语法： $(“lt(index)”)或者$ (:lt(-index));

10:not() Seletor
描述：选择所有元素去除不匹配的给定的选择器的元素
语法：$(“:not(selector)”)

基础过滤js演示（HTML同上）

  //eq选择器
        /*$("i:eq(1)").css("color","yellow");//从0 开始
        $("div i:eq(1)").css("color","yellow");*/

        //even odd选择器
       /* $("i:even").css("color","yellow");
        */

        //:first last
        /*$("div i:first").css("color","blue");
        $("div i:first-child").css("color","blue");*/
        //$(":first").css("color","blue");   //这句有毒

        //$("div i:last").css("color","blue");
        /*$("i:last").css("color","blue");
        $(":last").css("color","blue");
        $("div i:last-child").css("color","blue");*/

        //gt选择器：大于   it选择器：小于
        //$("i:gt(1)").css("color","blue");
        //$("div i:gt(1)").css("color","green");
        //$("i:gt(-3)").css("color","blue");
        //$("i:it(-3)").css("color","blue");

        //:not选择器
        //$("p:not(.p1)").css("color","blue");

四、子元素过滤
1 :first-child 选择所有父级元素下的第一个子元素 $(:first-child) 2 :last-child 选择所有父级元素下的最后一个子元素$ (:last-child)
3 :first-of-type 具有相同元素名称的第一个兄弟元素 $(:first-of-type) 4 :nth-child 父元素的第n个子元素$ (:nth-child)
子元素过滤js演示（HTML同上）

//子元素过滤
        //:first-child   :last-child  :first-of-type:具有相同元素名称的第一个兄弟元素
        //$("div:first-of-type").css("font-size","50px");
        //$("div:last-of-type").css("font-size","50px");
        //:nth-child  父元素的第n个子元素
       // $("i:nth-child(1)").css("font-size","50px");

五、内容过滤
1 :contains() 选择包含指定文本的元素
2 :empty 选择没有子元素的元素包括文本节点
3 :has() 选择元素其中至少包含指定选择器匹配的一个种元素
4 :parent 选择所有含有子元素或者文本的父级元素

内容过滤js演示（HTML同上）

//$("i:contains(111)").css("color","blue");
 //$("div:empty").css("background-color","blue");       //$("div:not(div:has([name~='dd']))").css("background-color","blue");

六、表单选择器
1 :button 选择所有按钮元素和类型为按钮的元素
2 :CheckBox 选择所有类型为复选框的元素
3 :checked 选择所有被选中的元素
4 :disabled 选择所有被禁用的元素
5 : enable 选择所有可用的元素
6 :file 选择所有类型为file的元素
7 :focus 选择当前获取焦点的元素
8 :image选择所有类型为图片的元素
9 :input选择所有类型为输入的元素
10 :password选择所有类型为密码的元素
11 :radio选择所有类型为单选的元素
12 :submit选择所有类型为提交的元素

七、层级选择器
1 子元素选择器parent>child
// $(“div:empty”).css(“background-color”,”blue”); 2 后代选择器ancester空格descendant（一个用来筛选后代元素的选择器） //$ (“div i:contains(111)”).css(“background-color”,”blue”);
3 相邻选择器prev+next
选择所有紧跟在prev后面的next元素
// $(“i+div”).css(“background-color”,”blue”); 4 prev~ siblings nextsiblings选择器匹配prev后所有的兄弟元素。具有相同父元素，并匹配过滤siblings选择器 //$ (“div i~div”).css(“background-color”,”blue”);