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 相关文章推荐
JavaScipt中的Math.ceil() 、Math.floor() 、Math.round() 三个函数的理解
Apr 29 Javascript
JSON+JavaScript处理JSON的简单例子
Mar 20 Javascript
浅谈JavaScript之事件绑定
Jul 08 Javascript
jQuery插件EnPlaceholder实现输入框提示文字
Jun 05 Javascript
深入解析Javascript闭包的功能及实现方法
Jul 10 Javascript
jQuery实现的自定义弹出层效果实例详解
Sep 04 Javascript
细数JavaScript 一个等号,两个等号,三个等号的区别
Oct 09 Javascript
VUE使用vuex解决模块间传值问题的方法
Jun 01 Javascript
JS获取url参数,JS发送json格式的POST请求方法
Mar 29 Javascript
Vue-Quill-Editor富文本编辑器的使用教程
Sep 21 Javascript
layui表格分页 记录勾选的实例
Sep 02 Javascript
如何使JavaScript休眠或等待
Apr 27 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中在数据库中保存Checkbox数据(2)
2006/10/09 PHP
php用户密码加密算法分析【Discuz加密算法】
2016/10/12 PHP
php技巧小结【推荐】
2017/01/19 PHP
thinkPHP微信分享接口JSSDK用法实例
2017/07/07 PHP
解决laravel session失效的问题
2019/10/14 PHP
jQuery 通过事件委派一次绑定多种事件,以减少事件冗余
2010/06/30 Javascript
浅谈Javascript事件处理程序的几种方式
2012/06/27 Javascript
利用javascript实现禁用网页上所有文本框,下拉菜单,多行文本域
2013/12/14 Javascript
javascript函数命名的三种方式及区别介绍
2016/03/22 Javascript
JavaScript的兼容性与调试技巧
2016/11/22 Javascript
canvas实现简易的圆环进度条效果
2017/02/28 Javascript
jQuery实现动态生成表格并为行绑定单击变色动作的方法
2017/04/17 jQuery
基于angular实现模拟微信小程序swiper组件
2017/06/11 Javascript
vue页面跳转后返回原页面初始位置方法
2018/02/11 Javascript
jQuery表单校验插件validator使用方法详解
2020/02/18 jQuery
[02:54]辉夜杯主赛事第二日败者组 iG.V赛后采访
2015/12/26 DOTA
零基础学Python(一)Python环境安装
2014/08/20 Python
使用Python制作获取网站目录的图形化程序
2015/05/04 Python
python中实现k-means聚类算法详解
2017/11/11 Python
python用什么编辑器进行项目开发
2020/06/17 Python
Python实现自动签到脚本功能
2020/08/20 Python
Pycharm中使用git进行合作开发的教程详解
2020/11/17 Python
五分钟学会怎么用Pygame做一个简单的贪吃蛇
2021/01/06 Python
逼真的HTML5树叶飘落动画
2016/03/01 HTML / CSS
雅诗兰黛(Estee Lauder)英国官方网站:世界顶级化妆品牌
2016/12/29 全球购物
Soft Cotton捷克:来自爱琴海棉花的浴袍
2017/02/01 全球购物
说出ArrayList,Vector, LinkedList的存储性能和特性
2015/01/04 面试题
司机检讨书
2014/02/13 职场文书
中药学自荐信
2014/06/15 职场文书
乡镇挂职心得体会
2014/09/04 职场文书
纪念九一八事变演讲稿:青少年应树立远大理想
2014/09/14 职场文书
2014年个人售房协议书
2014/10/30 职场文书
拔河比赛队名及霸气口号
2015/12/24 职场文书
Python机器学习之决策树和随机森林
2021/07/15 Javascript
Python中的turtle画箭头,矩形,五角星
2022/03/16 Python
Golang 对es的操作实例
2022/04/20 Golang