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

╰+哭是因爲堅強的太久メ 2022-06-16 14:26 132阅读 0赞

<!DOCTYPE html >

< html lang= "en" >

< head >

< meta charset= "UTF-8" >

< meta name= "viewport" content= "width=device-width, initial-scale=1.0" >

< meta http-equiv= "X-UA-Compatible" content= "ie=edge" >

< title >jquery循环遍历练习 </ title >

< script src= "jquery-1.11.1.min.js" ></ script >

</ head >

< body >

< div id= "add" >

< div style= "width:100px;height:200px;" ></ div >

< p >1111 </ p >

</ div >

< button id= "each" >dianji </ button >

< ul  class = "andSelf eq  each" >

< li >list item 1 </ li >

< li >list item 2 </ li >

< li class= "third-item" >list item 3 </ li >

< li >list item 4 </ li >

< li >list item 5 </ li >

</ ul >

< ul id= "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 >

< form method= "post" action= ""  id= "map" >

< fieldset >

< div >

< label for= "two" >2 </ label >

< input type= "checkbox" value= "2" id= "two"  name= "number\[\]" >

</ div >

< div >

< label for= "four" >4 </ label >

< input type= "checkbox" value= "4" id= "four"  name= "number\[\]" >

</ div >

< div >

< label for= "six" >6 </ label >

< input type= "checkbox" value= "6" id= "six"  name= "number\[\]" >

</ div >

< div >

< label for= "eight" >8 </ label >

< input type= "checkbox" value= "8" id= "eight"  name= "number\[\]" >

</ div >

</ fieldset >

</ form >

< ul id= "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 >

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

发表评论取消回复

还没有评论，来说两句吧...

相关阅读

相关 jQuery 遍历 - next() 方法实例

相关 jQuery遍历

相关 jquery使用each方法遍历元素

相关 jQuery 遍历 - find() 方法

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

相关循环遍历的几种方法

相关 jQuery 遍历

相关 for 循环，jQuery循环遍历详解

相关 JavaScript循环遍历方法

相关数组常见的遍历循环方法、数组的循环遍历的效率对比