javascript-jquery-更改jquery对象
在许多情况下,jquery代码所做的事情变成了:生成jquery对象A,操作对jquery象A;更改为jquery对象B,操作jquery对象B;更改为jqueryC,操作jquery对象C......;
jquery的链式操作:
链式操作概述:生成一个jquery对象后,既要对它进行一次或多次的普通操作,同时还要对它进行更改操作。于是有必要把生成jquery对象储存在一个变量中,满足多次调用的需要。
例如:
$(function(){
$("div").click(function(){
$(this).addClass("highlight").children("ul").show().end()
.siblings().removeClass("highlight").children("ul").hide();
})
})
更改为后代元素的集合:
1.children()方法:是用来选择子元素的
children("选择器");//选贼子元素中,所有匹配选择器的直接子元素
children();选择父元素的所有直接子元素//并不是选中,是已经切换了
2.find()方法:是用来选择后代元素的
find("选择器");//选择后代元素中,所有匹配选择器的后代元素
find();//不选择原先元素任何后代元素//写不写都一样,什么都选不中
3.contents()方法:选择匹配元素文本块(节点)和子节点
--说明:包括空文本节点
更改为祖先元素的集合:
1.parent()方法:选择父元素
parent("选择器");//选择父元素中,所有匹配选择器的元素
parent();//选择所有父元素
2.parents()方法:选择祖先元素
parents("选择器");选择祖先元素中,所有匹配选择器的元素
parents();//选择所有祖先元素
3.parentsUntil()方法:祖先元素
parentUntil("选择器");//选择祖先元素,直到找到匹配选择器的元素,但不包括匹配元素
parentUntil();//选择所有祖先元素
4.offsetParent()方法:选择最近的祖先定位元素,且该元素的css属性display不能为none;所谓定位元素是指其css属性的position取值为relitive、absolute、fixed。如果祖先元素中没有合适的元素,则会选择<html>根元素。
5.closest("选择器")方法:选择器本身和其他祖先元素所有匹配选择器的元素。也即是说,先看看原先的元素是否匹配,否则会一层一层地向上找到最先匹配祖先元素。
更改为兄弟元素的集合
1.next()和prev()方法
next("选择器"),在原先元素后面的第一个兄弟元素中,选择匹配选择器的元素。next()或next("*"),会选取原先元素后面的第一个兄弟。
prev("选择器"),在原先元素前面的第一个兄弟元素中,选择匹配选择器的元素。prev()或prev("*"),会选取原先元素前面的第一个兄弟。
2.nextAll()、prevAll()和siblings()方法
nextAll("选择器"),在原先元素后面的兄弟元素中,选取匹配选择器的元素。nextAll()或nextAll("*"),会选取原先元素后面的所有兄弟。
prevAll("选择器"),在原先元素前面的兄弟元素中,选取匹配选择器的元素。prevAll()或prevAll("*"),会选取原先元素前面的所有兄弟。
siblings(“选择器”),在原先元素所有兄弟元素中,选取匹配选择器的元素。siblings()或siblings(“*”),会选取原先元素所有兄弟。
更改为更多元素的集合
1.add("选择器")方法,在原先元素的基础上添加选取匹配选择器的元素;
说明:$("选择器1").add("选择器2")选取的元素等同于$("选择器1","选择器2");相当于群组选择器;//给祖先元素用。
jquery筛选器
1.eq()、first()、last()方法
eq(index)、first()、last()
2.slice(start,[end])方法:筛选索引从start到(end-1)的元素
slice(2,5)//2,3,4
3.filter("选择器")方法:选择匹配选择器的元素
4.not("选择器")方法:选择不匹配选择器的元素
5.has("选择器")方法:选择匹配选择器的后代元素
end()为切换为前一个对象。
javascript-jquery-更改jquery对象的更多相关文章
- Jquery第一篇【介绍Jquery、回顾JavaScript代码、JS对象与JQ对象的区别】
什么是Jquery? Jquey就是一款跨主流浏览器的JavaScript库,简化JavaScript对HTML操作 就是封装了JavaScript,能够简化我们写代码的一个JavaScript库 为 ...
- 【JQuery】jquery对象和javascript对象即DOM对象相互转换
jQuery 对象是通过 jQuery 包装DOM 对象后产生的对象.jQuery 对象是 jQuery 独有的,其可以使用 jQuery 里的方法,但是不能使用 DOM 的方法:例如: $(&quo ...
- 在JavaScript中重写jQuery对象的方法
jQuery是一个很好的类库,它给我们解决了很多的客户端编程,任何东西都不是万能的,当它不能满足我们的需求时我们需要对它进行重写,同时也不要影响其原有的功能或者修改其原有的功能:我现在的web应用程序 ...
- jQuery之Deferred对象详解
deferred对象是jQuery对Promises接口的实现.它是非同步操作的通用接口,可以被看作是一个等待完成的任务,开发者通过一些通过的接口对其进行设置.事实上,它扮演代理人(proxy)的角色 ...
- 编写Javascript类库(jQuery版
编写Javascript类库(jQuery版) - 进阶者系列 - 学习者系列文章 Posted on 2014-11-13 09:29 lzhdim 阅读(653) 评论(1) 编辑 收藏 本系列文 ...
- jQuery之Deferred对象P2
转自 https://www.cnblogs.com/losesea/p/4415676.html deferred对象是jQuery对Promises接口的实现.它是非同步操作的通用接口,可以被看作 ...
- jQuery介绍 DOM对象和jQuery对象的转换与区别
jQuery介绍 DOM对象和jQuery对象的转换与区别 jQuery介绍 jQuery: http://jquery.com/ write less, do more. j ...
- 惊叹jQuery(解决jQuery对象到DOM的转换)
jQuery是一个javascript框架,但绝对不是通常意义上的一些包装,个人感觉是一个改变js控制方式的框架.我们可以像美工通过写css分离页面代码一样,通过jQuery来分离页面与效果..下面转 ...
- jQuery的deferred对象详解(一)
最近一段时间,都在研究jquery里面的$.Deffered对象,几天都搞不明白,其中源码的运行机制,网上查找了相关的资料,<jQuery的deferred对象详解>阮一峰老师的文章,里面 ...
- jquery 和 js 对象转换
核心提示:jquery选择器得到的jquery对象和标准的 javascript中的document.getElementById()取得的dom对象是两种不同的对象类型,一般情况下,如S(’#id’ ...
随机推荐
- 对 RESTful 的理解
REST 全称 Representation State Transfor (资源表现层状态改变) 实际上是指客户端通过http/https协议手段来改变URI的状态转化,达到请求不同的资源的目的. ...
- JDK1.8源码(八)——java.lang.ThreadLocal类
https://www.cnblogs.com/xdd666/p/14734047.html ThreadLocal https://www.cnblogs.com/yanfei1819/p/1473 ...
- Python - 面向对象编程 - __new()__ 和单例模式
单例模式 这是一种设计模式 设计模式是前任工作的总结和提炼,通常,被人们广泛流传的设计模式都是针对某一特定问题的成熟的解决方案 使用设计模式是为了可重用代码.让代码更容易被他人理解.保证代码可靠性 单 ...
- NOIP模拟50
过分的神圣,往往比恶魔更加恶质. 前言 最大的一个收获就是不要动不动就码线段树,一定要审清楚题目之后再码!! T1 一开始理解错题了,以为答案是就是 \(\dfrac{\operatorname{le ...
- 20210809 Merchant,Equation,Rectangle
做过,但当时咕了 T3 Merchant 先特判 \(t=0\),之后斜率一定会起作用. 考虑最终选择的物品集合,它们的斜率和一定大于 \(0\),因此答案具有单调性,可以二分. 实现的时候注意细节 ...
- java 线程状态 详解
线程被创建后,有一个生命周期,下图是线程的生命周期详解. java api java.lang.Thread.State 这个枚举中给出了六种线程状态,分别是: 线程状态 导致状态发生条件 NEW(新 ...
- ubantu虚拟机搭建xl2tp服务
在编译成功源码,安装完毕xl2tpd后,便可以配置xl2tpd服务.基本配置过程主要涉及两个配置文件:一个用来配置xl2tpd, 一个用来配置ppp协议.下面分别对这两个文件进行说明,最后添加xl2t ...
- Postman 根据nginx日志查账号
1) GET:http://fwm.le-yao.com/api/backend/profile 2) Headers中,在KEY中添加 Content-Type ,对应的VALUE为 applica ...
- coreos 常见问题
1.如果docker run的时候报如下错误: error creating overlay mount to /var/lib/docker/overlay2/... ... 则需要修改/run/s ...
- git 提交本地项目
在新文件夹中] 1.右键 git bash here,执行 2.git init 生成.git文件,存在则跳过 依次执行 1.git add . 2.git commit -m "提交信息& ...