jquery选择器和基本操作

Posted mixtea

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了jquery选择器和基本操作相关的知识,希望对你有一定的参考价值。

 

定义:jQuery 对象就是通过jQuery包装DOM对象后产生的对象。jQuery 对象是 jQuery 独有的如果一个对象是 jQuery 对象那么它就可以使用 jQuery 里的方法: $(“#test”).html();

实例:

技术图片
 1 $("#test").html() 
 2    
 3          意思是指:获取ID为test的元素内的html代码。其中html()是jQuery里的方法 
 4 
 5          这段代码等同于用DOM实现代码: document.getElementById(" test ").innerHTML; 
 6 
 7          虽然jQuery对象是包装DOM对象后产生的,但是jQuery无法使用DOM对象的任何方法,同理DOM对象也不能使用jQuery里的方法.乱使用会报错
 8 
 9          约定:如果获取的是 jQuery 对象, 那么要在变量前面加上$. 
10 
11 var $variable = jQuery 对象
12 var variable = DOM 对象
13 
14 $variable[0]:jquery对象转为dom对象      $("#msg").html(); $("#msg")[0].innerHTML
View Code

 

1.选择器和筛选器

技术图片
  1 <!DOCTYPE html>
  2 <html lang="en">
  3 <head>
  4     <meta charset="UTF-8">
  5     <title>Title</title>
  6     <script src="jquery-3.3.1.js"></script>
  7 </head>
  8 <body>
  9 
 10 <div class="c2">
 11     <p class="c4">111</p>
 12     <p class="c4">222</p>
 13     <div><p class="c4">123</p></div>
 14     <a id="a1" href="">click</a>
 15 </div>
 16 <p class="c4">234</p>
 17 <p class="c4">234</p>
 18 
 19 <div  alex="dsb" peiqi="678" class="c21">alex和配齐</div>
 20 <div alex="dsb">alex</div>
 21 <div peiqi="678">8888</div>
 22 
 23 
 24 <div class="p1">
 25      <p class="c3" id="i3">222</p>
 26      <p class="c3">333</p>
 27      <p class="c3" id="i2">444</p>
 28      <p class="c3">555</p>
 29      <p class="c3 c8">666</p>
 30      <p class="c3">777</p>
 31 </div>
 32 
 33 <div class="c5">
 34     <input type="checkbox">
 35     <input type="checkbox">
 36     <input type="checkbox">
 37 </div>
 38 
 39 
 40 <div class="c9">
 41     <p>111</p>
 42     <p>222</p>
 43     <div class="c10">
 44         <p>333</p>
 45     </div>
 46     <a href="">click</a>
 47 </div>
 48 
 49 <script>
 50     /*
 51     // 01 选择器
 52     // 1.1 基本选择器
 53     //$("*").css("color","red")
 54     // $(".c2").css("color","red")
 55     // $("#a1").css("color","red")
 56     // $("p").css("color","green")
 57 // 1.2 层级选择器
 58     //$(".c2 div").css("color","green")
 59     //$(".c2 p").css("color","green")  //子孙后代
 60     //$(".c2>p").css("color","green") //仅限儿子们
 61     //$(".c2+p").css("color","red") //同级下一个 剩下的不要
 62     //$(".c2~p").css("color","red") //同级下面P标签全要
 63 
 64 // 1.3 基本筛选器
 65     //$(".c3:first").css("color","red");
 66     //$(".c3:eq(2)").css("color","red"); // eq(索引号)
 67     //$(".c3:gt(1)").css("color","red");  //gt(1)索引大于1的标签
 68     //$(".c3:lt(4)").css("color","red");  //lt(1)索引小于4的标签
 69     //$(".c3:even").css("color","red"); //偶数
 70     //$(".c3:odd").css("color","red");  //奇数
 71 
 72 //1.4 属性选择器
 73     //$("[peiqi]").css("color","red");
 74     //$("[alex=‘dsb‘][peiqi]").css("color","red");
 75 
 76 //1.5 表单选择器
 77         //以下三种写法效果一样
 78     //$("[type=‘checkbox‘]").attr("checked","checked");
 79     //$(":checkbox").attr("checked","checked")
 80     //$("input:checkbox").attr("checked","checked")  //仅限input标签
 81 
 82      */
 83 
 84     /*
 85     // 02 进阶筛选器
 86     // $(".c3").first().css("color","red");
 87     // var index=3;
 88     // $(".c3:"+"eq("+index+")").css("color","red"); //这种写法不方便赋值,不推荐
 89     // $(".c3").eq(index).css("color","red");
 90      // 判断某个标签是否拥有某个class名
 91  //    console.log($("[alex]").hasClass("c21"));
 92 
 93      */
 94 
 95     /*
 96     // 03 导航选择器
 97         //3.1 查找兄弟标签
 98     //  $("#i2").next().css("color","red");
 99     //  $("#i2").nextAll().css("color","red");
100     //  $("#i2").nextUntil(".c8").css("color","red");
101     //  $("#i2").prev().css("color","red");
102     //  $("#i2").prevAll().css("color","red");
103     //  $("#i2").prevUntil("#i3").css("color","red");
104     //  $("#i2").siblings().css("color","red"); //除选中标签外的兄弟标签 很重要
105 
106     // 3.2 查找子孙标签
107     // console.log($(".c9").children());  //结果:jQuery.fn.init(4) [p, p, div.c10, a, prevObject: jQuery.fn.init(1)]
108 //     $(".c9").children().first().css("color","red");
109 //     $(".c9").children("p").css("color","red"); //只查找到儿子那一代的p
110 //     $(".c9").find("p").css("color","red"); //查找子孙所有P
111 //     $(".c9").children(".c10").css("color","red");
112 
113     // 3.3查找父类标签
114     // console.log($(".c10").parent()); //只查找到父亲
115     // console.log($(".c10").parents()); //父亲,爷爷.....
116      // $(".c10").parentsUntil()
117      */
118 
119 
120 
121 
122 
123 
124 
125 
126 </script>
127 
128 </body>
129 </html>
View Code

 

2.事件绑定

技术图片
 1 <ul class="box">
 2     <li>123</li>
 3     <li>234</li>
 4     <li>456</li>
 5     <li>567</li>
 6     <li class="c1">678</li>
 7 </ul>
 8 <button class="add">ADD</button>
 9 
10 <script src="jquery-3.3.1.js"></script>
11 <script>
12     //基本形式 $().事件(function(){})
13     // 01 普通绑定事件
14     // $(".box li").click(function(){
15     //     alert($(this).html())
16     // })
17 
18     // 委托绑定  绑定父类.on(指定事件类型,指定子标签,指定函数)
19     //  $(".box").on("click","li",function(){
20     //       alert($(this).html())
21     //  })
22     //
23     // $(".add").click(function(){
24     //     $(".box").append("<li>789</li>")
25     // })
View Code

 

3.jquery操作

技术图片
 1 <p><a href="">123</a></p>
 2 
 3 <script>
 4     // 01 文本操作
 5     // console.log($("p").html());
 6     // console.log($("p").text());
 7     // $("p").text("<a href=‘‘>456</a>");
 8     // $("p").html("<a href=‘‘>456</a>");
 9 
10     //02 属性操作
11     // $().attr("")
12     // $().attr("","")
13     // $("p").attr("alex")
14     // $("p").attr("alex","dsb")
15     // $("p").removeAttr("class")
16 
17     // 03 class操作
18     // $("p").addClass("c1")
19     // $("p").removeClass("c1")
20 
21     //04 jquery 获取索引值
View Code

 

4补充:jquery索引获取

技术图片
 1 ul>
 2 <li id="foo">foo</li>
 3 <li id="bar">bar</li>
 4 <li id="baz">baz</li>
 5 </ul>
 6 
 7 <script>
 8     i1 = $(li).index(document.getElementById(bar)); //1,传递一个DOM对象,返回这个对象在原先集合中的索引位置
 9     i2 = $(li).index($(#baz)); //1,传递一个jQuery对象
10     i3 = $(li).index($(li:gt(0))); //1,传递一组jQuery对象,返回这个对象中第一个元素在原先集合中的索引位置
11     i4 = $(#baz).index(li); //1,传递一个选择器,返回#bar在所有li中的索引位置
12     i5 = $(#baz).index(); //1,不传递参数,返回这个元素在同辈中的索引位置。
13     console.log(i1,i2,i3,i4,i5)
14 </script>
15 
16 
17 <!--//用于二级或者三级联动 -->
18 <div id="nav">
19 <a href="http://www.jbxue.com/">建站素材</a>
20 <a href="http://www.jbxue.com/">jquery特效</a>
21 <a href="http://www.jbxue.com/">脚本学堂</a>
22 <a href="http://www.jbxue.com/wb/">网站编程</a>
23 </div>
24 
25 <script>
26     $("#nav a").click(function(){
27     //四个经典的用法
28         var index1 = $("#nav a").index(this);
29         var index2 = $("#nav a").index($(this));
30         var index3 = $(this).index()
31         var index3 = $(this).index("a")
32         alert(index3);
33         return false;
34     });
35 </script>
View Code

 

参考自:https://www.cnblogs.com/yuanchenqi/articles/6936986.html?tdsourcetag=s_pctim_aiomsg

以上是关于jquery选择器和基本操作的主要内容,如果未能解决你的问题,请参考以下文章

jQuery 常用选择器和方法以及遍历(超详细)

jQuery选择器和DOM操作——《锋利的jQuery》(第2版)读书笔记1

如何结合 JQuery 选择器和变量来缩短代码以便于扩展?

13 -3 jquery选择器和 jquery动画

JQuery语法,选择器和事件

jQuery选择器和筛选器