-
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
网友评论