-
DOM:Document Object Model 文档对象模型;
- 通过 jQuery 遍历,可以从被选(当前的)元素开始,在家族树中向上移动(祖先),向下移动(子孙),水平移动(同胞);
- 遍历方法中最大的种类是树遍历(tree-traversal);
方法 |
释义 |
语法 |
.add() |
将元素添加到匹配元素的集合中 |
.add(selector/elements) |
.andSelf() |
把堆栈中之前的元素集添加到当前集合中 |
.andSelf() |
.children() |
获得匹配元素集合中每个元素的所有子元素 |
.children(selector) |
.closest() |
从元素本身开始,逐级向上级元素匹配,并返回最先匹配的祖先元素(0/1个) |
.closest(selector) |
.contents() |
获得匹配元素集合中每个元素的子元素,包括文本和注释节点 |
.contents() |
.each() |
对 jQuery 对象进行迭代,为每个匹配元素执行函数 |
$(selector).each(function(index,element)) |
.end() |
结束当前链中最近的一次筛选操作,并将匹配元素集合返回到前一次的状态 |
.end() |
.eq() |
将匹配元素集合缩减为位于指定索引的新元素(index为正则从前向后索引,index为负则从后向前索引) |
.eq(index) |
.filter() |
将匹配元素集合缩减为匹配选择器或匹配函数返回值的新元素 |
.filter(selector/function) |
.find() |
获得当前匹配元素集合中每个元素的后代,由选择器进行筛选 |
.find(selector) |
.first() |
将匹配元素集合缩减为集合中的第一个元素 |
.first() |
.has() |
将匹配元素集合缩减为包含特定元素的后代的集合 |
.has(selector) |
.is() |
根据选择器检查当前匹配元素集合,如果存在至少一个匹配元素,则返回 true |
.is(selector/function) |
.last() |
将匹配元素集合缩减为集合中的最后一个元素 |
.last() |
.map() |
把当前匹配集合中的每个元素传递给函数,产生包含返回值的新 jQuery 对象 |
.map(callback(index,domElement)) |
.next() |
获得匹配元素集合中每个元素紧邻的同辈元素 |
.next(-selector) |
.nextAll() |
获得匹配元素集合中每个元素之后的所有同辈元素,由选择器进行筛选(可选) |
.nextAll(-selector) |
.nextUntil() |
获得每个元素之后所有的同辈元素,直到遇到匹配选择器的元素为止 |
.nextUntil(selector/elements,filter) |
.not() |
从匹配元素集合中删除元素 |
.not(selector/elements) |
.offsetParent() |
获得用于定位的第一个父元素 |
.offsetParent() |
.parent() |
获得当前匹配元素集合中每个元素的父元素,由选择器筛选(可选) |
.parent(selector) |
.parents() |
获得当前匹配元素集合中每个元素的祖先元素,由选择器筛选(可选) |
.parents(-selector) |
.parentsUntil() |
获得当前匹配元素集合中每个元素的祖先元素,直到遇到匹配选择器的元素为止 |
.parentsUntil(selector/elements,filter) |
.prev() |
获得匹配元素集合中每个元素紧邻的前一个同辈元素,由选择器筛选(可选) |
.prev(-selector) |
.prevAll() |
获得匹配元素集合中每个元素之前的所有同辈元素,由选择器进行筛选(可选) |
.prevAll(-selector) |
.prevUntil() |
获得每个元素之前所有的同辈元素,直到遇到匹配选择器的元素为止 |
.prevUntil(selector/elements, filter) |
.siblings() |
获得匹配元素集合中所有元素的同辈元素,由选择器筛选(可选) |
.siblings(selector) |
.slice() |
将匹配元素集合缩减为指定范围的子集(只有一个参数时,则从此到结尾;为负数时,则从后向前索引) |
.slice(start,end) |
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/jquery-3.2.1.js" ></script>
</head>
<body>
<div>
<label>输入个数:</label>
<input type="number" name="NumOfLi" id="NumOfLi" />
</div>
<ul></ul>
<script type="text/javascript">
$(document).ready(function(){
//创建li
$("#NumOfLi").change(function(){
$("ul").empty();
for(var i=0;i<$(this).val();i++){
$("ul").append(document.createElement("li"));
}
//设置li的样式
$("li").css({
"background-color":"grey",
"list-style":"none",
"height":"20px"
}).filter(":odd").css("background-color","gainsboro");
});
//设置lable的样式
$("#NumOfLi").prev().css("margin","1em");
//设置div的样式
$("#NumOfLi").parent("div").css({
"border":"1px solid gray",
"border-radius":"1em",
"padding":"0.5em",
"background-color":"gainsboro"
});
});
</script>
</body>
</html>
image.png
网友评论