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 相关文章推荐
IE与Firefox下javascript getyear年份的兼容性写法
Dec 20 Javascript
js函数模拟显示桌面.scf程序示例
Apr 20 Javascript
jquery中map函数与each函数的区别实例介绍
Jun 23 Javascript
JavaScript插件化开发教程 (三)
Jan 27 Javascript
探讨JavaScript中的Rest参数和参数默认值
Jul 29 Javascript
jQuery简单实现两级下拉菜单效果代码
Sep 15 Javascript
基于Bootstrap 3 JQuery及RegExp的表单验证功能
Feb 16 Javascript
详解JS中的立即执行函数
Feb 24 Javascript
JS库particles.js创建超炫背景粒子插件(附源码下载)
Sep 13 Javascript
react 父组件与子组件之间的值传递的方法
Sep 14 Javascript
Angular表格神器ui-grid应用详解
Sep 29 Javascript
快速搭建vue2.0+boostrap项目的方法
Apr 09 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:风雨欲来 路在何方?
2006/10/09 PHP
用php实现像JSP,ASP里Application那样的全局变量
2007/01/12 PHP
PHP 循环列出目录内容的函数代码
2010/05/26 PHP
Look And Say 序列php实现代码
2011/05/22 PHP
php获取后台Job管理的实现代码
2011/06/10 PHP
PHP修改session_id示例代码
2014/01/08 PHP
php根据日期判断星座的函数分享
2014/02/13 PHP
PHP中定义数组常量(array常量)的方法
2014/11/17 PHP
PHP Header用于页面跳转时的几个注意事项
2016/10/21 PHP
Alliance vs AM BO3 第一场2.13
2021/03/10 DOTA
Javascript 获取链接(url)参数的方法
2009/02/15 Javascript
在Ajax中使用Flash实现跨域数据读取的实现方法
2010/12/02 Javascript
SyntaxHighlighter语法高亮插件使用说明
2011/08/14 Javascript
jquery中each方法示例和常用选择器
2014/07/08 Javascript
Js 正则表达式知识汇总
2014/12/02 Javascript
jQuery制作效果超棒的手风琴折叠菜单
2015/04/03 Javascript
省市联动效果的简单实现代码(推荐)
2016/06/06 Javascript
JavaScript Promise 用法
2016/06/14 Javascript
JavaScript控制输入框中只能输入中文、数字和英文的方法【基于正则实现】
2017/03/03 Javascript
在Js页面通过POST传递参数跳转到新页面详解
2017/08/25 Javascript
vue微信分享到朋友圈 vue微信发送给好友
2018/11/28 Javascript
使用 vue 实例更好的监听事件及vue实例的方法
2019/04/22 Javascript
Vue 之孙组件向爷组件通信的实现
2019/04/23 Javascript
[01:13]2015国际邀请赛线下观战现场
2015/08/08 DOTA
python选择排序算法的实现代码
2013/11/21 Python
Python实现的三层BP神经网络算法示例
2018/02/07 Python
python ipset管理 增删白名单的方法
2019/01/14 Python
详解js文件通过python访问数据库方法
2019/03/03 Python
Python Flask框架模板操作实例分析
2019/05/03 Python
django-rest-framework解析请求参数过程详解
2019/07/18 Python
python UDP(udp)协议发送和接收的实例
2019/07/22 Python
python GUI库图形界面开发之PyQt5输入对话框QInputDialog详细使用方法与实例
2020/02/27 Python
2014年党支部学习材料
2014/05/19 职场文书
群众路线调研报告范文
2014/11/03 职场文书
公司年会主持词范文!
2019/05/07 职场文书
全面盘点MySQL中的那些重要日志文件
2021/11/27 MySQL