當(dāng)前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

jquery选择器和基本操作

發(fā)布時(shí)間：2025/3/15 编程问答 22 豆豆

生活随笔收集整理的這篇文章主要介紹了 jquery选择器和基本操作小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

定義:jQuery?對(duì)象就是通過jQuery包裝DOM對(duì)象后產(chǎn)生的對(duì)象。jQuery?對(duì)象是?jQuery?獨(dú)有的.?如果一個(gè)對(duì)象是?jQuery?對(duì)象,?那么它就可以使用?jQuery?里的方法: $(“#test”).html();

實(shí)例:

1 $("#test").html() 2 3 意思是指：獲取ID為test的元素內(nèi)的html代碼。其中html()是jQuery里的方法 4 5 這段代碼等同于用DOM實(shí)現(xiàn)代碼： document.getElementById(" test ").innerHTML; 6 7 雖然jQuery對(duì)象是包裝DOM對(duì)象后產(chǎn)生的，但是jQuery無法使用DOM對(duì)象的任何方法，同理DOM對(duì)象也不能使用jQuery里的方法.亂使用會(huì)報(bào)錯(cuò) 8 9 約定：如果獲取的是 jQuery 對(duì)象, 那么要在變量前面加上$. 10 11 var $variable = jQuery 對(duì)象 12 var variable = DOM 對(duì)象 13 14 $variable[0]：jquery對(duì)象轉(zhuǎn)為dom對(duì)象 $("#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 層級(jí)選擇器 58 //$(".c2 div").css("color","green") 59 //$(".c2 p").css("color","green") //子孫后代 60 //$(".c2>p").css("color","green") //僅限兒子們 61 //$(".c2+p").css("color","red") //同級(jí)下一個(gè) 剩下的不要 62 //$(".c2~p").css("color","red") //同級(jí)下面P標(biāo)簽全要 63 64 // 1.3 基本篩選器 65 //$(".c3:first").css("color","red"); 66 //$(".c3:eq(2)").css("color","red"); // eq(索引號(hào)) 67 //$(".c3:gt(1)").css("color","red"); //gt(1)索引大于1的標(biāo)簽 68 //$(".c3:lt(4)").css("color","red"); //lt(1)索引小于4的標(biāo)簽 69 //$(".c3:even").css("color","red"); //偶數(shù) 70 //$(".c3:odd").css("color","red"); //奇數(shù) 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標(biāo)簽 81 82 */ 83 84 /* 85 // 02 進(jìn)階篩選器 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 // 判斷某個(gè)標(biāo)簽是否擁有某個(gè)class名 91 // console.log($("[alex]").hasClass("c21")); 92 93 */ 94 95 /* 96 // 03 導(dǎo)航選擇器 97 //3.1 查找兄弟標(biāo)簽 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"); //除選中標(biāo)簽外的兄弟標(biāo)簽很重要 105 106 // 3.2 查找子孫標(biāo)簽 107 // console.log($(".c9").children()); //結(jié)果: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查找父類標(biāo)簽 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(指定事件類型,指定子標(biāo)簽,指定函數(shù)) 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補(bǔ)充: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，傳遞一個(gè)DOM對(duì)象，返回這個(gè)對(duì)象在原先集合中的索引位置 9 i2 = $('li').index($('#baz')); //1，傳遞一個(gè)jQuery對(duì)象 10 i3 = $('li').index($('li:gt(0)')); //1，傳遞一組jQuery對(duì)象，返回這個(gè)對(duì)象中第一個(gè)元素在原先集合中的索引位置 11 i4 = $('#baz').index('li'); //1，傳遞一個(gè)選擇器，返回#bar在所有l(wèi)i中的索引位置 12 i5 = $('#baz').index(); //1，不傳遞參數(shù)，返回這個(gè)元素在同輩中的索引位置。 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/">腳本學(xué)堂</a> 22 <a href="http://www.jbxue.com/wb/">網(wǎng)站編程</a> 23 </div> 24 25 <script> 26 $("#nav a").click(function(){ 27 //四個(gè)經(jīng)典的用法 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

轉(zhuǎn)載于:https://www.cnblogs.com/Mixtea/p/10454486.html

總結(jié)

以上是生活随笔為你收集整理的jquery选择器和基本操作的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。

上一篇： POJ 1486 Sorting Sli
下一篇：开发小结-杂项类