在许多情况下，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对象的更多相关文章

  1. Jquery第一篇【介绍Jquery、回顾JavaScript代码、JS对象与JQ对象的区别】

    什么是Jquery? Jquey就是一款跨主流浏览器的JavaScript库,简化JavaScript对HTML操作 就是封装了JavaScript,能够简化我们写代码的一个JavaScript库 为 ...

  2. 【JQuery】jquery对象和javascript对象即DOM对象相互转换

    jQuery 对象是通过 jQuery 包装DOM 对象后产生的对象.jQuery 对象是 jQuery 独有的,其可以使用 jQuery 里的方法,但是不能使用 DOM 的方法:例如: $(&quo ...

  3. 在JavaScript中重写jQuery对象的方法

    jQuery是一个很好的类库,它给我们解决了很多的客户端编程,任何东西都不是万能的,当它不能满足我们的需求时我们需要对它进行重写,同时也不要影响其原有的功能或者修改其原有的功能:我现在的web应用程序 ...

  4. jQuery之Deferred对象详解

    deferred对象是jQuery对Promises接口的实现.它是非同步操作的通用接口,可以被看作是一个等待完成的任务,开发者通过一些通过的接口对其进行设置.事实上,它扮演代理人(proxy)的角色 ...

  5. 编写Javascript类库（jQuery版

    编写Javascript类库(jQuery版) - 进阶者系列 - 学习者系列文章 Posted on 2014-11-13 09:29 lzhdim 阅读(653) 评论(1) 编辑 收藏 本系列文 ...

  6. jQuery之Deferred对象P2

    转自 https://www.cnblogs.com/losesea/p/4415676.html deferred对象是jQuery对Promises接口的实现.它是非同步操作的通用接口,可以被看作 ...

  7. jQuery介绍 DOM对象和jQuery对象的转换与区别

    jQuery介绍 DOM对象和jQuery对象的转换与区别 jQuery介绍      jQuery: http://jquery.com/      write less, do more.   j ...

  8. 惊叹jQuery(解决jQuery对象到DOM的转换)

    jQuery是一个javascript框架,但绝对不是通常意义上的一些包装,个人感觉是一个改变js控制方式的框架.我们可以像美工通过写css分离页面代码一样,通过jQuery来分离页面与效果..下面转 ...

  9. jQuery的deferred对象详解（一）

    最近一段时间,都在研究jquery里面的$.Deffered对象,几天都搞不明白,其中源码的运行机制,网上查找了相关的资料,<jQuery的deferred对象详解>阮一峰老师的文章,里面 ...

  10. jquery 和 js 对象转换

    核心提示:jquery选择器得到的jquery对象和标准的 javascript中的document.getElementById()取得的dom对象是两种不同的对象类型,一般情况下,如S(’#id’ ...

随机推荐

  1. MySQL基础2——常用命令

    注意:MySQL在centos中安装的是5.7版本的,编辑MySQL时会有个报错,需要执行: set @@global.sql_mode='STRICT_TRANS_TABLES,NO_ZERO_IN ...

  2. 20210821 打表,蛇,购物,ants

    考场 T1 没看懂 T4 一眼回滚莫队,但忘记怎么写了,小慌 模拟 T1 题意的时候教练让 zsy 澄清了一下,确定了我不会做... T2 一看就是毒瘤题,T3 感觉比较可做 T4 确定了回滚的细节, ...

  3. ThinkCMF5.1主要特性

    更改框架协议为MIT,让你更自由地飞 基于ThinkPHP 5.1重构,但核心代码兼容5.0版本,保证老用户最小升级成本 增加对swoole支持,同时支持swoole协程和全同步模式(请单独安装扩展) ...

  4. COS控制台进阶 - 文件预览和在线编辑

    导语 | COS控制台新上线了文件预览功能,用户可在控制台内直接预览.编辑文件内容. 前不久,微软发布了 vscode for web 的公告,是基于web的在线代码编辑器,无需下载安装可以直接在we ...

  5. Jmeter扩展组件开发（1） - 创建maven工程

    前言 没有安装IDEA的伙伴先安装.url:https://www.cnblogs.com/gltou/p/14956060.html 扩展开发实现的两种方式 继承AbstracJavaSampler ...

  6. js中date类型的格式转化为yyyy-MM-dd HH:mm:ss的String类型

    在vue中或其他框架中可以在Date的原型链中添加Format的方法,如ruoyi可以写在main.js中更好,如果写在utils还需要去导入包. 正常的js直接放到utils.js就好 Date.p ...

  7. FormData上传文件 带进度条

    * jQuery ajax  FormData 上传文件 template $.ajax({ url: url, type: 'POST', data: new FormData(form), dat ...

  8. 定要过python二级选择题二套

    1. 2. 3. 4. 5. 6. 7. 8. 非主属性???? 9. 10.. 11.` 调用只是调用,但是没有返回值,,应为里面没有输出 12. 13. 14. 15. 16. 18. 19.

  9. 一篇文章告诉你Python接口自动化测试中读取Text,Excel,Yaml文件的方法

    前言 不管是做Ui自动化和接口自动,代码和数据要分离,会用到Text,Excel,Yaml.今天讲讲如何读取文件数据 Python也可以读取ini文件,传送门 记住一点:测试的数据是不能写死在代码里面 ...

  10. 一篇文章搞定Selenium元素定位/封装/数据驱动

    小伙伴都知道,自动化最重的,又最"难"(因为实战中会碰到定位的各种坑)那就是定位元素.如果不熟练掌握定位,那只怕你比功能测式的小伙伴下班还会要晚!扎心了吧! Selenium常用定 ...