jquery循环遍历中add\each\andSelf\eq\filter\map\slice方法的使用

来源：互联网发布：网络时延的组成部分编辑：程序博客网时间：2024/05/18 15:53
<!DOCTYPE html>
<htmllang="en">
<head>
<metacharset="UTF-8">
<metaname="viewport"content="width=device-width, initial-scale=1.0">
<metahttp-equiv="X-UA-Compatible"content="ie=edge">
<title>jquery循环遍历练习</title>
<scriptsrc="jquery-1.11.1.min.js"></script>
</head>
<body>
<divid="add">
<divstyle="width:100px;height:200px;"></div>
<p>1111</p>
</div>

<buttonid="each">dianji</button>
<ulclass="andSelf eqeach">
<li>list item 1</li>
<li>list item 2</li>
<liclass="third-item">list item 3</li>
<li>list item 4</li>
<li>list item 5</li>
</ul>

<ulid="filter">
<li><strong>list</strong> item 1 - one strong tag</li>
<li><strong>list</strong> item <strong>2</strong>- two<span>strong tags</span></li>
<li>list item 3</li>
<li>list item 4</li>
<li>list item 5</li>
<li>list item 6</li>
</ul>

<formmethod="post"action="" id="map">
<fieldset>
<div>
<labelfor="two">2</label>
<inputtype="checkbox"value="2"id="two" name="number[]">
</div>
<div>
<labelfor="four">4</label>
<inputtype="checkbox"value="4"id="four" name="number[]">
</div>
<div>
<labelfor="six">6</label>
<inputtype="checkbox"value="6"id="six" name="number[]">
</div>
<div>
<labelfor="eight">8</label>
<inputtype="checkbox"value="8"id="eight" name="number[]">
</div>
</fieldset>
</form>
<ulid="slice">
<li>list item 1</li>
<li>list item 2</li>
<li>list item 3</li>
<li>list item 4</li>
<li>list item 5</li>
</ul>
<script>
/*
add（）方法将元素添加到匹配元素的集合中
.add(selector) selector 字符串值，表示查找供添加到匹配元素集合的元素的选择器表达式。
.add(elements) elements 添加到匹配元素集合的一个或多个元素。
.add(html) html 添加到匹配元素集合的 HTML 片段。
.add(jQueryObject) jQueryObject    添加到匹配元素集合的已有 jQuery 对象。
.add(selector, context) selector  字符串值，表示查找供添加到匹配元素集合的元素的选择器表达式。 context  选择器开始进行匹配的位置。
*/
// $('div').css('border','2px solid red')
// .add('p')
// .css('background','yellow');

/* 
andSelf()方法
把堆栈中之前的元素集添加到当前集合中

*/
// $('li.third-item').nextAll().andSelf().css('background-color','red');

/*
1、选择器+遍历
$('div').each(function (i){
i就是索引值
this 表示获取遍历每一个dom对象
});
2、选择器+遍历
$('div').each(function (index,domEle){
index就是索引值
domEle 表示获取遍历每一个dom对象
});
3、更适用的遍历方法
1）先获取某个集合对象
2）遍历集合对象的每一个元素
var d=$("div");
$.each(d,function (index,domEle){
d是要遍历的集合
index就是索引值
domEle 表示获取遍历每一个dom对
});

对 jQuery 对象进行迭代，为每个匹配元素执行函数。
each() 方法规定为每个匹配元素规定运行的函数 ---》返回false 可用于及早停止循环
$(selector).each(function(index,element))
function(index,element) 必须。 为每个汽配元素规定运行的函数 index - 选择器的index 位置 element - 当前的元素（也可使用“this”选择器
*/
// $('button').click(function(){
// $('li').each(function(index,element){
// // alert($(this).text())
// $(element).text();
// })

// var data = $('.each li');
// $.each(data,function(index,element){
// alert($(this).text())
// })

// })

/*
将匹配元素集合缩减为位于指定索引的新元素。
eq(index) 方法将匹配元素集缩减值指定index 上的一个。
index    整数，指示元素的位置（最小为 0）。如果是负数，则从集合中的最后一个元素往回计数。
*/
// $('li').eq(2).css('background-color','red');
/*
将匹配元素集合缩减为匹配选择器或匹配函数返回值的新元素。
filter() 方法将匹配元素集合缩减为匹配指定选择器的元素
.filter(selector) selector   字符串值，包含供匹配当前元素集合的选择器表达式。
如果给定表示 DOM 元素集合的 jQuery 对象，.filter() 方法会用匹配元素的子集构造一个新的 jQuery 对象。所使用的选择器会测试每个元素；所有匹配该选择器的元素都会包含在结果中。

*/
// $('li').filter(':even').css('background-color', 'red');

/*
使用过滤函数
使用该方法的第二个形式是，通过函数而不是选择器来筛选元素。对于每个元素，如果该函数返回 true，则元素会被包含在已筛选集合中；否则，会排除这个元素。
*/
// $('li').filter(function(index,element){
// return $('strong',this).length == 1;
// }).css('background-color','red');

/*
把当前匹配集合中的每个元素传递给函数，产生包含返回值的新 jQuery 对象。
map() 把每个元素通过函数传递到当前匹配集合中，生成包含返回值的新的jquery对象
.map(callback(index,domElement)) callback(index,domElement) 对当前集合中的每个元素调用的函数对象。
详细说明
由于返回值是 jQuery 封装的数组，使用 get() 来处理返回的对象以得到基础的数组。
.map() 方法对于获得或设置元素集的值特别有用。请思考下面这个带有一系列复选框的表单：
*/
// var arr=$(':checkbox').map(function(index,element){
// // return element.id;
// return this.id;
// }).get().join(',');
// alert(arr);

/*
slice(selector,end) 将匹配元素集合缩减为指定范围的子集。
selector 基于 0 的整数值，指示开始选取元素的位置。如果是负数，则指示从集合末端开始的偏移量。
end  基于 0 的整数值，指示结束选取元素的位置。如果是负数，则指示从集合末端开始的偏移量。如果省略，则选取范围会在集合末端结束。
详细说明
如果给定一个表示 DOM 元素集合的 jQuery 对象，.slice() 方法用匹配元素的子集构造一个新的 jQuery 对象。已应用的 index 参数集合中其中一个元素的位置；如果省略 end 参数，则 index 之后的所有的所有元素都会包含在结果中。
请思考这个带有简单列表的页面：
*/
// $('#slice li').slice(2).css('background-color','red');
// $('#slice li').slice(2,4).css('background-color','red');
</script>
</body>
</html>
阅读全文
0 0