jQuery對象jQuery對象是通過jQuery包裝DOM對象后產(chǎn)生的對象 注意：jQuery對象只能使用jQuery里的方法，DOM對象只能使用DOM對象的方法 jQuery基礎(chǔ)知識點(diǎn)查找標(biāo)簽基本選擇器
層級選擇器：
基本篩選器： :first // 第一個 :last // 最后一個 :eq(index)// 索引等于index的那個元素 :even // 匹配所有索引值為偶數(shù)的元素，從 0 開始計(jì)數(shù) :odd // 匹配所有索引值為奇數(shù)的元素，從 0 開始計(jì)數(shù) :gt(index)// 匹配所有大于給定索引值的元素 :lt(index)// 匹配所有小于給定索引值的元素 :not(元素選擇器)// 移除所有滿足not條件的標(biāo)簽 :has(元素選擇器)// 選取所有包含一個或多個標(biāo)簽在其內(nèi)的標(biāo)簽(指的是從后代元素找) //例子 $('ul li:first') S.fn.init [li, prevObject: S.fn.init(1)] $('ul li:gt(3)') S.fn.init(6) [li, li#l1, li, li.cl1, li, li, prevObject: S.fn.init(1)] $('ul li:has(#l1)') S.fn.init [prevObject: S.fn.init(1)]length: 0prevObject: S.fn.init [document]__proto__: Object(0) $('ul li:not(.cl1)') S.fn.init(9) [li, li, li, li, li, li#l1, li, li, li, prevObject: S.fn.init(1)] $('ul li:odd') S.fn.init(5) [li, li, li#l1, li.cl1, li, prevObject: S.fn.init(1)] 屬性選擇器：
//例子 $('[username]') S.fn.init(2) [input, input, prevObject: S.fn.init(1)] $('[username="hello"]') S.fn.init [input, prevObject: S.fn.init(1)] 表單篩選器： :text :password :file :radio :checkbox :submit :reset :button //例子： $(":checkbox") // 找到所有的checkbox //表單對象屬性： :enabled :disabled :checked :selected //例子 $("input:enabled") // 找到可用的input標(biāo)簽 $(":selected") // 找到所有被選中的option $(":checked") // 會將checked和selected都拿到，一般使用的時(shí)候會加個 限制條件，如： $("input:selected") //找到被選中的input標(biāo)簽 篩選器方法： //下一個元素： $("#id").next() $("#id").nextAll() $("#id").nextUntil("#d1") //尋找下一個元素，直到#d1位置為止，不包括#d1標(biāo)簽 //上一個元素 $("#id").prev() $("#id").prevAll() $("#id").prevUntil("#i2") //尋找上一個元素，直到#d1位置為止，不包括#d1標(biāo)簽 //父元素 $("#id").parent() $("#id").parents() // 查找當(dāng)前元素的所有的父輩元素 $("#id").parentsUntil(".c1") // 查找當(dāng)前元素的所有的父輩元素，直到遇到匹配的.c1元素為止。不包括.c1元素 //兒子和兄弟元素 $("#id").children();// 兒子 $("#id").siblings();// 兄弟
jQuery的一些方法：
標(biāo)簽操作樣式操作jQuery js addClass(); classList.add() removeClass(); classList.remove() hasClass(); //判斷樣式是否存在 classList.contains() toggleClass();//有則刪去，無則添加 classList.toggle() //例子 $("#d1").toggleClass('c1') S.fn.init [div#d1.c2] $("#d1").addClass('c1') S.fn.init [div#d1.c2.c1] $("#d1").toggleClass('c2') S.fn.init [div#d1.c1] 位置操作
尺寸：
文本操作//jQuery js text() innerText() html() innerHtml() //例子 $('div').text() //獲取標(biāo)簽文本 $('div').text('hello world') //設(shè)置標(biāo)簽文本內(nèi)容 $('div').html() //獲取標(biāo)簽html文本 $('div').html('<h1>hello world</h1>') //設(shè)置html文本內(nèi)容 取值操作//jQuery js .val() .value() //例子： $('input').val() //獲取值 $('input').val('hello') //設(shè)置值 S.fn.init [input#ip] 屬性操作//jQuery attr(屬性) //獲取屬性值 attr(屬性，屬性值) //設(shè)置屬性值 removeAttr(屬性） //刪除屬性 //對應(yīng)的js操作方法 setAttribute() getAttribute() removeAttribute() //用于checkbox和radio prop() //獲取屬性 removeProp() //移除屬性 //例子 let $pEle=$('#d1') undefined $pEle.attr('username') "hello" $pEle.attr('username','hello world') $pEle.attr('username') "hello world" $pEle.attr('value','11') let $iEle=$('#d2') $iEle.prop('checked') false $iEle.prop('checked') true 注意：對于標(biāo)簽上有的能夠看到的屬性和自定義屬性用attr()方法 對于返回布爾值比如checkbox，radion，option這三個標(biāo)簽是否被選中，用prop方法 文檔操作//js jQuery createElement('p') $('<p>') //創(chuàng)建新標(biāo)簽 appendChild() append() //追加新標(biāo)簽 //例子 let $pEle=$('<p>') //創(chuàng)建p標(biāo)簽 undefined $pEle.text('你好 世界 ') S.fn.init [p] $pEle.attr('id','p2') $('#d1').append($pEle) //d1內(nèi)部尾部追加p標(biāo)簽 S.fn.init [div#d1] $pEle.appendTo($('#d1')) S.fn.init [p#p2, prevObject: S.fn.init(1)] $('#d3').prepend($pEle) //內(nèi)部頭部追加 S.fn.init [div#d3] $pEle.prependTo($('#d3')) S.fn.init [p, prevObject: S.fn.init(1)] $('#d3').after($pEle) //放在id=d3的標(biāo)簽后面 S.fn.init [div#d3] $pEle.insertAfter($('#d3')) S.fn.init [p, prevObject: S.fn.init(1)] $('#d3').before($pEle) //放在id=d3的標(biāo)簽前面 S.fn.init [div#d3] $pEle.insertBefore($('#d3')) S.fn.init [p, prevObject: S.fn.init(1)] $('#d1').remove() //刪除標(biāo)簽 S.fn.init [div#d1] $('#p1').empty() //清空標(biāo)簽內(nèi)容 S.fn.init {} 事件事件綁定方式： //第一種 $('#d1').click(functino(){ alert('1'); }) //第二種 $('#d1').on('click',function(){
alert('1')
})
$('#d1').on('click','div',function(){
alert('1')
})
注意：DOM定義的事件可以用 .on()方法來綁定事件，但是jQuery定義的事件就不可以 常用事件有：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="https://cdn./ajax/libs/jquery/3.5.1/jquery.min.js"></script> <style> .left{ width: 20%; height: 800px; display: block; float: left; background-color: grey; position: fixed; } .menu{ font-size: 32px; font-weight: bold; text-align: center; color: white; } .item{ color:whitesmoke; font-size: 20px; border: 3px solid red; } .hidden{ display: none; } </style> </head> <body> <div class="left"> <div class="menu">菜單一 <div class="item ">學(xué)習(xí)</div> <div class="item ">游戲</div> <div class="item ">讀書</div> </div> <div class="menu">菜單二 <div class="item ">學(xué)習(xí)</div> <div class="item ">游戲</div> <div class="item">讀書</div> </div> <div class="menu">菜單三 <div class="item">學(xué)習(xí)</div> <div class="item">游戲</div> <div class="item">讀書</div> </div> </div> <script> $('.menu').on('click',function () { $('.item').addClass('hidden') //將所有的子菜單隱藏起來 $(this).children().removeClass('hidden') //將選擇的菜單下子菜單取消隱藏 }) </script> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="https://cdn./ajax/libs/jquery/3.5.1/jquery.min.js"></script> <style> .cover{ position: fixed; top:0px; left: 0px; right: 0px; bottom: 0px; background-color: black; opacity: 0.4; z-index: 99; } .modal{ top:50%; left: 50%; width: 600px; height: 300px; margin-top: -150px; margin-left: -300px; background-color: white; position: fixed; z-index: 100; } .hidden{ display: none; } </style> </head> <body> <div>我是最底層</div> <button id="d1">點(diǎn)擊注冊</button> <div class="cover hidden" id="d2"></div> <div class="modal hidden" id="d3"> <p> usename:<input type="text"> </p> <p> password:<input type="text"> </p> <input type="button" value="commit" > <input type="button" value="quxiao" id="i1"> </div> <script> //注冊 $('#d1').click(function () { $('#d2').removeClass('hidden') $('#d3').removeClass('hidden') }) //取消注冊 $('#i1').click(function () { console.log(this) $('#d2').addClass('hidden') $('#d3').addClass('hidden') }) </script> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="https://cdn./ajax/libs/jquery/3.5.1/jquery.min.js"></script> <style> span{ color:red; } p{ border: 3px solid blue; } </style> </head> <body> <div> user:<input id="i1" type="text"> <span></span> </div> <div> password:<input id="i2" type="password"> <span></span> </div> <div> <input id="b1" type="button" value="提交"> <input type="button" value="取消"> </div> <p>hello world</p> <script> $('#b1').click(function () { let user=$('#i1').val() let password=$('#i2').val() if(!user){ $('span').first().text('用戶名不能為空') } if(!password){ $('span').last().text('密碼不能為空') } $('input').focus(function () { $('span').first().text('') }) }) //input事件 $('#i1').on('input',function () { console.log(this.value) }) //鼠標(biāo)懸浮事件 $('p').hover( function () { alert('我來了') },function () { }) </script> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="https://cdn./ajax/libs/jquery/3.5.1/jquery.min.js"></script> <style> #d1{ width: 100%; height: 500px; background-color: hotpink; } #d2{ width: 100%; height: 500px; background-color: greenyellow; } #d3{ width: 100%; height: 500px; background-color: deepskyblue; } #p1{ width: 100px; height: 40px; background-color: grey; position: fixed; right: 20px; bottom: 20px; text-align: center; padding-top: 20px; border-radius: 20%; text-decoration: none; //去除a標(biāo)簽下的下劃線 } .hidden{ display: none; } </style> </head> <body> <div id="d1"></div> <div id="d2"></div> <div id="d3"></div> <a id="p1" class="hidden" href="#d1">返回頂部</a> <script> $(window).scroll(function () { if($(window).scrollTop()>500){ $('#p1').removeClass('hidden') } else { $('#p1').addClass('hidden') } }) </script> </body> </html> 移除事件：把on改成off，就是移除 .on()綁定的事件 阻止后續(xù)事件執(zhí)行：事件函數(shù)中添加 return false; (常用于阻止表單提交等）或者e.preventDefault()
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="https://cdn./ajax/libs/jquery/3.5.1/jquery.min.js"></script> <style> #p1{ color: red; } </style> </head> <body> <form action=""> <p id="p1"></p> <input type="submit" id="i1"> </form> <script> $('#i1').click(function (e) { $('#p1').text('提交成功') <!-- 阻止input其他事件的發(fā)生，比如input關(guān)聯(lián)的表單事件提交--> return false <!-- 第二種 e.preventDefault() --> }) </script> </body> </html> 阻止事件冒泡：添加e.stopPropagation()或return false 
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="https://cdn./ajax/libs/jquery/3.5.1/jquery.min.js"></script> </head> <body> <div id="d1">div <p id="p1">p <span id="s1">span</span> </p> </div> <script> $('#d1').click(function () { alert('div') }) $('#p1').click(function () { alert('p') }) $('#s1').click(function (e) { alert('span') // return false //阻止事件冒泡 e.stopPropagation() }) </script> </body> </html> 頁面載入//當(dāng)頁面加載完觸發(fā)： $(function(){ } /* 與js的window.onload的區(qū)別 1、window.onload()函數(shù)有覆蓋現(xiàn)象，必須等待圖片資源加載完才能調(diào)用 2、$(functino(){}不會出現(xiàn)覆蓋，而且只要文檔加載完畢就可以調(diào)用，不用等待圖片資源加載 */ 事件委托事件委托利用的就是冒泡事件的原理，通過在父元素指定一個事件來處理子元素下的一個類型事件，比如在ul元素綁定一個點(diǎn)擊事件，來處理子元素li的點(diǎn)擊事件。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="https://cdn./ajax/libs/jquery/3.5.1/jquery.min.js"></script> </head> <body> <ul> <li>1</li> <li>2</li> <li>3</li> </ul> <script> //為ul下的所有l(wèi)i綁定點(diǎn)擊事件 $('ul').on('click','li',function () { alert('點(diǎn)我準(zhǔn)沒錯') }) </script> </body> </html> jQuery的each()方法： 實(shí)質(zhì)：就是遍歷一個jQuery對象，為jQuery對象里面每個元素傳遞給函數(shù)執(zhí)行 語法：$('#id').each(function(index,Element) index是數(shù)字索引，Elenment是元素對象 //例子 第一種 $('li').each(function(index,ele){ console.log(index,ele)}) VM766:1 0 <li>?1?</li>? VM766:1 1 <li>?2?</li>? VM766:1 2 <li>?3?</li>? S.fn.init(3) [li, li, li, prevObject: S.fn.init(1)] //第二種 let li_list=[1,2,3,4] $.each(li_list,function(index,ele){console.log(index,ele)}) VM1056:1 0 1 VM1056:1 1 2 VM1056:1 2 3 VM1056:1 3 4 (4) [1, 2, 3, 4] 注意：在遍歷過程中可以使用return false提前結(jié)束each循環(huán) jQuery.data()方法： 給標(biāo)簽儲存數(shù)據(jù)，用戶肉眼看不到 $('li').data('name','hello')
|
|
|
