JQuery · 前端菜鳥成長記

[TOC] # JQuery認識 ## 1.入口函數執行時機是在文檔（標簽）加載完畢后立馬執行函數里面的代碼，不存在覆蓋問題（調用函數） **跟window.onload的執行時機不一樣（頁面所有資源加載完畢后執行）后寫的入口函數會覆蓋前面寫的函數** **完整寫法** $(document).ready(function){ 代碼塊； } **簡寫** 第一種： $().ready(function){ 代碼塊； } 第二種： $(function(){ 代碼塊； } ) ***** **所有的$都可以用jQuery代替** ***** &("#id") JQ對象（默認情況下不能調用原生的屬性和方法） document.getElementById("box") DOM對象（默認情況下只能調用原生的JS屬性和方法） ###1.0 轉換對象 #### 1.0.1 **JQ對象轉換為DOM對象** $("#box")[0].style.backgroundColor = "red"; $("#box").get(0).style.backgroundColor = "red"; **ps： $("#box")得到的是個數組** ***** #### 1.0.2 **DOM對象轉為JQ對象** var divObj = document.getElementById("box); $(divObj).show(); ### 1.1.格式舉例 ``` $(function(){ $("button:eq(0)").click(function(){ $("div").show(400)； })； }) ``` ### JQuery函數 **html()：** 訪問html,顯示標簽，修改值時會對標簽起作用 **text（）：** 訪問text，只打印文字內容，修改值時會直接把標簽當初是文本內容修改 ![](https://img.kancloud.cn/d9/79/d979f6b80cf5af63db973c7c01ba11cc_1040x587.png) ##2選擇器 ### 2.1基本選擇? **分類:** ID選擇?、類選擇?、標簽選擇?、并集選擇?和通配符選擇?。 ![](https://img.kancloud.cn/ba/ed/baed944861fb5a024ed7667ee4891d9e_679x468.png) ``` ~~~ <button>選擇所有段落標簽</button> <button>選擇class為left的標簽</button> <button>選擇id為box的標簽</button> <button>選擇所有不分類型標簽</button> <button>選擇所有標題標簽</button> <button>選擇ul里面的li標簽</button> <button>選擇body下的第一級所有標簽并添加邊框</button> <button>選擇p后的一個div</button> <button>選擇p后的所有div</button> <p>段落標簽</p> <p>段落標簽</p> <p>段落標簽</p> <div class="left">類選擇器</div> <div class="left">類選擇器</div> <div id="box">id選擇器</div> <h1>標題1標簽</h1> <h2>標題2標簽</h2> <h3>標題3標簽</h3> <ul> <li>列表項</li> <li>列表項</li> <li>列表項</li> </ul> <ol> <li>列表項</li> <li>列表項</li> <li>列表項</li> </ol> ~~~ $("button:eq(0)").click(function () {/*所有的p標簽*/ $("p").css("background-color", "red"); }); $("button:eq(1)").click(function () {/*class類名為left*/ $(".left").css("background-color","red"); }); $("button:eq(2)").click(function () {/*id名為id*/ $("#box").css("background-color","pink"); }); $("button:eq(3)").click(function () { $("*").css("background-color","pink");/*所有不分標簽類型的標簽通配符所有包括body*/ }); ~~~ ``` ### 2.2.層級選擇器 **分類** 后代選擇器、直接后代選擇器、下一個相鄰兄弟和后面所有兄弟元素 ![](https://img.kancloud.cn/62/8e/628e4ff4f5126a607ccd3efbae9902ad_672x392.png) ``` ~~~ $("button:eq(5)").click(function () { /*后代選擇器*/ $("ul li").css("background-color","red"); }); $("button:eq(6)").click(function () {/*選擇body下的第一級所有標簽并添加邊框直接后代選擇器*/ $("body>*").css("border","1px solid red"); }); $("button:eq(7)").click(function () {/*p后的第一個div 中間不能有別的標簽隔開.否則會未選擇到任何標簽下一個相鄰的兄弟*/ $("p+div").css("border","1px solid red"); }); $("button:eq(8)").click(function () { /*后面所有的兄弟*/ $("p~div").css("border","1px solid red");/*p后所有的div。如果中間有別的標簽也可以獲取到后面所有的div*/ ~~~ ``` **拓展選擇方法:** 在通過$(" ")選擇到元素后，可以通過： prev() 獲取上一個相鄰兄弟 prevAll() 獲取前面所有兄弟 next() 獲取下一個相鄰兄弟 nextAll() 獲取后面所有兄弟 ### 2.3基本篩選選擇器 eq后的值是指確定的值 ![](https://img.kancloud.cn/65/f7/65f707debba91d44fd559d92bfb1482a_681x557.png) ``` ~~~ $(function () { $("button:eq(0)").click(function () { $("li:first").css("background-color","pink"); }); $("button:eq(1)").click(function () { $("li:last").css("background-color","pink"); }); $("button:eq(2)").click(function () {/*選擇所有的排除最后一個*/ $("li:not(:last)").css("background-color","pink"); }); $ ("button:eq(3)").click(function () { $("li:not(:eq(1))").css("background-color","pink");/*選擇所有排除第二個*/ }); $("button:eq(4)").click(function () { $("li:even").css("background-color","pink");/*索引值為偶數的*/ }); $("button:eq(5)").click(function () { $("li:odd").css("background-color","pink");/*索引值為奇數*/ }); $("button:eq(6)").click(function () { $("li:gt(4)").css("background-color","pink");/*大于5的li >>*/ }); $("button:eq(7)").click(function () { $("li:lt(4)").css("background-color","pink");/*小于5的li <<*/ }); $("button:eq(8)").click(function () { $("li:eq(4)").css("background-color","pink");/*等于5的li*/ }); ~~~ ``` ### 2.4內容篩選選擇器根據元素中的文字內容或所包含的子元素特征獲取元素（可模糊匹配） ![](https://img.kancloud.cn/da/29/da2965b6ead078bdd7a238fa03d0c99e_681x265.png) ``` ~~~ $(function () { $("button:eq(0)").click(function () { $("div:contains('天')").css("background-color","red");/*帶有天字的*/ }); $("button:eq(1)").click(function () { $("div:empty").css("background-color","pink");/*空的標簽*/ }); $("button:eq(2)").click(function () { $("div:parent").css("background-color","red");/*選擇含有子元素或者是文本的div元素*/ }); $("button:eq(3)").click(function () { $("div:has('span')").css("background-color","red");/*帶有span標簽的元素*/ }); }) ~~~ ``` ### 2.5 屬性篩選選擇器根據元素的某個屬性獲取元素，在使用的時候我們可以匹配單個屬性也可以進行多個屬性的匹配。 ![](https://img.kancloud.cn/f5/ec/f5eca15e0a63aee84a1c3e032c45d1ca_681x404.png) ### 2.6父子兄選擇器 **分類** parent() 獲取當前標簽的父節點 parents() 獲取當前標簽的祖先節點 parentsUntil() 獲取當前標簽的祖先節點直到… (不包含該標簽) children() 獲取當前標簽的子節點 siblings() 獲取當前標簽的兄弟節點 ``` ~~~ <button>點擊選中</button> <div class="one"> <div class="box"> <div class="box-in">我是父親 <span class="active">我是孫子</span> </div> </div> </div> ~~~ <script> $("button:eq(0)").click(function () { // $(".active").parent().css("background-color","blue");/*父親*/ /*parents()里面不寫值會默認把所有的祖先都改變可指定祖先*/ // $(".active").parents().css("background-color","blue"); // $(".active").parents(".box").css("background-color","blue");/*會包括指定的祖先*/ $(".active").parentsUntil(".one").css("background-color","blue"); /*一級一級祖先往上找，知道找到指定標簽為止（不包含指定標簽）*/ $(".active").siblings().css("background-color","black");/*兄弟節點*/ }) </script> ~~~ ``` ##3.事件 click() 點擊事件 noConflict() 轉換把$轉換為jq (解決命名沖突) mouseenter() 鼠標經過事件 mouseleave() 鼠標離開事件 hover() 如果同時出現上面兩個時間可以用hover代替兩個參數（函數） ***** **鼠標經過離開事件例子四種寫法** ``` ~~~ // 第一種 $(".nav>ul>li").mouseenter(function () { $(this).children("ul").show();//事件源的ul孩子 }); $(".nav>ul>li").mouseleave(function () { $(this).children("ul").hide(); }); //第二種 $(".nav>ul>li").mouseenter(function () { $(this).children("ul").show(); }).mouseleave(function () { $(this).children("ul").hide(); }); // 第三種 $(".nav>ul>li").hover(function () {/*兩個參數分別是兩個函數*/ $(this).children("ul").show(); },function () { $(this).children("ul").hide(); }) //第四種 $(".nav>ul>li").hover(function () {/*鼠標的離開和進入可以當做是顯示隱藏的切換效果*/ $(this).children("ul").toggle(); }); ```