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 相关文章推荐
JQUERY THICKBOX弹出层插件
Aug 30 Javascript
Mozilla 表达式 __noSuchMethod__
Apr 05 Javascript
将HTMLCollection/NodeList/伪数组转换成数组的实现方法
Jun 20 Javascript
如何使用Jquery获取Form表单中被选中的radio值
Aug 09 Javascript
基于jquery插件实现常见的幻灯片效果
Nov 01 Javascript
浅谈javascript六种数据类型以及特殊注意点
Dec 20 Javascript
javascript移动设备Web开发中对touch事件的封装实例
Jun 05 Javascript
JS传值出现中文参数乱码的解决方法
Jun 30 Javascript
基于js实现checkbox批量选中操作
Nov 22 Javascript
webpack 2的react开发配置实例代码
Jul 28 Javascript
Openlayers实现点闪烁扩散效果
Sep 24 Javascript
vue @ ~ 相对路径 路径别名设置方式
Jun 05 Vue.js
整理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
印尼林东PWN黄金曼特宁咖啡豆:怎么冲世界上最醇厚的咖啡冲煮教程
2021/03/03 冲泡冲煮
一个简单的PHP&MYSQL留言板源码
2020/07/19 PHP
php操作redis缓存方法分享
2015/06/03 PHP
Zend Framework教程之Application用法实例详解
2016/03/14 PHP
PHP Ajax实现无刷新附件上传
2016/08/17 PHP
js有序数组的连接问题
2013/10/01 Javascript
javascript图片相似度算法实现 js实现直方图和向量算法
2014/01/14 Javascript
js onmousewheel事件多次触发问题解决方法
2014/10/17 Javascript
jquery 插件实现多行文本框[textarea]自动高度
2015/03/04 Javascript
jQuery实现企业网站横幅焦点图切换功能实例
2015/04/30 Javascript
js同源策略详解
2015/05/21 Javascript
使用JavaScript的AngularJS库编写hello world的方法
2015/06/23 Javascript
JS模拟bootstrap下拉菜单效果实例
2016/06/17 Javascript
微信小程序 image组件binderror使用例子与js中的onerror区别
2017/02/15 Javascript
JavaScript创建对象的七种方式(推荐)
2017/06/26 Javascript
JavaScript使用FileReader实现图片上传预览效果
2020/03/27 Javascript
详解Vue-cli代理解决跨域问题
2017/09/27 Javascript
jQuery实现的鼠标滚轮控制图片缩放功能实例
2017/10/14 jQuery
Nuxt配合Node在实际生产中的应用详解
2018/08/07 Javascript
Vue自定义全局Toast和Loading的实例详解
2019/04/18 Javascript
vue+element创建动态的form表单及动态生成表格的行和列
2019/05/20 Javascript
Node.js 实现抢票小工具 & 短信通知提醒功能
2019/10/22 Javascript
[12:29]2018国际邀请赛 开幕秀
2018/08/22 DOTA
跟老齐学Python之编写类之二方法
2014/10/11 Python
python中使用正则表达式的后向搜索肯定模式(推荐)
2017/11/11 Python
python代码实现逻辑回归logistic原理
2019/08/07 Python
Keras中的两种模型:Sequential和Model用法
2020/06/27 Python
汽车专业人才自我鉴定范文
2013/12/29 职场文书
超市重阳节活动方案
2014/02/10 职场文书
岗位廉洁从政承诺书
2014/03/27 职场文书
个性婚礼策划方案
2014/05/17 职场文书
生活小常识广播稿
2014/09/16 职场文书
大学军训通讯稿(2016最新版)
2015/12/21 职场文书
Mysql8.0递归查询的简单用法示例
2021/08/04 MySQL
实现一个简单得数据响应系统
2021/11/11 Javascript
详解Flutter网络请求Dio库的使用及封装
2022/04/14 Java/Android