JQuery查找子元素find()和遍历集合each的方法总结


Posted in Javascript onMarch 07, 2017

1.HTML代码

<div name="students" school="HK"> 
 <input type="boy" name="ZhangSan" value="206"> 
 <input type="girl" name="Lisi" value="108"> 
 </div>

 2.jquery

<script type="text/javascript"> 
 /* find() 查找子元素方法 */ 
 var aaa = $("div[name='students'][school='HK']").find("input[type='boy'][name='ZhangSan']"); 
 console.log(aaa.val()); 
  
 /* $(".child",parent); 方法查找子元素*/ 
 var bbb = $($("input[type='boy'][name='ZhangSan']"),$("div[name='students'][school='HK']")); 
 console.log(aaa.val()); 
 
 /* each()方法遍历数组 */ 
 var arr = [ "one", "two", "three", "four" ]; 
 $.each(arr, function() { 
  console.log(this); 
 }); 
  
 /* each()方法处理json */ 
 var obj = { 
  one : 1, 
  two : 2, 
  three : 3, 
  four : 4 
 }; 
 $.each(obj, function(key, val) { 
  console.log(obj[key]); 
 }); 
  
 /* each()方法处理二维数组 */ 
 var arr1 = [ [ 11, 44, 33 ], [ 4, 6, 6 ], [ 7, 20, 9 ] ] 
 $.each(arr1, function(i, item) { 
  console.log(item[0]); 
 }); 
 
 /* each()方法处理HTML元素 */ 
 $("div[name='students'][school='HK'] > input").each(function() { 
  console.log($(this).val()); 
 }); 
 </script>

以上这篇JQuery查找子元素find()和遍历集合each的方法总结就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Dom 结点创建 基础知识
Oct 01 Javascript
jQuery的bind()方法使用详解
Jul 15 Javascript
基于jquery实现省市区三级联动效果
Dec 25 Javascript
ajax在兼容模式下失效的快速解决方法
Mar 22 Javascript
Javascript实现苹果悬浮虚拟按钮
Apr 10 Javascript
JavaScript遍历求解数独问题的主要思路小结
Jun 12 Javascript
AngularJs Scope详解及示例代码
Sep 01 Javascript
vue.js实现插入数值与表达式的方法分析
Jul 06 Javascript
如何换个角度使用VUE过滤器详解
Sep 11 Javascript
详解vue高级特性
Jun 09 Javascript
如何通过vscode运行调试javascript代码
Jul 24 Javascript
vue实现登录功能
Dec 31 Vue.js
AngularJS的Filter的示例详解
Mar 07 #Javascript
js上下视差滚动简单实现代码
Mar 07 #Javascript
js实现下一页页码效果
Mar 07 #Javascript
原生JS中slice()方法和splice()区别
Mar 06 #Javascript
浅析vue component 组件使用
Mar 06 #Javascript
js常用的继承--组合式继承
Mar 06 #Javascript
VUE开发一个图片轮播的组件示例代码
Mar 06 #Javascript
You might like
使用php+Ajax实现唯一校验实现代码[简单应用]
2011/11/29 PHP
PHP5常用函数列表(分享)
2013/06/07 PHP
PHP实现的memcache环形队列类实例
2015/07/28 PHP
php intval函数用法总结
2019/04/14 PHP
一个不错的用JavaScript实现的UBB编码函数
2007/03/09 Javascript
javascript 树控件 比较好用
2009/06/11 Javascript
js 浏览器事件介绍
2012/03/30 Javascript
JS获取各种浏览器窗口大小的方法
2014/01/14 Javascript
JavaScript中的继承方式详解
2015/02/11 Javascript
Bootstrap 粘页脚效果
2016/03/28 Javascript
实用又漂亮的BootstrapValidator表单验证插件
2016/05/30 Javascript
JS中type=&quot;button&quot;和type=&quot;submit&quot;的区别
2017/07/04 Javascript
解决JQuery全选/反选第二次失效的问题
2017/10/11 jQuery
jQuery解析json格式数据示例
2018/09/01 jQuery
教你如何编写Vue.js的单元测试的方法
2018/10/17 Javascript
node链接mongodb数据库的方法详解【阿里云服务器环境ubuntu】
2019/03/07 Javascript
微信小程序跳转到其他网页(外部链接)的实现方法
2019/09/20 Javascript
[52:52]DOTA2上海特级锦标赛C组资格赛#1 OG VS LGD第三局
2016/02/27 DOTA
Python  连接字符串(join %)
2008/09/06 Python
PyQt5每天必学之事件与信号
2018/04/20 Python
python写入已存在的excel数据实例
2018/05/03 Python
详解Python使用Plotly绘图工具,绘制甘特图
2019/04/02 Python
在python中画正态分布图像的实例
2019/07/08 Python
python连接PostgreSQL数据库的过程详解
2019/09/18 Python
Python变量格式化输出实现原理解析
2020/08/06 Python
python 解决pycharm运行py文件只有unittest选项的问题
2020/09/01 Python
Python+OpenCV图像处理——实现轮廓发现
2020/10/23 Python
Pytorch如何切换 cpu和gpu的使用详解
2021/03/01 Python
简单掌握CSS3将文字描边及填充文字颜色的方法
2016/03/07 HTML / CSS
印尼极简主义和实惠的在线家具店:Fabelio
2019/03/27 全球购物
班组长安全生产职责
2013/12/16 职场文书
实习鉴定范文
2013/12/19 职场文书
化学教师教学反思
2014/01/17 职场文书
学校总务处领导干部个人对照检查材料思想汇报
2014/10/06 职场文书
mysql5.7使用binlog 恢复数据的方法
2021/06/03 MySQL
Win11更新失败并提示0xc1900101
2022/04/19 数码科技