jQuery学习笔记 更改jQuery对象


Posted in Javascript onSeptember 19, 2012

jQuery代码的任务就是生成jQuery对象A,操作jQuery对象A;生成jQuery对象B,操作jQuery对象B……但是若此过程中,对象A、B……之间有某种关系,那么完全没必要一个个去$(selector),这很繁琐的。因此jQuery提供了一些方法,使流程变为生成jQuery对象A,操作jQuery对象A;更改为jQuery对象B,操作jQuery对象B……

一个jQuery对象,既要进行N次操作,又要进行M次更改。因此有必要将生成的jQuery对象存储在一个变量中,多次调用。然而,试想每进行一次操作和更改就得声明一个新变量,这也很繁琐啊。所以jQuery采取了链式操作的方法,即执行操作后返回操作对象本身,于是可以持续执行下一个操作,直到需要更改对象时方执行更改,然后返回更改后对象。这实际上就是一种函数式思维。

举个例子,左右对比一下:

一般调用 链式调用
a=$(“div”); a.addClass(“class”); b=a.children(“ul”); b.show();                          c=a.siblings(); c.removeClass(“class”); $(“div”).addClass(“class”) .children(“ul”).show().end() .siblings().removeClass(“class”);

接下来就介绍一下更改jQuery对象的各种方法:

更改为后代元素集合

方法 描述 等价
children(selector) 在原先元素的后代元素中,选取匹配selector的元素。若不设置参数,children()等价于children(*),选取原先元素的所有子元素 $(selector1).children(selector2)≡$(selector1>selector2)
find(selector) 在原先元素的后代元素中,选取匹配selector的元素。若不设置参数,find()等价于find(“:not(*)”),不会选取原先元素的任何后代元素 $(selector1).find(selector2)≈$(selector1 selector2)。若参数使用基本过滤选择器,不是在全部后代元素中选取过滤匹配元素,而是在每一个后代元素中分别选取过滤匹配元素
contents() 选取原先元素的子元素或文本块

 

更改为祖先元素集合

方法 描述
parent(selector) 在原先元素的父元素中,选取匹配selector的元素。若不设置参数,parent()等价于parent(“*”),选取原先元素的所有父元素
parents(selector) 在原先元素的祖先元素中,选取匹配selector的元素。若不设置参数,parents()等价于parents(“*”),选取原先元素的所有祖先元素
parentsUntil(selector) 选取原先元素的祖先元素,直到遇到匹配selector的元素为止,且不包括该元素。若不设置参数,parentsUntil()等价于parents(),选取原先元素的所有祖先元素
offsetParents() 选取原先元素的最近祖先定位元素,且该元素CSS属性display不能为none。定位元素指CSS属性position
closest(selector) 在原先元素及其祖先元素中,选取匹配selector的最近元素

 

更改为兄弟元素集合

方法              描述 等价
next(selector) 在原先元素后面的第一个兄弟元素中,选取匹配selector的元素。若不设置参数,next()等价于next(“*”),选取原先元素后面的第一个兄弟元素 $(selector1).next(selector2)≡$(selector1+selector2)
prev(selector) 在原先元素前面的第一个兄弟元素中,选取匹配selector的元素。若不设置参数,prev()等价于prev(“*”),选取原先元素前面的第一个兄弟元素
nextAll(selector) 在原先元素后面的兄弟元素中,选取匹配selector的元素。若不设置参数,nextAll()等价于nextAll(“*”),选取原先元素后面的所有兄弟元素 $(selector1).nextAll(selector2)≡$(selector1~selector2)
prevAll(selector) 在原先元素前面的兄弟元素中,选取匹配selector的元素。若不设置参数,prevAll()等价于prevAll(“*”),选取原先元素前面的所有兄弟元素
siblings(selector) 在原先元素的兄弟元素中,选取匹配selector的元素。若不设置参数,siblings()等价于siblings(“*”),选取原先元素的所有兄弟元素
nextUntil(selector) 选取原先元素后面的兄弟元素,直到遇到匹配selector的元素为止,且不包括该元素。若不设置参数,nextUntil()等价于nextAll(),选取原先元素后面的所有兄弟元素
prevUntil(selector) 选取原先元素前面的兄弟元素,直到遇到匹配selector的元素为止,且不包括该元素。若不设置参数,prevUntil()等价于prevAll(),选取原先元素前面的所有兄弟元素

 

更改为更多元素集合

方法              描述 等价
add(selector) 在原先元素的基础上添加选取匹配selector的元素 $(selector1).add(selector2)≡$(selector1,selector2)
andSelf() 更改为后代元素、祖先元素、兄弟元素的这些操作,会在原先元素以外选取元素。可用于将原先元素和更改操作选取的元素合并在一起

 

更改为部分元素集合

方法              描述 等价
eq(index) 在原先元素中筛选索引值等于index的元素,索引值从0开始正数,也可以从-1开始倒数,但不能混用 $(selector).eq(index)≡$(selector:eq(index))
first() 在原先元素中筛选第一个元素,等同于eq(0) $(selector).first()≡$(selector:first)
last() 在原先元素中筛选最后一个元素,等同于eq(-1) $(selector).last()≡$(selector:last)
slice(start,[end]) 在原先元素中筛选索引值从start到end-1的元素。若不传入end,则筛选索引值大于等于start的元素
filter(selector) 在原先元素中筛选匹配selector的元素
filter(fn(index)) 使用函数筛选,对于索引值等于index的元素,若函数返回true,该元素包含在筛选集合中,否则排除在外 可实现$(selector:even(index))、$(selector:odd(index))、 $(selector:gt(index))、 $(selector:lt(index))等
not(selector) 在原先元素中筛选不匹配selector的元素 $(selector1).not(selector2)≡$(selector1:not(selector2))
not(fn(index)) 使用函数筛选,对于索引值等于index的元素,若函数返回true,该元素排除在筛选集合外,否则包含在内 可实现$(selector:even(index))、$(selector:odd(index))、 $(selector:gt(index))、 $(selector:lt(index))等
has(selector) 在原先元素中筛选出拥有匹配selector后代元素的元素 $(selector1).has(selector2)≡$(selector1:has(selector2))

 

还原jQuery对象

方法              描述
end() 使执行更改jQuery对象操作后的选取元素还原到更改之前。若希望还原多个更改操作,则多次调用,直到最后会返回空集
Javascript 相关文章推荐
JavaScript基本对象
Jan 11 Javascript
获取焦点时,利用js定时器设定时间执行动作
Apr 02 Javascript
利用google提供的API(JavaScript接口)获取网站访问者IP地理位置的代码详解
Jul 24 Javascript
JS 退出系统并跳转到登录界面的实现代码
Jun 29 Javascript
jQuery链使用指南
Jan 20 Javascript
jQuery 限制输入字符串长度
Jun 20 Javascript
浅析JavaScript中命名空间namespace模式
Jun 22 Javascript
js实现点击每个li节点,都弹出其文本值及修改
Dec 15 Javascript
jquery对table做排序操作的实例演示
Aug 10 jQuery
Angular4的输入属性与输出属性实例详解
Nov 29 Javascript
vue单页应用在页面刷新时保留状态数据的方法
Sep 21 Javascript
学习 Vue.js 遇到的那些坑
Feb 02 Vue.js
jQuery学习笔记 操作jQuery对象 文档处理
Sep 19 #Javascript
jQuery学习笔记 操作jQuery对象 属性处理
Sep 19 #Javascript
jQuery学习笔记 操作jQuery对象 CSS处理
Sep 19 #Javascript
firefox下jQuery UI Autocomplete 1.8.*中文输入修正方法
Sep 19 #Javascript
dotopAlert 提示用户需安装播放器的代码
Sep 17 #Javascript
点弹代码 点击页面任何位置都可以弹出页面效果代码
Sep 17 #Javascript
js函数的引用, 关于内存的开销
Sep 17 #Javascript
You might like
php trim 去除空字符的定义与语法介绍
2010/05/31 PHP
php 求质素(素数) 的实现代码
2011/04/12 PHP
php防止sql注入之过滤分页参数实例
2014/11/03 PHP
windows7下php开发环境搭建图文教程
2015/01/06 PHP
jquery 全局AJAX事件使用代码
2010/11/05 Javascript
js中把JSON字符串转换成JSON对象最好的方法
2014/03/21 Javascript
详解JavaScript中getFullYear()方法的使用
2015/06/10 Javascript
JS+CSS3实现超炫的散列画廊特效
2016/07/16 Javascript
JSON格式的时间/Date(2367828670431)/格式转为正常的年-月-日 格式的代码
2016/07/27 Javascript
不间断循环滚动效果的实例代码(必看篇)
2016/10/08 Javascript
微信小程序 devtool隐藏的秘密
2017/01/21 Javascript
vue基于Element构建自定义树的示例代码
2017/09/19 Javascript
js实现数字从零慢慢增加到指定数字示例
2019/11/07 Javascript
Vue Render函数原理及代码实例解析
2020/07/30 Javascript
全面解析Vue中的$nextTick
2020/12/24 Vue.js
Python抓取Discuz!用户名脚本代码
2013/12/30 Python
python模拟Django框架实例
2016/05/17 Python
浅谈Python的垃圾回收机制
2016/12/17 Python
全面分析Python的优点和缺点
2018/02/07 Python
python批量替换多文件字符串问题详解
2018/04/22 Python
python 中字典嵌套列表的方法
2018/07/03 Python
Python SMTP发送邮件遇到的一些问题及解决办法
2018/10/24 Python
python笔记_将循环内容在一行输出的方法
2019/08/08 Python
python文件读写代码实例
2019/10/21 Python
python实现根据文件格式分类
2019/10/31 Python
python实现身份证实名认证的方法实例
2019/11/08 Python
keras 获取某层输出 获取复用层的多次输出实例
2020/05/23 Python
python进行OpenCV实战之画图(直线、矩形、圆形)
2020/08/27 Python
python中xlrd模块的使用详解
2021/02/01 Python
39美元购买一副眼镜或太阳镜:39DollarGlasses.com
2018/06/17 全球购物
消防战士优秀事迹材料
2014/02/13 职场文书
幼儿园大班评语大全
2014/04/17 职场文书
农业局党的群众路线教育实践活动整改方案
2014/09/20 职场文书
婚礼长辈答谢词
2015/09/29 职场文书
《蓝鲸的眼睛》读后感5篇
2020/01/15 职场文书
Redis数据结构之链表与字典的使用
2021/05/11 Redis