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 new 需不需要继续使用
Jul 02 Javascript
JSONP 跨域访问代理API-yahooapis实现代码
Dec 02 Javascript
JS取得绝对路径的实现代码
Jan 16 Javascript
jQuery插件bxSlider实现响应式焦点图
Apr 12 Javascript
AspNet中使用JQuery上传插件Uploadify详解
May 20 Javascript
JavaScript实现快速排序的方法
Jul 31 Javascript
以JavaScript来实现WordPress中的二级导航菜单的方法
Dec 14 Javascript
浅谈Vue Element中Select下拉框选取值的问题
Mar 01 Javascript
在 Vue 项目中引入 tinymce 富文本编辑器的完整代码
May 04 Javascript
微信小程序dom操作的替代思路实例分析
Dec 06 Javascript
记录vue做微信自定义分享的一些问题
Sep 12 Javascript
原生JS实现留言板功能
Feb 08 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
PHPMYADMIN导入数据最大为2M的解决方法
2012/04/23 PHP
深入探讨<br />和 \r\n两者有什么区别??
2013/06/05 PHP
使用YUI+Ant 实现JS CSS压缩
2014/09/02 PHP
Laravel框架控制器的request与response用法示例
2019/09/30 PHP
Laravel开启跨域请求的方法
2019/10/13 PHP
通过PHP实现获取访问用户IP
2020/05/09 PHP
超强的IE背景图片闪烁(抖动)的解决办法
2007/09/09 Javascript
Javascript 面向对象 对象(Object)
2010/05/13 Javascript
基于JQuery 滑动与动画的说明介绍
2013/04/18 Javascript
jquery实现保存已选用户
2014/07/21 Javascript
解决vue 路由变化页面数据不刷新的问题
2018/03/13 Javascript
JavaScript检查数据中是否存在相同的元素(两种方法)
2018/10/07 Javascript
JS实现将对象转化为数组的方法分析
2019/01/21 Javascript
vue.js多页面开发环境搭建过程
2019/04/24 Javascript
[47:20]DAC2018 4.4 淘汰赛 Optic vs Mineski 第一场
2018/04/05 DOTA
python和C语言混合编程实例
2014/06/04 Python
Python常用小技巧总结
2015/06/01 Python
python3使用requests模块爬取页面内容的实战演练
2017/09/25 Python
Python高并发解决方案实现过程详解
2020/07/31 Python
Python hashlib模块的使用示例
2020/10/09 Python
python 实现&quot;神经衰弱&quot;翻牌游戏
2020/11/09 Python
html5使用canvas绘制一张图片
2014/12/15 HTML / CSS
购买大码女装:Lane Bryant
2016/09/07 全球购物
维氏瑞士军刀英国网站:Victorinox英国
2019/07/04 全球购物
拉夫劳伦爱尔兰官方网站:Ralph Lauren爱尔兰
2020/04/10 全球购物
美国折扣地毯销售网站:Rugs.com
2020/03/27 全球购物
SQL数据库笔试题
2016/03/08 面试题
init进程的作用
2012/04/12 面试题
分公司经理岗位职责
2013/11/11 职场文书
自主招生自荐信格式
2013/12/03 职场文书
学校门卫工作职责
2013/12/07 职场文书
公司租车协议书
2015/01/29 职场文书
2015年教师节新闻稿
2015/07/17 职场文书
100句人生哲理语录集锦:强者征服今天,懒汉坐等明天
2019/10/18 职场文书
您对思维方式了解多少?
2019/12/09 职场文书
CSS3实现的文字弹出特效
2021/04/16 HTML / CSS