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"> < ...
随机推荐
- select、poll、epoll简介
epoll跟select都能提供多路I/O复用的解决方案.在现在的Linux内核里有都能够支持,其中epoll是Linux所特有,而select则应该是POSIX所规定,一般操作系统均有实现 sele ...
- JavaScript 加号运算符详解
将介绍JavaScript中 '+'加号运算符在一元.二元运算时的表现. 目录 1.一元运算符 2. 二元运算符 1. 一元运算符 语法: + Expression 说明:'+'号运算符作为一元运算符 ...
- Fedora删除旧版本内核
由于Fedora升级非常快,因此非常有必要清除陈旧的内核,否则的话,每次登录系统会出现多个引导项,看着烦人也占用内存: 1.查看当前使用的内核 [root@w ~]# uname -r 4.9.14- ...
- oracle中如何移动数据文件
a.shutdown immediate关闭数据库 b.在os下拷贝数据文件到新的地点 c.Startup mount 启动到mount下 d.Alter database rename fil ...
- 基于tgp协议的套接字的 粘包解决
客户端 import socket import struct import json phone = socket.socket(socket.AF_INET, socket.SOCK_STREAM ...
- TF-IDF模型详解
1. 理论基础 由于数据挖掘所有数据都要以数字形式存在,而文本是以字符串形式存在.所以进行文本挖掘时需要先对字符串进行数字化,从而能够进行计算.TF-IDF就是这样一种技术,能够将字符串转换为数字,从 ...
- js 在遍历时只会显示最后一个遍历到的结果
在做项目时遇到了一个关于遍历的问题, 前提是:在ul中有n个li每个li从后台获取的数据中有一个sign的字段,当sign等于0时(li未被点击过)li会显示一个红点,当sign不等于0时(li已被点 ...
- 迈向angularjs2系列(2):angular2指令详解
一:angular2 helloworld! 为了简单快速的运行一个ng2的app,那么通过script引入预先编译好的angular2版本和页面的基本框架. index.html: <!DOC ...
- appium python api收集
1.contexts contexts(self): Returns the contexts within the current session. 返回当前会话中的上下文,使用后可以识别H5页面的 ...
- 南昌招聘.net开发大牛
职位诱惑: 12年名企5险1金齐全+WEB&移动研发=丰厚回报 职位描述: 聘精通web开发成员共同成就事业! 中国领先的WEB内核 研发机构.华中地区唯一自主CMS研发厂商.江西最大的网站服 ...