jQuery随手笔记之常用的jQuery操作DOM事件
作者:bea
Dom是Document Object Model的缩写,意思是文档对象模型。DOM是一种与浏览器、平台、语言无关的接口,使用该接口可以轻松访问页面中所有的标准组件。 DOM操作可以分为三个方面即DOM Core(核心)、HTM-DOM和CSS-DOM。 jQuery DOM 元素方法 函数 描述 .get() 获得由选择器指定的 DOM 元素。 .index() 返回指定元素相对于其他指定元素的 i
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() 除了这个元素本身得以保留之外,其他的比如 绑定的事件,附加的数据等都会被移除。
有用 | 无用
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中eval和with用法实例总结
- JavaScript基础篇(3)之Object、Function等引用类型
- 全面解析Bootstrap排版使用方法(标题)
- javascript作用域链(Scope Chain)用法实例解析
- Bootstrap每天必学之js插件
- Bootstrap每天必学之面板
- Bootstrap每天必学之媒体对象
- javascript针对cookie的基本操作实例详解
- javascript闭包(Closure)用法实例简析
- 详解JavaScript的流程控制语句
- 详解JavaScript的表达式与运算符
- Bootstrap每天必学之进度条
- jQuery插件EasyUI校验规则 validatebox验证框
- 实例解析jQuery插件EasyUI最常用的表单验证规则
- 整理Javascript流程控制语句学习笔记
- 基于javascript代码实现通过点击图片显示原图片
- 整理Javascript数组学习笔记
- Bootstrap每天必学之缩略图与警示窗
- 分享我的jquery实现下拉菜单心的