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 乱码问题
Aug 06 Javascript
用JS将搜索的关键字高亮显示实现代码
Nov 08 Javascript
浅谈javascript中自定义模版
Jan 29 Javascript
JavaScript中for循环的几种写法与效率总结
Feb 03 Javascript
vuejs开发组件分享之H5图片上传、压缩及拍照旋转的问题处理
Mar 06 Javascript
Angular4学习笔记之准备和环境搭建项目
Aug 01 Javascript
js+canvas实现滑动拼图验证码功能
Mar 26 Javascript
详解vue-cli中模拟数据的两种方法
Jul 03 Javascript
在移动端使用vue-router和keep-alive的方法示例
Dec 02 Javascript
微信小程序实现拖拽功能
Sep 26 Javascript
JavaScript forEach中return失效问题解决方案
Jun 01 Javascript
Vue使用预渲染代替SSR的方法
Jul 02 Javascript
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
PHP7+Nginx的配置与安装教程详解
2016/05/10 PHP
Laravel 5.5基于内置的Auth模块实现前后台登陆详解
2017/12/21 PHP
javascript引导程序
2008/10/26 Javascript
JQuery团队打造的javascript单元测试工具QUnit介绍
2010/02/26 Javascript
jquery实现图片渐变切换兼容ie6/Chrome/Firefox
2013/08/02 Javascript
js实现文本框选中的方法
2015/05/26 Javascript
基于jquery animate操作css样式属性小结
2015/11/27 Javascript
JS实现为排序好的字符串找出重复行的方法
2016/03/02 Javascript
简单学习vue指令directive
2016/11/03 Javascript
Angular 2 ngForm中的ngModel、[ngModel]和[(ngModel)]的写法
2017/06/29 Javascript
基于jQuery实现图片推拉门动画效果的两种方法
2017/08/26 jQuery
微信小程序全选多选效果实现代码解析
2020/01/21 Javascript
微信小程序实现下滑到底部自动翻页功能
2020/03/07 Javascript
[01:00:26]Ti4主赛事胜者组第一天 EG vs NEWBEE 1
2014/07/19 DOTA
[01:21]DOTA2新纪元-7.0新版本即将开启!
2016/12/11 DOTA
python基础_文件操作实现全文或单行替换的方法
2017/09/04 Python
python 找出list中最大或者最小几个数的索引方法
2018/10/30 Python
Python 实现中值滤波、均值滤波的方法
2019/01/09 Python
Python快速转换numpy数组中Nan和Inf的方法实例说明
2019/02/21 Python
Python3内置模块之json编解码方法小结【推荐】
2020/12/09 Python
详解python中自定义超时异常的几种方法
2019/07/29 Python
利用pyshp包给shapefile文件添加字段的实例
2019/12/06 Python
浅谈spring boot 集成 log4j 解决与logback冲突的问题
2020/02/20 Python
appium+python adb常用命令分享
2020/03/06 Python
Python 操作 MySQL数据库
2020/09/18 Python
Waterford美国官网:爱尔兰水晶制品品牌
2017/04/26 全球购物
在线吉他课程,学习如何弹吉他:Fender Play
2019/02/28 全球购物
意大利折扣和优惠券网站:Groupalia
2019/10/09 全球购物
高级护理专业大学生求职信
2013/10/24 职场文书
自考毕业自我鉴定范文
2013/10/27 职场文书
高中微机老师自我鉴定
2014/02/16 职场文书
司法所长先进事迹
2014/06/02 职场文书
2014年团支部工作总结
2014/11/17 职场文书
平凡的世界读书笔记
2015/06/25 职场文书
职场领导同事生日简短祝福语
2019/08/06 职场文书
老生常谈 使用 CSS 实现三角形的技巧(多种方法)
2021/04/13 HTML / CSS