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 相关文章推荐
使用JS 清空File控件的路径值
Jul 08 Javascript
js判断上传文件的类型和大小示例代码
Oct 18 Javascript
javascript 自定义回调函数示例代码
Sep 26 Javascript
Javascript highcharts 饼图显示数量和百分比实例代码
Dec 06 Javascript
Bootstrap基本样式学习笔记之表格(2)
Dec 07 Javascript
微信小程序 css使用技巧总结
Jan 09 Javascript
基于jQuery制作小图标上下滑动特效
Jan 18 Javascript
JavaScript常用正则函数用法示例
Jan 23 Javascript
解决bootstrap下拉菜单点击立即隐藏bug的方法
Jun 13 Javascript
Vue精简版风格指南(推荐)
Jan 30 Javascript
vue2.0 element-ui中el-select选择器无法显示选中的内容(解决方法)
Aug 24 Javascript
js实现内置计时器
Dec 16 Javascript
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删除数组中的特定元素的代码
2012/06/28 PHP
php对大文件进行读取操作的实现代码
2013/01/23 PHP
php获取Google机器人访问足迹的方法
2015/04/15 PHP
php中使用gd库实现远程图片下载实例
2015/05/12 PHP
PHP 微信支付类 demo
2015/11/30 PHP
Laravel 简单实现Ajax滚动加载示例
2019/10/22 PHP
详解JavaScript函数绑定
2013/08/18 Javascript
javascript内存管理详细解析
2013/11/11 Javascript
JS实现常见的TAB、弹出层效果(TAB标签,斑马线,遮罩层等)
2015/10/08 Javascript
利用Angularjs和bootstrap实现购物车功能
2016/08/31 Javascript
jq源码解析之绑在$,jQuery上面的方法(实例讲解)
2017/10/13 jQuery
Vue2.0学习之详解Vue 组件及父子组件通信
2017/12/12 Javascript
浅谈在vue中用webpack打包之后运行文件的问题以及相关配置方法
2018/02/21 Javascript
Angular父组件调用子组件的方法
2018/04/02 Javascript
从零开始搭建webpack+react开发环境的详细步骤
2018/05/18 Javascript
clipboard.js在移动端复制失败的解决方法
2018/06/13 Javascript
NodeJS搭建HTTP服务器的实现步骤
2018/10/12 NodeJs
js中位运算的运用实例分析
2018/12/11 Javascript
JavaScript判断浏览器运行环境的详细方法
2019/06/30 Javascript
javascript刷新父页面方法汇总详解
2019/10/10 Javascript
[01:32]2016国际邀请赛中国区预选赛IG战队首日赛后采访
2016/06/27 DOTA
用python读写excel的方法
2014/11/18 Python
用Python写冒泡排序代码
2016/04/12 Python
Python的Django应用程序解决AJAX跨域访问问题的方法
2016/05/31 Python
Python编码爬坑指南(必看)
2016/06/10 Python
获取python文件扩展名和文件名方法
2018/02/02 Python
分享8个非常流行的 Python 可视化工具包
2019/06/05 Python
NumPy统计函数的实现方法
2020/01/21 Python
python跨文件使用全局变量的实现
2020/11/17 Python
YesStyle美国/全球:购买亚洲时装、美容化妆品和生活百货
2017/01/16 全球购物
Foot Locker意大利官网:全球领先的运动鞋和服装零售商
2017/05/30 全球购物
英国领先的票务代理商之一:The Ticket Factory
2019/02/09 全球购物
阿联酋手表和配饰购物网站:Rivolishop
2019/11/25 全球购物
国税会议欢迎词
2014/01/16 职场文书
政风行风评议整改方案
2014/09/15 职场文书
2014年扶贫帮困工作总结
2014/12/09 职场文书