jQuery学习笔记 操作jQuery对象 文档处理


Posted in Javascript onSeptember 19, 2012

下面就是一些常用方法,格式为$(selector).方法,其中$(selector)即当前选定元素:

 

移动元素

方法 描述
append($(selector)) 向当前元素的内部追加内容
appendTo($(selector)) 将当前元素在某元素内部追加。但由于会根据需要对当前元素进行移动,所以jQuery对象更改了,可用end()还原
prepend($(selector)) 向当前元素的内部前置内容
prependTo($(selector)) 将当前元素在某元素内部前置。类似于appendTo(),会改变对象
after($(selector)) 向当前元素之后插入内容
insertAfter($(selector)) 将当前元素插入到某元素之后。类似于appendTo(),会改变对象
before($(selector)) 向当前元素之前插入内容
insertBefore($(selector)) 将当前元素插入到某元素之前。类似于appendTo(),会改变对象

 

添加元素

方法 描述
$(html) 创建生成jQuery对象。根据原始HTML代码字符串,创建指向新元素的jQuery对象,再利用移动方法来添加到文档中
clone() 复制生成jQuery对象。复制当前选定页面元素,生成副本元素的jQuery对象,同样利用移动方法来添加到文档中。而且clone()指向副本,相当于更改了jQuery对象,所以可用一次end()还原到当前选定元素;二次end()则彻底还原对jQuery对象的更改

 

替换元素

方法 描述
replaceWith($(selector)) replaceWith($(html)) 移动页面上原有的元素来替换当前选定的页面元素,也可以添加新元素来替换
replaceAll($(selector)) replaceAll($(html)) 用当前选定的元素来替换某元素,可以使页面上原有元素,也可以是新元素。同样会根据需要复制当前元素副本,从而更改jQuery对象

 

包裹元素

方法 描述
wrap($(selector)) wrap($(html)) 复制页面上原有的元素来包裹当前选定的元素,也可以添加新元素来包裹
unwrap() 用来去除当前元素的父元素,但是父元素内部的文本内容依旧保留
wrapAll($(selector)) 复制页面原有元素把所有当前选定元素包裹在一起,不同于wrap()分别包裹每个元素
wrapInner($(selector)) 复制页面原有元素把分别包裹每个当前选定元素内部的文本和后代元素,不同于wrap()分别包裹每个元素本身

 

删除和清空元素

方法 描述
remove() 删除当前元素,该元素包含的文本内容和后代元素会一起删除掉,绑定的事件也不复存在
detach() 同样是删除当前元素,但是绑定的事件还是存在的
empty() 清空当前元素,该元素的文本内容和后代元素都将删除,但保留其本身
Javascript 相关文章推荐
javascript入门·图片对象(无刷新变换图片)\滚动图像
Oct 01 Javascript
Dom操作之兼容技巧分享
Sep 20 Javascript
javascript中的变量作用域以及变量提升详细介绍
Oct 24 Javascript
node.js中的querystring.parse方法使用说明
Dec 10 Javascript
JavaScript识别网页关键字并进行描红的方法
Nov 09 Javascript
jquery实现图片放大镜功能
Nov 23 Javascript
javascript实现全角转半角的方法
Jan 23 Javascript
jquery设置表单元素为不可用的简单代码
Jul 04 Javascript
解决angularjs WdatePicker ng-model的问题
Sep 13 Javascript
vue服务端渲染页面缓存和组件缓存的实例详解
Sep 18 Javascript
微信小程序时间控件picker view使用详解
Dec 28 Javascript
jQuery实现的上拉刷新功能组件示例
May 01 jQuery
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
JavaScript中的稀疏数组与密集数组[译]
Sep 17 #Javascript
You might like
域名查询代码公布
2006/10/09 PHP
PHP imagecreatefrombmp 从BMP文件或URL新建一图像
2012/07/16 PHP
PHP中的str_repeat函数在JavaScript中的实现
2013/09/16 PHP
PHP中定义数组常量(array常量)的方法
2014/11/17 PHP
php header函数的常用http头设置
2015/06/25 PHP
jquery ajax 局部刷新小案例
2014/02/08 Javascript
JS高级调试技巧:捕获和分析 JavaScript Error详解
2014/03/16 Javascript
js实现的标题栏新消息闪烁提示效果
2014/06/06 Javascript
深入探讨javascript中的数据类型
2015/03/04 Javascript
利用jQuery实现漂亮的圆形进度条倒计时插件
2015/09/30 Javascript
浅谈在js传递参数中含加号(+)的处理方式
2016/10/11 Javascript
详解基于javascript实现的苹果系统底部菜单
2016/12/02 Javascript
nodejs实例解析(输出hello world)
2017/01/03 NodeJs
javascript完美实现给定日期返回上月日期的方法
2017/06/15 Javascript
浅谈pc端rem字体设置的问题
2017/08/03 Javascript
实例讲解v-if和v-show的区别
2019/01/31 Javascript
JS面向对象之单选框实现
2020/01/17 Javascript
VUE 单页面使用 echart 窗口变化时的用法
2020/07/30 Javascript
[03:37]2016完美“圣”典 风云人物:Mikasa专访
2016/12/07 DOTA
[57:36]DOTA2-DPC中国联赛 正赛 SAG vs CDEC BO3 第三场 2月1日
2021/03/11 DOTA
Python3实现并发检验代理池地址的方法
2016/09/18 Python
python 内置函数filter
2017/06/01 Python
Python编程实现二分法和牛顿迭代法求平方根代码
2017/12/04 Python
Django中的Signal代码详解
2018/02/05 Python
对Python 获取类的成员变量及临时变量的方法详解
2019/01/22 Python
HTML5的postMessage的使用手册
2018/12/19 HTML / CSS
First Aid Beauty官网:FAB急救面霜
2018/05/24 全球购物
美国女士内衣在线折扣商店:One Hanes Place
2019/03/24 全球购物
美国最大最全的亚洲购物网站:美国亚米网(Yamibuy)
2020/05/05 全球购物
资深财务管理人员自我评价
2013/09/22 职场文书
日语求职信范文
2013/12/17 职场文书
大学生见习总结报告
2015/06/24 职场文书
当你焦虑迷茫时,请读读这6句话
2019/07/24 职场文书
MySQL 常见存储引擎的优劣
2021/06/02 MySQL
DIV CSS实现网页背景半透明效果
2021/12/06 HTML / CSS
oracle设置密码复杂度及设置超时退出的功能
2022/06/28 Oracle