jquery初探-day12 · javaWEB

>### A.今天學什么？ #### 1.juqery選擇器 - ##### 1.1 選擇器$('選擇器') --> 支持所有的css選擇器 - 如何修改元素樣式 --> p.css({color:"red",backgroundColor:"green"}); 類似于css ``` // body <body> <p id="p" class="one">hello world</p> <p id="p2" class="two">hello chunjue</p> <script> // 選擇器$('選擇器') --> 支持所有的css選擇器 var p = $('#p'); var p2 = $('.two'); console.log(p); // 如何修改元素樣式 p.css({color:"red",backgroundColor:"green"}); p2.css({color:"green",backgroundColor:"red"}); </script> </body> ``` - ##### 1.2 jquery選擇器-2 - $ --> 找到，在jquery的事件中，不可以直接使用this，要用$找到 ``` // body <body> <p>hello chunjue</p> <div>div</div> <h1>h1</h1> <div id="parent" style="background-color: aqua"> <p>hello chunjue</p> <div style="background-color: #b8b8b8"> <div id="test"></div> <p>hello yiran</p> <p>hello yiran</p> <p>hello yiran</p> <p>hello yiran</p> <p>hello yiran</p> <p>hello yiran</p> </div> </div> <button id="btn">按鈕</button> <script> // $ --> 找到，在jquery的事件中，不可以直接使用this，要用$找到 // 元素選擇器，事件 /*$('p').click(function () { $(this).css({color:"red"}); });*/ // 選擇所有元素 // $('*').css({color:"green"}); // 分組選擇器 //$('div,h1').css({color:"#888"}); $('#btn').click(function () { // 選擇 id為parent的父元素的親子元素p $("#parent>p").css({color:"red"}); }); // 兄弟選擇器 // #test之后的第一個子元素 $('#test+p').css({color:"red"}); console.log($('#test+p')); // #test之后的所有子元素 $('#test~p').css({color:"green"}); </script> </body> ``` - ##### 1.3 jquery選擇器-3 - 注意，在js中，標簽對象的下標從1開始，而jquery中是從0開始 - jquery也支持js中的過濾選擇器 - $('div>p:first-child').css({color:"red"}); - 支持簡寫 --> $('div>p:first').css({color:"red"}); - 奇偶數項，然而這里的下標是從0開始，所以要注意和css的區別 - $('div>p:odd').css({color:"red"}); --> 奇書項 - $('div>p:even').css({color:"green"}); --> 偶數項 - $(':focus') 找到獲取焦點的元素 - $('input').focus(function () { $(':focus').css({backgroundColor:"red"}) }); - 內容過濾選擇器 - contains() --> 包含文本 - has() --> 包含標簽 ``` // css <style> /* 奇數項標簽下標從1開始 */ div>P:nth-child(odd){} /* 偶數項 */ div>p:nth-child(even){} </style> // body <body> <div> <p>123</p> <p>123</p> <p>123</p> <p>123</p> <p>123</p> <input type="text"> </div> <div>chunjue</div> <div><h1>haha</h1></div> <script> // 注意，在js中，標簽對象的下標從1開始，而jquery中是從0開始 // jquery也支持js中的過濾選擇器 /*$('div>p:first-child').css({color:"red"}); $('div>p:last-child').css({color:"green"});*/ // 也支持簡寫，可以去掉后面的child /*$('div>p:first').css({color:"red"}); $('div>p:last').css({color:"green"});*/ // $('div>p:not(:last)').css({color:"red"}); // 奇偶數項，然而這里的下標是從0開始，所以要注意和css的區別 /*$('div>p:odd').css({color:"red"}); $('div>p:even').css({color:"green"});*/ // 由于jquery下標從0開始，所以這里選擇的是第二個p標簽 /*$('div>p:eq(1)').css({color:"red"}); // 也有一種eq方法選擇 $('div>p').eq(0).css({color:"green"});*/ // gt，lt方法 --> 選中大于或小于該下標的兄弟元素，不包含該下標的元素 $('div>p:gt(2)').css({color:"red"}); $('div>p:lt(2)').css({color:"green"}); // $(':focus') 找到獲取焦點的元素 $('input').focus(function () { $(':focus').css({backgroundColor:"red"}) }); // 內容過濾選擇器 // contains() --> 包含文本 // 選中內容為chunjue的div元素 $('div:contains(chunjue)').css({backgroundColor:"#888"}); // has() --> 包含標簽 $('div:has(h1)').css({backgroundColor:"green"}); </script> </body> ``` - ##### 1.3 visible和hidden - visible --> 可見的元素 - hidden --> 隱藏的元素 ``` // css <style> div{ display: none; } </style> // body <body> <p>123</p> <p>123</p> <p>123</p> <p>123</p>  <div>哈哈哈</div> <script> // 選中所有的可見元素 $(':visible').css({color:"red"}); // 選中不可見的div元素，不要選擇所有，否則注釋，title都會顯示出來 // :hidden --> 只對display:none起作用，對visibility:hidden不起作用 $('div:hidden').css({display:"block"}); </script> </body> ``` #### 2.jquery的DOM操作 - ##### 2.1 DOM操作-1 - text(value)方法 --> 獲取元素文本內容，若傳參，則會修改元素文本內容 - 查找屬性節點 attr(key) --> 獲取元素某屬性的值，也可以用來設置屬性，后面會講 - html() --> 獲取元素內容，不限于文本，html標簽也可以獲取 - val() --> 獲取輸入框的值 ``` // body <body> <ul> <li class="one">1</li> <li>2</li> <li>3</li> </ul> <div> <p>hello yiran</p> </div> <input type="text" value="hello DNF"> <script> // text(value)方法 --> 獲取元素文本內容，若傳參，則會修改元素文本內容 // 獲取第二個元素的文本內容 --> 下標從0開始 var txt = $('li:eq(1)').text(); console.log(txt); // 2 // 修改第一個元素的文本內容 $('li:eq(0)').text("hello chunjue"); // 查找屬性節點 attr(key) --> 獲取元素某屬性的值，也可以用來設置屬性，后面會講 // 查找第一個元素的class屬性 var attr = $('li:eq(0)').attr("class"); console.log(attr); // one // html() --> 獲取元素內容，不限于文本，html標簽也可以獲取 var html = $('div').html(); console.log(html); // <p>hello yiran</p> 前面的空格是換行符 // val() --> 獲取輸入框的值 var value = $('input').val(); console.log(value); // hello DNF </script> </body> ``` - ##### 2.2 創建標簽和添加標簽 - $('\<li>2\</li>'); --> 創建一個元素節點，直接使用$('')，其中寫標簽即可 - append() --> 從父元素的末尾添加 - prepend() --> 從父元素的首部添加 - appendTo() --> 和append()的區別在于appendTo()先選定要添加的元素節點，參數為要添加到的父元素 ``` // body <body> <ul> <li>1</li> </ul> <script> // $('<li>2</li>'); --> 創建一個元素節點 var $li = $('<li>2</li>'); var $li_one = $('<li>0</li>'); // append() --> 從父元素的末尾添加 $('ul').append($li); // prepend() --> 從父元素的首部添加 $('ul').prepend($li_one); // appendTo() --> 和append()的區別在于appendTo()先選定要添加的元素節點，參數為要添加到的父元素 </script> </body> ``` - ##### 2.3 before和after - before,after --> 兄弟元素之間，不同于append、prepend的父子之間 - after() --> 在某元素的后面添加 - before() --> 在某元素的前面添加 ``` // body <body> <div>div</div> <p>end</p> <script> // before,after --> 兄弟元素之間，不同于append、prepend的父子之間 var $p = $('<p>one</p>'); var $h4 = $('<h4>h4</h4>'); // after() --> 在某元素的后面添加 $('div').after($p); // before() --> 在某元素的前面添加 // 在內容為end的p標簽的前面添加h4標簽 $('p:contains(end)').before($h4); </script> </body> ``` - ##### 2.4 remove刪除節點 - remove() --> 刪除節點 ``` // body <body> <ul> <li>1</li> <li>2</li> <li>3</li> </ul> <button id="btn">刪除</button> <script> // remove() --> 刪除節點 var btn = $('#btn'); btn.click(function () { $('ul>li:eq(1)').remove(); }) </script> </body> ``` - ##### 2.5 empty清空標簽文本內容 - empty() --> 清空標簽文本內容 ``` // body <body> <div style="width: 100px;height: 100px;background-color: #b8b8b8">hello chunjue</div> <button id="btn">按鈕</button> <script> // empty() --> 清空標簽文本內容 $('#btn').click(function () { $('div').empty(); }) </script> </body> ``` - ##### 2.6 replace替換標簽 - replaceWith(節點) --> 替換節點 ``` // body <body> <div>hello world</div> <script> // replaceWith(節點) --> 替換節點 var $p = $('<p>替換節點</p>'); $('div').replaceWith($p); </script> </body> ``` - ##### 2.7 wrap - wrap() --> 在元素的外層嵌套標簽 - wrapInner() --> 在元素的內層嵌套標簽，元素的原內容也會到被元素嵌套的這個標簽中 - 例如：對 \<p>aa\</p> 該方法，在內層套一個 \<div>被包起來\</div> - 結果：\<p>\<div>被包起來aa\</div>\</p> - 即 --> 嵌套在該元素a內部的元素b，會將a的內容都包裹在最內部，相對于a來說，b的優先級更高，差不多這個意思 ``` // body <body> <p>hello chunjue</p> <script> // wrap() --> 在元素的外層嵌套標簽 $('p').wrap("<div>包起來</div>>"); // wrapInner() --> 在元素的內層嵌套標簽，元素的原內容也會到被元素嵌套的這個標簽中 $('p').wrapInner("<div>被包起來</div>>"); </script> </body> ``` - ##### 2.8 操作屬性 - attr(attrName,value) --> 設置屬性 - attr({attrName:value,attrName:value}) 設置多個屬性 - removeAttr(key) --> 刪除屬性 ``` // body <body> <p class="one"> hello chunjue</p> <script> // attr(attrName,value) --> 設置屬性 // $('p').attr("class","two"); // attr({attrName:value,attrName:value}) 設置多個屬性 $('p').attr({class:"two",title:"hello"}); // removeAttr(key) --> 刪除屬性 $('p').removeAttr("class"); </script> </body> ``` - ##### 2.9 樣式操作 - 通過設置屬性的方式設置樣式 - $('p').attr("class","current"); - addClass(className) --> 給某元素添加樣式，參數為樣式名 - removeClass(className) --> 給某元素移除樣式，參數為樣式名 ``` // css <style> .current{ color: red; } </style> // body <body> <p>hello chunjue</p> <button id="btn">按鈕</button> <script> // 1.通過設置屬性的方式設置樣式 // $('p').attr("class","current"); // addClass(className) --> 給某元素添加樣式，參數為樣式名 $('p').addClass("current"); // removeClass(className) --> 給某元素移除樣式，參數為樣式名 $('#btn').click(function () { $('p').removeClass("current"); }) </script> </body> ``` - ##### 2.10 toggleClass 切換 - toggleClass(className) --> 開關，集成removeClass和addClass，實現切換功能 - hasClass(className) --> 判斷元素是否含有該樣式，返回布爾值 - 例子：使用hasClass、removeClass、addClass實現toggleClass ``` // css <style> .current{ color: red; } </style> // body <body> <p>hello chunjue</p> <button id="btn">按鈕</button> <script> // toggleClass(className) --> 開關，集成removeClass和addClass，實現切換功能 /*$('#btn').click(function () { $('p').toggleClass("current"); });*/ // hasClass(className) --> 判斷元素是否含有該樣式，返回布爾值 var one = $('p').hasClass("current"); console.log(one); // 使用hasClass、removeClass、addClass實現toggleClass $('#btn').click(function () { if ($('p').hasClass('current')){ $('p').removeClass("current"); }else{ $('p').addClass("current"); } }) </script> </body> ``` - ##### 2.11 節點遍歷 - children() --> 獲得元素的子元素數組 - jquery可以直接對元素數組進行css設置 - prev() --> 找到元素的上一個元素 - next() --> 找到元素的下一個元素 ``` // body <body> <ul> <li>1</li> <li>2</li> <li>3</li> </ul> <div> parent <p>hello yiran</p> </div> <script> // children() --> 獲得元素的子元素數組 // var childs = $('ul').children(); // console.log(childs); // jquery可以直接對元素數組進行css設置 // 注意，這里的childs是一個元素數組 // childs.css({color:"red"}); // prev() --> 找到元素的上一個元素 $('li:eq(1)').prev().css({backgroundColor:"green"}); // next() --> 找到元素的下一個元素 $('li:eq(1)').next().css({backgroundColor:"#888"}); // siblings() --> 找到該元素所有的兄弟元素，不包含該元素 var siblings= $('li:eq(0)').siblings(); console.log(siblings); siblings.css({color:"red"}); // parent() --> 獲取元素的父節點 var parent = $('p').parent(); console.log(parent); // 所有的DOM元素加載完畢后執行代碼塊中的js // $(document).ready(function () { // // }) // 簡寫 // $(function()){} </script> </body> ``` - ##### 2.12 尋找元素 - parent() --> 只會找到親爹 - parents() --> 找到所有的父元素、老爸爺爺爺爺的爸爸 - closet(value) --> 找到你想要的父元素 ``` // body <body> <div class="grandfather"> grandFather <div id="baba" class="parent"> parent <p>hello yiran</p> </div> </div> <script> // parent() --> 只會找到親爹 var parent = $('p').parent(); console.log(parent); // parents() --> 找到所有的父元素、老爸爺爺爺爺的爸爸 var parents = $('p').parents(); console.log(parents); // 上級都能找到 // closet(value) --> 找到你想要的父元素 var closet = $('p').closest(".grandfather"); console.log(closet); var baba = $('p').closest('#baba'); console.log(baba); </script> </body> ``` - ##### 2.13 hide和show - is() --> 是否符合，返回boolean值；不好形容，看is應該就能明白了 - hide() --> 將元素隱藏 - show() --> 將元素顯示 ``` // body <body> <div> <p class="one">hello yiran</p> </div> <button id="btn">隱藏</button> <button id="btn2">顯示</button> <script> // is() --> 返回boolean值 // hide() --> 將元素隱藏 // show() --> 將元素顯示 var p = $('p').is(".one"); console.log(p); // true $('#btn').click(function () { // 是否顯示 console.log($('p').is(':visible')); $('p').hide(); }); $('#btn2').click(function () { $('p').show(); }); </script> </body> ``` - ##### 2.14 filter和offset - filter() --> 獲取符合條件的元素 - offset() --> 位移值，擁有left、top屬性 - left --> 元素左偏移量 - top --> 元素右偏移量 - 注意，有的時候不能直接console.log(top)，會輸出window的狀態屬性，定義變量名時使用Top比較好 ``` // css <style> *{margin: 0;padding: 0} div{ width: 100px; height: 100px; margin: 100px; background-color: red; } </style> // body <body> <ul> <li>1</li> <li class="one">1</li> <li>1</li> </ul> <div></div> <script> // filter() --> 獲取符合條件的元素 $('li').filter(".one").css({color:"red"}); // offset() --> 位移值，擁有left、top屬性 var Left = $('div').offset().left; console.log(Left); var Top = $('div').offset().top; console.log(Top); // top --> 輸出top可以查詢window屬性 console.log(top); </script> </body> ```