|
一.查
1.next()
获取下一个兄弟元素节点
2.prev()
获取上一个兄弟节点
3.nextAll()
当前元素后面的所有兄弟节点
4.prevAll()
当前元素曲面的所有节点
5.nextUntill()
查找当前元素之后的同辈元素，直到遇到匹配的元素为止
6.prevUntill()
查找当前元素之前的同辈元素，直到遇到匹配的元素为止
7.siblings()
查找当前元素的所有兄弟元素
传参代表查找对应的兄弟元素
8.parent()
找父级
9.parents()
找所有的父级，直到根元素为止
10.offsetParent()
查找第一个匹配的有定位的父元素的节点
二.追加元素的相关方法
1.insertAfter()
a.innertAfter(b),将a插入b的后面，成为b的下一个兄弟
2.after()
b.innertAfter(a),将a插入b的后面，成为b的下一个兄弟
3.innerBefore()
a.innertAfter(b),将a插入b的前面，成为b的上一个兄弟
4.before()
b.innertAfter(a),将a插入b的前面，成为b的上一个兄弟
5.appendTo()
a.appendTo(b),a插入b中，成为b的最后一个字节点
6.append()
a.appendTo(b),b插入a中，成为a的最后一个字节点
7prependTo()
a.prependTo(b),a插入b中，成为b的第一个字节点
8.prenped()
b.appendTo(a),b插入a中，成为a的一个字节点
三.删除及克隆操作
1.remove() 删除本身及其子元素
2.detach()删除本身及所有字元素，保留数据和事件
3.empty() 从被选元素移除所有内容，包括所有文本和子节点
4.clone() 参数为true ，加了可以克隆事件
5.data() 保存数据信息
3.小练习
星星评分
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.11.3/jquery.js"></script>
<style>
.left {
float: left;
margin-left: 10px;
line-height: 30px;
}
</style>
</head>
<body>
<div id="divstars" class="left">
<img src="images/empty.png" alt="">
<img src="images/empty.png" alt="">
<img src="images/empty.png" alt="">
<img src="images/empty.png" alt="">
<img src="images/empty.png" alt="">
</div>
<div id="divword" class="left">
</div>
<script>
var words = ["满意", "一般满意", "还不错", "很满意", "非常满意"];
$('#divstars').on({
click:function(e){
$(e.target).prevAll().prop('src','images/shining.png');
$(e.target).prop('src','images/shining.png');
},
mousemove:function(e){
if(e.target.nodeName == 'IMG'){
$('img').prop('src','images/empty.png');
$(e.target).prevAll().prop('src','images/shining.png');
$(e.target).prop('src','images/shining.png');
$('#divword').text(words[ $(e.target).prevAll().length]);
}
}
})
</script>
</body>
</html>
|