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 removeChild 使用注意事项
Apr 11 Javascript
自己动手开发jQuery插件教程
Aug 25 Javascript
flash遮住div问题的正确解决方法
Feb 27 Javascript
JavaScript模拟实现继承的方法
Mar 30 Javascript
基于Bootstrap的Java开发问题汇总(Spring MVC)
Jan 15 Javascript
Bootstrap modal 多弹窗之叠加关闭阴影遮罩问题的解决方法
Feb 27 Javascript
jQuery实现动态删除LI的方法
May 30 jQuery
利用JS做网页特效_大图轮播(实例讲解)
Aug 09 Javascript
vue引用js文件的多种方式(推荐)
May 17 Javascript
js实现旋转木马轮播图效果
Jan 10 Javascript
原生JavaScript实现留言板
Jan 10 Javascript
jquery实现广告上下滚动效果
Mar 04 jQuery
整理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 is_file 判断给定文件名是否为一个正常的文件
2010/05/10 PHP
教你如何在CI框架中使用 .htaccess 隐藏url中index.php
2014/06/09 PHP
php选择排序法实现数组排序实例分析
2015/02/16 PHP
PHP 表单提交及处理表单数据详解及实例
2016/12/27 PHP
js Map List 遍历使用示例
2013/07/10 Javascript
JavaScript加入收藏夹功能(兼容IE、firefox、chrome)
2014/05/05 Javascript
JSON+Jquery省市区三级联动
2016/01/13 Javascript
JavaScript学习总结之JS、AJAX应用
2016/01/29 Javascript
JS如何判断json是否为空
2016/07/06 Javascript
使用JavaScript获取URL中的参数(两种方法)
2016/11/16 Javascript
微信小程序实现顶部选项卡(swiper)
2020/06/19 Javascript
通过nodejs 服务器读取HTML文件渲染到页面的方法
2018/05/17 NodeJs
推荐一个基于Node.js的表单验证库
2019/02/15 Javascript
vue实现下拉加载其实没那么复杂
2019/08/13 Javascript
vue cli3 调用百度翻译API翻译页面的实现示例
2019/09/13 Javascript
简单实现节流函数和防抖函数过程解析
2019/10/08 Javascript
python 图片验证码代码
2008/12/07 Python
用Python的线程来解决生产者消费问题的示例
2015/04/02 Python
Python实现拷贝多个文件到同一目录的方法
2016/09/19 Python
python自定义异常实例详解
2017/07/11 Python
Pycharm技巧之代码跳转该如何回退
2017/07/16 Python
Python cookbook(数据结构与算法)将序列分解为单独变量的方法
2018/02/13 Python
Python求解任意闭区间的所有素数
2018/06/10 Python
python 伯努利分布详解
2020/02/25 Python
使用Python将图片转正方形的两种方法实例代码详解
2020/04/29 Python
Django修改app名称和数据表迁移方案实现
2020/09/17 Python
使用CSS3的rem属性制作响应式页面布局的要点解析
2016/05/24 HTML / CSS
深深扎根运动世界的生活品牌:Tillys
2017/10/30 全球购物
中学教师管理制度
2014/01/14 职场文书
触电现场处置方案
2014/05/14 职场文书
纪念九一八事变演讲稿:忘记意味着背叛
2014/09/14 职场文书
物流业务员岗位职责
2015/04/03 职场文书
小学教师见习总结
2015/06/23 职场文书
企业团队精神心得体会
2016/01/19 职场文书
公司开业的祝贺语大全(60条)
2019/07/05 职场文书
MySQL8.0无法启动3534的解决方法
2021/06/03 MySQL