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 相关文章推荐
flash 得到自身url参数的代码
Nov 15 Javascript
基于jQuery的计算文本框字数的代码
Jun 06 Javascript
一个js导致的jquery失效问题的解决方法
Nov 27 Javascript
jqplot通过ajax动态画折线图的方法及思路
Dec 08 Javascript
使用JavaScript获取地址栏参数的方法
Dec 19 Javascript
Uploadify上传文件方法
Mar 16 Javascript
详解vue过滤器在v2.0版本用法
Jun 01 Javascript
JS实现的加减乘除四则运算计算器示例
Aug 09 Javascript
vue.js 实现点击按钮动态添加li的方法
Sep 07 Javascript
JavaScript中filter的用法实例分析
Feb 27 Javascript
Vue中qs插件的使用详解
Feb 07 Javascript
jQuery实现雪花飘落效果
Aug 02 jQuery
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 define函数的使用说明
2008/08/27 PHP
鸡肋的PHP单例模式应用详解
2013/06/03 PHP
php操作xml
2013/10/27 PHP
php使用Jpgraph绘制饼状图的方法
2015/06/10 PHP
php curl抓取网页的介绍和推广及使用CURL抓取淘宝页面集成方法
2015/11/30 PHP
IE6 hack for js 集锦
2014/09/23 Javascript
JavaScript日期类型的一些用法介绍
2015/03/02 Javascript
JS正则表达式修饰符中multiline(/m)用法分析
2016/12/27 Javascript
基于Vuejs的搜索匹配功能实现方法
2018/03/03 Javascript
三分钟学会用ES7中的Async/Await进行异步编程
2018/06/14 Javascript
基于vue cli 通过命令行传参实现多环境配置
2018/07/12 Javascript
vue项目打包后上传至GitHub并实现github-pages的预览
2019/05/06 Javascript
Vue中全局变量的定义和使用
2019/06/05 Javascript
jQuery操作cookie的示例代码
2019/06/05 jQuery
2分钟实现一个Vue实时直播系统的示例代码
2020/06/05 Javascript
解决Matplotlib图表不能在Pycharm中显示的问题
2018/05/24 Python
Python实现的远程登录windows系统功能示例
2018/06/21 Python
python实现画一颗树和一片森林
2018/06/25 Python
python使用MQTT给硬件传输图片的实现方法
2019/05/05 Python
使用Python实现文字转语音并生成wav文件的例子
2019/08/08 Python
python 字典访问的三种方法小结
2019/12/05 Python
python实现将列表中各个值快速赋值给多个变量
2020/04/02 Python
新建文件时Pycharm中自动设置头部模板信息的方法
2020/04/17 Python
python实现npy格式文件转换为txt文件操作
2020/07/01 Python
GitHub上值得推荐的8个python 项目
2020/10/30 Python
需要知道的CSS3动画技术
2010/01/01 HTML / CSS
什么是Remote Module
2016/06/10 面试题
会计电算化应届生求职信
2013/11/03 职场文书
采购内勤岗位职责
2013/12/10 职场文书
长安大学毕业生自我鉴定
2014/01/17 职场文书
单位创先争优活动方案
2014/01/26 职场文书
仓管员岗位责任制
2014/02/19 职场文书
保护动物倡议书
2014/04/15 职场文书
幼儿教师暑期培训方案
2014/08/27 职场文书
公司周年庆寄语
2019/06/21 职场文书
MySQL串行化隔离级别(间隙锁实现)
2022/06/16 MySQL