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的Select选择框的华丽变身
Aug 23 Javascript
防止登录页面出现在frame中js代码
Jul 22 Javascript
Javascript模块化编程详解
Dec 01 Javascript
js鼠标滑过图片震动特效的方法
Feb 17 Javascript
JavaScript正则表达式exec/g实现多次循环用法示例
Jan 17 Javascript
JS简单获取日期相差天数的方法
Apr 24 Javascript
Vue2.X 通过AJAX动态更新数据
Jul 17 Javascript
JavaScript闭包原理与用法实例分析
Aug 10 Javascript
laydate如何根据开始时间或者结束时间限制范围
Nov 15 Javascript
JS实现手写 forEach算法示例
Apr 29 Javascript
autojs 蚂蚁森林能量自动拾取即给指定好友浇水的实现方法
May 03 Javascript
vue 解决无法对未定义的值,空值或基元值设置反应属性报错问题
Jul 31 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+mysql 采用ajax技术的 省 市 地 3级联动无刷新菜单 源码
2006/12/16 PHP
一周让你学会PHP 不错的学习资料
2009/02/06 PHP
PHP批量修改文件名称的方法分析
2017/02/27 PHP
使用PHP访问RabbitMQ消息队列的方法示例
2018/06/06 PHP
PHP getNamespaces()函数讲解
2019/02/03 PHP
Laravel 模型使用软删除-左连接查询-表起别名示例
2019/10/24 PHP
Javascript 获取滚动条位置等信息的函数
2009/09/08 Javascript
javascript结合html5 canvas实现(可调画笔颜色/粗细/橡皮)的涂鸦板
2013/04/27 Javascript
html+js实现动态显示本地时间
2013/09/21 Javascript
用js的for循环获取radio选中的值
2013/10/21 Javascript
jQuery 追加元素的方法如append、prepend、before
2014/01/16 Javascript
js面向对象编程之如何实现方法重载
2014/07/02 Javascript
原生js实现移动端瀑布流式代码示例
2015/12/18 Javascript
bootstrap输入框组代码分享
2016/06/07 Javascript
vue指令只能输入正数并且只能输入一个小数点的方法
2018/06/08 Javascript
vue-cli3.0使用及部分配置详解
2018/08/29 Javascript
在layui tab控件中载入外部html页面的方法
2019/09/04 Javascript
ElementUI多个子组件表单的校验管理实现
2019/11/07 Javascript
vue组件系列之TagsInput详解
2020/05/14 Javascript
[58:29]DOTA2-DPC中国联赛 正赛 Phoenix vs XG BO3 第一场 1月31日
2021/03/11 DOTA
跟老齐学Python之赋值,简单也不简单
2014/09/24 Python
python实现在每个独立进程中运行一个函数的方法
2015/04/23 Python
python实现Adapter模式实例代码
2018/02/09 Python
django请求返回不同的类型图片json,xml,html的实例
2018/05/22 Python
python的常用模块之collections模块详解
2018/12/06 Python
python使用Word2Vec进行情感分析解析
2020/07/31 Python
Python3自带工具2to3.py 转换 Python2.x 代码到Python3的操作
2021/03/03 Python
基于css3 animate制作绚丽的动画效果
2015/11/24 HTML / CSS
详解如何通过H5(浏览器/WebView/其他)唤起本地app
2017/12/11 HTML / CSS
HTML5 video进入全屏和退出全屏的实现方法
2020/07/28 HTML / CSS
Vans(范斯)德国官网:美国南加州的原创极限运动潮牌
2017/05/02 全球购物
世界领先的豪华床上用品供应商之一:Bedeck Home
2019/03/18 全球购物
荷叶圆圆教学反思
2014/02/01 职场文书
《我要的是葫芦》教学反思
2014/02/23 职场文书
小学端午节活动方案
2014/03/13 职场文书
开展警示教育活动总结
2015/05/09 职场文书