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实现给出的盒子的序列是否可连为一矩型
Aug 30 Javascript
jQuery验证Checkbox是否选中的代码 推荐
Sep 04 Javascript
JS预览图像将本地图片显示到浏览器上
Aug 25 Javascript
原生js ActiveXObject获取execl里面的值
Nov 01 Javascript
JS+CSS实现电子商务网站导航模板效果代码
Sep 10 Javascript
跟我学习javascript的闭包
Nov 16 Javascript
酷! 不同风格页面布局幻灯片特效js实现
Feb 19 Javascript
Node.js实现兼容IE789的文件上传进度条
Sep 02 Javascript
ajax实现加载页面、删除、查看详细信息 bootstrap美化页面!
Mar 14 Javascript
详解ECMAScript6入门--Class对象
Apr 27 Javascript
基于JavaScript实现飘落星星特效
Aug 10 Javascript
详解vue中axios的使用与封装
Mar 20 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
Ajax PHP分页演示
2007/01/02 PHP
window+nginx+php环境配置 附配置搭配说明
2010/12/29 PHP
PHP利用str_replace防注入的方法
2013/11/10 PHP
PHP版本的选择5.2.17 5.3.27 5.3.28 5.4 5.5兼容性问题分析
2016/04/04 PHP
PHP数组生成XML格式数据的封装类实例
2016/11/10 PHP
Yii框架表单提交验证功能分析
2017/01/07 PHP
JavaScript随机排序(随即出牌)
2010/09/17 Javascript
常见浏览器多长时间会提示“脚本运行时间过长”总结
2014/04/29 Javascript
jQuery简单实现网页选项卡特效
2014/11/24 Javascript
jQuery点击按钮弹出遮罩层且内容居中特效
2015/12/14 Javascript
基于JavaScript实现瀑布流效果(循环渐近)
2016/01/27 Javascript
使用vue.js制作分页组件
2016/06/27 Javascript
JS前端加密算法示例
2016/12/22 Javascript
NodeJS实现微信公众号关注后自动回复功能
2017/05/31 NodeJs
HTML5+JS+JQuery+ECharts实现异步加载问题
2017/12/16 jQuery
详解vue 单页应用(spa)前端路由实现原理
2018/04/04 Javascript
原生JS实现DOM加载完成马上执行JS代码的方法
2018/09/07 Javascript
json_decode 索引为数字时自动排序问题解决方法
2020/03/28 Javascript
react PropTypes校验传递的值操作示例
2020/04/28 Javascript
微信小程序实现上传多张图片、删除图片
2020/07/29 Javascript
[49:02]KG vs Infamous 2019国际邀请赛淘汰赛 败者组BO1 8.20.mp4
2020/07/19 DOTA
python fabric使用笔记
2015/05/09 Python
Perl中著名的Schwartzian转换问题解决实现
2015/06/02 Python
Python中Class类用法实例分析
2015/11/12 Python
基于python监控程序是否关闭
2020/01/14 Python
Python新手如何进行闭包时绑定变量操作
2020/05/29 Python
CSS3 calc()会计算属性详解
2018/02/27 HTML / CSS
在家更换处方镜片:Lensabl
2019/05/01 全球购物
美国克罗格超市在线购物:Kroger
2019/06/21 全球购物
Java文件和目录(IO)操作
2014/08/26 面试题
办公室主任职责范文
2013/11/08 职场文书
工程造价专业大学生职业生涯规划书
2014/01/18 职场文书
基层党支部公开承诺书
2014/05/29 职场文书
汽车销售经理岗位职责
2014/06/09 职场文书
nginx 配置缓存
2022/05/11 Servers
Python Matplotlib绘制动画的代码详解
2022/05/30 Python