jQuery查找和过滤_动力节点节点Java学院整理


Posted in jQuery onJuly 04, 2017

通常情况下选择器可以直接定位到我们想要的元素,但是,当我们拿到一个jQuery对象后,还可以以这个对象为基准,进行查找和过滤。

最常见的查找是在某个节点的所有子节点中查找,使用find()方法,它本身又接收一个任意的选择器。例如如下的HTML结构:

<!-- HTML结构 -->
<ul class="lang">
 <li class="js dy">JavaScript</li>
 <li class="dy">Python</li>
 <li id="swift">Swift</li>
 <li class="dy">Scheme</li>
 <li name="haskell">Haskell</li>
</ul>

find()查找:

var ul = $('ul.lang'); // 获得<ul>
var dy = ul.find('.dy'); // 获得JavaScript, Python, Scheme
var swf = ul.find('#swift'); // 获得Swift
var hsk = ul.find('[name=haskell]'); // 获得Haskell

如果要从当前节点开始向上查找,使用parent()方法:

var swf = $('#swift'); // 获得Swift
var parent = swf.parent(); // 获得Swift的上层节点<ul>
var a = swf.parent('div.red'); // 从Swift的父节点开始向上查找,直到找到某个符合条件的节点并返回

对于位于同一层级的节点,可以通过next()prev()方法,例如:
当我们已经拿到Swift节点后:

var swift = $('#swift');

swift.next(); // Scheme
swift.next('[name=haskell]'); // Haskell,因为Haskell是后续第一个符合选择器条件的节点

swift.prev(); // Python
swift.prev('.js'); // JavaScript,因为JavaScript是往前第一个符合选择器条件的节点

过滤

和函数式编程的map、filter类似,jQuery对象也有类似的方法。
filter()方法可以过滤掉不符合选择器条件的节点:

var langs = $('ul.lang li'); // 拿到JavaScript, Python, Swift, Scheme和Haskell
var a = langs.filter('.dy'); // 拿到JavaScript, Python, Scheme

或者传入一个函数,要特别注意函数内部的this被绑定为DOM对象,不是jQuery对象:

var langs = $('ul.lang li'); // 拿到JavaScript, Python, Swift, Scheme和Haskell
langs.filter(function () {
 return this.innerHTML.indexOf('S') === 0; // 返回S开头的节点
}); // 拿到Swift, Scheme

map()方法把一个jQuery对象包含的若干DOM节点转化为其他对象:

var langs = $('ul.lang li'); // 拿到JavaScript, Python, Swift, Scheme和Haskell
var arr = langs.map(function () {
 return this.innerHTML;
}).get(); // 用get()拿到包含string的Array:['JavaScript', 'Python', 'Swift', 'Scheme', 'Haskell']

此外,一个jQuery对象如果包含了不止一个DOM节点,first()、last()slice()方法可以返回一个新的jQuery对象,把不需要的DOM节点去掉:

var langs = $('ul.lang li'); // 拿到JavaScript, Python, Swift, Scheme和Haskell
var js = langs.first(); // JavaScript,相当于$('ul.lang li:first-child')
var haskell = langs.last(); // Haskell, 相当于$('ul.lang li:last-child')
var sub = langs.slice(2, 4); // Swift, Scheme, 参数和数组的slice()方法一致

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

jQuery 相关文章推荐
JQuery实现定时刷新功能代码
May 09 jQuery
jQuery返回定位插件详解
May 15 jQuery
JQueryMiniUI按照时间进行查询的实现方法
Jun 07 jQuery
QRCode.js:基于JQuery的生成二维码JS库的使用
Jun 23 jQuery
解决html-jquery/js引用外部图片时遇到看不了或出现403的问题
Sep 22 jQuery
jquery一键控制checkbox全选、反选或全不选
Oct 16 jQuery
jQuery实现新闻播报滚动及淡入淡出效果示例
Mar 23 jQuery
jQuery实现的淡入淡出与滑入滑出效果示例
Apr 18 jQuery
基于jQuery实现的设置文本区域的光标位置
Jun 15 jQuery
使用jQuery如何写一个含验证码的登录界面
May 13 jQuery
基于Bootstrap和JQuery实现动态打开和关闭tab页的实例代码
Jun 10 jQuery
html中两种获取标签内的值的方法
Jun 16 jQuery
jQuery动画_动力节点节点Java学院整理
Jul 04 #jQuery
jQuery实现点击关注和取消功能
Jul 03 #jQuery
关于jQuery.ajax()的jsonp碰上post详解
Jul 02 #jQuery
jquery实现一个全局计时器(商城可用)
Jun 30 #jQuery
jQuery表单设置值的方法
Jun 30 #jQuery
jQuery开源组件BootstrapValidator使用详解
Jun 29 #jQuery
Vue.js列表渲染绑定jQuery插件的正确姿势
Jun 29 #jQuery
You might like
生成缩略图
2006/10/09 PHP
建立文件交换功能的脚本(三)
2006/10/09 PHP
PHP base64编码后解码乱码的解决办法
2014/06/19 PHP
dedecms集成财付通支付接口
2014/12/28 PHP
浅谈php冒泡排序
2014/12/30 PHP
老生常谈PHP中的数据结构:DS扩展
2017/07/17 PHP
javascript编程起步(第七课)
2007/01/10 Javascript
jQuery 使用手册(六)
2009/09/23 Javascript
Javascript 实现TreeView CheckBox全选效果
2010/01/11 Javascript
JS获取屏幕,浏览器窗口大小,网页高度宽度(实现代码)
2013/12/17 Javascript
JS实现从表格中动态删除指定行的方法
2015/03/31 Javascript
js实现input密码框提示信息的方法(附html5实现方法)
2016/01/14 Javascript
简单实现js间歇或无缝滚动效果
2016/06/29 Javascript
微信小程序 教程之wxapp视图容器 swiper
2016/10/19 Javascript
js实现简单的手风琴效果
2017/02/27 Javascript
微信小程序获取手机网络状态的方法【附源码下载】
2017/12/08 Javascript
如何用webpack4带你实现一个vue的打包的项目
2018/06/20 Javascript
如何在微信小程序里面退出小程序的方法
2019/04/28 Javascript
vue登录页面cookie的使用及页面跳转代码
2019/07/10 Javascript
react quill中图片上传由默认转成base64改成上传到服务器的方法
2019/10/30 Javascript
vue实现商城秒杀倒计时功能
2019/12/12 Javascript
Python import用法以及与from...import的区别
2015/05/28 Python
Python计算机视觉里的IOU计算实例
2020/01/17 Python
基于python3.7利用Motor来异步读写Mongodb提高效率(推荐)
2020/04/29 Python
Django 解决model 反向引用中的related_name问题
2020/05/19 Python
Python 创建TCP服务器的方法
2020/07/28 Python
python用分数表示矩阵的方法实例
2021/01/11 Python
乐高积木玩具美国官网:LEGO Shop US
2016/09/16 全球购物
如何写出高性能的JSP和Servlet
2013/01/22 面试题
酒店人事专员岗位职责
2013/12/19 职场文书
最新创业融资计划书
2014/01/19 职场文书
标准化管理实施方案
2014/02/25 职场文书
2014年招商工作总结
2014/11/22 职场文书
如何使用Python提取Chrome浏览器保存的密码
2021/06/09 Python
SpringBoot整合Redis入门之缓存数据的方法
2021/11/17 Redis
python 离散点图画法的实现
2022/04/01 Python