jQuery代码节选(筛选)
筛选
...
8.not()
<p class="p1">1</p>
<p class="p2">2</p>
<p class="p3">3</p>
console.log($("p").not($('.p1')));
从获取的p元素集合中除去拥有 class='p1'
9.slice()
<p class="p1">1</p>
<p class="p2">2</p>
<p class="p3">3</p>
console.log($("p").slice(0,1));
console.log($("p").slice(0,-2));
10.children()
<div>
<p class="p1">1</p>
</div>
<div>
<p class="p2">2</p>
</div>
<p class="p3">3</p>
console.log($("div").children('.p1'));
console.log($("div").children());
11.closest()
<div class="father">
<div class="children"> 我是div
<p >我是孙子p</p>
</div>
<p>我是儿子p</p>
</div>
<p>我是兄弟p</p>
console.log($(".father p").closest("div"));
由自身开始,向上级检索,最终获得div.father and div.children 的集合
12.find()
<div class="father">
<div class="children"> 我是div
<p >我是孙子p</p>
</div>
<p>我是儿子p</p>
</div>
<p>我是兄弟p</p>
console.log($("div").find("p"));
此行代码的功能与$("div p")相同
13.next()
<p class="p1">1</p>
<p class="p2">2</p>
<p class="p3">3</p>
console.log($(".p1").next());
选择 p.p1 后面的一个同级元素
14.nextAll()
<p class="p1">1</p>
<p class="p2">2</p>
<p class="p3">3</p>
console.log($(".p1").nextAll());
选择 p.p1 后面的所有的同级元素
15.nextUntil()
<p class="p1">1</p>
<p class="p2">2</p>
<p class="p3">3</p>
<p class="p4">4</p>
<p class="p5">5</p>
<p class="p6">6</p>
console.log($(".p1").nextUntil('.p4'));
选择p.p1到p.p4中间的p.2、p.3
从自身起(不包含自身)向下同级检索,直到满足条件停下(不包含条件元素),最终将检索过得元素合成一个集合
16.parent()
<div class="father">
<div class="children"> 我是div
<p >我是孙子p</p>
</div>
<p>我是儿子p</p>
</div>
<p>我是兄弟p</p>
console.log($("p").parent('.father'));
查找拥有类.father并包含p的元素
17.parents()
<div class="father">
<div class="children"> 我是div
<p >我是孙子p</p>
</div>
<p>我是儿子p</p>
</div>
<p>我是兄弟p</p>
console.log($("p").parents());
p元素的所有上级元素,包括body、html
18.parentsUntil()
<div class="father">
<div class="children"> 我是div
<p >我是孙子p</p>
</div>
<p>我是儿子p</p>
</div>
console.log($("p").parentsUntil('.father'));
功能与nextUntil()相似,向上查找所有上级元素,直到满足条件停下。
19.prev()
<div class="father">
<div class="children"> 我是div
<p >我是孙子p</p>
</div>
<p>我是儿子p</p>
</div>
<p>我是兄弟p</p>
console.log($("p").prev());
选择p元素前面的一个同级元素
20.prevAll()
<ul>
<li class="li1">1</li>
<li class="li2">2</li>
<li class="li3">3</li>
</ul>
console.log($(".li2").prevAll());
选择p元素前面的所有的同级元素
21.prevUntil()
<ul>
<li class="li1">1</li>
<li class="li2">2</li>
<li class="li3">3</li>
</ul>
console.log($(".li2").prevUntil());
与nextUntil()相似,向上查找所有同级元素,直到满足条件停下。
22.siblings()
<ul>
<li class="li1">1</li>
<li class="li2">2</li>
<li class="li3">3</li>
</ul>
console.log($(".li2").siblings());
选择li.li2所有同级元素,但自己排外
23.add()
<ul class="ul1">
<li class="li1">1</li>
<li class="li2">2</li>
<li class="li3">3</li>
</ul>
<ul class="ul2">
<li class="li4">4</li>
<li class="li5">5</li>
<li class="li6">6</li>
</ul>
console.log($(".ul1").add('ul2'));
连接两个集合
24.addBack()
<ul class="ul1">
<li class="li1">1</li>
<li class="li2">2</li>
<li class="li3">3</li>
</ul>
console.log($(".li1").next().addBack());
选择li.li1后一个同级元素并用addBack()将其与原本的li.li1合在一个形成一个集合
25.contents()
<ul class="ul1">
<li class="li1">1</li>
<li class="li2">2</li>
<li class="li3">3</li>
</ul>
console.log($(".ul1").contents());
获取ul.ul1中的所有节点(包括文本节点)
26.end()
<ul class="ul1">
<li class="li1">1</li>
<li class="li2">2</li>
<li class="li3">3</li>
</ul>
$(".ul1").find(".li2").css('color','red').end().css('backgroundColor','blue');
通过ul.ul1找到li.li2改变其字体颜色,然后通过end()返回原先的集合改变其背景色
jQuery代码节选(筛选)的更多相关文章
- jQuery代码节选(事件)
事件 1.ready()$(document).ready(function() { //代码});简写:$(function( { //代码});该事件是会在页面加载完后执行,相当于onloca() ...
- jQuery代码节选(css)
CSS 1.css<p class="p1">1</p> $("p").css("color");获取css属性值$ ...
- 一段jquery代码,保存
@CHARSET "UTF-8"; #table_id tbody tr.odd td:hover{ background-color:#93CFE5; } #table_id t ...
- jquery 选择器、筛选器、事件绑定与事件委派
一.jQuery简介 1.可用的jQuery服务器网站:https://www.bootcdn.cn/ jQuery是一个快速的,简洁的javaScript库,使用户能更方便地处理HTMLdocume ...
- jquery选择器,筛选器,属性,事件 基础
左边栏实例: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UT ...
- 一句jQuery代码返回顶部
一句jQuery代码返回顶部 效果体验: http://hovertree.com/texiao/yestop/ 使用方法: 只需引用jQuery库和YesTop插件,然后一句代码就可以实现返回顶部: ...
- 解决VS2012编写JQuery代码不能智能提示的问题(其他js库的代码提示设置估计类似)
VS默认设置下编写jQuery代码是这样的: 解决办法: 1.在项目的"管理NuGet程序包"中安装JQuery: 2.打开:工具 -> 选项 -> 文本编辑器 -&g ...
- 如何书写高质量的jQuery代码
想必大家对于jQuery这个最流行的javascript类库都不陌生,而且只要是前端开发人员肯定或多或少的使用或者接触过,在今天的这篇文章中,参考了一些资料及实际使用效率,将介绍一些书写高质量jQue ...
- 如何编写高效的jQuery代码
jQuery的编写原则: 一.不要过度使用jQuery 1. jQuery速度再快,也无法与原生的javascript方法相比,而且建立的jQuery对象包含的信息量很庞大.所以有原生方法可以使用的场 ...
随机推荐
- 第三天--html列表
<!Doctype html><html> <head> <meta charset="utf-8"> ...
- DOS批处理命令
1.echo的用法(echo /? --查看帮助) echo off/on 打开关闭回显功能(@echo off 关闭回显并且不需要回显 echo 命令) echo, 显示空行(也可以是; . ...
- 使用ajaxfileupload.js实现上传文件功能
<div class="pictureList"> <div class="pictureItem" id="uploadItem& ...
- 深入理解Web标准(网站标准)
深入理解Web标准(网站标准) 我觉得一名Web前端应该好好理解Web标准到底是什么,为什么要在我们的实际实践中遵循Web标准. 什么是Web标准.百度百科的解释是: WEB标准不是某一个标准,而 ...
- Linux文件权限和访问模式
为了更加安全的存储文件,Linux为不同的文件赋予了不同的权限,每个文件都拥有下面三种权限: 所有者权限:文件所有者能够进行的操作 组权限:文件所属用户组能够进行的操作 外部权限(其他权限):其他用户 ...
- APP产品交互设计资源汇总(不断更新中...)
Axure RP 7 元件库 http://www.iaxure.com/tag/axure7-0%E5%85%83%E4%BB%B6%E5%BA%93 ios8组合元件库V1.2版 http://w ...
- vnc远程运行3D游戏
使用的版本:VNC-5.2.3-Windows.exe vnc官网 安装的过程中需要输入license key,以下给出一些enterprise license(最大权限的License): K5 ...
- Android应用请求获取Root权限
应用获取Root权限的原理:让应用的代码执行目录获取最高权限.在Linux中通过chmod 777 [代码执行目录] /** * 应用程序运行命令获取 Root权限,设备必须已破解(获得ROOT权限) ...
- HTTP 的重定向301,302,303,307(转)
HTTP 的重定向301,302,303,307(转) (2012-12-11 11:55:04) 转载▼ 标签: 杂谈 分类: 网络 301 永久重定向,告诉客户端以后应从新地址访问.302 作为H ...
- opencv中的SIFT,SURF,ORB,FAST 特征描叙算子比较
opencv中的SIFT,SURF,ORB,FAST 特征描叙算子比较 参考: http://wenku.baidu.com/link?url=1aDYAJBCrrK-uk2w3sSNai7h52x_ ...