jQuery對象是通過jQuery包裝DOM對象后產生的對象
注意：jQuery對象只能使用jQuery里的方法，DOM對象只能使用DOM對象的方法
基本選擇器
層級選擇器：
基本篩選器：
:first // 第一個 :last // 最后一個 :eq(index)// 索引等于index的那個元素 :even // 匹配所有索引值為偶數的元素，從 0 開始計數 :odd // 匹配所有索引值為奇數的元素，從 0 開始計數 :gt(index)// 匹配所有大于給定索引值的元素 :lt(index)// 匹配所有小于給定索引值的元素 :not(元素選擇器)// 移除所有滿足not條件的標簽 :has(元素選擇器)// 選取所有包含一個或多個標簽在其內的標簽(指的是從后代元素找)
//例子 $('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標簽 $(":selected") // 找到所有被選中的option $(":checked") // 會將checked和selected都拿到，一般使用的時候會加個 限制條件，如： $("input:selected") //找到被選中的input標簽
篩選器方法：
//下一個元素： $("#id").next() $("#id").nextAll() $("#id").nextUntil("#d1") //尋找下一個元素，直到#d1位置為止，不包括#d1標簽 //上一個元素 $("#id").prev() $("#id").prevAll() $("#id").prevUntil("#i2") //尋找上一個元素，直到#d1位置為止，不包括#d1標簽 //父元素 $("#id").parent() $("#id").parents() // 查找當前元素的所有的父輩元素 $("#id").parentsUntil(".c1") // 查找當前元素的所有的父輩元素，直到遇到匹配的.c1元素為止。不包括.c1元素 //兒子和兄弟元素 $("#id").children();// 兒子 $("#id").siblings();// 兄弟
jQuery的一些方法：
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() //獲取標簽文本 $('div').text('hello world') //設置標簽文本內容 $('div').html() //獲取標簽html文本 $('div').html('<h1>hello world</h1>') //設置html文本內容
//jQuery js .val() .value() //例子： $('input').val() //獲取值 $('input').val('hello') //設置值
//例子
S.fn.init [input#ip]
$('#ip')[0]
<input type=?"file" id=?"ip">?
$('#ip')[0].files[0] //$('#ip')[0]先轉化為原js對象，再用原js對象中files獲取文件信息
File {name: "1.png", lastModified: 1600868737120, lastModifiedDate: Wed Sep 23 2020 21:45:37 GMT+0800 (中國標準時間), webkitRelativePath: "", size: 21844, …}
$('#ip')[0].files
FileList {0: File, length: 1}0: File {name: "1.png", lastModified: 1600868737120, lastModifiedDate: Wed Sep 23 2020 21:45:37 GMT+0800 (中國標準時間), webkitRelativePath: "", size: 21844, …}length: 1__proto__: FileList
//jQuery attr(屬性) //獲取屬性值 attr(屬性，屬性值) //設置屬性值 removeAttr(屬性） //刪除屬性 //對應的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
//attr所指的屬性時HTML標簽屬性，而prop是指DOM對象屬性
注意：對于標簽上有的能夠看到的屬性和自定義屬性用attr()方法
對于返回布爾值比如checkbox，radion，option這三個標簽是否被選中，用prop方法
//js jQuery createElement('p') $('<p>') //創建新標簽 appendChild() append() //追加新標簽
//例子 let $pEle=$('<p>') //創建p標簽 undefined $pEle.text('你好 世界 ') S.fn.init [p] $pEle.attr('id','p2') $('#d1').append($pEle) //d1內部尾部追加p標簽 S.fn.init [div#d1] $pEle.appendTo($('#d1')) S.fn.init [p#p2, prevObject: S.fn.init(1)] $('#d3').prepend($pEle) //內部頭部追加 S.fn.init [div#d3] $pEle.prependTo($('#d3')) S.fn.init [p, prevObject: S.fn.init(1)] $('#d3').after($pEle) //放在id=d3的標簽后面 S.fn.init [div#d3] $pEle.insertAfter($('#d3')) S.fn.init [p, prevObject: S.fn.init(1)] $('#d3').before($pEle) //放在id=d3的標簽前面 S.fn.init [div#d3] $pEle.insertBefore($('#d3')) S.fn.init [p, prevObject: S.fn.init(1)] $('#d1').remove() //刪除標簽 S.fn.init [div#d1] $('#p1').empty() //清空標簽內容 S.fn.init {}
事件綁定方式：
//第一種 $('#d1').click(functino(){ alert('1'); }) //第二種語法：.on( events [, selector(選擇器） ],function(){})
$('#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.bootcdn.net/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 ">學習</div> <div class="item ">游戲</div> <div class="item ">讀書</div> </div> <div class="menu">菜單二 <div class="item ">學習</div> <div class="item ">游戲</div> <div class="item">讀書</div> </div> <div class="menu">菜單三 <div class="item">學習</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.bootcdn.net/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">點擊注冊</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.bootcdn.net/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) }) //鼠標懸浮事件 $('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.bootcdn.net/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標簽下的下劃線 } .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()綁定的事件
阻止后續事件執行：事件函數中添加 return false; (常用于阻止表單提交等）或者e.preventDefault()
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="https://cdn.bootcdn.net/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其他事件的發生，比如input關聯的表單事件提交--> 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.bootcdn.net/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>
//當頁面加載完觸發： $(function(){ } /* 與js的window.onload的區別 1、window.onload()函數有覆蓋現象，必須等待圖片資源加載完才能調用 2、$(functino(){}不會出現覆蓋，而且只要文檔加載完畢就可以調用，不用等待圖片資源加載 */
事件委托利用的就是冒泡事件的原理，通過在父元素指定一個事件來處理子元素下的一個類型事件，比如在ul元素綁定一個點擊事件，來處理子元素li的點擊事件。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="https://cdn.bootcdn.net/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下的所有li綁定點擊事件 $('ul').on('click','li',function () { alert('點我準沒錯') }) </script> </body> </html>
jQuery的each()方法：
實質：就是遍歷一個jQuery對象，為jQuery對象里面每個元素傳遞給函數執行
語法：$('#id').each(function(index,Element) index是數字索引，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提前結束each循環
jQuery.data()方法：
給標簽儲存數據，用戶肉眼看不到
$('li').data('name','hello')
//給li添加name屬性，屬性值為“hello”
$('li').first().data('name')
"hello"
//移除name屬性
$('li').removeData('name')
$('li').first().data('name')
undefined
