06jQuery-03-选择器查找和过滤
1、查找 find()、parent()、prev()、next()
<!-- 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>
- <!-- 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>
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
- 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
var swf = $('#swift'); // 获得Swift
var parent = swf.parent(); // 获得Swift的上层节点<ul>
var a = swf.parent('div.red'); // 从Swift的父节点开始向上查找,直到找到某个符合条件的节点并返回
- var swf = $('#swift'); // 获得Swift
- var parent = swf.parent(); // 获得Swift的上层节点<ul>
- var a = swf.parent('div.red'); // 从Swift的父节点开始向上查找,直到找到某个符合条件的节点并返回
var swift = $('#swift');
swift.next(); // Scheme
swift.next('[name=haskell]'); // Haskell,因为Haskell是后续第一个符合选择器条件的节点
swift.prev(); // Python
swift.prev('.js'); // JavaScript,因为JavaScript是往前第一个符合选择器条件的节点
- var swift = $('#swift');
- swift.next(); // Scheme
- swift.next('[name=haskell]'); // Haskell,因为Haskell是后续第一个符合选择器条件的节点
- swift.prev(); // Python
- swift.prev('.js'); // JavaScript,因为JavaScript是往前第一个符合选择器条件的节点
2、遍历处理:过滤 filter()、map()
2.1 filter()
var langs = $('ul.lang li'); // 拿到JavaScript, Python, Swift, Scheme和Haskell
var a = langs.filter('.dy'); // 拿到JavaScript, Python, Scheme
- var langs = $('ul.lang li'); // 拿到JavaScript, Python, Swift, Scheme和Haskell
- var a = langs.filter('.dy'); // 拿到JavaScript, Python, Scheme
var langs = $('ul.lang li'); // 拿到JavaScript, Python, Swift, Scheme和Haskell
langs.filter(function () {
return this.innerHTML.indexOf('S') === 0; // 返回S开头的节点
}); // 拿到Swift, Scheme
- var langs = $('ul.lang li'); // 拿到JavaScript, Python, Swift, Scheme和Haskell
- langs.filter(function () {
- return this.innerHTML.indexOf('S') === 0; // 返回S开头的节点
- }); // 拿到Swift, Scheme
2.1 map()
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']
- 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']
//通过迭代数据加入到数组中
var studentList = $("#beforeInTable :checked");
var studentsArray = [];
studentList.each(function() {
studentsArray.push($(this).val());
});
- //通过迭代数据加入到数组中
- var studentList = $("#beforeInTable :checked");
- var studentsArray = [];
- studentList.each(function() {
- studentsArray.push($(this).val());
- });
var studentsArray = $("#beforeInTable :checked").map(function(){
return this.value;
}).get();
- var studentsArray = $("#beforeInTable :checked").map(function(){
- return this.value;
- }).get();
var studentsArrayStr = $("#beforeInTable :checked").map(function(){
return this.value;
}).get().join(",");
//"82,83"
- var studentsArrayStr = $("#beforeInTable :checked").map(function(){
- return this.value;
- }).get().join(",");
- //"82,83"
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()方法一致
- 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()方法一致
06jQuery-03-选择器查找和过滤的更多相关文章
- js查找和过滤
通常情况下选择器可以直接定位到我们想要的元素,但是,当我们拿到一个jQuery对象后,还可以以这个对象为基准,进行查找和过滤. 最常见的查找是在某个节点的所有子节点中查找,使用find()方法,它本身 ...
- jQuery 查找和过滤
通常情况下选择器可以直接定位到我们想要的元素,但是,当我们拿到一个jQuery对象后,还可以以这个对象为基准,进行查找和过滤. 最常见的查找是在某个节点的所有子节点中查找,使用find()方法,它本身 ...
- jquery笔记之属性选择器 查找以某种条件开头的页面元素
jquery笔记之属性选择器 查找以某种条件开头的页面元素 转载:http://www.blogbus.com/amyqiong-logs/78340326.html $("div[id]& ...
- 协议栈处理中的conntrack HASH查找/Bloom过滤/CACHE查找/大包与小包/分层处理风格
1.路由CACHE的优势与劣势 分级存储体系已经存在好多年了.其精髓在于"将最快的存储器最小化.将最慢的存储器最大化",这样的结果就使资源利用率的最大化.既提高了訪问效率,又节省了 ...
- web开发 - 从零开始 - 03 - 选择器
行间样式>id>class>类型选择>通配符 选择器的优先级一致的情况下,后边的样式会覆盖前边的
- jQuery选择器(子元素过滤选择器)第七节
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/stri ...
- 004 jquery过滤选择器-----------(基本过滤选择器)
1.介绍 2.常见基本过滤器 3.程序 <!DOCTYPE html> <html> <head> <meta charset="UTF-8&quo ...
- 006 jquery过滤选择器-----------(可见性过滤选择器)
1.介绍 2.程序 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> < ...
- 005 jquery过滤选择器-----------(内容过滤选择器)
1.介绍 2.程序 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> < ...
随机推荐
- 2017多校第9场 HDU 6169 Senior PanⅡ 数论,DP,爆搜
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=6169 题意:给了区间L,R,求[L,R]区间所有满足其最小质数因子为k的数的和. 解法: 我看了这篇b ...
- 【Spring】JDBC事务管理XML配置
将spring事务管理与spirng-mybatis分离开了: <?xml version="1.0" encoding="UTF-8"?> < ...
- 博文Contents<451--到999—>
积分=排名>2017-05-15这一天还真是厉害了.让我等了5个月时间... 前言:博客中的随笔文章.并非都是笔者的原创文章.有些是听别人说的.有些是书上摘录的.有些是百度的.有些是别人博客的文 ...
- [2017-08-28]Abp系列——业务异常与错误码设计及提示语的本地化
本系列目录:Abp介绍和经验分享-目录 前言 ABP中有个异常UserFriendlyException经常被使用,但是它所在的命名空间是Abp.UI,总觉得和展现层联系过于紧密,在AppServic ...
- git 工作流介绍
GIT Git工作流你可以理解为工作中团队成员遵守的一种代码管理方案,在Git中有以下几种工作流方案作为方案指导: 集中式工作流 功能开发工作流 Gitflow工作流 Forking工作流 下面针对性 ...
- 零基础如何一步一步开始搭建高性能直播平台?现以GitChat·架构来进行说明
前言 现在直播已经成为移动互联网时代一个新的重要流量入口,从YY.斗鱼到花椒直播,直播已经成为人们分享交流的新方式,应用场景众多,主要分为: 金融类直播:金融直播可应用于实时解盘,在线专家讲座,专家在 ...
- MongoDB副本集模式安装
设备: 三个1G.20G.1核的虚拟机,系统是SentOS7 min 设置目录: Server1: mkdir -p /home/mongoshard/data/shard11 /home/mongo ...
- CSS编码技巧
前面的话 本文将从DRY.currentColor.inherit和合理使用简写这几方面来详细介绍CSS编码技巧 DRY DRY,即don`t repeat yourself,尽量减少代码重复 在软件 ...
- RAISERROR
RAISERROR 可以抛出一个错误,并被程序捕获,在存储过程经常使用: 是否进入Catch代码执行区域,在于错误严重等级设置 RAISERROR ('无效数据', 11 , 1) 第一个参数:自定义 ...
- 如何将ASP.NET-WebApi发布到IIS6.0上(转)
关于"如何将ASP.NET-WebApi发布到IIS6.0上"的这方面的学习,一开始项目组长让我们接触的时候,我的心情是这样的 哇呜.jpg 当时真的是一脸懵逼啊,对于刚接触asp ...