jquery 遍历数组each的用法，还有一个jquery的基础用法

最新推荐文章于 2022-12-08 17:49:30 发布
最新推荐文章于 2022-12-08 17:49:30 发布
阅读量786 收藏 1
点赞数
分类专栏： JS 文章标签： jquery each function stylesheet button html

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>

<!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,function(value) {
return value > 100;
});
*/
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("div"));
//arr.reverse(); // 使用数组翻转函数
$.each(arr,function(n,value) {
//do something here
//alert(n+' '+value);
//alert(value.html());
});
var arr2 =$.unique(document.getElementsByTagName("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>

<!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,function(value) {
return value > 100;
});
*/
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("div"));
//arr.reverse(); // 使用数组翻转函数
$.each(arr,function(n,value) {
//do something here
//alert(n+' '+value);
//alert(value.html());
});
var arr2 =$.unique(document.getElementsByTagName("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>

指尖上的行者
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
jquery 遍历数组 each 方法详解
10-22
在上述代码中，我们创建了一个包含三个字符串的数组，并使用$.each()方法遍历它。在回调函数中，我们使用`console.log`打印了每个元素的索引和值。 同样的方法也可以用来遍历对象的每个属性： ```javascript var ...
Jquery遍历数组
糖果云专栏
05-22 3534
$().each()方法：$("ul&gt;li&gt;input:checked").each(function(i,el){ $(this).prop("checked",true); });在一个列表中，循环每一项用each是不错的，索引，元素都给遍历出来。$.each()方法：1. 处理一维数组,代码如下:$.each(["a","b","c"],function(i,el){
jQuery 遍历数组
邪人君子的博客
01-22 9760
一、Query对象和伪数组 &amp;amp;lt;!DOCTYPE html&amp;amp;gt; &amp;amp;lt;html lang=&amp;quot;en&amp;quot;&amp;amp;gt; &amp;amp;lt;head&amp;amp;gt; &amp;amp;lt;meta charset=&amp;quot;UTF-8&amp;quot;&amp;amp;gt;
JavaScript jQuery遍历对象each()方法
m0_55201788的博客
02-12 6128
1遍历元素 jQuery隐式迭代是对同一类元素做了同样的操作。如果想要给同一类元素做不同操作,就需要用到遍历。 语法1 : $ ("div") . each (function (index, domEle) { XXX; } ) 1. each()方法遍历匹配的每一个元素。主要用DOM处理。each 每一个 2.里面的回调函数有2个参数: index 是每个元素的索引号; demEle是每个DOM元素对象,不是jquery对象 语法2 : $.each (object , function (index,
jQuery的each方法的几种常用的用法
ForMyQianDuan的博客
02-18 549
jQuery的each方法的几种常用的用法 Js代码 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, 2
数组操作方式--$.each()遍历数组方法
文龙刚的博客
12-08 561
数组操作方式--$.each()遍历数组方法
jQuery使用each方法与for语句遍历数组示例
10-22
总结来说，本文通过具体的实例，比较了在jQuery环境下使用each方法和for语句遍历数组的差异和相似之处，并通过实际代码演示了它们的使用方法。对于jQuery编程人员而言，掌握这两种遍历数组的技巧是非常实用的，能够...
详解Jquery 遍历数组之$().each方法与$.each()方法介绍
10-20
在jQuery中，`$().each()` 和 `$.each()` 是两种常见的遍历方法，它们用于处理不同的数据结构，包括DOM元素集合、数组和JSON对象。接下来我们将深入探讨这两种方法的用法及其区别。 首先，`$().each()` 主要用于...
jquery遍历数组与筛选数组的方法
10-26
它返回一个jQuery对象，可以通过`.get()`方法获取原始的JavaScript数组。 虽然在给定的描述中没有提供`map()`的示例代码，但通常使用方式如下： ```javascript var newArray = $.map(originalArray, function...
each循环数组
风轻云淡
10-31 1248
&amp;lt;!DOCTYPE html&amp;gt; &amp;lt;html&amp;gt; &amp;lt;head&amp;gt; &amp;lt;meta charset=&quot;UTF-8&quot;&amp;gt; &amp;lt;title&amp;gt;each循环数组&amp;lt;/title&amp;gt; &amp;lt;scrip
jquery中each遍历对象和数组示例
12-29
通用遍历方法，可用于遍历对象和数组。$().each()，回调函数拥有两个参数： 第一个为对象的成员或数组的索引，第二个为对应变量或内容。如需退出each循环可使回调函数返回false 现有如下两个select 计划类别: <select id=PLANTYPE> <option value=0>-所有-</option> <option value=1>新建</option> <option value=2>续建</option> </select> 申报类型: <select id=AUDITTYPE> <option value=0>-所有-</option>
jQuery拆分字符串 split()并且遍历$.each()
热门推荐
deideidei13的博客
05-15 4万+
字符串名.split(separator,howmany)separator 必需。字符串或正则表达式，从该参数指定的地方分割 stringObject。howmany 可选。该参数可指定返回的数组的最大长度。如果设置了该参数，返回的子串不会多于这个参数指定的数组。如果没有设置该参数，整个字符串都会被分割，不考虑它的长度。该方法会得到一个字符串数组...
用each()方法遍历对象和数组
hugejihu9的专栏
10-30 1740
文章来自：源码在线https://www.shengli.me/jquery/145.html     控制台输出：   
jquery的$().each,$.each的区别
『芋』头℃的专栏
09-09 3805
在jquery中，遍历对象和数组，经常会用到$().each和$.each()，两个方法。两个方法是有区别的，从而这两个方法在针对不同的操作上，显示了各自的特点。 $().each,对于这个方法，在dom处理上面用的较多。如果页面有多个input标签类型为checkbox，对于
jquery的each遍历对象、数组、标签
杨葱儿
04-16 9013
jQuery的遍历方法通常被用来遍历DOM元素，用于数组和对象的是$.each()方法，它接受两个参数，分别指代属性名/数组索引和属性值/数组元素： 一、$.each()遍历对象和数组 $.each(arrTmp,function(index,value){ //arrTmp数组数据 console.log(index+": "+value) }); $.each(objTm...
$.each(obj,function(n,value) 遍历的学习
潇潇的博客
09-09 1万+
1.jquery 遍历对象            $(function(){        var tbody = "";         //------------遍历对象 .each的使用-------------       //对象语法JSON数据格式(当服务器端回调回来的对象数据格式是json数据格式，必须保证JSON的格式要求，回调的对象必须使用eval函数进行转
jquery笔记：each、get、index
peade的博客
02-05 556
$.each(callback) return false,跳出循环，return true，进入下一个循环 $("li").get(0); 获取第一个li元素 index示例： foo bar baz $('li').index(document.getElementById('bar')); //1，传递一个DOM对象，返回这个对象在原先集合中
jquery each(foreach)遍历数组,循环
weixin_44420068的博客
03-06 6982
each处理一维数组 var arr1 = [ “aaa”, “bbb”, “ccc” ]; $.each(arr1, function(i,val){ alert(i); alert(val); }); alert(i)将输出0，1，2 alert(val)将输出aaa，bbb，ccc each处理二维数组 var arr2 = [[‘a’, ‘aa’, ‘aaa’], [‘b’, ‘bb’, ...
js数组中一些实用的方法(forEach,map,filter,find)
itclanCoder
01-20 1万+
虽互不曾谋面,但希望能和你成为笔尖下的朋友以读书,技术,生活为主,偶尔撒点鸡汤不作,不敷衍,意在真诚吐露,用心分享点击左上方,可关注本刊(点击绿色图标,可收听音频)撰文| 川川VX-I...
jquery遍历数组
最新发布
05-08
另外，`$.map()` 方法可以对数组进行遍历并返回一个新的数组。语法如下： ```javascript $.map(array, function(value, index){ // return new value }); ``` 其中 `array` 是要遍历的数组，`function(value, ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值