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 相关文章推荐
dojo随手记 gird组件引用
Feb 24 Javascript
jquery遍历checkbox介绍
Feb 21 Javascript
jquery 自定义容器下雨效果可将下雨图标改为其他
Apr 23 Javascript
JavaScript动态创建div等元素实例讲解
Jan 06 Javascript
JS获取子窗口中返回的数据实现方法
May 28 Javascript
利用JS实现文字的聚合动画效果
Jan 22 Javascript
Javascript实现倒计时时差效果
May 18 Javascript
基于 webpack2 实现的多入口项目脚手架详解
Jun 26 Javascript
react-native 封装选择弹出框示例(试用ios&android)
Jul 11 Javascript
JS实现浏览上传文件的代码
Aug 23 Javascript
jQuery轻量级表单模型验证插件
Oct 15 jQuery
小程序采集录音并上传到后台
Nov 22 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中拷贝构造函数、赋值运算符重载
2012/07/25 PHP
php 模拟post_验证页面的返回状态(实例讲解)
2013/10/28 PHP
php实现多城市切换特效
2015/08/09 PHP
PHP排序二叉树基本功能实现方法示例
2018/05/26 PHP
JS实现金额转换(将输入的阿拉伯数字)转换成中文的实现代码
2013/09/30 Javascript
同域jQuery(跨)iframe操作DOM(实例讲解)
2013/12/19 Javascript
解决checkbox的attr(checked)一直为undefined问题
2014/06/16 Javascript
JavaScript实现的简单幂函数实例
2015/04/17 Javascript
轻松掌握jQuery中wrap()与unwrap()函数的用法
2016/05/24 Javascript
完美实现js焦点轮播效果(一)
2017/03/07 Javascript
jQuery插件zTree实现获取当前选中节点在同级节点中序号的方法
2017/03/08 Javascript
jquery中each循环的简单回滚操作
2017/05/05 jQuery
JavaScript设计模式之单例模式详解
2017/06/09 Javascript
Vue中this.$router.push参数获取方法
2018/02/27 Javascript
webpack打包node.js后端项目的方法
2018/03/10 Javascript
JavaScript数据结构与算法之二叉树插入节点、生成二叉树示例
2019/02/21 Javascript
如何在Node和浏览器控制台中打印彩色文字
2020/01/09 Javascript
vue中的双向数据绑定原理与常见操作技巧详解
2020/03/16 Javascript
vue实现购物车案例
2020/05/30 Javascript
前端使用crypto.js进行加密的函数代码
2020/08/16 Javascript
[02:52]2014DOTA2西雅图国际邀请赛 CIS战队巡礼
2014/07/07 DOTA
[00:42]《辉夜杯》—职业组预选赛12月3日15点 正式打响
2015/12/03 DOTA
Python2.6版本中实现字典推导 PEP 274(Dict Comprehensions)
2015/04/28 Python
Python简单操作sqlite3的方法示例
2017/03/22 Python
基于hashlib模块--加密(详解)
2017/06/21 Python
Selenium的使用详解
2018/10/19 Python
Python判断一个文件夹内哪些文件是图片的实例
2018/12/07 Python
pytorch模型预测结果与ndarray互转方式
2020/01/15 Python
西班牙购买行李箱和背包网站:Maletas Greenwich
2019/10/08 全球购物
助人为乐好少年事迹材料
2014/08/18 职场文书
一年级数学上册复习计划
2015/01/17 职场文书
小学五年级语文上册教学计划
2015/01/22 职场文书
母亲节寄语大全
2015/02/27 职场文书
2016年九九重阳节活动总结
2016/04/01 职场文书
2016年世界人口日宣传活动总结
2016/04/05 职场文书
python-opencv 中值滤波{cv2.medianBlur(src, ksize)}的用法
2021/06/05 Python