jQuery随手笔记之常用的jQuery操作DOM事件


Posted in Javascript onNovember 29, 2015

 Dom是Document Object Model的缩写,意思是文档对象模型。DOM是一种与浏览器、平台、语言无关的接口,使用该接口可以轻松访问页面中所有的标准组件。

DOM操作可以分为三个方面即DOM Core(核心)、HTM-DOM和CSS-DOM。

jQuery DOM 元素方法 

函数 描述
.get() 获得由选择器指定的 DOM 元素。
.index() 返回指定元素相对于其他指定元素的 index 位置。
.size() 返回被 jQuery 选择器匹配的元素的数量。
.toArray() 以数组的形式返回 jQuery 选择器匹配的元素。

1.attr() .removeAttr()

.attr() 方法可以传入一个名值对的参数,也可以传入一个包含2个以上名值对的对象参数,例如:

.attr('src','images/a.jpg');

.attr({
 rel:'www',
 id:'zz',
 title:'some',
 some:'111'
});

当然,也可以移除一个或者一个以上属性.removeAttr('id rel');

2.prop()

该方法可以取得属性值

传入想要取得的值的属性名(字符串),例如.prop('id');

设置id的值(修改DOM本身存在的属性比如a标签的href,id)
.prop('id','otherid');

3.val()

这个方法经常用于取得表单控件的值

4.insertBefore() .insertAfter() .prependTo() .appendTo()

.insertBefore()在现有元素外部、之前添加内容;(反向操作 .before())
.insertAfter()在现有元素外部、之后添加内容;(反向操作 .after())
.prependTo()在现有元素内部、之前添加内容;(反向操作 .prepend())
.appendTo()在现有元素内部、之后添加内容;(反向操作 .append())

5.clone()

该方法可以复制拷贝元素,如果需要复制出来的元素继承其他事件,需要传入一个布尔值作为参数,.clone(true)

6.wrap() .wrapAll() .wrapInner()

.wrap()和.wrapInner()可以理解成相对的,.wrap()是包在元素外面一层,而.wrapWith()是包在元素里面一层,

而.wrapAll()是在所有匹配到的元素外围包裹

7.html() .text() .replaceWith() .replaceAll()

.html()可以传入文本或者DOM节点;

.text()只能读取或者替换文本;

.replaceWith() 把。。。替换“成”。。。;

.replaceAll() 把。。。替换“给”。。。

8.empty()

移除元素

9.detach() .remove()

这2个方法有点相似,都不会把匹配的元素从jQuery对象中删除,但是还是有所区别:

.detach() 所有绑定的事件、附加的数据等都会保留下来

.remove() 除了这个元素本身得以保留之外,其他的比如
绑定的事件,附加的数据等都会被移除。

Javascript 相关文章推荐
JavaScript 私有成员分析
Jan 13 Javascript
用JavaScript页面不刷新时全选择,全删除(GridView)
Apr 14 Javascript
js 输出内容到新窗口具体实现代码
May 31 Javascript
JSON传递bool类型数据的处理方式介绍
Sep 18 Javascript
javascript(js)的小数点乘法除法问题详解
Mar 07 Javascript
JavaScript中数据结构与算法(三):链表
Jun 19 Javascript
JavaScript错误处理和堆栈追踪详解
Apr 18 Javascript
vue获取当前激活路由的方法
Mar 17 Javascript
利用Promise自定义一个GET请求的函数示例代码
Mar 20 Javascript
微信小程序实现上传word、txt、Excel、PPT等文件功能
May 23 Javascript
详解express使用vue-router的history踩坑
Jun 05 Javascript
在vue项目实现一个ctrl+f的搜索功能
Feb 28 Javascript
整理Javascript基础语法学习笔记
Nov 29 #Javascript
Jquery操作Ajax方法小结
Nov 29 #Javascript
jquery+php实现滚动的数字特效
Nov 29 #Javascript
MVC Ajax Helper或Jquery异步加载部分视图
Nov 29 #Javascript
Javascript闭包实例详解
Nov 29 #Javascript
jQuery实现图片上传和裁剪插件Croppie
Nov 29 #Javascript
javascript高级编程之函数表达式 递归和闭包函数
Nov 29 #Javascript
You might like
PHP文件操作实现代码分享
2011/09/01 PHP
php数组函数序列之array_combine() - 数组合并函数使用说明
2011/10/29 PHP
繁简字转换功能
2006/07/19 Javascript
js预载入和JavaScript Image()对象使用介绍
2011/08/28 Javascript
jquery图片轮播插件仿支付宝2013版全屏图片幻灯片
2014/04/03 Javascript
JavaScript将一个数组插入到另一个数组的方法
2015/03/19 Javascript
jQuery.prop() 使用详解
2015/07/19 Javascript
jQuery实现折叠、展开的菜单组效果代码
2015/09/16 Javascript
JavaScript代码轻松实现网页内容禁止复制(代码简单)
2015/10/23 Javascript
Angularjs使用指令做表单校验的方法
2017/03/31 Javascript
Vue.js中数据绑定的语法教程
2017/06/02 Javascript
AngularJs+Bootstrap实现漂亮的计算器
2017/08/10 Javascript
iview中Select 选择器多选校验方法
2018/03/15 Javascript
Javascript读写cookie的实例源码
2019/03/16 Javascript
Node.js系列之发起get/post请求(2)
2019/08/30 Javascript
Javascript中的this,bind和that使用实例
2019/12/05 Javascript
继承行为在 ES5 与 ES6 中的区别详解
2019/12/24 Javascript
原生javascript运动函数的封装示例【匀速、抛物线、多属性的运动等】
2020/02/23 Javascript
JavaScript类的继承多种实现方法
2020/05/30 Javascript
Python创建模块及模块导入的方法
2015/05/27 Python
Unicode和Python的中文处理
2017/03/19 Python
python计算两个数的百分比方法
2018/06/29 Python
python读写csv文件的方法
2019/08/13 Python
django 快速启动数据库客户端程序的方法示例
2019/08/16 Python
python使用正则表达式去除中文文本多余空格,保留英文之间空格方法详解
2020/02/11 Python
Python request使用方法及问题总结
2020/04/26 Python
python matplotlib库的基本使用
2020/09/23 Python
Moda Operandi官网:美国奢侈品电商,海淘秀场T台同款
2020/05/26 全球购物
幼儿园教师考核制度
2014/02/01 职场文书
优秀学生事迹材料
2014/02/08 职场文书
匿名信格式范文
2015/05/27 职场文书
六年级作文之关于梦
2019/10/22 职场文书
PyQt5爬取12306车票信息程序的实现
2021/05/14 Python
javascript代码简写的几种常用方式汇总
2021/08/23 Javascript
python实现双向链表原理
2022/05/25 Python
Mysql数据库group by原理详解
2022/07/07 MySQL