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 相关文章推荐
(推荐一个超好的JS函数库)S.Sams Lifexperience ScriptClassLib
Apr 29 Javascript
摘自百度的图片轮换效果代码
Nov 19 Javascript
DIV始终居中的js代码
Feb 17 Javascript
Node.js模块加载详解
Aug 16 Javascript
使用AngularJS和PHP的Laravel实现单页评论的方法
Jun 19 Javascript
jquery插件jquery.LightBox.js实现点击放大图片并左右点击切换效果(附demo源码下载)
Feb 25 Javascript
jQuery获取父元素及父节点的方法小结
Apr 14 Javascript
vue-router 学习快速入门
Mar 01 Javascript
AngularJS表格样式简单设置方法示例
Mar 03 Javascript
判断滚动条滑到底部触发事件(实例讲解)
Nov 15 Javascript
如何在vue里面优雅的解决跨域(路由冲突问题)
Jan 20 Javascript
js中调用微信的扫描二维码功能的实现代码
Apr 11 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 URL地址获取函数代码(端口等) 推荐
2010/05/15 PHP
php基于base64解码图片与加密图片还原实例
2014/11/03 PHP
使用php转义输出HTML到JavaScript
2015/03/27 PHP
JavaScript实现滚动栏效果的方法
2015/04/27 PHP
php自定义函数br2nl实现将html中br换行符转换为文本输入中换行符的方法【与函数nl2br功能相反】
2017/02/17 PHP
基于PHP的加载类操作以及其他两种魔术方法的应用实例
2017/08/28 PHP
实例讲解PHP表单验证功能
2019/02/15 PHP
jQuery源码分析之Callbacks详解
2015/03/13 Javascript
老生常谈遮罩层 滚动条的问题
2016/04/29 Javascript
详解jquery easyui之datagrid使用参考
2016/12/05 Javascript
解决循环中setTimeout执行顺序的问题
2018/06/20 Javascript
JavaScript实现的简单Tab点击切换功能示例
2018/07/06 Javascript
vue2.0获取鼠标位置的方法
2018/09/13 Javascript
浅谈小程序 setData学问多
2019/02/20 Javascript
详解JavaScript 高阶函数
2020/09/14 Javascript
python基础教程之元组操作使用详解
2014/03/25 Python
Python实现图片拼接的代码
2018/07/02 Python
python画图——实现在图上标注上具体数值的方法
2019/07/08 Python
使用python代码进行身份证号校验的实现示例
2019/11/21 Python
DataFrame.to_excel多次写入不同Sheet的实例
2019/12/02 Python
python中HTMLParser模块知识点总结
2021/01/25 Python
HTML5中图片之间的缝隙完美解决方法
2017/07/07 HTML / CSS
html5实现图片转圈的动画效果——让页面动起来
2017/10/16 HTML / CSS
联想新西兰官方网站:Lenovo New Zealand
2018/10/30 全球购物
Timberland德国官网:靴子、鞋子、衣服、夹克及配件
2019/12/10 全球购物
英国专业美容产品在线:Mylee(从指甲到脱毛)
2020/07/06 全球购物
求∏的近似值,直到最后一项的绝对值小于指定的数
2016/02/12 面试题
编写一子程序,将一链表倒序,即使链表表尾变表头,表头变表尾
2016/02/10 面试题
个人自我评价范文
2014/02/05 职场文书
军训自我鉴定100字
2014/02/13 职场文书
环保建议书300字
2014/05/14 职场文书
船舶工程技术专业求职信
2014/08/07 职场文书
老公出轨后的保证书
2015/05/08 职场文书
思品教学工作总结
2015/08/10 职场文书
windows安装python超详细图文教程
2021/05/21 Python
golang语言指针操作
2022/04/14 Golang