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 相关文章推荐
如何在标题栏显示框架内页面的标题
Feb 03 Javascript
浅析document.ready和window.onload的区别讲解
Dec 18 Javascript
javascript生成随机数的方法
May 16 Javascript
JavaScript实现把rgb颜色转换成16进制颜色的方法
Jun 01 Javascript
jQuery绑定事件-多种实现方式总结
May 09 Javascript
JSP基于Bootstrap分页显示实例解析
Jun 12 Javascript
原生js实现class的添加和删除简单代码
Jul 12 Javascript
详解Vue路由History mode模式中页面无法渲染的原因及解决
Sep 28 Javascript
Vue.js实现的表格增加删除demo示例
May 22 Javascript
jQuery插件实现非常实用的tab栏切换功能【案例】
Feb 18 jQuery
详解ES6 CLASS在微信小程序中的应用实例
Apr 24 Javascript
jQuery实现可以扩展的日历
Dec 01 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
Search Engine Friendly的URL设计
2006/10/09 PHP
php error_log 函数的使用
2009/04/13 PHP
备份mysql数据库的php代码(一个表一个文件)
2010/05/28 PHP
php木马webshell扫描器代码
2012/01/25 PHP
PHP如何实现阿里云短信sdk灵活应用在项目中的方法
2019/06/14 PHP
使用Firebug对js进行断点调试的图文方法
2011/04/02 Javascript
jQuery中创建实例与原型继承揭秘
2011/12/21 Javascript
js中的onchange和onpropertychange (onchange无效的解决方法)
2014/03/08 Javascript
JQuery设置时间段下拉选择实例
2014/12/30 Javascript
javascript函数式编程实例分析
2015/04/25 Javascript
JS实现的自定义右键菜单实例二则
2015/09/01 Javascript
超链接怎么正确调用javascript函数
2016/05/23 Javascript
jQuery.Uploadify插件实现带进度条的批量上传功能
2016/06/08 Javascript
前端分页功能的实现以及原理(jQuery)
2017/01/22 Javascript
微信小程序之GET请求的实例详解
2017/09/29 Javascript
JS中图片压缩的方法小结
2017/11/14 Javascript
Vue使用NPM方式搭建项目
2018/10/25 Javascript
Vue基础配置讲解
2019/11/29 Javascript
vue项目如何监听localStorage或sessionStorage的变化
2021/01/04 Vue.js
python简单实现获取当前时间
2016/08/27 Python
python3.x上post发送json数据
2018/03/04 Python
详解Django之admin组件的使用和源码剖析
2018/05/04 Python
Python统计python文件中代码,注释及空白对应的行数示例【测试可用】
2018/07/25 Python
Django错误:TypeError at / 'bool' object is not callable解决
2019/08/16 Python
python如何从文件读取数据及解析
2019/09/19 Python
Python对接支付宝支付自实现功能
2019/10/10 Python
Django 允许局域网中的机器访问你的主机操作
2020/05/13 Python
使用Numpy对特征中的异常值进行替换及条件替换方式
2020/06/08 Python
python单元测试框架pytest的使用示例
2020/10/07 Python
html5教程制作简单画板代码分享
2013/12/04 HTML / CSS
利用HTML5中的Canvas绘制一张笑脸的教程
2015/05/07 HTML / CSS
德国最大的婴儿用品网上商店:Kidsroom.de(支持中文)
2020/09/02 全球购物
《社戏》教学反思
2014/04/15 职场文书
学习党的群众路线教育实践活动心得体会范文
2014/11/03 职场文书
公司员工违纪检讨书
2015/05/05 职场文书
Win11快速关闭所有广告推荐
2022/04/19 数码科技