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 相关文章推荐
用JS操作FRAME中的IFRAME及其内容的实现代码
Jul 26 Javascript
js 获取子节点函数 (兼容FF与IE)
Apr 18 Javascript
jQuery编写widget的一些技巧分享
Oct 28 Javascript
Javascript 面向对象编程(coolshell)
Mar 18 Javascript
JavaScript 参数中的数组展开 [译]
Sep 21 Javascript
javascript实现的DES加密示例
Oct 30 Javascript
jquery ajax,ashx,json的用法总结
Feb 12 Javascript
父节点获取子节点的字符串示例代码
Feb 26 Javascript
原生JavaScript实现的简单省市县三级联动功能示例
May 27 Javascript
JavaScript设计模式之装饰者模式定义与应用示例
Jul 25 Javascript
vuex的module模块用法示例
Nov 12 Javascript
layui使用及简单的三级联动实现教程
Dec 01 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中使用explode查找某个字符是否存在的方法
2011/07/12 PHP
CI框架集成Smarty的方法分析
2016/05/17 PHP
php处理json格式数据经典案例总结
2016/05/19 PHP
基于php编程规范(详解)
2017/08/17 PHP
Thinkphp5框架ajax接口实现方法分析
2019/08/28 PHP
javascript+dom树型菜单类,希望朋友们一起进步
2007/05/03 Javascript
JQuery 动态扩展对象之另类视角
2010/05/25 Javascript
location.search在客户端获取Url参数的方法
2010/06/08 Javascript
jQuery Study Notes学习笔记 (二)
2010/08/04 Javascript
原生javascript实现无间缝滚动示例
2014/01/28 Javascript
JavaScript通过正则表达式实现表单验证电话号码
2014/03/07 Javascript
三种取消选中单选框radio的方法
2014/09/09 Javascript
jQuery使用$.get()方法从服务器文件载入数据实例
2015/03/25 Javascript
jquery控制显示服务器生成的图片流
2015/08/04 Javascript
JS+CSS实现仿msn风格选项卡效果代码
2015/10/22 Javascript
整理Javascript函数学习笔记
2015/12/01 Javascript
jQuery实现按钮点击遮罩加载及处理完后恢复的效果
2016/06/07 Javascript
js滚轮事件兼容性问题需要注意哪些
2016/11/15 Javascript
jquery 实现复选框的全选操作实例代码
2017/01/24 Javascript
JavaScript ES6中export、import与export default的用法和区别
2017/03/14 Javascript
vue组件化中slot的基本使用方法
2019/05/01 Javascript
关于Vue中axios的封装实例详解
2019/10/20 Javascript
python中hashlib模块用法示例
2017/10/30 Python
利用Python读取txt文档的方法讲解
2018/06/23 Python
python求质数的3种方法
2018/09/28 Python
python GUI实现小球满屏乱跑效果
2019/05/09 Python
如何理解Python中包的引入
2020/05/29 Python
python json.dumps() json.dump()的区别详解
2020/07/14 Python
jupyter notebook远程访问不了的问题解决方法
2021/01/11 Python
花卉与景观设计系大学生求职信
2013/10/01 职场文书
大学生就业推荐信范文
2013/11/29 职场文书
2019开业庆典剪彩仪式主持词!
2019/07/22 职场文书
golang 如何通过反射创建新对象
2021/04/28 Golang
解决Golang time.Parse和time.Format的时区问题
2021/04/29 Golang
入门学习Go的基本语法
2021/07/07 Golang
springboot+zookeeper实现分布式锁
2022/03/21 Java/Android