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 相关文章推荐
初学prototype,发个JS接受URL参数的代码
Sep 25 Javascript
jquery ajax post提交数据乱码
Nov 05 Javascript
IE8下String的Trim()方法失效的解决方法
Nov 08 Javascript
js判断鼠标左、中、右键哪个被点击的方法
Jan 27 Javascript
JS动态创建DOM元素的方法
Jun 09 Javascript
AngularJS ng-change 指令的详解及简单实例
Jul 30 Javascript
基于BootStrap的Metronic框架实现页面链接收藏夹功能按钮移动收藏记录(使用Sortable进行拖动排序)
Aug 29 Javascript
jQuery EasyUI编辑DataGrid用combobox实现多级联动
Aug 29 Javascript
VueJs单页应用实现微信网页授权及微信分享功能示例
Jul 26 Javascript
基于Vue.js 2.0实现百度搜索框效果
Dec 28 Javascript
浅谈React中组件逻辑复用的那些事儿
May 21 Javascript
vue render函数动态加载img的src路径操作
Oct 26 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循环函数使用介绍之PHP基础入门教程
2013/09/21 PHP
PHP实现图片旋转效果实例代码
2014/10/01 PHP
PHP7.1方括号数组符号多值复制及指定键值赋值用法分析
2016/09/26 PHP
php与python实现的线程池多线程爬虫功能示例
2016/10/12 PHP
从ThinkPHP3.2.3过渡到ThinkPHP5.0学习笔记图文详解
2019/04/03 PHP
jQuery插件原来如此简单 jQuery插件的机制及实战
2012/02/07 Javascript
Javascript在IE和FireFox中的不同表现简析
2012/12/03 Javascript
JS延迟加载加快页面打开速度示例代码
2013/12/30 Javascript
html文档中的location对象属性理解及常见的用法
2014/08/13 Javascript
node.js中的querystring.parse方法使用说明
2014/12/10 Javascript
JS实现CheckBox复选框全选全不选功能
2015/05/06 Javascript
Vue.js每天必学之组件与组件间的通信
2016/09/08 Javascript
js实现html table 行,列锁定的简单实例
2016/10/13 Javascript
vue监听scroll的坑的解决方法
2017/09/07 Javascript
node.js使用redis储存session的方法
2018/09/26 Javascript
jQuery事件多次绑定与解绑问题实例分析
2019/02/19 jQuery
JS左右无缝轮播功能完整实例
2019/05/16 Javascript
Nodejs libuv运行原理详解
2019/08/21 NodeJs
python随机生成指定长度密码的方法
2015/04/04 Python
用Python实现一个简单的多线程TCP服务器的教程
2015/05/05 Python
python 排序算法总结及实例详解
2016/09/28 Python
Python操作Excel之xlsx文件
2017/03/24 Python
Window 64位下python3.6.2环境搭建图文教程
2018/09/19 Python
Python判断两个文件是否相同与两个文本进行相同项筛选的方法
2019/03/01 Python
python 实现仿微信聊天时间格式化显示的代码
2020/04/17 Python
python如何变换环境
2020/07/21 Python
Python判断字符串是否为合法标示符操作
2020/09/03 Python
Html5画布_动力节点Java学院整理
2017/07/13 HTML / CSS
华纳兄弟工作室的官方授权商店:WB Shop
2018/11/30 全球购物
Herschel美国官网:背包、手提袋及配件
2020/03/10 全球购物
大学毕业生个人自荐书
2014/07/02 职场文书
办公楼租房协议书范本
2014/11/25 职场文书
工厂仓库管理员岗位职责
2015/04/09 职场文书
新党员入党决心书
2015/09/22 职场文书
《秋思》教学反思
2016/02/23 职场文书
python 如何获取页面所有a标签下href的值
2021/05/06 Python