从零开始学jQuery(2)--查找&过滤

最新推荐文章于 2022-11-05 22:18:57 发布

azraelxuemo

最新推荐文章于 2022-11-05 22:18:57 发布

阅读量252

点赞数 2

分类专栏： # jQuery学习笔记文章标签： javascript

本文链接：https://blog.csdn.net/azraelxuemo/article/details/106721198

版权

jQuery学习笔记专栏收录该内容

7 篇文章 0 订阅

订阅专栏

通常情况下选择器可以直接定位到我们想要的元素，但是，当我们拿到一个jQuery对象后，还可以以这个对象为基准，进行查找和过滤。
最常见的查找是在某个节点的所有子节点中查找，使用find()方法，它本身又接收一个任意的选择器。
以以下页面为例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://code.jquery.com/jquery-3.5.1.js"></script> 
</head>
<body>
<ul class="game">
 <li class="moba">dota2</li>
 <li class="moba">dota</li> 
<li id="game">cs</li>
 <li class="moba">LoL</li>
 <li name="csgo">Csgo</li> 
</ul> 
</body>
</html>

用find()查找

var  ul=$('ul.game');// 获得<ul> 
var moba=ul.find('.moba');//把所有class里含有moba的节点都找出来了，dota2,dota,LoL
var cs = ul.find('#game');//把ul里所有id="game"的都找了出来，这里只有cs
var Csgo=ul.find('[name="csgo"]');//把ul所有name=csgo的节点找出来

find对应的是从上往下查找，当然也可以从下往上查找
使用parent()方法

var cs=$('#game');获得cs
var ul=cs.parent();//获得cs的上级也就是我们的整个ul,我看以前说好像可以一直往上查，但我测试的时候只能查一级,按照我们这里就是li只能查到ul,ul查到 body，li查不到body

对于位于同一层级的节点，可以通过next()和prev()方法

var cs=$('#game');//获取cs
cs.next();//Object { 0: li.moba, length: 1, prevObject: {…} }查到cs下一个节点lol了
cs.prev();//Object { 0: li.moba, length: 1, prevObject: {…} }查到cs的上一个节点dota

和map、filter类似，jQuery对象也有类似的方法
filter()方法可以过滤掉不符合选择器条件的节点

var game = $('ul.game li');//拿到所有的游戏
var class_name_moba= game.filter('.moba');//拿到所有li里面class=moba的节点

也可以传入一个函数，要特别注意函数内部的this被绑定为DOM对象，不是jQuery对象

var game = $('ul.game li');//拿到所有的游戏
game.filter(function () { return this.innerHTML.indexOf('d') === 0;  });//返回以d开头的节点，dota,dota2,innerHTML就是我们这里的整个html页面,关于this我之后..好好说一下，我目前也不是很理解

map()把一个jQuery对象包含的若干DOM节点转化为其他对象,比如说array

var game = $('ul.game li');//拿到所有的游戏
var arr = game.map(function () { return this.innerHTML; });//把页面里的元素提取出来并保存为下面这种格式
arr;//Object { 0: "dota2", 1: "dota", 2: "cs", 3: "LoL", 4: "Csgo", length: 5, prevObject: {…} }
arr.get();//Array(5) [ "dota2", "dota", "cs", "LoL", "Csgo" ]把里面的值提取出来，变成array格式
var arr = game.map(function () { return this.innerHTML; }).get();//也可以直接把页面里的元素提取出来并保存为array

此外，一个jQuery对象如果包含了不止一个DOM节点，first()、last()和slice()方法可以返回一个新的jQuery对象，把不需要的DOM节点去掉，在之前的章节也介绍过这3个函数

var game = $('ul.game li');//拿到所有的游戏
var first=game.first();//把我们第一个节点dota2提取出来相当于var fisrt=$('ul.game li:first-child')这种写法
var last=game.last();//把我们最后一个节点Csgo提取出来，相当于var last=$('ul.game li:last-child')
var dota_cs=game.slice(1,3);//获得第二个dota和第三个cs,不包括第一个

突然发现var fisrt=$('ul.game li:first-children');也可以,本来是var fisrt=$('ul.game li:first-child')的,但是var last=$('ul.game li:last-children')却不行…

azraelxuemo

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
从零开始学jQuery(2)--查找&过滤

jQuery的查找和过滤通常情况下选择器可以直接定位到我们想要的元素，但是，当我们拿到一个jQuery对象后，还可以以这个对象为基准，进行查找和过滤。最常见的查找是在某个节点的所有子节点中查找，使用find()方法，它本身又接收一个任意的选择器。以以下页面为例<!DOCTYPE html><html><head><meta charset="utf-8"><script src="http://code.jquery.com/jquery
复制链接

扫一扫