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 相关文章推荐
列表内容的选择
Jun 30 Javascript
仅IE9/10同时支持script元素的onload和onreadystatechange事件分析
Apr 27 Javascript
一行命令搞定node.js 版本升级
Jul 20 Javascript
jQuery改变form表单的action,并进行提交的实现代码
May 25 Javascript
gulp-htmlmin压缩html的gulp插件实例代码
Jun 06 Javascript
js传值后台中文出现乱码的解决方法
Jun 30 Javascript
全面了解构造函数继承关键apply call
Jul 26 Javascript
json与jsonp知识小结(推荐)
Aug 16 Javascript
JS中this上下文对象使用方式
Oct 09 Javascript
利用HBuilder打包前端开发webapp为apk的方法
Nov 13 Javascript
微信小程序常用的3种提示弹窗实现详解
Sep 19 Javascript
vue表单中遍历表单操作按钮的显示隐藏示例
Oct 30 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
JavaScript中的稀疏数组与密集数组[译]
Sep 17 #Javascript
You might like
Yii框架数据模型的验证规则rules()被执行的方法
2016/12/02 PHP
Laravel+Intervention实现上传图片功能示例
2019/07/09 PHP
PHP使用PDO实现mysql防注入功能详解
2019/12/20 PHP
javascript 短路法代码精简
2009/08/20 Javascript
Javascript select下拉框操作常用方法
2009/11/09 Javascript
javascript cookie操作类的实现代码小结附使用方法
2010/06/02 Javascript
基于JQuery模仿苹果桌面的Dock效果(初级版)
2012/10/15 Javascript
Tab切换组件(选项卡功能)实例代码
2013/11/21 Javascript
javascript中取前n天日期的两种方法分享
2014/01/26 Javascript
浅谈Javascript Base64 加密解密
2014/12/28 Javascript
JavaScript中定义函数的三种方法
2015/03/12 Javascript
基于node.js的fs核心模块读写文件操作(实例讲解)
2017/09/10 Javascript
微信小程序适配iphoneX的实现方法
2018/09/18 Javascript
高效jQuery选择器的5个技巧实例分析
2019/11/26 jQuery
Node.js API详解之 tty功能与用法实例分析
2020/04/27 Javascript
快速了解Vue父子组件传值以及父调子方法、子调父方法
2020/07/15 Javascript
详解JavaScript作用域 闭包
2020/07/29 Javascript
基于JavaScript实现猜数字游戏代码实例
2020/07/30 Javascript
[58:32]EG vs Liquid 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
Python中实现对list做减法操作介绍
2015/01/09 Python
使用基于Python的Tornado框架的HTTP客户端的教程
2015/04/24 Python
Python导出DBF文件到Excel的方法
2015/07/25 Python
python验证码识别的示例代码
2017/09/21 Python
pandas进行数据的交集与并集方式的数据合并方法
2018/06/27 Python
Python之lambda匿名函数及map和filter的用法
2019/03/05 Python
Python实现微信消息防撤回功能的实例代码
2019/04/29 Python
解决python ThreadPoolExecutor 线程池中的异常捕获问题
2020/04/08 Python
python em算法的实现
2020/10/03 Python
结合CSS3的新特性来总结垂直居中的实现方法
2016/05/30 HTML / CSS
介绍一下gcc特性
2012/01/20 面试题
优秀小学生家长评语
2014/01/30 职场文书
小学生寒假家长评语
2014/04/16 职场文书
特此通知格式
2015/04/27 职场文书
win10+anaconda安装yolov5的方法及问题解决方案
2021/04/29 Python
go xorm框架的使用
2021/05/22 Golang
用JS实现飞机大战小游戏
2021/06/09 Javascript