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键盘事件介绍
Jan 31 Javascript
html超链接打开窗口大小的方法
Mar 05 Javascript
js流动式效果显示当前系统时间
May 16 Javascript
js获取腾讯视频ID的方法
Oct 03 Javascript
javascript数组去重常用方法实例分析
Apr 11 Javascript
微信小程序实战之自定义toast(6)
Apr 18 Javascript
VUE 使用中踩过的坑
Feb 08 Javascript
Node.js模拟发起http请求从异步转同步的5种用法
Sep 26 Javascript
es6基础学习之解构赋值
Dec 10 Javascript
js实现随机数小游戏
Jun 28 Javascript
JavaScript HTML DOM元素 节点操作汇总
Jul 29 Javascript
让你30分钟快速掌握vue3教程
Oct 26 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连接数据库代码应用分析
2011/05/29 PHP
php操作SVN版本服务器类代码
2011/11/27 PHP
php取得字符串首字母的方法
2015/03/25 PHP
PHP之将POST数据转化为字符串的实现代码
2016/11/03 PHP
PHP设计模式之观察者模式定义与用法分析
2019/04/04 PHP
JQuery 简便实现页面元素数据验证功能
2007/03/24 Javascript
filemanage功能中用到的lib.js
2007/04/08 Javascript
javascript定时变换图片实例代码
2013/03/17 Javascript
document.documentElement的一些使用技巧
2013/04/18 Javascript
javascript客户端遍历控件与获取父容器对象示例代码
2014/01/06 Javascript
js跳转页面方法实现汇总
2014/02/11 Javascript
js怎么判断flash swf文件是否加载完毕
2014/08/14 Javascript
基于BootStrap Metronic开发框架经验小结【三】下拉列表Select2插件的使用
2016/05/12 Javascript
NodeJS远程代码执行
2016/08/28 NodeJs
JavaScript实现垂直滚动条效果
2017/01/18 Javascript
js实现textarea限制输入字数
2017/02/13 Javascript
Angular.Js中ng-include指令的使用与实现
2017/05/07 Javascript
让Vue也可以使用Redux的方法
2018/05/23 Javascript
JavaScript 中 JSON.parse 函数 和 JSON.stringify 函数
2018/12/05 Javascript
vue+Element-ui实现分页效果实例代码详解
2018/12/10 Javascript
Vue 2.0 侦听器 watch属性代码详解
2019/06/19 Javascript
解决使用layui的时候form表单中的select等不能渲染的问题
2019/09/18 Javascript
详解小程序如何动态绑定点击的执行方法
2019/11/26 Javascript
Python的Flask框架中实现分页功能的教程
2015/04/20 Python
Python两台电脑实现TCP通信的方法示例
2019/05/06 Python
Python shutil模块用法实例分析
2019/10/02 Python
PYTHON发送邮件YAGMAIL的简单实现解析
2019/10/28 Python
vscode配置anaconda3的方法步骤
2020/08/08 Python
详解HTML5中的元素与元素
2015/08/17 HTML / CSS
详解HTML5中的picture元素响应式处理图片
2018/01/03 HTML / CSS
什么是Smart Navigation?
2016/07/03 面试题
运动会入场解说词300字
2014/01/25 职场文书
乡镇总工会学雷锋活动总结
2014/03/01 职场文书
大学生推广普通话演讲稿
2014/09/21 职场文书
草系十大最强宝可梦,纸片人上榜,榜首大家最熟悉
2022/03/18 日漫
mysql查看表结构的三种方法总结
2022/07/07 MySQL