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 相关文章推荐
6款经典实用的jQuery小插件及源码(对话框/提示工具等等)
Feb 04 Javascript
Javascript让DEDECMS告别手写Tag
Sep 01 Javascript
JavaScript onkeydown事件入门实例(键盘某个按键被按下)
Oct 17 Javascript
JS+CSS实现仿msn风格选项卡效果代码
Oct 22 Javascript
js HTML5 Ajax实现文件上传进度条功能
Feb 13 Javascript
JS插件plupload.js实现多图上传并显示进度条
Nov 29 Javascript
简单谈谈关于 npm 5.0 的新坑
Jun 08 Javascript
JavaScript实现选中文字提示新浪微博分享效果
Jun 15 Javascript
基于hover的用法实例(推荐)
Jul 04 Javascript
vue axios用法教程详解
Jul 23 Javascript
Vue不能检测到Object/Array更新的情况的解决
Jun 26 Javascript
JS运算符优先级与表达式示例详解
Sep 04 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判断文件上传图片格式的实例详解
2017/09/30 PHP
getElementById在任意一款浏览器中都可以用吗的疑问回复
2007/05/13 Javascript
javascript jQuery插件练习
2008/12/24 Javascript
jquery 如何动态添加、删除class样式方法介绍
2012/11/07 Javascript
简单易用的倒计时js代码
2014/08/04 Javascript
js光标定位文本框回车表单提交问题的解决方法
2015/05/11 Javascript
js 获取站点应用名的简单实例
2016/08/18 Javascript
利用Angularjs中模块ui-route管理状态的方法
2016/12/27 Javascript
使用JS在浏览器中判断当前网络连接状态的几种方法
2017/05/05 Javascript
前端主流框架vue学习笔记第二篇
2017/07/26 Javascript
vue自定义过滤器创建和使用方法详解
2017/11/06 Javascript
JavaScript引用类型Date常见用法实例分析
2018/08/08 Javascript
Vue.js 图标选择组件实践详解
2018/12/03 Javascript
nodejs一个简单的文件服务器的创建方法
2019/09/13 NodeJs
小程序登录之支付宝授权的实现示例
2019/12/13 Javascript
python求斐波那契数列示例分享
2014/02/14 Python
Python最基本的输入输出详解
2015/04/25 Python
Python递归函数定义与用法示例
2017/06/02 Python
pandas 条件搜索返回列表的方法
2018/10/30 Python
python ChainMap 合并字典的实现步骤
2019/06/11 Python
python简单区块链模拟详解
2019/07/03 Python
Python定义一个Actor任务
2020/07/29 Python
苏格兰销售女装、男装和童装的连锁店:M&Co
2018/03/16 全球购物
Watch Station官方网站:世界一流的手表和智能手表
2020/01/05 全球购物
写clone()方法时,通常都有一行代码,是什么?
2012/10/31 面试题
打架检讨书800字
2014/01/10 职场文书
护理不良事件检讨书
2014/02/06 职场文书
生产部厂长助理职位说明书
2014/03/03 职场文书
项目建议书格式
2014/03/12 职场文书
工会2014法制宣传日活动总结
2014/11/01 职场文书
单位介绍信格式
2015/01/31 职场文书
房地产工程部经理岗位职责
2015/04/09 职场文书
人事聘任通知
2015/04/21 职场文书
幼儿园教学工作总结2015
2015/05/12 职场文书
2019年大学生学年自我鉴定!
2019/03/25 职场文书
微信小程序基础教程之echart的使用
2021/06/01 Javascript