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 相关文章推荐
浏览器窗口加载和大小改变事件示例
Feb 27 Javascript
如何用JavaScript定义一个类
Sep 12 Javascript
jQuery简单实现两级下拉菜单效果代码
Sep 15 Javascript
非常棒的jQuery图片轮播效果
Apr 17 Javascript
详解JavaScript 中getElementsByName在IE中的注意事项
Feb 21 Javascript
js 判断一个数字是不是2的n次方幂的实例
Nov 26 Javascript
js实现上传并压缩图片效果
Jan 10 Javascript
Vue2.0仿饿了么webapp单页面应用详细步骤
Jul 08 Javascript
详解react阻止无效重渲染的多种方式
Dec 11 Javascript
Echarts地图添加引导线效果(labelLine)
Sep 30 Javascript
Vue项目页面跳转时浏览器窗口上方显示进度条功能
Mar 26 Javascript
JavaScript展开运算符和剩余运算符的区别详解
Feb 18 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之字符串变相相减的代码
2007/03/19 PHP
php array_map()数组函数使用说明
2011/07/12 PHP
PHP禁止页面缓存的代码
2011/10/23 PHP
一个实用的php验证码类
2017/07/06 PHP
javascript 进阶篇2 CSS XML学习
2012/03/14 Javascript
检测input每次的输入是否合法遇到汉字输入就有问题
2012/05/23 Javascript
jquery判断元素是否隐藏的多种方法
2014/05/06 Javascript
js获取元素相对窗口位置的实现代码
2014/09/28 Javascript
jQuery实现的多屏图像图层切换效果实例
2015/05/07 Javascript
详解js的异步编程技术的方法
2017/02/09 Javascript
React操作真实DOM实现动态吸底部的示例
2017/10/23 Javascript
详解微信小程序input标签正则初体验
2018/08/18 Javascript
JS对日期操作封装代码实例
2019/11/08 Javascript
vue从零实现一个消息通知组件的方法详解
2020/03/16 Javascript
详解vuejs中执行npm run dev出现页面cannot GET/问题
2020/04/26 Javascript
[01:48:04]DOTA2-DPC中国联赛 正赛 PSG.LGD vs Elephant BO3 第一场 2月7日
2021/03/11 DOTA
Python采用raw_input读取输入值的方法
2014/08/18 Python
在Linux系统上安装Python的Scrapy框架的教程
2015/06/11 Python
解决Python2.7读写文件中的中文乱码问题
2018/04/12 Python
python接口自动化测试之接口数据依赖的实现方法
2019/04/26 Python
解决Jupyter无法导入已安装的 module问题
2020/04/17 Python
Django中Q查询及Q()对象 F查询及F()对象用法
2020/07/09 Python
python 6行代码制作月历生成器
2020/09/18 Python
python递归函数用法详解
2020/10/26 Python
Stylenanda中文站:韩国一线网络服装品牌
2016/12/22 全球购物
Fossil加拿大官网:化石手表、手袋、首饰及配饰
2019/04/23 全球购物
MAC彩妆澳洲官网:M·A·C AU
2021/01/17 全球购物
什么是典型的软件三层结构?软件设计为什么要分层?软件分层有什么好处?
2012/03/14 面试题
应聘教师自荐信
2013/10/12 职场文书
旅游管理本科生求职信
2013/10/14 职场文书
村委会贫困证明范文
2014/09/21 职场文书
开会迟到检讨书范文
2015/05/06 职场文书
2015年司法局工作总结
2015/05/22 职场文书
经典励志格言:每日一句,让你每天充满能量
2019/08/16 职场文书
SQL Server连接查询的实用教程
2021/04/07 SQL Server
浅谈vue2的$refs在vue3组合式API中的替代方法
2021/04/18 Vue.js