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 相关文章推荐
基于jquery的tab切换 js原理
Apr 01 Javascript
JavaScript ( (__ = !$ + $)[+$] + ({} + $)[_/_] +({} + $)[_/_] )
Feb 25 Javascript
js对象关系图 方便dom操作
Mar 18 Javascript
给文字加上着重号的JS代码
Nov 12 Javascript
jQuery操作input值的各种方法总结
Nov 21 Javascript
浅析jquery的js图表组件highcharts
Mar 06 Javascript
标题过长使用javascript按字节截取字符串
Apr 24 Javascript
js中数组结合字符串实现查找(屏蔽广告判断url等)
Mar 30 Javascript
Javascript之Date对象详解
Jun 07 Javascript
Vue2 SSR渲染根据不同页面修改 meta
Nov 20 Javascript
JS学习笔记之闭包小案例分析
May 29 Javascript
Vue如何提升首屏加载速度实例解析
Jun 25 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 获取客户端的真实ip
2009/11/30 PHP
PHP 杂谈《重构-改善既有代码的设计》之三 重新组织数据
2012/04/09 PHP
PHP扩展模块Pecl、Pear以及Perl的区别
2014/04/09 PHP
php+html5使用FormData对象提交表单及上传图片的方法
2015/02/11 PHP
PHP常见过waf webshell以及最简单的检测方法
2019/05/21 PHP
php判断数组是否为空的实例方法
2020/05/10 PHP
jquery修改网页背景颜色通过css方法实现
2014/06/06 Javascript
简单的jquery左侧导航栏和页面选中效果
2014/08/21 Javascript
JQuery中层次选择器用法实例详解
2015/05/18 Javascript
JS实现简单的图书馆享元模式实例
2015/06/30 Javascript
jquery 实现输入邮箱时自动补全下拉提示功能
2015/10/04 Javascript
详解JavaScript对象序列化
2016/01/19 Javascript
Javascript类型系统之String字符串类型详解
2016/06/21 Javascript
Node.js+jade抓取博客所有文章生成静态html文件的实例
2017/09/19 Javascript
浅谈Node异步编程的机制
2017/10/18 Javascript
AjaxFileUpload.js实现异步上传文件功能
2019/04/19 Javascript
[02:51]DOTA2 2015国际邀请赛中国区预选赛第一日战报
2015/05/27 DOTA
[01:03:33]Alliance vs TNC 2019国际邀请赛小组赛 BO2 第一场 8.16
2019/08/18 DOTA
Tornado高并发处理方法实例代码
2018/01/15 Python
浅析Python 读取图像文件的性能对比
2019/03/07 Python
pandas dataframe的合并实现(append, merge, concat)
2019/06/24 Python
django将数组传递给前台模板的方法
2019/08/06 Python
python字符串格式化方式解析
2019/10/19 Python
python配置文件写入过程详解
2019/10/19 Python
全面解析CSS Media媒体查询使用操作(推荐)
2017/08/15 HTML / CSS
荷兰网上鞋店:Ziengs.nl
2017/01/02 全球购物
6PM官网:折扣鞋、服装及配饰
2018/08/03 全球购物
Foreo国际站:Foreo International
2018/10/29 全球购物
Shop Apotheke瑞士:您的健康与美容网上商店
2019/10/09 全球购物
物流专业大学应届生求职信
2013/11/03 职场文书
小区门卫值班制度
2014/01/24 职场文书
中标通知书
2015/04/17 职场文书
防溺水主题班会教案
2015/08/12 职场文书
nginx搭建图片服务器的过程详解(root和alias的区别)
2021/03/31 Servers
浅谈redis五大数据结构和使用场景
2021/04/12 Redis
Python实现DBSCAN聚类算法并样例测试
2021/06/22 Python