jquery选择器和基本操作

时间：2021-10-22 08:50:50

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

实例:

 $("#test").html() 

          意思是指：获取ID为test的元素内的html代码。其中html()是jQuery里的方法 

          这段代码等同于用DOM实现代码： document.getElementById(" test ").innerHTML; 

          虽然jQuery对象是包装DOM对象后产生的，但是jQuery无法使用DOM对象的任何方法，同理DOM对象也不能使用jQuery里的方法.乱使用会报错

          约定：如果获取的是 jQuery 对象, 那么要在变量前面加上$. 

 var $variable = jQuery 对象

 var variable = DOM 对象

 $variable[0]：jquery对象转为dom对象      $("#msg").html(); $("#msg")[0].innerHTML

1.选择器和筛选器

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Title</title>

     <script src="jquery-3.3.1.js"></script>

 </head>

 <body>

 <div class="c2">

     <p class="c4">111</p>

     <p class="c4">222</p>

     <div><p class="c4">123</p></div>

     <a id="a1" href="">click</a>

 </div>

 <p class="c4">234</p>

 <p class="c4">234</p>

 <div  alex="dsb" peiqi="" class="c21">alex和配齐</div>

 <div alex="dsb">alex</div>

 <div peiqi="">8888</div>

 <div class="p1">

      <p class="c3" id="i3">222</p>

      <p class="c3">333</p>

      <p class="c3" id="i2">444</p>

      <p class="c3">555</p>

      <p class="c3 c8">666</p>

      <p class="c3">777</p>

 </div>

 <div class="c5">

     <input type="checkbox">

     <input type="checkbox">

     <input type="checkbox">

 </div>

 <div class="c9">

     <p>111</p>

     <p>222</p>

     <div class="c10">

         <p>333</p>

     </div>

     <a href="">click</a>

 </div>

 <script>

     /*

     // 01 选择器

     // 1.1 基本选择器

     //$("*").css("color","red")

     // $(".c2").css("color","red")

     // $("#a1").css("color","red")

     // $("p").css("color","green")

 // 1.2 层级选择器

     //$(".c2 div").css("color","green")

     //$(".c2 p").css("color","green")  //子孙后代

     //$(".c2>p").css("color","green") //仅限儿子们

     //$(".c2+p").css("color","red") //同级下一个 剩下的不要

     //$(".c2~p").css("color","red") //同级下面P标签全要

 // 1.3 基本筛选器

     //$(".c3:first").css("color","red");

     //$(".c3:eq(2)").css("color","red"); // eq(索引号)

     //$(".c3:gt(1)").css("color","red");  //gt(1)索引大于1的标签

     //$(".c3:lt(4)").css("color","red");  //lt(1)索引小于4的标签

     //$(".c3:even").css("color","red"); //偶数

     //$(".c3:odd").css("color","red");  //奇数

 //1.4 属性选择器

     //$("[peiqi]").css("color","red");

     //$("[alex='dsb'][peiqi]").css("color","red");

 //1.5 表单选择器

         //以下三种写法效果一样

     //$("[type='checkbox']").attr("checked","checked");

     //$(":checkbox").attr("checked","checked")

     //$("input:checkbox").attr("checked","checked")  //仅限input标签

      */

     /*

     // 02 进阶筛选器

     // $(".c3").first().css("color","red");

     // var index=3;

     // $(".c3:"+"eq("+index+")").css("color","red"); //这种写法不方便赋值,不推荐

     // $(".c3").eq(index).css("color","red");

      // 判断某个标签是否拥有某个class名

  //    console.log($("[alex]").hasClass("c21"));

      */

     /*

     // 03 导航选择器

         //3.1 查找兄弟标签

     //  $("#i2").next().css("color","red");

     //  $("#i2").nextAll().css("color","red");

     //  $("#i2").nextUntil(".c8").css("color","red");

     //  $("#i2").prev().css("color","red");

     //  $("#i2").prevAll().css("color","red");

     //  $("#i2").prevUntil("#i3").css("color","red");

     //  $("#i2").siblings().css("color","red"); //除选中标签外的兄弟标签 很重要

     // 3.2 查找子孙标签

     // console.log($(".c9").children());  //结果:jQuery.fn.init(4) [p, p, div.c10, a, prevObject: jQuery.fn.init(1)]

 //     $(".c9").children().first().css("color","red");

 //     $(".c9").children("p").css("color","red"); //只查找到儿子那一代的p

 //     $(".c9").find("p").css("color","red"); //查找子孙所有P

 //     $(".c9").children(".c10").css("color","red");

     // 3.3查找父类标签

     // console.log($(".c10").parent()); //只查找到父亲

     // console.log($(".c10").parents()); //父亲,爷爷.....

      // $(".c10").parentsUntil()

      */

 </script>

 </body>

 </html>

2.事件绑定

 <ul class="box">

     <li>123</li>

     <li>234</li>

     <li>456</li>

     <li>567</li>

     <li class="c1">678</li>

 </ul>

 <button class="add">ADD</button>

 <script src="jquery-3.3.1.js"></script>

 <script>

     //基本形式 $().事件(function(){})

     // 01 普通绑定事件

     // $(".box li").click(function(){

     //     alert($(this).html())

     // })

     // 委托绑定  绑定父类.on(指定事件类型,指定子标签,指定函数)

     //  $(".box").on("click","li",function(){

     //       alert($(this).html())

     //  })

     //

     // $(".add").click(function(){

     //     $(".box").append("<li>789</li>")

     // })

3.jquery操作

 <p><a href="">123</a></p>

 <script>

     // 01 文本操作

     // console.log($("p").html());

     // console.log($("p").text());

     // $("p").text("<a href=''>456</a>");

     // $("p").html("<a href=''>456</a>");

     //02 属性操作

     // $().attr("")

     // $().attr("","")

     // $("p").attr("alex")

     // $("p").attr("alex","dsb")

     // $("p").removeAttr("class")

     // 03 class操作

     // $("p").addClass("c1")

     // $("p").removeClass("c1")

     //04 jquery 获取索引值

4补充:jquery索引获取

 ul>

 <li id="foo">foo</li>

 <li id="bar">bar</li>

 <li id="baz">baz</li>

 </ul>

 <script>

     i1 = $('li').index(document.getElementById('bar')); //1，传递一个DOM对象，返回这个对象在原先集合中的索引位置

     i2 = $('li').index($('#baz')); //1，传递一个jQuery对象

     i3 = $('li').index($('li:gt(0)')); //1，传递一组jQuery对象，返回这个对象中第一个元素在原先集合中的索引位置

     i4 = $('#baz').index('li'); //1，传递一个选择器，返回#bar在所有li中的索引位置

     i5 = $('#baz').index(); //1，不传递参数，返回这个元素在同辈中的索引位置。

     console.log(i1,i2,i3,i4,i5)

 </script>

 <!--//用于二级或者三级联动 -->

 <div id="nav">

 <a href="http://www.jbxue.com/">建站素材</a>

 <a href="http://www.jbxue.com/">jquery特效</a>

 <a href="http://www.jbxue.com/">脚本学堂</a>

 <a href="http://www.jbxue.com/wb/">网站编程</a>

 </div>

 <script>

     $("#nav a").click(function(){

     //四个经典的用法

         var index1 = $("#nav a").index(this);

         var index2 = $("#nav a").index($(this));

         var index3 = $(this).index()

         var index3 = $(this).index("a")

         alert(index3);

         return false;

     });

 </script>

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

相关文章