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中监听IME键盘输入事件
May 29 Javascript
什么是cookie?js手动创建和存储cookie
May 27 Javascript
JavaScript闭包详解
Feb 02 Javascript
AngularJS使用angular-formly进行表单验证
Dec 27 Javascript
值得分享和收藏的Bootstrap学习教程
May 12 Javascript
es6学习笔记之Async函数的使用示例
May 11 Javascript
XMLHttpRequest对象_Ajax异步请求重点(推荐)
Sep 28 Javascript
js中el表达式的使用和非空判断方法
Mar 28 Javascript
JavaScript实现异步图像上传功能
Jul 12 Javascript
angularjs实现对表单输入改变的监控(ng-change和watch两种方式)
Aug 29 Javascript
js实现时分秒倒计时
Dec 03 Javascript
JS+CSS+HTML实现“代码雨”类似黑客帝国文字下落效果
Mar 17 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
PHP4实际应用经验篇(8)
2006/10/09 PHP
php面向对象全攻略 (十五) 多态的应用
2009/09/30 PHP
Linux Apache PHP Oracle 安装配置(具体操作步骤)
2013/06/17 PHP
在win系统安装配置 Memcached for PHP 5.3 图文教程
2015/03/03 PHP
php根据日期显示所在星座的方法
2015/07/13 PHP
超详细的php用户注册页面填写信息完整实例(附源码)
2015/11/17 PHP
laravel 实现用户登录注销并限制功能
2019/10/24 PHP
js tab 选项卡
2009/04/26 Javascript
innerHTML与jquery里的html()区别介绍
2012/10/12 Javascript
一个可拖拽列宽表格实例演示
2012/11/26 Javascript
js关闭子窗体刷新父窗体实现方法
2012/12/04 Javascript
一个实用的图片切换支持点击切换和自动轮播
2014/09/09 Javascript
Nodejs为什么选择javascript为载体语言
2015/01/13 NodeJs
nw.js实现类似微信的聊天软件
2015/03/16 Javascript
js点击按钮实现水波纹效果代码(CSS3和Canves)
2016/09/15 Javascript
JavaScript"模拟事件"的注意要点详解
2019/02/13 Javascript
微信小程序textarea层级过高(盖住其他元素)问题的解决办法
2019/03/04 Javascript
uni-app如何页面传参数的几种方法总结
2020/04/28 Javascript
ElementUI 修改默认样式的几种办法(小结)
2020/07/29 Javascript
javascript实现下拉菜单效果
2021/02/09 Javascript
[00:27]DOTA2荣耀之路2:Patience from zhou!
2018/05/24 DOTA
Python编写电话薄实现增删改查功能
2016/05/07 Python
分析python切片原理和方法
2017/12/19 Python
Python线性方程组求解运算示例
2018/01/17 Python
深入了解Python装饰器的高级用法
2020/08/13 Python
详解python方法之绑定方法与非绑定方法
2020/08/17 Python
python 实现单例模式的5种方法
2020/09/23 Python
Canvas与Image互相转换示例代码
2013/08/09 HTML / CSS
AmazeUI 加载进度条的实现示例
2020/08/20 HTML / CSS
广告学专业毕业生自荐信
2013/09/24 职场文书
运动会跳远加油稿
2014/02/20 职场文书
《路旁的橡树》教学反思
2014/04/07 职场文书
小学优秀班干部事迹材料
2014/05/25 职场文书
法人单位适用的授权委托书
2014/09/19 职场文书
浅谈Python项目的服务器部署
2021/04/25 Python
Python 装饰器(decorator)常用的创建方式及解析
2022/04/24 Python