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 相关文章推荐
window.onload 加载完毕的问题及解决方案(下)
Jul 09 Javascript
关于this和self的使用说明
Aug 01 Javascript
基于JQuery的列表拖动排序实现代码
Oct 01 Javascript
js判断浏览器版本以及浏览器内核的方法
Jan 20 Javascript
jquery实现submit提交表单
Feb 03 Javascript
跟我学习javascript的函数调用和构造函数调用
Nov 16 Javascript
JavaScript实现给定时间相加天数的方法
Jan 25 Javascript
jquery中validate与form插件提交的方式小结
Mar 26 Javascript
JavaScript预解析及相关技巧分析
Apr 21 Javascript
js智能获取浏览器版本UA信息的方法
Aug 08 Javascript
高效的jQuery代码编写技巧总结
Feb 22 Javascript
微信、QQ、微博、Safari中使用js唤起App
Jan 24 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 Imagick获取图片RGB颜色值
2014/07/28 PHP
PHP实现页面静态化的超简单方法
2016/09/06 PHP
PHP批量删除jQuery操作
2017/07/23 PHP
javascript获得网页窗口实际大小的示例代码
2013/09/21 Javascript
setTimeout自动触发一个js的方法
2014/01/15 Javascript
jquery实现手机发送验证码的倒计时代码
2014/02/12 Javascript
对比分析json及XML
2014/11/28 Javascript
12个超实用的JQuery代码片段
2015/11/02 Javascript
javascript中获取元素标签中间的内容的实现方法
2016/10/08 Javascript
bootstrap的3级菜单样式,支持母版页保留打开状态实现方法
2016/11/10 Javascript
详解vue-Resource(与后端数据交互)
2017/01/16 Javascript
Three.js 再探 - 写一个微信跳一跳极简版游戏
2018/01/04 Javascript
AngularJS下$http服务Post方法传递json参数的实例
2018/03/29 Javascript
vue生成文件本地打开查看效果的实例
2018/09/06 Javascript
Element Cascader 级联选择器的使用示例
2020/07/27 Javascript
python通过pil为png图片填充上背景颜色的方法
2015/03/17 Python
Python数据分析库pandas基本操作方法
2018/04/08 Python
Python实现快速傅里叶变换的方法(FFT)
2018/07/21 Python
Flask框架工厂函数用法实例分析
2019/05/25 Python
详解python websocket获取实时数据的几种常见链接方式
2019/07/01 Python
python KNN算法实现鸢尾花数据集分类
2019/10/24 Python
如何在Win10系统使用Python3连接Hive
2020/10/15 Python
HTML5拖放效果的实现代码
2016/11/17 HTML / CSS
医疗保健专业人士购物网站:Scrubs & Beyond
2017/02/08 全球购物
Internal修饰符有什么含义
2013/07/10 面试题
生物技术毕业生自荐信
2013/10/23 职场文书
公司联欢晚会主持词
2014/03/22 职场文书
陈安之励志演讲稿
2014/08/21 职场文书
2014个人年度工作总结范文
2014/12/24 职场文书
药店营业员岗位职责
2015/04/14 职场文书
2015年新教师工作总结
2015/04/28 职场文书
熟背这些句子,让您的英语口语突飞猛进(135句)
2019/09/06 职场文书
导游词之徐州云龙湖
2019/11/19 职场文书
MySQL笔记 —SQL运算符
2022/01/18 MySQL
浅谈如何保证Mysql主从一致
2022/03/13 MySQL
vscode内网访问服务器的方法
2022/06/28 Servers