jQuery基础修炼圣典—DOM篇（二）jQuery遍历
1、children()方法
jQuery是一个合集对象，如果想快速查找合集里面的第一级子元素，此时可以用children()方法。这里需要注意：.children(selector) 方法是返回匹配元素集合中每个元素的所有子元素（仅儿子辈，这里可以理解为就是父亲-儿子的关系）
理解节点查找关系：
<div class="div">
<ul class="son">
<li class="grandson">1</li>
</ul>
</div>
代码如果是$("div").children()，那么意味着只能找到ul，因为div与ul是父子关系，li与div是祖辈关系，因此无法找到。
children()无参数
允许我们通过在DOM树中对这些元素的直接子元素进行搜索，并且构造一个新的匹配元素的jQuery对象
注意：jQuery是一个合集对象，所以通过children是匹配合集中每一给元素的第一级子元素
.children()方法选择性地接受同一类型选择器表达式
$("div").children(".selected")
同样的也是因为jQuery是合集对象，可能需要对这个合集对象进行一定的筛选，找出目标元素，所以允许传一个选择器的表达式
具体的操作，请参考下边的代码:
<!DOCTYPE html>
<html> <head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title></title>
<link rel="stylesheet" href="imooc.css" type="text/css">
<style>
.left {
width: auto;
height: 120px;
} .left div {
width: 150px;
height: 70px;
padding: 5px;
margin: 5px;
float: left;
background: #bbffaa;
border: 1px solid #ccc;
} a {
display: block;
}
</style>
<script src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script>
</head> <body>
<h2>children方法()</h2>
<div class="left first-div">
<div class="div">
<ul class="level-1">
<li class="item-1">1</li>
<li class="item-2">2</li>
<li class="item-3">3</li>
</ul>
</div>
<div class="div">
<ul class="level-2">
<li class="item-1">1</li>
<li class="item-2">2</li>
<li class="item-3">3</li>
</ul>
</div>
<div class="div">
<ul class="level-3">
<li class="item-1">1</li>
<li class="item-2">2</li>
<li class="item-3">3</li>
</ul>
</div>
</div>
<button id="bt1">点击：children无参数</button>
<button id="bt2">点击：children传递表达式</button>
<script type="text/javascript">
$("#bt1").click(function() {
$('.div').children().css('border', '3px solid red')
})
</script> <script type="text/javascript">
$("#bt2").click(function() {
//找到所有class=div的元素
//找到其对应的子元素ul，然后筛选出最后一个，给边宽加上颜色
$('.div').children(':last').css('border', '3px solid blue')
})
</script> </body> </html>
2、find()方法
jQuery是一个合集对象，如果想快速查找DOM树中的这些元素的后代元素，此时可以用find()方法，这也是开发使用频率很高的方法。这里要注意 children与find方法的区别，children是父子关系查找，find是后代关系（包含父子关系）
理解节点查找关系：
<div class="div">
<ul class="son">
<li class="grandson">1</li>
</ul>
</div>
代码如果是$("div").find("li")，此时，li与div是祖辈关系，通过find方法就可以快速的查找到了。
.find()方法要注意的知识点：
- find是遍历当前元素集合中每个元素的后代。只要符合，不管是儿子辈，孙子辈都可以。
- 与其他的树遍历方法不同，选择器表达式对于 .find() 是必需的参数。如果我们需要实现对所有后代元素的取回，可以传递通配选择器 '*'。
- find只在后代中遍历，不包括自己。
- 选择器 context 是由 .find() 方法实现的；因此，$('li.item-ii').find('li') 等价于 $('li', 'li.item-ii')。
注意重点：
.find()和.children()方法是相似的
1.children只查找第一级的子节点
2.find查找范围包括子节点的所有后代节点
具体的操作，请参考下边的代码
<!DOCTYPE html>
<html> <head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title></title>
<link rel="stylesheet" href="imooc.css" type="text/css">
<style>
.left {
width: auto;
height: 200px;
} .left div {
width: 150px;
height: 70px;
padding: 5px;
margin: 5px;
float: left;
background: #bbffaa;
border: 1px solid #ccc;
} span {
color: blue;
}
</style>
<script src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script>
</head> <body>
<h2>find方法()</h2>
<div class="left first-div">
<div class="div">
<ul class="level-1">
<li class="item-1">1</li>
<li class="item-2">2</li>
<li class="item-3">3</li>
</ul>
</div>
<div class="div">
<ul class="level-2">
<li class="item-1">1</li>
<li class="item-2 test">2</li>
<li class="item-3">3</li>
</ul>
</div>
<div class="div">
<ul class="level-3">
<li class="item-1">1</li>
<li class="item-2">2</li>
<li class="item-3">3</li>
</ul>
</div>
</div>
<button>点击：find传递表达式</button>
<br/>
<br/>
<h3>find表达式</h3>
<div style="border:1px solid red;">
<p>
<span>测试1</span>
<a>测试2</a>
</p>
<p>
<span>慕课网1</span>
<a>慕课网2</a>
</p>
<div>
<span>Aaron1</span>
<a>Aaron2</a>
</div>
</div>
<br/>
<br/>
<button>点击：find传递$对象</button>
<script type="text/javascript">
$("button:first").click(function() {
$('.left').find('li:last').css('border', '1px solid red')
})
</script>
<script type="text/javascript">
$("button:last").click(function() {
//找到所有p元素，然后筛选出子元素是span标签的节点
//改变其字体颜色
var $spans = $('span');
$("p").find($spans).css('color', 'red');
})
</script>
</body> </html>
3、parent()方法
jQuery是一个合集对象，如果想快速查找合集里面的每一个元素的父元素（这里可以理解为就是父亲-儿子的关系），此时可以用parent()方法
因为是父元素，这个方法只会向上查找一级
理解节点查找关系：
<div class="div">
<ul class="son">
<li class="grandson">1</li>
</ul>
</div>
查找ul的父元素div, $(ul).parent()，就是这样简单的表达
parent()无参数
parent()方法允许我们能够在DOM树中搜索到这些元素的父级元素，从有序的向上匹配元素，并根据匹配的元素创建一个新的 jQuery 对象
注意：jQuery是一个合集对象，所以通过parent是匹配合集中每一给元素的父元素
parent()方法选择性地接受同一型选择器表达式
同样的也是因为jQuery是合集对象，可能需要对这个合集对象进行一定的筛选，找出目标元素，所以允许传一个选择器的表达式
具体的操作，请参考下边的代码:
<!DOCTYPE html>
<html> <head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title></title>
<link rel="stylesheet" href="imooc.css" type="text/css">
<style>
.left {
width: auto;
height: 400px;
} .left div {
width: 350px;
height: 150px;
padding: 5px;
margin: 5px;
float: left;
background: #bbffaa;
border: 1px solid #ccc;
} span {
color: blue;
}
</style>
<script src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script>
</head> <body>
<h2>parent方法()</h2>
<div class="left first-div"> <div class="div">
<ul class="level-2">
<!-- A -->
<li class="item-a">A</li>
<!-- B -->
<li class="item-b">B
<ul class="level-3">
<li class="item-1">1</li>
<li class="item-2">2</li>
<li class="item-3">3</li>
</ul>
</li>
<!-- C -->
<li class="item-c">C</li> </ul>
</div> <div class="div">
<ul class="level-2">
<!-- A -->
<li class="item-a">A</li>
<!-- B -->
<li class="item-b">B
<ul class="level-3">
<li class="item-1">1</li>
<li class="item-2">2</li>
<li class="item-3">3</li>
</ul>
</li>
<!-- C -->
<li class="item-c">C</li> </ul>
</div>
</div> <button>点击：parent无参数</button>
<button>点击：paren传递选择器</button>
<script type="text/javascript">
$("button:first").click(function() {
$('.level-3').parent().css('border','1px solid red')
})
</script> <script type="text/javascript">
$("button:last").click(function() {
//找到所有class=item-a的父元素
//然后给每个ul,然后筛选出最后一个，加上蓝色的边
$('.item-a').parent(':last').css('border', '1px solid blue')
})
</script> </body> </html>
4、parents()方法
jQuery是一个合集对象，如果想快速查找合集里面的每一个元素的所有祖辈元素，此时可以用parents()方法
其实也类似find与children的区别，parent只会查找一级，parents则会往上一直查到查找到祖先节点
理解节点查找关系：
<div class="div">
<ul class="son">
<li class="grandson">1</li>
</ul>
</div>
在li节点上找到祖 辈元素div， 这里可以用$("li").parents()方法
parents()无参数
parents()方法允许我们能够在DOM树中搜索到这些元素的祖先元素，从有序的向上匹配元素，并根据匹配的元素创建一个新的 jQuery 对象;
返回的元素秩序是从离他们最近的父级元素开始的
注意：jQuery是一个合集对象，所以通过parent是匹配合集中所有元素的祖辈元素
parents()方法选择性地接受同一型选择器表达式
同样的也是因为jQuery是合集对象，可能需要对这个合集对象进行一定的筛选，找出目标元素，所以允许传一个选择器的表达式
注意事项：
1 .parents()和.parent()方法是相似的，但后者只是进行了一个单级的DOM树查找
2 $( "html" ).parent()方法返回一个包含document的集合，而$( "html" ).parents()返回一个空集合。
具体的操作，请参考下边的代码:
<!DOCTYPE html>
<html> <head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title></title>
<style>
.left {
width: auto;
height: 350px;
} .left div {
width: 350px;
height: 150px;
padding: 5px;
margin: 5px;
float: left;
background: #bbffaa;
border: 1px solid #ccc;
} span {
color: blue;
}
</style>
<script src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script>
</head> <body>
<h2>parents方法()</h2>
<div class="left first-div"> <div class="div">
<ul class="level-2">
<!-- A -->
<li class="item-a">A</li>
<!-- B -->
<li class="item-b">B
<ul class="level-3">
<li class="item-1">1</li>
<li class="item-2">2</li>
<li class="item-3">3</li>
</ul>
</li>
<!-- C -->
<li class="item-c">C</li>
</ul>
</div> <div class="div">
<ul class="level-2">
<!-- A -->
<li class="item-a">A</li>
<!-- B -->
<li class="item-b">B
<ul class="level-3">
<li class="item-1">1</li>
<li class="item-2">2</li>
<li class="item-3">3</li>
</ul>
</li>
<!-- C -->
<li class="item-c">C</li>
</ul>
</div> </div> <button>点击：parents无参数</button>
<button>点击：parents传递选择器</button> <script type="text/javascript">
$("button:first").click(function() {
$('.item-b').parents().css('border','2px solid red')
})
</script> <script type="text/javascript">
$("button:last").click(function() {
//找到当前元素的所有祖辈元素,筛选出class="first-div"的元素
//并且附上一个边
$('.item-b').parents('.first-div').css('border', '2px solid blue')
})
</script>
</body> </html>
5、closest()方法
以选定的元素为中心，往内查找可以通过find、children方法。如果往上查找，也就是查找当前元素的父辈祖辈元素，jQuery提供了closest()方法，这个方法类似parents但是又有一些细微的区别，属于使用频率很高的方法
closest()方法接受一个匹配元素的选择器字符串
从元素本身开始，在DOM 树上逐级向上级元素匹配，并返回最先匹配的祖先元素
例如：在div元素中，往上查找所有的li元素，可以这样表达
$("div").closet("li')
注意：jQuery是一个合集对象，所以通过closest是匹配合集中每一给元素的祖先元素
closest()方法给定的jQuery集合或元素来过滤元素
同样的也是因为jQuery是合集对象，可能需要对这个合集对象进行一定的筛选，找出目标元素，所以允许传一个jQuery的对象
注意事项：在使用的时候需要特别注意下
粗看.parents()和.closest()是有点相似的，都是往上遍历祖辈元素，但是两者还是有区别的，否则就没有存在的意义了
- 起始位置不同：.closest开始于当前元素 .parents开始于父元素
- 遍历的目标不同：.closest要找到指定的目标，.parents遍历到文档根元素，closest向上查找，知道找到一个匹配就停止查找，parents一直查找到根元素，并将匹配的元素加入集合
- 结果不同：.closest返回的是包含零个或一个元素的jquery对象，parents返回的是包含零个或一个或多个元素的jquery对象
具体使用可以参考下边代码区域：
<!DOCTYPE html>
<html> <head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title></title>
<link rel="stylesheet" href="imooc.css" type="text/css">
<style>
.left {
width: auto;
height: 200px;
} .left div {
width: 350px;
height: 150px;
padding: 5px;
margin: 5px;
float: left;
background: #bbffaa;
border: 1px solid #ccc;
} span {
color: blue;
}
</style>
<script src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script>
</head> <body>
<h2>closest方法()</h2>
<div class="left first-div">
<div class="div">
<ul class="level-2">
<li class="item-a">A</li>
<li class="item-b">B
<ul class="level-3">
<li class="item-1">1</li>
<li class="item-2">2</li>
<li class="item-3">3</li>
</ul>
</li>
<li class="item-c">C</li>
</ul>
</div>
</div>
<br/>
<button>点击：closest传递选择器 </button>
<button>点击：closest传递一个元素对象</button>
<script type="text/javascript">
$("button:first").click(function() {
$('li.item-1').closest('.level-2').css('border','1px solid red')
})
</script>
<script type="text/javascript">
$("button:last").click(function() {
var itemB = $('.item-b')
$('li.item-1')
.closest(itemB)
.css('border', '1px solid blue');
})
</script>
</body> </html>
6、next()方法
jQuery是一个合集对象，如果想快速查找指定元素集合中每一个元素紧邻的后面同辈元素的元素集合，此时可以用next()方法
理解节点查找关系：
如下class="item-1"元素就是红色部分，那蓝色的class="tem-2"就是它的兄弟元素
<ul class="level-3">
<li class="item-1">1</li>
<li class="item-2">2</li>
<li class="item-3">3</li>
</ul>
next()无参数
允许我们找遍元素集合中紧跟着这些元素的直接兄弟元素，并根据匹配的元素创建一个新的 jQuery 对象。
注意：jQuery是一个合集对象，所以通过next是匹配合集中每一给元素的下一个兄弟元素
next()方法选择性地接受同一类型选择器表达式
同样的也是因为jQuery是合集对象，可能需要对这个合集对象进行一定的筛选，找出目标元素，所以允许传一个选择器的表达式
具体的操作，请参考下边的代码
<!DOCTYPE html>
<html> <head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title></title>
<link rel="stylesheet" href="imooc.css" type="text/css">
<style>
.left {
width: auto;
height: 120px;
} .left div {
width: 150px;
height: 70px;
padding: 5px;
margin: 5px;
float: left;
background: #bbffaa;
border: 1px solid #ccc;
} a {
display: block;
}
</style>
<script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
</head> <body>
<h2>next方法()</h2>
<div class="left first-div">
<div class="div">
<ul class="level-1">
<li class="item-1">1</li>
<li class="item-2">2</li>
<li class="item-3">3</li>
</ul>
</div>
<div class="div">
<ul class="level-2">
<li class="item-1">1</li>
<li class="item-2">2</li>
<li class="item-3">3</li>
</ul>
</div>
<div class="div">
<ul class="level-3">
<li class="item-1">1</li>
<li class="item-2">2</li>
<li class="item-3">3</li>
</ul>
</div>
</div>
<button>点击：next无参数</button>
<button>点击：next传递表达式</button>
<script type="text/javascript">
$("button:first").click(function() {
$('li.item-1').next().css('border', '1px solid red')
})
</script> <script type="text/javascript">
$("button:last").click(function() {
//找到所有class=item-3的li
//然后给每个li,然后筛选出第一个，加上蓝色的边
$('.item-2').next(':first').css('border', '1px solid blue')
})
</script> </body> </html>
7、prev()方法
jQuery是一个合集对象，如果想快速查找指定元素集合中每一个元素紧邻的前面同辈元素的元素集合，此时可以用prev()方法
理解节点查找关系：
如下蓝色的class="tem-2"的li元素，红色的节点就是它的prev兄弟节点
<ul class="level-3">
<li class="item-1">1</li>
<li class="item-2">2</li>
<li class="item-3">3</li>
</ul>
prev()无参数
取得一个包含匹配的元素集合中每一个元素紧邻的前一个同辈元素的元素集合
注意：jQuery是一个合集对象，所以通过prev是匹配合集中每一个元素的上一个兄弟元素
prev()方法选择性地接受同一类型选择器表达式
同样的也是因为jQuery是合集对象，可能需要对这个合集对象进行一定的筛选，找出目标元素，所以允许传一个选择器的表达式
具体的操作，请参考下边的代码：
<!DOCTYPE html>
<html> <head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title></title>
<link rel="stylesheet" href="imooc.css" type="text/css">
<style>
.left {
width: auto;
height: 150px;
} .left div {
width: 150px;
height: 100px;
padding: 5px;
margin: 5px;
float: left;
background: #bbffaa;
border: 1px solid #ccc;
} a {
display: block;
}
</style>
<script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
</head> <body>
<h2>prev方法()</h2>
<div class="left first-div">
<div class="div">
<ul class="level-1">
<li class="item-1">1</li>
<li class="item-2">2</li>
<li class="item-3">3</li>
</ul>
</div>
<div class="div">
<ul class="level-2">
<li class="item-1">1</li>
<li class="item-2">2</li>
<li class="item-3">3</li>
</ul>
</div>
<div class="div">
<ul class="level-3">
<li class="item-1">1</li>
<li class="item-2">2</li>
<li class="item-3">3</li>
</ul>
</div>
</div>
<button>点击：prev无参数</button>
<button>点击：prev传递选择器</button>
<script type="text/javascript">
$("button:first").click(function() {
$('.item-2').prev().css('border', '1px solid red')
})
</script> <script type="text/javascript">
$("button:last").click(function() {
//找到所有class=item-2的li
//然后给每个li,然后筛选出第一个，加上蓝色的边
$('.item-3').prev(':last').css('border', '1px solid blue')
})
</script> </body> </html>
8、siblings()方法
jQuery是一个合集对象，如果想快速查找指定元集合中每一个元素紧邻的前面后面同辈元素，此时可以用siblings()方法
理解节点查找关系：
如下蓝色的class="tem-2"的li元素，红色的节点就是它的siblings兄弟节点
<ul class="level-3">
<li class="item-1">1</li>
<li class="item-2">2</li>
<li class="item-3">3</li>
</ul>
siblings()无参数
取得一个包含匹配的元素集合中每一个元素紧邻的前后同辈元素的元素集合
注意：jQuery是一个合集对象，所以通过siblings是匹配合集中每一个元素的前后兄弟元素
siblings()方法选择性地接受同一类型选择器表达式
同样的也是因为jQuery是合集对象，可能需要对这个合集对象进行一定的筛选，找出目标元素，所以允许传一个选择器的表达式
具体的操作，请参考下边的代码：
<!DOCTYPE html>
<html> <head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title></title>
<link rel="stylesheet" href="imooc.css" type="text/css">
<style>
.left {
width: auto;
height: 150px;
} .left div {
width: 150px;
height: 100px;
padding: 5px;
margin: 5px;
float: left;
background: #bbffaa;
border: 1px solid #ccc;
} a {
display: block;
}
</style>
<script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
</head> <body>
<h2>siblings方法()</h2>
<div class="left first-div">
<div class="div">
<ul class="level-1">
<li class="item-1">1</li>
<li class="item-2">2</li>
<li class="item-3">3</li>
</ul>
</div>
<div class="div">
<ul class="level-2">
<li class="item-1">1</li>
<li class="item-2">2</li>
<li class="item-3">3</li>
</ul>
</div>
<div class="div">
<ul class="level-3">
<li class="item-1">1</li>
<li class="item-2">2</li>
<li class="item-3">3</li>
</ul>
</div>
</div>
<button>点击：siblingsv无参数</button>
<button>点击：siblings传递选择器</button>
<script type="text/javascript">
$("button:first").click(function() {
$('.item-2').siblings().css('border','1px solid red')
})
</script> <script type="text/javascript">
$("button:last").click(function() {
//找到class=item-2的所有兄弟节点
//然后筛选出最后一个，加上蓝色的边
$('.item-2').siblings(':last').css('border', '2px solid blue')
})
</script> </body> </html>
9、add()方法
jQuery是一个合集对象，通过$()方法找到指定的元素合集后可以进行一系列的操作。$()之后就意味着这个合集对象已经是确定的，如果后期需要再往这个合集中添加一新的元素要如何处理？jQuery为此提供add方法，用来创建一个新的jQuery对象 ，元素添加到匹配的元素集合中
.add()的参数可以几乎接受任何的$()，包括一个jQuery选择器表达式，DOM元素，或HTML片段引用。
简单的看一个案例：
操作：选择所有的li元素，之后需要把p元素也加入到li的合集中
<ul>
<li>list item 1</li>
<li>list item 3</li>
</ul>
<p>新的p元素</p>
处理一：传递选择器
$('li').add('p')
处理二：传递dom元素
$('li').add(document.getElementsByTagName('p')[0])
还有一种方式，就是动态创建P标签加入到合集，然后插入到指定的位置，但是这样就改变元素的本身的排列了
$('li').add('<p>新的p元素</p>').appendTo(目标位置)
具体的操作，请参考下边的代码：
<!DOCTYPE html>
<html> <head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title></title>
<style>
.left {
width: auto;
height: 150px;
} .left div {
width: 150px;
height: 120px;
padding: 5px;
margin: 5px;
float: left;
background: #bbffaa;
border: 1px solid #ccc;
}
</style>
<script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
</head> <body>
<h2>add方法()</h2>
<div class="left first-div">
<div class="div">
<ul>
<li>list item 1</li>
<li>list item 2</li>
<li>list item 3</li>
</ul>
<p>新的p元素</p>
</div>
</div>
<div class="right"></div>
<br/>
<button>点击：add传递元素标签</button>
<button>点击：add传递html结构</button>
<script type="text/javascript">
$("button:first").click(function() {
//把p元素加到li合集中
$('li').add('p').css('background', 'red')
})
</script>
<script type="text/javascript">
$("button:last").click(function() {
//把html结构'<p>新的p元素</p>'
//加入到li的合集中，为了能够在页面上显示
//需要在重新appendTo要指定的节点处
//值得注意：整个结构位置都改变了
$('li').add('<p>新的p元素</p>').appendTo($('.right'))
})
</script>
</body> </html>
10、each()方法
jQuery是一个合集对象，通过$()方法找到指定的元素合集后可以进行一系列的操作。比如我们操作$("li").css('') 给所有的li设置style值，因为jQuery是一个合集对象，所以css方法内部就必须封装一个遍历的方法，被称为隐式迭代的过程。要一个一个给合集中每一个li设置颜色，这里方法就是each
.each() 方法就是一个for循环的迭代器，它会迭代jQuery对象合集中的每一个DOM元素。每次回调函数执行时，会传递当前循环次数作为参数(从0开始计数
所以大体上了解3个重点：
each是一个for循环的包装迭代器
each通过回调的方式处理，并且会有2个固定的实参，索引与元素
each回调方法中的this指向当前迭代的dom元素
看一个简单的案例
<ul>
<li>慕课网</li>
<li>Aaron</li>
</ul>
开始迭代li，循环2次
$("li").each(function(index, element) {
index 索引 0,1
element是对应的li节点 li,li
this 指向的是li
})
这样可以在循环体会做一些逻辑操作了，如果需要提前退出，可以以通过返回 false以便在回调函数内中止循
具体的操作，请参考下边的代码:
<!DOCTYPE html>
<html> <head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title></title>
<style>
.left {
width: auto;
height: 150px;
} .left div {
width: 150px;
height: 120px;
padding: 5px;
margin: 5px;
float: left;
background: #bbffaa;
border: 1px solid #ccc;
}
</style>
<script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
</head> <body>
<h2>each方法</h2>
<div class="left first-div">
<div class="div">
<ul>
<li>list item 1</li>
<li>list item 2</li>
<li>list item 3</li>
</ul>
</div>
<div class="div">
<ul>
<li>list item 4</li>
<li>list item 5</li>
<li>list item 6</li>
</ul>
</div>
</div> <br/>
<button>点击：each方法遍历元素</button>
<button>点击：each方法回调判断</button>
<script type="text/javascript">
$("button:first").click(function() {
//遍历所有的li
//修改每个li内的字体颜色
$("li").each(function(index, element) {
$(this).css('color','red')
}) })
</script>
<script type="text/javascript">
$("button:last").click(function() {
//遍历所有的li
//修改偶数li内的字体颜色
$("li").each(function(index, element) {
if (index % 2) {
$(this).css('color','blue')
}
})
})
</script>
</body> </html>
jQuery基础修炼圣典—DOM篇（二）jQuery遍历的更多相关文章
- jQuery基础修炼圣典—DOM篇（一）
一.DOM节点的创建 1.创建节点及节点属性 通过JavaScript可以很方便的获取DOM节点,从而进行一系列的DOM操作.但实际上一般开发者都习惯性的先定义好HTML结构,但这样就非常不灵活了. ...
- jquery基础学习之DOM篇（二）
在此之前请牢记,jquery 是一个合集对象!!!! 1.节点创建 js创建方法: 创建元素:document.createElement 设置属性:setAttribute 添加文本:innerHT ...
- 锋利的jQuery（1）——DOM对象与jQuery对象的转换
1.认识jQuery DOM对象:即文档对象模型 jQuery对象:通过jQuery包装DOM对象后产生的对象.这是jQuery对象所特有的,在jQuery对象中无法使用DOM对象的任何方法,同时DO ...
- JQuery基础修炼-样式篇
jQuery对象转化成DOM对象 jQuery库本质上还是JavaScript代码,它只是对JavaScript语言进行包装处理,为了是提供更好更方便快捷的DOM处理与开发常见中经常使用的功能.我们可 ...
- jquery 基础汇总---导图篇
最近在慕课网学习了一些jquery的基础知识,为了方便记忆,整理出来的导图 jQuery基础总共分为4个部分,分别是样式篇.事件篇.动画篇.DOM篇. 样式篇,主要介绍jQuery的基础语法,选择器以 ...
- jquery基础学习之样式篇（一）
一.安装与使用 官网下载,然后引入 <script src="js/jquery-3.3.1.js"></script>,这是生产版本,开发版本替换成min ...
- jQuery基础学习2——DOM和jQuery对象
<body> <h3>例子</h3> <p title="选择你最喜欢的水果." >你最喜欢的水果是?</p> < ...
- 一周一话题之四（JavaScript、Dom、jQuery全面复习总结<Dom篇>）
-->目录导航 一. 初探Dom 1. Dom介绍 二. Dom基础 1. window顶级对象 2. body.document对象事件 3. 通用的HTML元素的事件 4. 冒泡事件 5. ...
- 【jQuery基础学习】08 编写自定义jQuery插件
目的:虽然jQuery各种各样的功能已经很完善了,但是我们还是要学会自己去编写插件.这样我们可以去封装一些项目中经常用到的专属的代码,以便后期维护和提高开发效率. jQuery插件的类型: 封装对象方 ...
随机推荐
- 【转载】wireshark：no interface can be used for capturing in this system with the current configuration
转自:wireshark:no interface can be used for capturing in this system with the current configuration 通过 ...
- Linux 计划任务 Crontab 笔记与总结（2）Crontab 的基本组成与配置
[Crontab 的基本组成] ① 系统服务 CROND:每分钟都会从配置文件刷新定时任务 ② 配置文件 :文件方式设置定时任务 ③ 配置工具 crontab:用途调整定时任务 [配置文件的配置文件格 ...
- 使用spring等框架的web程序在Tomcat下的启动顺序及思路理清
大牛请绕过,此文仅针对自己小白水平,对web程序的启动流程做个清晰的回顾. 一.使用spring等框架的web程序在Tomcat下的启动流程 1)Tomcat是根据web.xml来启动的.首先到web ...
- RT-Thread多线程导致的临界区问题
临界资源是指一次仅允许一个线程使用的共享资源.不论是硬件临界资源,还是软件临界资源,多个线程必须互斥地对它们进行访问.每个线程中访问临界资源的那段代码称为临界区( Critical Section), ...
- RT-Thread创建静态、动态线程
RT-Thread 实时操作系统核心是一个高效的硬实时核心,它具备非常优异的实时性.稳定性.可剪裁性,当进行最小配置时,内核体积可以到 3k ROM 占用. 1k RAM 占用. RT-Thread ...
- DataSet key points
In a typical multiple-tier implementation, the steps for creating and refreshing a DataSet, and in t ...
- Nginx Location 语法，与简单配置[转]
一、介绍Nginx是俄罗斯人编写的十分轻量级的HTTP服务器,Nginx，它的发音为“engine X”， 是一个高性能的HTTP和反向代理服务器，同时也是一个IMAP/POP3/SMTP 代理服务器 ...
- BIgInteger类和BigDecimal类的理解
第一部分: 这两个类位于java.math包内,要使用它们必须在类前面引用该包:import java.math.BigInteger;和import java.math.BigDecimal; Bi ...
- heapsort
Introduction to Algorithms Third Edition The (binary) heap data structure is an array object that we ...
- SWT常用组件（转）
转载自:http://www.cnblogs.com/happyPawpaw/archive/2012/10/19/2730478.html 1按钮组件(Button) (1)Button组件常用样式 ...