投稿
  1. 首页
  2. 框架

jquery哪个版本有each方法

pdg文件 • 2023-4-28 • 框架 • 阅读 9

jquery哪个版本有each方法,第1张

都有啊，既然你对each那么有兴趣，就给你这代码看看吧，这是我之前对遍历的总结。版权@Demonor_所有（就是我啦）

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>Jquery_ergodic02</title>

<link href="bootstrap-335-dist/css/bootstrapcssmap" rel="stylesheet" type="text/css">

<script language="javascript" type="text/javascript" src="jquery-214minjs"></script>

<style>

body{padding-top:40px;}

#main{

width:600px;

height:800px;

text-align:left;

padding-left:20px;

}

a:link{color:#0CF; text-decoration:none}

a:visited{ color:#0CF; text-decoration:none}

a:hover{color:#0F0; text-decoration:none;}

a:active{color:#93C; text-decoration:none;}

</style>

<script>

function f1(){

alert("$()each(List,function(index, element) {}方法可以遍历"+"\n"+"一维数组、单花括号的JSON、有规律的的多花括号JSON"+"\n"+"以及body的任何元素。"+"\n\n"+"但似乎不能遍历出无规律的多花括号JSON。");

//遍历一维数组

//var array = ['one','two','three'];

//    $each(array,function(key,value) {

//   alert(key+' '+value);

//});

//遍历一个花括号的JSON

//var json ={"name":"Amy","role":"student","sex":"male","hobit":"game"};

//$each(json,function(key,value){

//   alert(key+":"+value);

//   });

//遍历有规律的多个花括号的JSON

//var json =[{"name":"Amy","role":"student","sex":"female"},{"name":"Tom","role":"student","sex":"male"}];

//$each(json, function(index, value) {

//alert("index = "+index+"\n"+"name : "+valuename+"\n"+"role : "+valuerole+"\n"+"sex : "+valuesex);

//});

}

function f2(){

var array = ['one','two','three'];

$each(array,function(index,value) {

alert(index+' '+value);

});

/

var array =  ['one','two','three'];

for(var i in array ){

alert(i+" "+array[i]);

}

/

}

function f3(){

var json ={"name":"Amy","role":"student","sex":"male","hobit":"game"};

$each(json,function(index,value){

alert(index+":"+value);

});

/

for(var i in json){

alert(json[i]);

}

/

}

function f4(){

//这是有规律的多花括号JSON

var json =[{"name":"Amy","role":"student","sex":"female"},{"name":"Tom","role":"student","sex":"male"}];

//  for(var i in json){

//alert(i);

//alert(json[i]name+"\n"+json[i]role+"\n"+json[i]sex);

//}

$each(json, function(index, value) {

alert("index = "+index+"\n"+"name : "+valuename+"\n"+"role : "+valuerole+"\n"+"sex : "+valuesex);

});

}

function f5(){

//获取id="div"里面所有内容

var html="";

var elements = $("#div");

$each(elements,function(){

alert(html+=$(this)html());

});

/ //获取id="div"所有子标签的内容

var div=documentgetElementById('div');

var elements=divchildNodes;

for(var i=0;i <elementslength;i++){

var e=elements[i]childNodes[0]; //childNodes[0]取第一个子节点

$each($(e),function(){

alert(edata);

});

}

/

/  //获取id="div"所有无标签的内容

var div=documentgetElementById('div');

var elements=divchildNodes;

for(var i=0;i <elementslength;i++){

var d=elements[i]

alert(ddata);

}

/

}

function f5_1(){

//获取id="div"所有子标签的内容

//获取id="div"所有子标签的内容

var div=documentgetElementById('div');

var elements=divchildNodes;

for(var i=0;i <elementslength;i++){

var e=elements[i]childNodes[0]; //childNodes[0]取第一个子节点

//$(e)each(function(){

$each($(e),function(){

alert(edata);

});

}

}

function f5_2(){

//遍历p标签元素

var html="";

var elements = $("#div>p");

$each(elements,function(){

alert(html+=$(this)html());

});

}

function f5_3(){

//获取id="div"所有无标签的内容

alert("");

}

function f6(){

alert("for(var i in array ){}方法可以遍历一维数组、单花括号JSON"+"\n"+"有规律的的多花括号JSON,无规律的的多花括号JSON");

}

function f7(){

var json =[{"name":"Amy","role":"student"},{"sex":"male","hobit":"game"}]; //这是无规律的多花括号JSON

for(var i=0;i<jsonlength;i++){

for(var j in json[i]){

//alert(j);

//alert(json[i][j]);

alert(j+":"+json[i][j]);

}

}

}

function f8(){

var array =  ['one','two','three','1','2','3'];

//$map()、$grep(),这两个方法主要用来 *** 作数组，选择出数组中符合条件的记录，并返回,即将一个数组转换为另一个数组

var arr = $grep(array,function(n,value){

return isNaN(n)n:null;

});

for (var key in arr){

alert(arr[key]);

}

}

function f9(){

//$inArray()函数用于在数组中搜索指定的值，并返回其索引值

var array = ['one','two','three'];

var index = $inArray("two",array);

alert("数组中two 的索引是"+index+"\n"+"array[1] = "+array[index]);//返回该值在数组中的键值，返回1

}

</script>

</head>

<body>

<div id="main">

<a onClick="f1()">$each(array,function(index,element){})</a><br>

<a onClick="f2()">$each(array,function(index,element){})遍历一维数组</a><br>

<a onClick="f3()">$each(array,function(index,element){})遍历单花括号JSON</a><br>

<a onClick="f4()">$each(array,function(index,element){})遍历有规律的多个花括号的JSON</a><br>

<a onClick="f5()">$each(array,function(index,element){})遍历以下div所有元素</a><br>

<div id="div" style="border:1px dashed #CCC; width:150px; height:150px; text-align:center;" >

<p>ergodic div element</p>

<h5>Hello World </h5>

no Label

</div>

<a onClick="f5_1()">$each(array,function(index,element){})遍历上面的div的子标签的内容</a><br>

<a onClick="f5_2()">$each(array,function(index,element){})遍历上面的div的 p 标签的内容</a><br>

<a onClick="f5_3()">$each(array,function(index,element){})遍历上面的div的无标签的内容</a><br>

<br><br>

<a onClick="f6()">for(var i in array ){}</a><br>

<a onClick="f2()">for(var i in array ){}遍历一维数组</a><br>

<a onClick="f3()">for(var i in array ){}遍历单花括号JSON</a><br>

<a onClick="f4()">for(var i in array ){}遍历有规律的复杂一点的JSON</a><br>

<a onClick="f7()">for(var i in array ){}遍历无规律的复杂一点的JSON （两个for循环）</a><br><br><br>

<a onClick="f8()">$map()、$grep()选择出数组中符合条件的记录，并返回,得到另一个数组</a><br>

<a onClick="f9()">$inArray()函数用于在数组中搜索指定的值，并返回其索引值</a><br><br>

</div>

</body>

</html>

//某一节点下的所有子节点

function getChildren(id/节点ID/){

    var $tree = $('#tree');

    var node = $treetree('find',id);

    var childrenNodes = $treetree('getChildren',nodetarget);

    return childrenNodes;

}

//某节点的一级节点

function getSubChildren(id){

    var $tree = $('#tree');

    var node = $treetree('find',id);

    var subNodes = [];

    $(nodetarget)

    next()children()children("divtree-node")each(function(){   

        subNodespush($treetree('getNode',this));

    });

   return subNodes;

}

$("div")//选取div

$("div>p")//选取div的子元素p

jQuery 选择器大全

$("#myELement")    选择id值等于myElement的元素，id值不能重复在文档中只能有一个id值是myElement所以得到的是唯一的元素 

$("div")           选择所有的div标签元素，返回div元素数组 

$("myClass")      选择使用myClass类的css的所有元素 

$("")             选择文档中的所有的元素，可以运用多种的选择方式进行联合选择：例如$("#myELement,div,myclass") 

 

层叠选择器： 

$("form input")         选择所有的form元素中的input元素 

$("#main > ")          选择id值为main的所有的子元素 

$("label + input")     选择所有的label元素的下一个input元素节点，经测试选择器返回的是label标签后面直接跟一个input标签的所有input标签元素 

$("#prev ~ div")       同胞选择器，该选择器返回的为id为prev的标签元素的所有的属于同一个父元素的div标签 

 

基本过滤选择器： 

$("tr:first")               选择所有tr元素的第一个 

$("tr:last")                选择所有tr元素的最后一个 

$("input:not(:checked) + span")   

 

过滤掉：checked的选择器的所有的input元素 

 

$("tr:even")               选择所有的tr元素的第0，2，4 个元素（注意：因为所选择的多个元素时为数组，所以序号是从0开始） 

 

$("tr:odd")                选择所有的tr元素的第1，3，5 个元素 

$("td:eq(2)")             选择所有的td元素中序号为2的那个td元素 

$("td:gt(4)")             选择td元素中序号大于4的所有td元素 

$("td:ll(4)")              选择td元素中序号小于4的所有的td元素 

$(":header") 

$("div:animated") 

内容过滤选择器： 

 

$("div:contains('John')") 选择所有div中含有John文本的元素 

$("td:empty")           选择所有的为空（也不包括文本节点）的td元素的数组 

$("div:has(p)")        选择所有含有p标签的div元素 

$("td:parent")          选择所有的以td为父节点的元素数组 

可视化过滤选择器： 

 

$("div:hidden")        选择所有的被hidden的div元素 

$("div:visible")        选择所有的可视化的div元素 

属性过滤选择器： 

 

$("div[id]")              选择所有含有id属性的div元素 

$("input[name='newsletter']")    选择所有的name属性等于'newsletter'的input元素 

 

$("input[name!='newsletter']") 选择所有的name属性不等于'newsletter'的input元素 

 

$("input[name^='news']")         选择所有的name属性以'news'开头的input元素 

$("input[name$='news']")         选择所有的name属性以'news'结尾的input元素 

$("input[name='man']")          选择所有的name属性包含'news'的input元素 

 

$("input[id][name$='man']")    可以使用多个属性进行联合选择，该选择器是得到所有的含有id属性并且那么属性以man结尾的元素 

 

子元素过滤选择器： 

 

$("ul li:nth-child(2)"),$("ul li:nth-child(odd)"),$("ul li:nth-child(3n + 1)") 

 

$("div span:first-child")          返回所有的div元素的第一个子节点的数组 

$("div span:last-child")           返回所有的div元素的最后一个节点的数组 

$("div button:only-child")       返回所有的div中只有唯一一个子节点的所有子节点的数组 

 

表单元素选择器： 

 

$(":input")                  选择所有的表单输入元素，包括input, textarea, select 和 button 

 

$(":text")                     选择所有的text input元素 

$(":password")           选择所有的password input元素 

$(":radio")                   选择所有的radio input元素 

$(":checkbox")            选择所有的checkbox input元素 

$(":submit")               选择所有的submit input元素 

$(":image")                 选择所有的image input元素 

$(":reset")                   选择所有的reset input元素 

$(":button")                选择所有的button input元素 

$(":file")                     选择所有的file input元素 

$(":hidden")               选择所有类型为hidden的input元素或表单的隐藏域 

 

表单元素过滤选择器： 

 

$(":enabled")             选择所有的可 *** 作的表单元素 

$(":disabled")            选择所有的不可 *** 作的表单元素 

$(":checked")            选择所有的被checked的表单元素 

$("select option:selected") 选择所有的select 的子元素中被selected的元素 

 

  

 

选取一个 name 为”S_03_22″的input text框的上一个td的text值

$(”input[@ name =S_03_22]“)parent()prev()text() 

 

名字以”S_”开始，并且不是以”_R”结尾的

$(”input[@ name ^='S_']“)not(”[@ name $='_R']“) 

 

一个名为 radio_01的radio所选的值

$(”input[@ name =radio_01][@checked]“)val(); 

 

  

 

  

 

$("A B") 查找A元素下面的所有子节点，包括非直接子节点

$("A>B") 查找A元素下面的直接子节点

$("A+B") 查找A元素后面的兄弟节点，包括非直接子节点

$("A~B") 查找A元素后面的兄弟节点，不包括非直接子节点 

 

1 $("A B") 查找A元素下面的所有子节点，包括非直接子节点 

 

例子：找到表单中所有的 input 元素 

 

HTML 代码: 

 

<form>

<label>Name:</label>

<input name="name" />

<fieldset>

      <label>Newsletter:</label>

      <input name="newsletter" />

</fieldset>

</form>

<input name="none" /> 

jQuery 代码: 

 

$("form input") 

结果: 

 

[ <input name="name" />, <input name="newsletter" /> ] 

 

2 $("A>B") 查找A元素下面的直接子节点 

例子：匹配表单中所有的子级input元素。 

 

HTML 代码: 

 

<form>

<label>Name:</label>

<input name="name" />

<fieldset>

      <label>Newsletter:</label>

      <input name="newsletter" />

</fieldset>

</form>

<input name="none" /> 

jQuery 代码: 

 

$("form > input") 

结果: 

 

[ <input name="name" /> ] 

 

3 $("A+B") 查找A元素后面的兄弟节点，包括非直接子节点 

例子：匹配所有跟在 label 后面的 input 元素 

 

HTML 代码: 

 

<form>

<label>Name:</label>

<input name="name" />

<fieldset>

      <label>Newsletter:</label>

      <input name="newsletter" />

</fieldset>

</form>

<input name="none" /> 

jQuery 代码: 

 

$("label + input") 

结果: 

 

[ <input name="name" />, <input name="newsletter" /> ] 

 

 

4 $("A~B") 查找A元素后面的兄弟节点，不包括非直接子节点 

例子：找到所有与表单同辈的 input 元素 

 

HTML 代码: 

 

<form>

<label>Name:</label>

<input name="name" />

<fieldset>

      <label>Newsletter:</label>

      <input name="newsletter" />

</fieldset>

</form>

<input name="none" /> 

jQuery 代码: 

 

$("form ~ input") 

结果: 

 

[ <input name="none" /> ]

Jquery获取子元素的方法有2种，分别是children()方法和find()方法。下面我们分别来使用这两种方法，看看它们有何差异。

children()方法：获取该元素下的直接子集元素

find()方法：获取该元素下的所有子集元素

分别以以下HTML代码为例：<ul><li>list1<ul><li>list1-1</li><li>list1-2</li></ul></li><li>list2<ul><li>list2-1</li><li>list2-2</li></ul></li><li>list3<ul><li>list3-1</li><li>list3-2</li></ul></li></ul>

children()方法获取ul下面直接子集元素li：$("ul")children("li")

需要注意的是，如果li元素下还有li元素，children方法将不会被获取。我们可以用length来测试获取的个数“$("ul")children("li")length”，最后输出结果为3

find()方法获取ul下所有元素li：$("ul")find("li")

需要注意的是，find方法会无限循环查找ul标签节点下的li，一直找到没有为止，用length来测试获取个数“$("ul")find("li")length”，最后输出结果为9

children和find的区别：children只会查找直接子集，而find会跨越层级查找，一直找到没有为止。

// 取得当前节点的父节点的所有直接子节点，查看当前节点在所有子节点中的位置，index从0开始。

var index = $(this)index($(this)parent()children());

常见的方法是使用children()方法或者fand()方法都是可以获取到某个元素的子元素的,children()

方法返回匹配元素集合中每个元素的子元素，find()方法获得当前元素集合中每个元素的后代，通过选择器、jQuery

对象或元素来筛选。

$('#')children()获取选择器下面一级的子节点,如果要获取第几个可以通过$('#')children()eq(n) n从0开始 如果要再获取下一级的子节点又得children(),这个方法返回的是一个数组

当然也可以通过find获取比如父节点下面所有的节点或者什么元素,比如一个tr下面有一个td里面有<input type="text" name="username">这样的输入框,你可以通过父节点find('input[name="username"]')就可以获取这个输入框,前提是这个这个输入框是唯一的,如果是重复的那么取出来的就是一个数组了,看你想怎么用吧

find() 方法获得当前元素集合中每个元素的后代，通过选择器、jQuery 对象或元素来筛选。

语法：find(selector)   参数selector  字符串值，包含供匹配当前元素集合的选择器表达式。

详细说明：

如

果给定一个表示 DOM 元素集合的 jQuery 对象，find() 方法允许我们在 DOM

树中搜索这些元素的后代，并用匹配元素来构造一个新的 jQuery 对象。find() 与 children() 方法类似，不同的是后者仅沿着

DOM 树向下遍历单一层级。

find() 方法第一个明显特征是，其接受的选择器表达式与我们向 $() 函数传递的表达式的类型相同。将通过测试这些元素是否匹配该表达式来对元素进行过滤。

实例：

以上就是关于jquery哪个版本有each方法全部的内容，包括:jquery哪个版本有each方法、如何获取jquery easyui Tree的 （1）某一节点下的所有子节点，（2）某节点下的一级节点、Jquery如何选取元素及其所有子元素等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！

欢迎分享，转载请注明来源：内存溢出

原文地址: http://outofmemory.cn/web/9459041.html

赞 (0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
pdg文件 pdg文件 一级用户组
0 0
上一篇 2023-04-28
下一篇 2023-04-28

发表评论

登录后才能评论

评论列表（0条）

保存