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 preload&lazy load
May 13 Javascript
Javascript WebSocket使用实例介绍(简明入门教程)
Apr 16 Javascript
两种方法基于jQuery实现IE浏览器兼容placeholder效果
Oct 14 Javascript
JS实现仿雅虎首页快捷登录入口及导航模块效果
Sep 19 Javascript
JS HTML5拖拽上传图片预览
Jul 18 Javascript
javascript中活灵活现的Array对象详解
Nov 30 Javascript
将鼠标焦点定位到文本框最后(代码分享)
Jan 11 Javascript
jQuery中ajax获取数据赋值给页面的实例
Dec 31 jQuery
jQuery实现的响应鼠标移动方向插件用法示例【附源码下载】
Aug 28 jQuery
vue实现微信分享功能
Nov 28 Javascript
vue实现分页加载效果
Dec 24 Javascript
微信小程序用户盒子、宫格列表的实现
Jul 01 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
地摊中国 - 珍藏老照片
2020/08/18 杂记
山进SANGEAN ATS-909X电路分析
2021/03/02 无线电
PHP HTML JavaScript MySQL代码如何互相传值的方法分享
2012/09/30 PHP
php curl登陆qq后获取用户信息时证书错误
2015/02/03 PHP
PHP的关于变量和日期处理的一些面试题目整理
2015/08/10 PHP
WordPress中创建用户角色的相关PHP函数使用详解
2015/12/25 PHP
PHP错误和异常处理功能模块示例
2016/11/12 PHP
php从数据库中读取特定的行(实例)
2017/06/02 PHP
PHP使用mysqli同时执行多条sql查询语句的实例
2019/03/22 PHP
PHP 加密 Password Hashing API基础知识点
2020/03/02 PHP
PhpStorm2020 + phpstudyV8 +XDebug的教程详解
2020/09/17 PHP
鼠标移动到一张图片时变为另一张图片
2006/12/05 Javascript
js 加载时自动调整图片大小
2008/05/28 Javascript
实现超用户体验 table排序javascript实现代码
2009/06/22 Javascript
javascript Window及document对象详细整理
2011/01/12 Javascript
使用Javascript接收get传递的值的代码
2011/11/30 Javascript
THREE.JS入门教程(1)THREE.JS使用前了解
2013/01/24 Javascript
JS截取字符串常用方法详细整理
2013/10/28 Javascript
jQuery实现强制cookie过期方法汇总
2015/05/22 Javascript
javascript中使用new与不使用实例化对象的区别
2015/06/22 Javascript
基于JavaScript实现TAB标签效果
2016/01/12 Javascript
jquery中封装函数传递当前元素的方法示例
2017/05/05 jQuery
微信小程序-可移动菜单的实现过程详解
2019/06/24 Javascript
vue使用prop可以渲染但是打印台报错的解决方式
2019/11/13 Javascript
JavaScript 实现HTML DOM增删改查操作的常见方法详解
2020/01/04 Javascript
vue实现编辑器键盘抬起时内容跟随光标距顶位置向上滚动效果
2020/05/28 Javascript
Python列表(list)常用操作方法小结
2015/02/02 Python
Golang与python线程详解及简单实例
2017/04/27 Python
浅谈python中copy和deepcopy中的区别
2017/10/23 Python
Python使用matplotlib实现绘制自定义图形功能示例
2018/01/18 Python
Windows下安装Django框架的方法简明教程
2018/03/28 Python
python 使用值来排序一个字典的方法
2018/11/16 Python
python 视频逐帧保存为图片的完整实例
2019/12/10 Python
波兰品牌鞋履在线商店:Eastend.pl
2020/01/11 全球购物
法学专业大学生实习自我鉴定
2014/10/05 职场文书
项目转让协议书
2014/10/27 职场文书