jquery遍历数组each方法详解

来源：动视网责编：小采时间：2020-11-27 20:27:34

jquery遍历数组each方法详解

jquery遍历数组each方法详解:JQuery拿取对象的方式$(#id') ：通过元素的id$(tagName') : 通过元素的标签名$(tagName tagName') : 通过元素的标签名,eg: $(ul li')$(tagName#id): 通过元素的id和标签名$(:checkbox'):拿取

推荐度：

点击下载本文 文档为doc格式

导读jquery遍历数组each方法详解:JQuery拿取对象的方式$(#id') ：通过元素的id$(tagName') : 通过元素的标签名$(tagName tagName') : 通过元素的标签名,eg: $(ul li')$(tagName#id): 通过元素的id和标签名$(:checkbox'):拿取

JQuery拿取对象的方式

$(‘#id') ：通过元素的id

$(‘tagName') : 通过元素的标签名

$(‘tagName tagName') : 通过元素的标签名,eg: $(‘ul li')

$(‘tagName#id): 通过元素的id和标签名

$(‘:checkbox'):拿取input的 type为checkbox'的所有元素:

Eg：

<input type="checkbox" name="appetizers"
 
 value="imperial"/>
 
$('span[price] input[type=text]') ：拿取下面的input元素
 
<span price="3">
<input type="text" name="imperial.quantity"
 disabled="disabled" value="1"/>
</span>
 
$('div',$(this).parents('div:first'))：拿取该div的上（至少都是父节点）的第一个div节点
 
$('~ span:first',this)： locates the first sibling of this that's a <span> element.

延迟加载js文件：

$.getScript

例子：

Html文件:

Java代码

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
 <title>$.getScript Example</title>
 <link rel="stylesheet" type="text/css" href="../common.css">
 <script type="text/javascript"
 src="../scripts/jquery-1.2.1.js"></script>
 <script type="text/javascript">
 $(function(){
 $('#loadButton').click(function(){
 $.getScript(//在Firefox/3.0.1中会出现一个错误(语法错误,定义的变量不起作用,ff2没问题)
 'new.stuff.js'//,function(){$('#inspectButton').click()}
 );
 });
 $('#inspectButton').click(function(){
 someFunction(someVariable);
 test()
 });
 });
 </script>
</head>
 
<body>
 <button type="button" id="loadButton">Load</button>
 <button type="button" id="inspectButton">Inspect</button>
</body>
</html>

Js文件:

Java代码

alert("I'm inline!"); 
 
var someVariable = 'Value of someVariable'; 
 
function someFunction(value) { 
alert(value); 
} 
 
function test() { 
alert('test'); 
}
 
alert("I'm inline!");
 
var someVariable = 'Value of someVariable';
 
function someFunction(value) {
alert(value);
}
 
function test() {
alert('test');
}

jquery数组处理：

Java代码

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
 <title>Hi!</title>
 <script type="text/javascript" src="../scripts/jquery-1.2.1.js">
 </script>
 <script type="text/javascript">
 var $ = 'Hi!';
 jQuery(function(){
 alert('$ = '+ $);//这里的 $ 为 Hi!,把它变回jquery的符号:jQuery(function($){...}/这样就可以了
 //alert(jQuery)
 
 });
 jQuery(function($){
 //------------遍历数组 .each的使用-------------
 var anArray = ['one','two','three'];
 $.each(anArray,function(n,value) {
 //do something here
 //alert(n+' '+value);
 });
 var anObject = {one:1, two:2, three:3};
 $.each(anObject,function(name,value) {
 //do something here
 //alert(name+' '+value);
 });
 
 //-----------过滤数组 .grep的使用------------
 var originalArray =[99,101,103];
 
 var bigNumbers = $.grep(originalArray,'a>100');//第2种写法,还可以用正则表达式来过滤
 $.each(bigNumbers,function(n,value) {
 //do something here
 //alert(n+' '+value);
 });
 
 //------------转换数组 .map的使用------------
 var strings = ['1','2','3','4','S','K','6'];
 var values = $.map(strings,function(value){
 var result = new Number(value);
 return isNaN(result) ? null : result;//如果result不是数字则返回null（返回null在这里相当于不返回）
 });
 $.each(values,function(n,value) {
 //do something here
 //alert(value);
 });
 
 var characters = $.map(
 ['this','that','other thing'],
 function(value){return value.split('');}//分离字符串用返回给characters
 );
 //alert(characters.length);
 
 //------------.inArray(value,array)的使用------------返回value在array下标的位置，如果value不在array中则返回
 
-1
 var index = $.inArray(2,[1,2,3,4,5]);
 //alert(index);
 
 //------------makeArray(obj)的使用------------将类数组对象转换为数组对象。
 var arr = jQuery.makeArray(document.getElementsByTagName_r("div"));
 //arr.reverse(); // 使用数组翻转函数
 $.each(arr,function(n,value) {
 //do something here
 //alert(n+' '+value);
 //alert(value.html());
 });
 var arr2 =$.unique(document.getElementsByTagName_r("div")); //获得唯一的对象，看API,说得很模
 
糊,http://docs.jquery.com/Utilities/jQuery.unique
 alert();
 $.each(arr2,function(n,value) {
 //do something here
 alert(n+' '+value);
 });
 });
 </script>
</head>
<body>
<div>First</div><div>Second</div><div>Third</div><div>Fourth</div><div>Fourth</div>
</body>
</html>

以上这篇jquery 遍历数组 each 方法详解就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持PHP中文网。

更多 jquery 遍历数组 each 方法详解相关文章请关注PHP中文网！

jquery遍历数组each方法详解

推荐度：

点击下载本文 文档为doc格式

标签：方法数组 each

热门焦点

jquery遍历数组each方法详解

jquery遍历数组each方法详解

jquery遍历数组each方法详解

最新推荐

猜你喜欢

热门推荐