手机app开发网站建设,网页制作专业软件有哪些,郑州高新区做网站的公司,怎么推广自己的信息遍历方法有#xff1a;1、add()#xff0c;用于把元素添加到匹配元素的集合中#xff1b;2、children()#xff0c;用于返回被选元素的所有直接子元素#xff1b;3、closest()#xff0c;用于返回被选元素的第一个祖先元素#xff1b;4、contents()#xff0c;用于返回…遍历方法有1、add()用于把元素添加到匹配元素的集合中2、children()用于返回被选元素的所有直接子元素3、closest()用于返回被选元素的第一个祖先元素4、contents()用于返回被选元素的所有直接子元素5、each()用于为每个匹配元素执行函数7、eq()8、find()9、first()10、is()11、last()等等。jQuery 遍历方法总结jQuery 遍历函数包括了用于筛选、查找和串联元素的方法。方法描述add()把元素添加到匹配元素的集合中addBack()把之前的元素集添加到当前集合中andSelf()在版本 1.8 中被废弃。addBack() 的别名children()返回被选元素的所有直接子元素closest()返回被选元素的第一个祖先元素contents()返回被选元素的所有直接子元素包含文本和注释节点each()为每个匹配元素执行函数end()结束当前链中最近的一次筛选操作并把匹配元素集合返回到前一次的状态eq()返回带有被选元素的指定索引号的元素filter()把匹配元素集合缩减为匹配选择器或匹配函数返回值的新元素find()返回被选元素的后代元素first()返回被选元素的第一个元素has()返回拥有一个或多个元素在其内的所有元素is()根据选择器/元素/jQuery 对象检查匹配元素集合如果存在至少一个匹配元素则返回 truelast()返回被选元素的最后一个元素map()把当前匹配集合中的每个元素传递给函数产生包含返回值的新 jQuery 对象next()返回被选元素的后一个同级元素nextAll()返回被选元素之后的所有同级元素nextUntil()返回介于两个给定参数之间的每个元素之后的所有同级元素not()从匹配元素集合中移除元素offsetParent()返回第一个定位的父元素parent()返回被选元素的直接父元素parents()返回被选元素的所有祖先元素parentsUntil()返回介于两个给定参数之间的所有祖先元素prev()返回被选元素的前一个同级元素prevAll()返回被选元素之前的所有同级元素prevUntil()返回介于两个给定参数之间的每个元素之前的所有同级元素siblings()返回被选元素的所有同级元素slice()把匹配元素集合缩减为指定范围的子集两个遍历子元素的方法children()方法获取该元素下的直接子集元素find()方法获取该元素下的所有包括子集的子集子集元素区别children() 方法返回返回被选元素的所有直接子元素 直接子元素只找儿子不要孙子 也就是说不会递归去遍历find()方法获得当前元素集合中每个元素的后代 注意find方法必须传参数否者无效示例查询所有子元素!DOCTYPE html
htmlheadmeta charsetutf-8script srcjs/jquery-1.10.2.min.js/scriptstylediv * {display: block;border: 2px solid lightgrey;color: lightgrey;padding: 5px;margin: 15px;}/stylescript$(document).ready(function() {$(button).on(click, function() {$(ul).find(*).css({color: red,border: 2px solid red});});});/script/headbody classancestorsdiv stylewidth:500px;div (父节点)ulul (指定元素)lili (子节点1)spanspan (孙节点1)/span/lilili (子节点2)spanspan (孙节点2)/span/lilili (子节点3)spanspan (孙节点3)/span/li/ul/divbutton选取ul的所有子元素/button/body
/html7种遍历同级元素的方法siblings()方法主要用于获得指定元素的同级所有元素next()方法主要用于获得指定元素的下一个同级元素nextAll()方法主要用于获得指定元素的下一个同级的所有元素nextUntil()方法主要用于获得指定元素的下一个同级元素这个同级元素必须为指定元素与nextUntil()方法所设置元素之间的元素prev()方法主要用于获得指定元素的上一级同级元素prevAll()方法主要用于获得指定元素上一级所有的同级元素prevUntil()方法主要用于获得指定元素的上一个同级元素这个同级元素必须为指定元素与prevUntil()方法所设置元素之间的元素siblings()方法!DOCTYPE html
htmlheadscript typetext/javascript srcjs/jquery-1.10.2.min.js/script/headbodydivspanHello/span/divp classselectedHello Again/ppAnd Again/pscript$(p).siblings(.selected).css(background, yellow);/script/body
/htmlnext()方法!DOCTYPE html
htmlheadscript typetext/javascript srcjs/jquery-1.10.2.min.js/script/headbodyullilist item 1/lililist item 2/lili classthird-itemlist item 3/lililist item 4/lililist item 5/li/ulscript$(li.third-item).next().css(background-color, red);/script/body
/htmlnextAll()方法!DOCTYPE html
htmlheadscript typetext/javascript srcjs/jquery-1.10.2.min.js/script/headbodyullilist item 1/lililist item 2/lili classthird-itemlist item 3/lililist item 4/lililist item 5/li/ulscript$(li.third-item).nextAll().css(background-color, red);/script/body
/htmlnextUntil()方法!DOCTYPE html
htmlheadscript typetext/javascript srcjs/jquery-1.10.2.min.js/scriptstyle.siblings * {display: block;border: 2px solid lightgrey;color: lightgrey;padding: 5px;margin: 15px;}/stylescript$(document).ready(function() {$(li.start).nextUntil(li.stop).css({color: red,border: 2px solid red});});/script/headbodydiv stylewidth:500px; classsiblingsulul (父节点)lili (兄弟节点)/lilili (兄弟节点)/lili classstartli (类名为start的兄弟节点)/lilili (类名为start的li节点的下一个兄弟节点)/lilili (类名为start的li节点的下一个兄弟节点)/lilili (类名为start的li节点的下一个兄弟节点)/lili classstopli (类名为stop的兄弟节点)/li/ul/divp在这个例子中,我们返回在类名为“star”和类名为“stop”的 li元素之间的所有下一个兄弟元素。/p/body
/htmlprev()方法!DOCTYPE html
htmlheadscript typetext/javascript srcjs/jquery-1.10.2.min.js/scriptstyle.siblings * {display: block;border: 2px solid lightgrey;color: lightgrey;padding: 5px;margin: 15px;}/stylescript$(document).ready(function() {$(li.start).prev().css({color: red,border: 2px solid red});});/script/headbodydiv stylewidth:500px; classsiblingsulul (父节点)lili (兄弟节点)/lilili (类名为start的li节点的上一个兄弟节点)/lili classstartli (类名为start的li节点)/lilili (兄弟节点)/lilili (兄弟节点)/li/ul/div/body
/htmlprevAll()方法!DOCTYPE html
htmlheadscript typetext/javascript srcjs/jquery-1.10.2.min.js/scriptstyle.siblings * {display: block;border: 2px solid lightgrey;color: lightgrey;padding: 5px;margin: 15px;}/stylescript$(document).ready(function() {$(li.start).prevAll().css({color: red,border: 2px solid red});});/script/headbodydiv stylewidth:500px; classsiblingsulul (parent)lili (类名为start的li的上一个兄弟节点)/lilili (类名为start的li的上一个兄弟节点)/lilili (类名为start的li的上一个兄弟节点)/lili classstartli (类名为start的li节点)/lilili (兄弟节点)/lilili (兄弟节点)/li/ul/divp在这个例子中,我们返回类名称为“star”的li元素之前的所有兄弟元素。/p/body
/htmlprevUntil()方法!DOCTYPE html
htmlheadscript typetext/javascript srcjs/jquery-1.10.2.min.js/scriptstyle.siblings * {display: block;border: 2px solid lightgrey;color: lightgrey;padding: 5px;margin: 15px;}/stylescript$(document).ready(function() {$(li.start).prevUntil(li.stop).css({color: red,border: 2px solid red});});/script/headbodydiv stylewidth:500px; classsiblingsulul (父节点)li classstopli (类名为stop的兄弟节点)/lilili (类名为start的li节点的上一个兄弟节点)/lilili (类名为start的li节点的上一个兄弟节点)/lilili (类名为start的li节点的上一个兄弟节点)/lili classstartli (类名为start的li节点)/lilili (兄弟节点)/lilili (兄弟节点)/li/ul/divp在这个例子中,我们返回在类名为“star”和“stop”的li元素之间的所有上一个兄弟元素,。/p/body
/htmleach()和map()方法可以遍历数组each()遍历数组scriptvar arr [1,3,5,7,9];var obj {0:1,1:3,2:5,3:7,4:9}; /*** 利用jQuery的each静态方法遍历* 第一个参数当前遍历到的索引* 第二个元素遍历到的元素* 注意jQuery的each方法可以遍历伪数组*/$.each(arr,function(index,value){console.log(jQuery-each方法遍历数组,index,value);})$.each(obj,function(index,value){console.log(jQuery-each方法遍历伪数组,index,value);})
/scriptmap()遍历数组scriptvar arr [1,3,5,7,9];var obj {0:1,1:3,2:5,3:7,4:9};/***1.利用原生JS的map方法遍历 *第一个参数遍历到的元素*第二个参数当前遍历到的索引*第三个参数当前被遍历的数组*注意和原生的forEach方法一样不能遍历伪数组*/arr.map(function(value,index,array){console.log(原生map遍历数组:,index,value,array);});/**obj.map(function(value,index,array){console.log(原生map遍历伪数组:,index,value,array);//Uncaught TypeError: obj.forEach is not a function});*//*** 2.利用jQuery的each静态方法遍历* 第一个参数要遍历的数组* 每遍历一个元素之后执行的回调函数* 回调函数的参数* 第一个参数遍历到的元素* 第二个元素当前遍历到的索引* 注意和jQuery的each方法一样可以遍历伪数组*/$.map(arr,function(value,index){console.log(jQuery-map方法遍历数组,index,value);})$.map(obj,function(value,index){console.log(jQuery-map方法遍历伪数组,index,value);})
/script扩展知识each的用法 1.数组中的each var arr [ one, two, three, four]; $.each(arr, function(){ alert(this); });
//上面这个each输出的结果分别为one,two,three,four
var arr1 [[1, 4, 3], [4, 6, 6], [7, 20, 9]]
$.each(arr1, function(i, item){ alert(item[0]);
});
//其实arr1为一个二维数组item相当于取每一个一维数组
//item[0]相对于取每一个一维数组里的第一个值
//所以上面这个each输出分别为1 4 7
var obj { one:1, two:2, three:3, four:4};
$.each(obj, function(i) { alert(obj[i]);
});
//这个each就有更厉害了能循环每一个属性
//输出结果为1 2 3 42.遍历Dom元素中html
head
script typetext/javascript src/jquery/jquery.js/script
script typetext/javascript
$(document).ready(function(){$(button).click(function(){$(li).each(function(){alert($(this).text())});});
});
/script
/head
body
button输出每个列表项的值/button
ul
liCoffee/li
liMilk/li
liSoda/li
/ul
/body
/html依次弹出CoffeeMilkSoda 3.each和map的比较下面的例子是获取每一个多框的ID值each方法定义一个空数组通过each方法往数组添加ID值最后将数组转换成字符串后alert这个值$(function(){var arr [];$(:checkbox).each(function(index){arr.push(this.id);});var str arr.join(,);alert(str);
})map方法:将每个:checkbox执行return this.id并将这些返回值自动的保存为jQuery对象然后用get方法将其转换成原生Javascript数组再使用join方法转换成字符串最后alert这个值$(function(){var str $(:checkbox).map(function() {return this.id;}).get().join(); alert(str);
})当有需一个数组的值的时候用map方法很方便。 4.jquery中使用each例遍数组同时使用元素索引和内容。i是索引n是内容代码如下:$.each( [0,1,2], function(i, n){
alert( Item # i : n );
});例遍对象同时使用成员名称和变量内容。i是成员名称n是变量内容代码如下:$.each( { name: John, lang: JS }, function(i, n){
alert( Name: i , Value: n );
});例遍dom元素此处以一个input表单元素作为例子。 如果你dom中有一段这样的代码 input nameaaa typehidden value111 /
input namebbb typehidden value222 /
input nameccc typehidden value333 /
input nameddd typehidden value444/然后你使用each如下代码如下:$.each($(input:hidden), function(i,val){
alert(val); //输出[object HTMLInputElement]因为它是一个表单元素。
alert(i); //输出索引为0123
alert(val.name); //输出name的值
alert(val.value); //输出value的值
});5.each中根据this查找元素实现效果”回复”两个字只有在鼠标经过的时候才显示出来ol classcommentlistli classcommentdiv classcomment-bodyp嗨第一层评论/pdiv classreplya href# class.comment-reply-link回复/a/div/divul classchildrenli classcommentdiv classcomment-bodyp第二层评论/pdiv classreplya href# class.comment-reply-link回复/a/div/div/li/ul/li
/oljs代码如下$(div.reply).hover(function(){$(this).find(.comment-reply-link).show();
},function(){$(this).find(.comment-reply-link).hide();
});实现效果验证判断题是否都有选择htmlul idulSingleli classliStyle1. 阿斯顿按时label idselectTips styledisplay: none classfillTims请选择/label!--begin选项--ulli classliStyle2span idrepSingle_repSingleChoices_0_labOption_0A /span.阿萨德发input typehidden namerepSingle$ctl00$repSingleChoices$ctl00$hidID idrepSingle_repSingleChoices_0_hidID_0 value1 /input idrepSingle_repSingleChoices_0_cheSingleChoice_0 typecheckbox namerepSingle$ctl00$repSingleChoices$ctl00$cheSingleChoice //lili classliStyle2span idrepSingle_repSingleChoices_0_labOption_1B /span.阿萨德发input typehidden namerepSingle$ctl00$repSingleChoices$ctl01$hidID idrepSingle_repSingleChoices_0_hidID_1 value2 /input idrepSingle_repSingleChoices_0_cheSingleChoice_1 typecheckbox namerepSingle$ctl00$repSingleChoices$ctl01$cheSingleChoice //lili classliStyle2span idrepSingle_repSingleChoices_0_labOption_2C /span.阿斯顿input typehidden namerepSingle$ctl00$repSingleChoices$ctl02$hidID idrepSingle_repSingleChoices_0_hidID_2 value3 /input idrepSingle_repSingleChoices_0_cheSingleChoice_2 typecheckbox namerepSingle$ctl00$repSingleChoices$ctl02$cheSingleChoice //li/ul!--end选项--br //li
/uljs代码//验证单选题是否选中$(ul#ulSingleli.liStyle).each(function (index) {//选项个数var count $(this).find(ulli:checkbox).length;var selectedCount 0for (var i 0; i count; i) {if ($(this).find(ulli:checkbox:eq( i )).attr(checked)) {selectedCount;break;}}if (selectedCount 0) {$(this).find(label#selectTips).show();return false;}else {$(this).find(label#selectTips).hide();}}) ps:传说中attr(property, value);在部分浏览器中不管用可以用prop如果只是判断可以用$(this).find(ulli:checkbox:eq( i )).is(:checked);6.官方解释以下是官方的解释 jQuery.each(object, [callback])概述 通用例遍方法可用于例遍对象和数组。 不同于例遍 jQuery 对象的 $().each() 方法此方法可用于例遍任何对象。回调函数拥有两个参数第一个为对象的成员或数组的索引第二个为对应变量或内容。如果需要退出 each 循环可使回调函数返回 false其它返回值将被忽略。 参数 objectObject 需要例遍的对象或数组。 callback (可选)Function 每个成员/元素执行的回调函数。以上就是jquery有哪些遍历方法的详细内容更多请关注本人博客其它相关文章
