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> $(function () { 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>
检查元素个数.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>
如何创建元素.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>
通过关系查找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>