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 相关文章推荐
jQuery Tab插件 用于在Tab中显示iframe,附源码和详细说明
Jun 27 Javascript
js中判断数字\字母\中文的正则表达式 (实例)
Jun 29 Javascript
jQuery操作DOM之获取表单控件的值
Jan 23 Javascript
AngularJS国际化详解及示例代码
Aug 18 Javascript
把json格式的字符串转换成javascript对象或数组的方法总结
Nov 03 Javascript
无法获取隐藏元素宽度和高度的解决方案
Mar 07 Javascript
基于BootStrap实现简洁注册界面
Jul 20 Javascript
webpack4的迁移的使用方法
May 25 Javascript
Vue cli3 库模式搭建组件库并发布到 npm的流程
Oct 12 Javascript
详解处理Vue单页面应用SEO的另一种思路
Nov 09 Javascript
JS拖动选择table里的单元格完整实例【基于jQuery】
May 28 jQuery
Vue表单控件数据绑定方法详解
Feb 05 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
PHP $_FILES函数详解
2011/03/09 PHP
PHP数据类型之布尔型的介绍
2013/04/28 PHP
laravel如何开启跨域功能示例详解
2017/08/31 PHP
javascript form 验证函数 弹出对话框形式
2009/06/23 Javascript
javascript 跳转代码集合
2009/12/03 Javascript
mysql输出数据赋给js变量报unterminated string literal错误原因
2010/05/22 Javascript
jquery remove方法应用详解
2012/11/22 Javascript
JavaScript网页定位详解
2014/01/13 Javascript
jquery 取子节点及当前节点属性值
2014/07/25 Javascript
JS实现的网页背景闪电闪烁效果代码
2015/10/17 Javascript
使用BootStrapValidator完成前端输入验证
2016/09/28 Javascript
jQuery控制元素隐藏和显示
2017/03/03 Javascript
Vue.js教程之axios与网络传输的学习实践
2017/04/29 Javascript
微信小程序 新建登录页并实现tabBar隐藏
2017/06/13 Javascript
Node.js利用js-xlsx处理Excel文件的方法详解
2017/07/05 Javascript
15分钟上手vue3.0(小结)
2020/05/20 Javascript
[01:34]2014DOTA2 TI预选赛预选赛 选手比赛房大揭秘!
2014/05/20 DOTA
Python访问纯真IP数据库脚本分享
2015/06/29 Python
Python文本相似性计算之编辑距离详解
2016/11/28 Python
Tensorflow之Saver的用法详解
2018/04/23 Python
python 获取键盘输入,同时有超时的功能示例
2018/11/13 Python
Python数据结构之栈、队列及二叉树定义与用法浅析
2018/12/27 Python
Python 一句话生成字母表的方法
2019/01/02 Python
django+tornado实现实时查看远程日志的方法
2019/08/12 Python
Python3 文章标题关键字提取的例子
2019/08/26 Python
Lookfantastic法国官网:英国知名美妆购物网站
2017/10/28 全球购物
Lululemon英国官网:加拿大瑜伽服装品牌
2019/01/14 全球购物
捷克玩具商店:Bambule
2019/02/23 全球购物
Linux机考试题
2015/07/17 面试题
初中三好学生自我鉴定
2014/04/07 职场文书
签约仪式策划方案
2014/06/02 职场文书
小学校本培训方案
2014/06/06 职场文书
驾驶员安全责任书
2014/07/22 职场文书
论语读书笔记
2015/06/26 职场文书
开业典礼致辞
2015/07/29 职场文书
yolov5返回坐标的方法实例
2022/03/17 Python