jquery 遍历数组 each 方法详解


Posted in Javascript onMay 25, 2016

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 方法详解就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript Event学习第十章 一些可替换的事件对
Feb 10 Javascript
jQuery怎么解析Json字符串(Json格式/Json对象)
Aug 09 Javascript
js全屏显示显示代码的三种方法
Nov 11 Javascript
RequireJS多页面应用实例分析
Jun 29 Javascript
一道优雅面试题分析js中fn()和return fn()的区别
Jul 05 Javascript
Node 自动化部署的方法
Oct 17 Javascript
微信小程序使用picker实现时间和日期选择框功能【附源码下载】
Dec 11 Javascript
JS模拟实现哈希表及应用详解
May 04 Javascript
vue动态配置模板 'component is'代码
Jul 04 Javascript
微信小程序实现上传多张图片、删除图片
Jul 29 Javascript
解决vue里a标签值解析变量,跳转页面,前面加默认域名端口的问题
Jul 22 Javascript
js实现直播点击飘心效果
Aug 19 Javascript
深入理解angularjs过滤器
May 25 #Javascript
jQuery中on绑定事件后引发的事件冒泡问题如何解决
May 25 #Javascript
jQuery each函数源码分析
May 25 #Javascript
jQuery中的each()详细介绍(推荐)
May 25 #Javascript
jQuery中each()、find()和filter()等节点操作方法详解(推荐)
May 25 #Javascript
jquery easyui datagrid实现增加,修改,删除方法总结
May 25 #Javascript
15个值得开发人员关注的jQuery开发技巧和心得总结【经典收藏】
May 25 #Javascript
You might like
Codeigniter通过SimpleXML将xml转换成对象的方法
2015/03/19 PHP
laravel 框架配置404等异常页面
2019/01/07 PHP
javascript 添加和移除函数的通用方法
2009/10/20 Javascript
jquery form表单提交插件asp.net后台中文解码
2010/06/12 Javascript
TextArea不支持maxlength的解决办法(jquery)
2011/09/13 Javascript
在JavaScript中处理时间之getHours()方法的使用
2015/06/10 Javascript
jQuery实现仿QQ空间装扮预览图片的鼠标提示效果代码
2015/10/30 Javascript
浅谈angularjs依赖服务注入写法的注意点
2017/04/24 Javascript
ionic3+Angular4实现接口请求及本地json文件读取示例
2017/10/11 Javascript
详解js正则表达式验证时间格式xxxx-xx-xx形式
2018/02/09 Javascript
利用Webpack实现小程序多项目管理的方法
2019/02/25 Javascript
vue项目中使用scss的方法步骤
2019/05/16 Javascript
JS检索下拉列表框中被选项目的索引号(selectedIndex)
2019/12/17 Javascript
[26:50]2018完美盛典DOTA2表演赛
2018/12/17 DOTA
Python yield使用方法示例
2013/12/04 Python
Django自定义用户认证示例详解
2018/03/14 Python
Python 中的Selenium异常处理实例代码
2018/05/03 Python
用python处理图片实现图像中的像素访问
2018/05/04 Python
Python如何将模块打包并发布
2020/08/30 Python
Python在centos7.6上安装python3.9的详细教程(默认python版本为2.7.5)
2020/10/15 Python
基于OpenCV的路面质量检测的实现
2020/11/04 Python
HTML5和CSS3让网页设计提升到下一个高度
2009/08/14 HTML / CSS
HTML5 在canvas中绘制矩形附效果图
2014/06/23 HTML / CSS
英国顶级家庭折扣店:The Works
2017/09/06 全球购物
The Kooples美国官方网站:为情侣提供的法国当代时尚品牌
2019/01/03 全球购物
日本动漫周边服饰销售网站:Atsuko
2019/12/16 全球购物
广州某公司软件工程师面试题
2014/12/22 面试题
人资专员岗位职责
2014/04/04 职场文书
大学生就业自我推荐信
2014/05/10 职场文书
高校教师个人工作总结2014
2014/12/17 职场文书
2014城乡环境综合治理工作总结
2014/12/19 职场文书
信息技术研修心得体会
2016/01/08 职场文书
2016党员干部廉政准则学习心得体会
2016/01/20 职场文书
初中教务主任竞聘演讲稿(范文)
2019/08/20 职场文书
微信小程序scroll-view不能左右滑动问题的解决方法
2021/07/09 Javascript
mysql中varchar类型的日期进行比较、排序等操作的实现
2021/11/17 MySQL