04jQuery篩選jquery對象01
day22
jqueryDOM
jquery獲取的元素會封裝成在一個類數組中
jQuery元素選擇器
$("p")選取<p>元素
$("p.intro")選取所有class="intro"的p元素
$("p#demo")選取所有id="demo"的p元素
jQuery屬性選擇器
jQuery使用XPath表達式來選擇帶有給定屬性的元素。
$("[href]")選取所有帶有href值等於"#"的元素
$("[href=‘#‘]")選取所有帶有href值等於"#"的元素
$("[href!=‘#‘]") 選取所有帶有 href 值不等於 "#" 的元素。
$("[href$=‘.jpg‘]") 選取所有 href 值以 ".jpg" 結尾的元素。
jQuery CSS 選擇器
jQuery CSS 選擇器可用於改變 HTML 元素的 CSS 屬性。
下面的例子把所有 p 元素的背景顏色更改為紅色：
$("p").css("background-color","red");
$(function(){}) 是 $(document).ready(function(){})) 的簡寫，
用來在DOM加載完成之後執行一系列預先定義好的函數。
DOM對象和jQuery對象
區別：
檢測 DOM Object : if(obj.nodeType)
檢測 jQuery Object : if(obj.jquery)
轉換:
var jqueryObj = $(domObj);
var domObj jqueryObj.get([index]);
如何創建元素
$("<div>hello</div>")
$(‘<a>‘,{
text:‘baidu‘,
href:‘http://www.baidu.com‘,
target:‘_blank‘
})
$(‘<a>baidu</a>‘).attr({
href:‘http://www.baidu.com‘,
target:‘_blank‘
})
檢查元素數量
$("div").length
提取元素
[index]返回DOm元素
get([index])返回DOM元素或元素集合
eq(index)返回jQuery對象
first()
last()
toArry()與get()方法一樣
通過關系查找jQuery對象
children([selector]) 直接子元素
contents() 直接子元素帶文本和註釋節
find(selector) 子元素 孫子元素
parent([selector]) 父元素
parents([slector]) 祖宗元素
parentsUntil([selector]) 祖宗元素查到為止且不包括
closest(selector) 一定要寫selector，從本對象開始查找
DOM對象和jquery對象.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <div id="div">div</div> <script src="jquery-3.3.1.js"></script> <script> $(View Codefunction () { var DOMObject = document.getElementById(‘div‘); var JqueryObject = $("#div"); console.log(DOMObject); console.log(JqueryObject); //判斷 console.log(DOMObject.nodeType); console.log(JqueryObject.jquery);//轉換 console.log($(DOMObject)); console.log(JqueryObject.get(0)); }) </script> </body> </html>
提取元素.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <div class="div1">div1</div> <div class="div2">div2</div> <div class="div3">div3</div> <div class="div4">div4</div> <div class="div5">div5</div> <div class="div6">div6</div> <div class="div7">div7</div> <div class="div8">div8</div> <script src="jquery-3.3.1.js"></script> <script> var divs = $(‘div‘); console.log(divs); console.log(divs[0]);//DOM元素 console.log(divs.get(0));//DOM元素或元素集合 console.log(divs.eq(0));//對象 console.log(divs.first());//對象 console.log(divs.last());//對象 console.log(divs.toArray());//元素集合 </script> </body> </html>View Code
檢查元素個數.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <ur> <li class="item-1">item1</li> <li class="item-2">item2</li> <li class="item-3">item3</li> <li class="item-4">item4</li> <li class="item-5">item5</li> <li class="item-6">item6</li> <li class="item-7">item7</li> <li class="item-8">item8</li> </ur> <script src="jquery-3.3.1.js"></script> <script> $(function () { var elements =$("li"); var div = $(‘div‘); console.log(elements); console.log(elements.length); console.log(elements[0].style.color = "blue"); }) </script> </body> </html>View Code
如何創建元素.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <script src="jquery-3.3.1.js"></script> <script> $(function () { /*var div = $(‘<div>hello</div>‘); console.log($(‘div‘)); div.appendTo(‘body‘); console.log($(‘div‘));*/ /*var link1 = $(‘<a>‘,{ text:‘baidu‘, target:"_blank", href:"http://www.baidu.com", title:"go to baidu" }) console.log($("a")); link1.appendTo(‘body‘); console.log($(‘a‘));*/ var link2 = $(‘<a>baidu</a>‘).attr({ title:"go to baidu", href:"http://www.baidu.com", target:"_blank" }); console.log($(‘a‘)); link2.appendTo(‘body‘); console.log($(‘a‘)) }) </script> </body> </html>View Code
通過關系查找jQuery對象的方法.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <div id="box1"> <div id="box2"> <div id="box3"> <p id="info">jQueryjQueryjQueryjQueryjQueryjQueryjQuery</p> <ur> <li class="item-1">item1</li> <li class="item-2">item2</li> <li class="item-3">item3</li> <li class="item-4">item4</li> <li class="item-5">item5</li> <li class="item-6">item6</li> <li class="item-7">item7</li> <li class="item-8">item8</li> </ur> </div> </div> </div> <script src="jquery-3.3.1.js"></script> <script> $(function () { console.log($(‘#box3‘)); console.log($("#box2").children()); console.log($(‘#box2‘).contents()); console.log($(‘#box2‘).find(‘#box3‘)); console.log($(‘#box2‘).parent()); console.log($(‘#box2‘).parents()); console.log($(‘#box3‘).parentsUntil(‘#box1‘)); console.log($(‘#box3‘).closest(‘div‘)); }) </script> </body> </html>View Code
04jQuery篩選jquery對象01