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 相关文章推荐
基于jquery的web页面日期格式化插件
Nov 15 Javascript
js判断当前浏览器类型,判断IE浏览器方法
Jun 02 Javascript
浅谈Javascript实现继承的方法
Jul 06 Javascript
jQuery进行组件开发完整实例
Dec 15 Javascript
js实现页面跳转的几种方法小结
May 16 Javascript
vue中各组件之间传递数据的方法示例
Jul 27 Javascript
JS实现获取进今年第几天是周几的方法分析
Jun 27 Javascript
vue实现条件判断动态绑定样式的方法
Sep 29 Javascript
重学 JS:为啥 await 不能用在 forEach 中详解
Apr 15 Javascript
Vue中常用rules校验规则(实例代码)
Nov 14 Javascript
Vue分页效果与购物车功能
Dec 13 Javascript
基于JavaScript实现省市联动效果
Jun 22 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分页函数
2006/10/09 PHP
如何解决CI框架的Disallowed Key Characters错误提示
2013/07/05 PHP
PHP从二维数组得到N层分类树的实现代码
2016/10/11 PHP
thinkPHP js文件中U方法不被解析问题的解决方法
2016/12/05 PHP
PHP网页缓存技术优点及代码实例
2020/07/29 PHP
Mootools 1.2教程 输入过滤第一部分(数字)
2009/09/15 Javascript
jquery 弹出层注册页面等(asp.net后台)
2010/06/17 Javascript
js/html光标定位的实现代码
2013/09/23 Javascript
JavaScript中this关键词的使用技巧、工作原理以及注意事项
2014/05/20 Javascript
Javascript毫秒数用法实例
2015/02/05 Javascript
对比分析AngularJS中的$http.post与jQuery.post的区别
2015/02/27 Javascript
JavaScript知识点整理
2015/12/09 Javascript
JavaScript中使用数组方法汇总
2016/02/16 Javascript
两行代码轻松搞定JavaScript日期验证
2016/08/03 Javascript
js 中文汉字转Unicode、Unicode转中文汉字、ASCII转换Unicode、Unicode转换ASCII、中文转换
2016/12/06 Javascript
Bootstrap显示与隐藏简单实现代码
2017/03/06 Javascript
浅谈vue-router 路由传参的方法
2017/12/27 Javascript
vue 组件中slot插口的具体用法
2018/04/03 Javascript
微信小程序中显示倒计时代码实例
2019/05/09 Javascript
vue 自定义组件的写法与用法详解
2020/03/04 Javascript
详谈python http长连接客户端
2017/06/12 Python
python 实现上传图片并预览的3种方法(推荐)
2017/07/14 Python
python利用正则表达式搜索单词示例代码
2017/09/24 Python
Python Numpy库安装与基本操作示例
2019/01/08 Python
Django 导出项目依赖库到 requirements.txt过程解析
2019/08/23 Python
利用python实现冒泡排序算法实例代码
2019/12/01 Python
Python的赋值、深拷贝与浅拷贝的区别详解
2020/02/12 Python
python中翻译功能translate模块实现方法
2020/12/17 Python
python Scrapy爬虫框架的使用
2021/01/21 Python
详解CSS3的图层阴影和文字阴影效果使用
2016/06/09 HTML / CSS
html5调用摄像头功能的实现代码
2018/05/07 HTML / CSS
防邪知识进家庭活动方案
2014/08/26 职场文书
色戒观后感
2015/06/12 职场文书
音乐研修感悟
2015/11/18 职场文书
比较几种Redis集群方案
2021/06/21 Redis
Python socket如何解析HTTP请求内容
2022/02/12 Python