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 相关文章推荐
JavaScript 变量命名规则
Sep 23 Javascript
javascript 获取元素样式必杀技
May 04 Javascript
node.js中的fs.lchownSync方法使用说明
Dec 16 Javascript
jQuery实现可高亮显示的二级CSS菜单效果
Sep 01 Javascript
JavaScript+CSS无限极分类效果完整实现方法
Dec 22 Javascript
理解JavaScript表单的基础知识
Jan 25 Javascript
js+html5实现半透明遮罩层弹框效果
Aug 24 Javascript
微信开发之企业付款到银行卡接口开发的示例代码
Sep 18 Javascript
详解服务端预渲染之Nuxt(介绍篇)
Apr 07 Javascript
JavaScript在web自动化测试中的作用示例详解
Aug 25 Javascript
Vue的Options用法说明
Aug 14 Javascript
微信小程序入门之绘制时钟
Oct 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输出两个数字中间有多少个回文数的方法
2015/03/23 PHP
详解PHP使用Redis存储session时的一个Warning定位
2017/07/05 PHP
Laravel 5.5基于内置的Auth模块实现前后台登陆详解
2017/12/21 PHP
php 删除一维数组中某一个值元素的操作方法
2018/02/01 PHP
Jquery插件easyUi表单验证提交(示例代码)
2013/12/30 Javascript
jquery用offset()方法获得元素的xy坐标
2014/09/06 Javascript
在Python中使用glob模块查找文件路径的方法
2015/06/17 Javascript
js实现页面跳转的几种方法小结
2016/05/16 Javascript
AngularJS 作用域详解及示例代码
2016/08/17 Javascript
js显示动态时间的方法详解
2016/08/20 Javascript
Vue.js 60分钟快速入门教程
2017/03/28 Javascript
JavaScript限制在客户区可见范围的拖拽(解决scrollLeft和scrollTop的问题)(2)
2017/05/17 Javascript
javascript 对象 与 prototype 原型用法实例分析
2019/11/11 Javascript
js面向对象之实现淘宝放大镜
2020/01/15 Javascript
javascrpt密码强度校验函数详解
2020/03/18 Javascript
[55:16]Mski vs VGJ.S Supermajor小组赛C组 BO3 第二场 6.3
2018/06/04 DOTA
[03:41]2018完美盛典-《Fight With Us》
2018/12/16 DOTA
用Python实现服务器中只重载被修改的进程的方法
2015/04/30 Python
linux安装Python3.4.2的操作方法
2018/09/28 Python
keras 自定义loss层+接受输入实例
2020/06/28 Python
python 基于UDP协议套接字通信的实现
2021/01/22 Python
css3中检验表单的required,focus,valid和invalid样式
2014/02/21 HTML / CSS
全方位了解CSS3的Regions扩展
2015/08/07 HTML / CSS
P D PAOLA法国官网:西班牙著名的珠宝首饰品牌
2020/02/15 全球购物
优秀的教师个人的中文求职信
2013/09/21 职场文书
办公室驾驶员岗位职责
2013/11/15 职场文书
满月酒答谢词
2014/01/14 职场文书
文秘人员工作职责
2014/01/31 职场文书
通信研究生自荐信
2014/02/01 职场文书
幼儿园小班教学反思
2014/02/02 职场文书
秸秆管理实施方案
2014/03/15 职场文书
镇班子对照检查材料思想汇报
2014/09/24 职场文书
2019公司借款合同范本2篇!
2019/07/24 职场文书
Python之Matplotlib绘制热力图和面积图
2022/04/13 Python
Elasticsearch 基本查询和组合查询
2022/04/19 Python
JavaScript架构localStorage特殊场景下二次封装操作
2022/06/21 Javascript