jQuery：基础1---选择器

最新推荐文章于 2021-09-01 11:35:20 发布

qq_34802511

最新推荐文章于 2021-09-01 11:35:20 发布

阅读量220

点赞数

分类专栏： jquery

本文链接：https://blog.csdn.net/qq_34802511/article/details/83817569

版权

jquery 专栏收录该内容

23 篇文章 1 订阅

订阅专栏

jQuery的使用：引入jQuery文件

<script src="jquery-1.11.3.js" type="text/javascript"></script>

jQuery对象

1、什么是jQuery对象
jQuery对象是由jQuery对页面元素进行封装后的一种体现。
jQuery中所提供的所有操作都只针对jQuery对象，其他对象(DOM对象)无法使用。

2、工厂函数-$()
想要获取jQuery对象的话，则必须使用工厂函数$()。
在$()中允许传递一个选择器或者DOM对象作为参数，$()能够将选择器和 DOM对象全部封装成jQuery对象再进行返回。

3、DOM对象和jQuery对象之间的转换
DOM对象：不能使用jQuery提供的操作
jQuery对象：不能使用DOM提供的操作
1、将Dom对象转换为jQuery对象
语法：var 变量 = $(DOM对象);
注意：所有的对象在起名的时候，最好在变量前加上$，主要用于和DOM对象的区分。

<div id="main">这是id为main的div</div>
<script>
    //1、通过DOM的操作，得到id为main的元素
    var main = document.getElementById("main");
    //2、再将其转换为jQuery对象
    var $main = $(main);
    $main.html("转换为JQ对象成功!!!");
</script>

2、将jQuery对象转换为Dom对象
1.var dom对象 = jQuery对象[0];
2.var dom对象 = jQuery对象.get(0);

<div id="main">这是id为main的div</div>
<script>
    //1、使用jQuery获取id为main的元素
    var $main = $("#main");
    //2、再将其转换为DOM元素
    //var m = $main[0];
    var m = $main.get(0);
    m.innerHTML="转换为DOM对象成功!!";
</script>

jQuery选择器

1、作用：获取页面上的元素们，返回值都是由jQuery对象所组成的数组
语法：$("选择器")

2、常用选择器

<!-- 1.基本选择器 -->
<div id="main">
    <p id="p1" class="c1">床前明月光</p>
    <p id="p2" class="c2">疑是地上霜</p>
    <p id="p3" class="c2">举头望明月</p>
    <p id="p4" class="c3">低头思故乡</p>
    <p id="p1" class="c2">更上一层楼</p>
</div>
<script>
    // ID选择器：返回页面中指定ID值的元素。
    var a = $("#p1");                            //返回值：单个元素的组成的集合
    console.log(a);                              //结  果：[p#p1.c1]
    console.log(typeof a, a.length, a.html());   //结  果：object  1  床前明月光

    // 类选择器：返回页面中指定className的所有元素。className是值。
    var b = $(".c2");                            //返回值：集合元素
    console.log(b);                              //结  果：[p#p2.c2, p#p3.c2, p#p1.c2, prevObject: w.fn.init(1)]  
    console.log(typeof b, b.length, b.html());   //结果：object  3  疑是地上霜

    // 元素选择器：返回页面中指定标记的所有元素。
    var c = $("p");                              //返回值：集合元素
    console.log(c);                              //结  果：[p#p1.c1, p#p2.c2, p#p3.c2, p#p4.c3, p#p1.c2, prevObject: w.fn.init(1)]  
    console.log(typeof c, c.length, c.html());   //结  果：object  5  床前明月光

    // 群组选择器/复合选择器：返回满足函数内所有选择器的函数们。
    // 用法: $("div,span,p.myClass")             
    // 说明: 将每一个选择器匹配到的元素合并后一起返回.你可以指定任意多个选择器, 并将匹配到的元素合并到一个结果内。其中p.myClass是表示匹配元素。
    var d = $("#p1, #p2, .c3");                  //返回值：集合元素
    console.log(d);                              //结  果：[p#p1.c1, p#p2.c2, p#p4.c3, p#p1.c2, prevObject: w.fn.init(1)]                               
    console.log(typeof d, d.length, d.html());   //结  果：object  4  床前明月光
</script>

<!-- 2.层级选择器 -->
<div id="main">
    <p id="p1" class="c1">床前明月光</p>
    <p id="p2" class="c2">疑是地上霜</p>
    <p id="p3" class="c2">举头望明月</p>
    <p id="p4" class="c3">低头思故乡</p>
    <div id="p1" class="c2">
        <p id="p1" class="c2">欲穷千里目</p>
	<p id="p6" class="c4">更上一层楼</p>
        <input class="form-control" name="title" id="title">
    </div>
</div>
<script>
    // 后代选择器：$("selector1 selector2")
    var a = $("#main #p1");
    var b = $("#main .c2");
    var c = $("#main p");
    console.log(a);                              //结果：[p#p1.c1, div#p1.c2, p#p1.c2, prevObject: w.fn.init(1)]
    console.log(b);                              //结果：[p#p2.c2, p#p3.c2, div#p1.c2, p#p1.c2, prevObject: w.fn.init(1)]
    console.log(c);                              //结果：[p#p1.c1, p#p2.c2, p#p3.c2, p#p4.c3, p#p1.c2, p#p6.c4, prevObject: w.fn.init(1)]
    console.log(typeof a, a.length, a.html());   //结果：object  3  床前明月光
    console.log(typeof b, b.length, b.html());   //结果：object  4  疑是地上霜
    console.log(typeof c, c.length, c.html());   //结果：object  6  床前明月光


    // 子代选择器：$("selector1>selector2")
    var a = $("#main>#p1");
    var b = $("#main>.c2");
    var c = $("#main>p");
    console.log(a);                              //结果：[p#p1.c1, div#p1.c2, prevObject: w.fn.init(1)]
    console.log(b);                              //结果：[p#p2.c2, p#p3.c2, div#p1.c2, prevObject: w.fn.init(1)]
    console.log(c);                              //结果：[p#p1.c1, p#p2.c2, p#p3.c2, p#p4.c3, p#p1.c2, prevObject: w.fn.init(1)]
    console.log(typeof a, a.length, a.html());   //结果：object  2  床前明月光
    console.log(typeof b, b.length, b.html());   //结果：object  3  疑是地上霜
    console.log(typeof c, c.length, c.html());   //结果：object  4  床前明月光


    // 相邻兄弟选择器：$("selector1+selector2")
    // 作用：匹配紧紧跟在selector1后面且满足selector2选择器的元素
    var a1 = $("#p1+#p2");
    var a2 = $("#p1+#p3");
    var a3 = $("#p1+#p6");
    var b1 = $("#p1+.c2");
    var c1 = $("#p1+p");
    console.log(a1);                                 //结果：[p#p2.c2, prevObject: w.fn.init(1)]
    console.log(a2);                                 //结果：[prevObject: w.fn.init(1)]
    console.log(a3);                                 //结果：[p#p6.c4, prevObject: w.fn.init(1)]
    console.log(b1);                                 //结果：[p#p2.c2, prevObject: w.fn.init(1)]
    console.log(c1);                                 //结果：[p#p2.c2, p#p6.c4, prevObject: w.fn.init(1)]
    console.log(typeof a1, a1.length, a1.html());   //结果：object  1  疑是地上霜
    console.log(typeof a2, a2.length, a2.html());   //结果：object  0  undefined
    console.log(typeof a3, a3.length, a3.html());   //结果：object  1  更上一层楼
    console.log(typeof b1, b1.length, b1.html());   //结果：object  1  疑是地上霜
    console.log(typeof c1, c1.length, c1.html());   //结果：object  2  疑是地上霜


    // 通用兄弟选择器：$("selector1~selector2")
    // 作用：匹配selector1后面所有满足selector2选择器的元素
    var a1 = $("#p1~#p2");
    var a2 = $("#p1~#p3");
    var a3 = $("#p1~#p6");
    var b1 = $("#p1~.c2");
    var c1 = $("#p1~p");
    console.log(a1);                                 //结果：[p#p2.c2, prevObject: w.fn.init(1)]
    console.log(a2);                                 //结果：[p#p3.c2, prevObject: w.fn.init(1)]
    console.log(a3);                                 //结果：[p#p6.c4, prevObject: w.fn.init(1)]
    console.log(b1);                                 //结果：[p#p2.c2, p#p3.c2, div#p1.c2, prevObject: w.fn.init(1)]
    console.log(c1);                                 //结果：[p#p2.c2, p#p3.c2, p#p4.c3, p#p6.c4, prevObject: w.fn.init(1)]
    console.log(typeof a1, a1.length, a1.html());   //结果：object 1 疑是地上霜
    console.log(typeof a2, a2.length, a2.html());   //结果：object 1 举头望明月
    console.log(typeof a3, a3.length, a3.html());   //结果：object 1 更上一层楼
    console.log(typeof b1, b1.length, b1.html());   //结果：object 3 疑是地上霜
    console.log(typeof c1, c1.length, c1.html());   //结果：object 4 疑是地上霜


    // 附加：选择器
    // 后代选择器：$("s1 s2)
    $("#father p").css("backgroundColor", "pink");
    // 子代选择器：$("s1>s2")
    $("#father>p").css("backgroundColor", "blue");
    // 交集选择器：$("s1s2")
    $("div.red").css("backgroundColor", "red");
    // 并集选择器：$("s1,s2")
    $(".green, #green").css("backgroundColor", "green");
</script>

<!-- 3.基本过滤选择器：过滤选择器通常都会配合着其他的选择器一起使用 -->
<div id="main">
    <p id="p1" class="c1">床前明月光</p>
    <p id="p2" class="c2">疑是地上霜</p>
    <p id="p3" class="c2">举头望明月</p>
    <p id="p4" class="c3">低头思故乡</p>
    <div id="p1" class="c2">
        <p id="p1" class="c2">欲穷千里目</p>
        <p id="p6" class="c4">更上一层楼</p>
        <input class="form-control" name="title" id="title">
    </div>
</div>
<script>
    // 1、:first：只匹配一组元素中的第一个元素
    var a1 = $("p:first");
    console.log(a1);                                 //结果：[p#p1.c1, prevObject: w.fn.init(1)]
    console.log(typeof a1, a1.length, a1.html());   //结果：object  1  床前明月光

    // 2、:last：只匹配一组元素中的最后一个元素
    var a2 = $("p:last");
    console.log(a2);                                 //结果：[p#p6.c4, prevObject: w.fn.init(1)]
    console.log(typeof a2, a2.length, a2.html());   //结果：object  1  更上一层楼

    // 3、:not("selector")：在一组元素中，将满足selector选择器的元素排除出去
    var a3 = $("p:not('#p1')");
    console.log(a3);                                 //结果：[p#p2.c2, p#p3.c2, p#p4.c3, p#p6.c4, prevObject: w.fn.init(1)]
    console.log(typeof a3, a3.length, a3.html());   //结果：object  4  疑是地上霜

    // 4、:odd：匹配 偶数行 元素(奇数下标)
    var b1 = $("p:odd");
    console.log(b1);                                 //结果：[p#p2.c2, p#p4.c3, p#p6.c4, prevObject: w.fn.init(1)]
    console.log(typeof b1, b1.length, b1.html());   //结果：object  3  疑是地上霜

    // 5、:even：匹配 奇数行 元素(偶数下标)
    var b2 = $("p:even");
    console.log(b2);                                 //结果：[p#p1.c1, p#p3.c2, p#p1.c2, prevObject: w.fn.init(1)]
    console.log(typeof b2, b2.length, b2.html());   //结果：object  3  床前明月光

    // 6、:eq(index)：匹配 下标等于 index 的元素
    var c1 = $("p:eq(2)");
    console.log(c1);                                 //结果：[p#p3.c2, prevObject: w.fn.init(1)]
    console.log(typeof c1, c1.length, c1.html());   //结果：object  1  举头望明月

    // 7、:gt(index)：匹配 下标大于 index 的元素
    var c2 = $("p:gt(2)");
    console.log(c2);                                 //结果：[p#p4.c3, p#p1.c2, p#p6.c4, prevObject: w.fn.init(1)]
    console.log(typeof c2, c2.length, c2.html());   //结果：object  3  低头思故乡

    // 8、:lt(index)：匹配 下标小于 index 的元素
    var c3 = $("p:lt(2)");
    console.log(c3);                                 //结果：[p#p1.c1, p#p2.c2, prevObject: w.fn.init(1)]
    console.log(typeof c3, c3.length, c3.html());   //结果：object  2  床前明月光

    // 9、:header(固定写法)。
    // 用法: $(":header").css("background", "#EEE")    返回值  集合元素
    // 说明: 匹配如 h1, h2, h3之类的标题元素，这个是专门用来获取h1,h2这样的标题元素。

    // 10、:animated(固定写法)   返回值  集合元素
    // 说明: 匹配所有正在执行动画效果的元素。
</script>

<!-- 4.属性过滤选择器：依托于html元素的属性来进行元素过滤的 -->
<div id="main" class="main">
    <p id="p1" class="c1" name="n1">床前明月光</p>
    <p id="p2" class="c2" name="n2">疑是地上霜</p>
    <div id="p1" class="c2">
        <p id="p3" class="c3" >欲穷千里目</p>
        <p id="p4" class="c4" name="n2">更上一层楼</p>
    </div>
</div>
<script>
    // 1、[attribute]：匹配包含指定属性的元素
    var a = $("p[name]");
    console.log(a);                               //结果：[p#p1.c1, p#p2.c2, p#p4.c4, prevObject: w.fn.init(1)]
    console.log(typeof a, a.length, a.html());   //结果：object  3  床前明月光

    // 2、[attribute=value]：匹配attribute属性值为value的元素
    // input[type=text]  input[type=password]
    var b1 = $("p[name=n2]");
    var b2 = $("p[name=n3]");
    console.log(b1);                                //结果：[p#p2.c2, p#p4.c4, prevObject: w.fn.init(1)]
    console.log(b2);                                //结果：[prevObject: w.fn.init(1)]
    console.log(typeof b1, b1.length, b1.html());  //结果：object  2  疑是地上霜
    console.log(typeof b2, b2.length, b2.html());  //结果：object  0  undefined

    // 3、[attribute!=value]：匹配attribute属性值不是value的元素
    var c = $("p[name!=n2]");
    console.log(c);                               //结果：[p#p1.c1, p#p3.c3, prevObject: w.fn.init(1)]
    console.log(typeof c, c.length, c.html());   //结果：object  2  床前明月光

    // 4、[attribute^=value]：匹配attribute属性值是以value字符开头的元素
    var d = $("p[name^=n]");
    console.log(d);                               //结果：[p#p1.c1, p#p2.c2, p#p4.c4, prevObject: w.fn.init(1)]
    console.log(typeof d, d.length, d.html());   //结果：object  3  床前明月光

    // 5、[attribute$=value]：匹配attribute属性值是以value字符结尾的元素
    var e = $("p[name$=2]");
    console.log(e);                               //结果：[p#p2.c2, p#p4.c4, prevObject: w.fn.init(1)]
    console.log(typeof e, e.length, e.html());   //结果：object  2  疑是地上霜

    // 6、[attribute*=value]：匹配attribute属性值中包含value字符的元素
</script>

<!-- 5.子元素过滤选择器 -->
<p id="p1">床前明月光</p>
<p id="p2">疑是地上霜</p>
<p id="p3">举头望明月</p>
<p id="p4">低头思故乡</p>
<div id="dd">
    <p id="p5">白日依山尽</p>
    <p id="p6">黄河入海流</p>
    <p id="p7">欲穷千里目</p>
    <p id="p8">更上一层楼</p>
</div>
<script>
    // 1、:first-child：匹配属于其父元素中的首个子元素
    var a = $("p:first");
    var b = $("p:first-child");
    console.log(a);        //结果：[p#p1, prevObject: w.fn.init(1)]
    console.log(b);        //结果：[p#p1, p#p5, prevObject: w.fn.init(1)]

    // 2、:last-child： 匹配属于其父元素中的最后一个子元素
    var c = $("p:last-child");
    console.log(c);        //结果：[p#p8, prevObject: w.fn.init(1)]

    // 3、:nth-child(n)：匹配属于其父元素中第n个子元素
    var d = $("p:nth-child(2)");
    console.log(d);        //结果：[p#p2, p#p6, prevObject: w.fn.init(1)]
</script>


<div id="cc">
    <p id="p1">床前明月光</p>
    <p id="p2">疑是地上霜</p>
    <p id="p3">举头望明月</p>
    <p id="p4">低头思故乡</p>
</div>
<div id="dd">
    <p id="p5">白日依山尽</p>
    <p id="p6">黄河入海流</p>
    <p id="p7">欲穷千里目</p>
    <p id="p8">更上一层楼</p>
</div>
<script>
    // 1、:first-child：匹配属于其父元素中的首个子元素
    var a = $("p:first");
    var b = $("p:first-child");
    console.log(a);        //结果：[p#p1, prevObject: w.fn.init(1)]
    console.log(b);        //结果：[p#p1, p#p5, prevObject: w.fn.init(1)]

    // 2、:last-child： 匹配属于其父元素中的最后一个子元素
    var c = $("p:last-child");
    console.log(c);        //结果：[p#p4, p#p8, prevObject: w.fn.init(1)]

    // 3、:nth-child(n)：匹配属于其父元素中第n个子元素
    var d = $("p:nth-child(2)");
    console.log(d);        //结果：[p#p2, p#p6, prevObject: w.fn.init(1)]
</script>


<div id="dd">
    <p id="p5">白日依山尽</p>
    <p id="p6">黄河入海流</p>
    <p id="p7">欲穷千里目</p>
    <p id="p8">更上一层楼</p>
</div>
<p id="p1">床前明月光</p>
<p id="p2">疑是地上霜</p>
<p id="p3">举头望明月</p>
<p id="p4">低头思故乡</p>
<script>
    // 1、:first-child：匹配属于其父元素中的首个子元素
    var a = $("p:first");
    var b = $("p:first-child");
    console.log(a);        //结果：[p#p5, prevObject: w.fn.init(1)]
    console.log(b);        //结果：[p#p5, prevObject: w.fn.init(1)]

    // 2、:last-child： 匹配属于其父元素中的最后一个子元素
    var c = $("p:last-child");
    console.log(c);        //结果：[p#p8, p#p4, prevObject: w.fn.init(1)]

    // 3、:nth-child(n)：匹配属于其父元素中第n个子元素
    var d = $("p:nth-child(2)");
    console.log(d);        //结果：[p#p6, p#p1, prevObject: w.fn.init(1)]
</script>

qq_34802511

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery：基础1---选择器

jQuery的使用：引入jQuery文件&lt;script src="jquery-1.11.3.js" type="text/javascript"&gt;&lt;/script&gt;jQuery对象1、什么是jQuery对象 jQuery对象是由jQuery对页面元素进行封装后的一种体现。 jQuery中所提供的所有操作都只针对jQuery对象，其他对象(...
复制链接

扫一扫

专栏目录