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 相关文章推荐
JqGrid web打印实现代码
May 31 Javascript
javascript真的不难-回顾一下基础知识
Jan 15 Javascript
png在IE6 下无法透明的解决方法汇总
May 21 Javascript
jQuery树形下拉菜单特效代码分享
Aug 15 Javascript
使用jquery判断一个元素是否含有一个指定的类(class)实例
Feb 12 Javascript
使用async、enterproxy控制并发数量的方法详解
Jan 02 Javascript
详解用Node.js写一个简单的命令行工具
Mar 01 Javascript
vue element中axios下载文件(后端Python)
May 10 Javascript
微信小程序实现左侧滑动导航栏
Apr 08 Javascript
vue 实现input表单元素的disabled示例
Oct 28 Javascript
vue学习笔记之slot插槽基本用法实例分析
Feb 01 Javascript
浅谈javascript如何获取文件后缀名
Aug 07 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连接mssql数据库的几种方法
2013/02/21 PHP
memcache命令启动参数中文解释
2014/01/13 PHP
PHP读取文件内容的五种方式
2015/12/28 PHP
phpcms实现验证码替换及phpcms实现全站搜索功能教程详解
2017/12/13 PHP
JavaScript中String和StringBuffer的速度之争
2010/04/01 Javascript
JS判定是否原生方法
2013/07/22 Javascript
node.js使用nodemailer发送邮件实例
2014/03/10 Javascript
javascript 原型链维护和继承详解
2014/11/26 Javascript
JS实现从连接中获取youtube的key实例
2015/07/02 Javascript
谈谈JavaScript中function多重理解
2015/08/28 Javascript
谈谈AngularJs中的隐藏和显示
2015/12/09 Javascript
jQuery实现的调整表格行tr上下顺序
2016/01/10 Javascript
微信小程序 rpx 尺寸单位详细介绍
2016/10/13 Javascript
angularJS+requireJS实现controller及directive的按需加载示例
2017/02/20 Javascript
vue-cli脚手架引入图片的几种方法总结
2018/03/13 Javascript
vue异步axios获取的数据渲染到页面的方法
2018/08/09 Javascript
nginx配置域名后的二级目录访问不同项目的配置操作
2020/11/06 Javascript
python生成随机验证码(中文验证码)示例
2014/04/03 Python
对Python 窗体(tkinter)文本编辑器(Text)详解
2018/10/11 Python
Django框架基础模板标签与filter使用方法详解
2019/07/23 Python
win10安装tesserocr配置 Python使用tesserocr识别字母数字验证码
2020/01/16 Python
Python如何实现小程序 无限求和平均
2020/02/18 Python
Python GUI编程学习笔记之tkinter中messagebox、filedialog控件用法详解
2020/03/30 Python
详解pycharm连接远程linux服务器的虚拟环境的方法
2020/11/13 Python
Python urllib request模块发送请求实现过程解析
2020/12/10 Python
css3 2D图片转动样式可以扩充到Js当中
2014/04/29 HTML / CSS
韩国邮政旗下生鲜食品网上超市:epost
2016/08/27 全球购物
商场主管竞聘书
2014/03/31 职场文书
三月法制宣传月活动总结
2014/07/03 职场文书
房地产端午节活动方案
2014/08/24 职场文书
关于成绩下滑的自我检讨书
2014/09/20 职场文书
就业意向协议书
2015/01/29 职场文书
仓库管理员岗位职责
2015/02/03 职场文书
死者家属慰问信
2015/03/24 职场文书
2016年“6.26”禁毒宣传月系列活动总结
2016/04/05 职场文书
入团申请书格式
2019/06/20 职场文书