jQueryDom的操作(1)
2018-11-30 本文已影响0人
浮巷旧人
第一章 如何筛选jQuery对象
操作jQuery对象，如何创建HTML
DOM对象和jQuery对象
- 区别
- 检测DOM Object : if (obj.nodeType)
- 检测jQuery Object : if(obj.jquery)
- 转换：
var jqueryObj = $(domObj);
var domObj = jqueryObj.get([index]);
$(function () {
var DOMObject = document.getElementById("div");
var jqueryObject=$("#div");
console.log(DOMObject);
console.log(jqueryObject);
console.log(DOMObject.nodeType);//->1
console.log(jqueryObject.jquery);//->版本号
console.log($(DOMObject)); //dom转换成jQuery对象
console.log(jqueryObject.get(0));//jQuery对象转换成dom对象
})
$(function () {
var div = $("<div>hello</div>");
console.log(div);//打印jQuery对象
div.appendTo('body');//appendTo()追加到body最后面，放到页面上
console.log($("div"));//在内存中而不在页面上 选择器是选择不到的 必须得执行上一步先放到页面上 才能选出来(length为0就是没有选到)
})
如何创建元素
- $('<div>Hello</div>');
- 设置属性
$(function () {
//第一种方法
var link1 = $('<a>', { //这里的a必须是空元素 加上别的东西例如<a>123</a>是无效的
text: 'baidu',
href: 'http://www.baidu.com',
target: '_blank',
title: 'goto baidu'
})
link1.appendTo('body');
//第二种方法
var link2 = $('<a>baidu</a>').attr({
href: 'http://www.baidu.com',
target: '_blank',
title: 'goto baidu'
});
link2.appendTo('body');
})
检查和提取元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>检查和获取元素</title>
</head>
<body>
<ul>
<li class="item-1">item-1</li>
<li class="item-2">item-2</li>
<li class="item-3">item-3</li>
</ul>
<script src="jquery/jquery-3.3.1.min.js"></script>
<script>
$(function () {
var elements=$('li');
var elements2=$('div');
console.log(elements.length);//3
console.log(elements2.length)//0
console.log(elements2[0])//等同于elements2.get(0) 转换成dom对象 但是结果都是undefined
console.log(elements2.eq(0).addClass('blue'))//大部分jQuery方法默认增加了对元素数量的判断，调用时是不会报错的
console.log(elements.get(0))//获取第一个li元素 相当于elements[0]
console.log(elements.get())//获取全部li元素
console.log(elements.eq(0))//也是想当于获取第一个元素，但是不能eq()，什么都获取不到, 同时也包括 .first()，同理 .last()是最后一个
})
</script>
</body>
</html>
- $('xxx').length 检查元素数量
提取元素
- [index]返回dom元素
- get([index])返回dom元素或元素集合
- eq(index)返回jQuery对象
- first()
- last()
- toArray()
通过关系查找jQuery对象的方法
- children([selector])
- contents()
这两个 直接子元素，可以加参数 - find(selector)
包含子元素和孙子元素 - parent([selector])
获得当前匹配元素集合中每个元素的父元素 - parents([selector])
获得当前匹配元素集合中每个元素的所有父元素 - parentsUntil([selector])
获得当前匹配元素集合中每个元素的祖先元素，直到遇到被选择器(该方法的参数)匹配的元素为止 - closest(selector)
从当前元素开始逐级向上寻找，返回最先匹配的元素，也能获取到本身
closest与parents的区别:
1.closest是从当前元素开始匹配的,parents是从父元素开始匹配的。
2.closest向上找，找到匹配的就停止；parents会找到所有的父元素，并返回一个集合。
- next([selector]) nextAll([selector]) nextUntil([selector]) 向后查找兄弟元素
- prev([selector]) prevAll([selector]) prevUntil([selector]) 向前查找兄弟元素
- siblings([selector]) 取出所有兄弟姐妹元素
筛选和遍历jQuery对象
- 添加元素
.add(selector)
$('.item1, .item2')相当于$('.item1').add('.item2') - 过滤元素
.not(selector) 删除
.filter(selector)
.has(selector) - 获取子集
.slice(start[,end])
一个左闭右开的区间，如果 .slice(3, 5) 就是包括3 取不到5 也就是 3和4 - 转换元素
.map(callback) - 遍历元素
.each(iterator)
jQuery对象的其他操作
- is(selector)
is()方法根据选择器、元素或jQuery对象来检测匹配元素集合，如果这些元素中至少有一个元素匹配给定的参数，则返回true。 - end()
end()方法将匹配元素集还原到之前的操作状态。
- 破坏性操作：任何对jQuery对象进行改变的操作
使用end方法时，前一次的操作一定要是破坏性操作，不然返回的是一个空对象
- addBack([selector])
进行破坏性操作，又想把原来的元素包含进来,就用这个方法。
