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>04jQuery筛选jquery对象01
原文地址：https://www.cnblogs.com/shink1117/p/8506414.html