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提取元素里的纯文本不包含span等里的内容
Sep 30 Javascript
js中replace的用法总结
Dec 27 Javascript
借助javascript代码判断网页是静态还是伪静态
May 05 Javascript
jQuery实现控制文字内容溢出用省略号(…)表示的方法
Feb 26 Javascript
详解Angularjs中的依赖注入
Mar 11 Javascript
jquery选择器中的空格与大于号>、加号+与波浪号~的区别介绍
Jun 24 Javascript
js无提示关闭浏览器窗口的两种方法分析
Nov 06 Javascript
想学习javascript JS和jQuery哪个重要 先学哪个
Dec 11 Javascript
AngularJS使用ng-class动态增减class样式的方法示例
May 18 Javascript
jQuery添加新内容的四个常用方法分析【append,prepend,after,before】
Mar 19 jQuery
微信小程序事件流原理解析
Nov 27 Javascript
在vue项目中封装echarts的步骤
Dec 25 Vue.js
整理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/16 PHP
php+html5使用FormData对象提交表单及上传图片的方法
2015/02/11 PHP
在IE下获取object(ActiveX)的Param的代码
2009/09/15 Javascript
jquery中的 $("#jb51")与document.getElementById("jb51") 的区别
2011/07/26 Javascript
获取客户端电脑日期时间js代码(jquery)
2012/09/12 Javascript
js 延迟加载 改变JS的位置加快网页加载速度
2012/12/11 Javascript
js动态添加onload、onresize、onscroll事件(另类方法)
2012/12/26 Javascript
纯js实现div内图片自适应大小(已测试,兼容火狐)
2014/06/16 Javascript
JS针对浏览器窗口关闭事件的监听方法集锦
2016/06/24 Javascript
AngularJS入门教程之迭代器过滤详解
2016/08/18 Javascript
jquery自定义表单验证插件
2016/10/12 Javascript
jQuery为DOM动态追加事件的方法
2017/02/16 Javascript
原生实现一个react-redux的代码示例
2018/06/08 Javascript
如何理解Vue的v-model指令的使用方法
2018/07/19 Javascript
jsonp实现百度下拉框功能的方法分析
2019/05/10 Javascript
vue 中url 链接左边的小图标更改问题
2019/12/30 Javascript
[01:38]DOTA2辉夜杯 欢乐的观众现场采访
2015/12/26 DOTA
[03:57]2016完美“圣”典风云人物:rOtk专访
2016/12/09 DOTA
[01:02:18]VGJ.S vs infamous Supermajor 败者组 BO3 第一场 6.4
2018/06/05 DOTA
python编程线性回归代码示例
2017/12/07 Python
Python实现带参数与不带参数的多重继承示例
2018/01/30 Python
python批量设置多个Excel文件页眉页脚的脚本
2018/03/14 Python
对Python中Iterator和Iterable的区别详解
2018/10/18 Python
python查找指定文件夹下所有文件并按修改时间倒序排列的方法
2018/10/21 Python
解决tensorboard多个events文件显示紊乱的问题
2020/02/15 Python
配置python的编程环境之Anaconda + VSCode的教程
2020/03/29 Python
Django 权限管理(permissions)与用户组(group)详解
2020/11/30 Python
iHerb中文官网:维生素、保健品和健康产品
2018/11/01 全球购物
Radley英国官网:英国莱德利小狗包
2019/03/21 全球购物
精选干货:Java精选笔试题附答案
2014/01/18 面试题
上课迟到检讨书100字
2014/01/11 职场文书
教师产假请假条
2014/04/10 职场文书
软件项目经理岗位职责
2015/04/01 职场文书
担保公司2015年终工作总结
2015/10/14 职场文书
优秀乡村医生事迹材料(2016精选版)
2016/02/29 职场文书
学生安全责任协议书
2016/03/22 职场文书