jQuery随手笔记之常用的jQuery操作DOM事件

 更新时间:2015年11月29日 11:18:14   作者:我的头很光  
Dom是Document Object Model的缩写,意思是文档对象模型。DOM是一种与浏览器、平台、语言无关的接口,使用该接口可以轻松访问页面中所有的标准组件,本文给大家介绍jQuery随手笔记之常用的jQuery操作DOM事件,需要的朋友参考下

 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() 除了这个元素本身得以保留之外,其他的比如
绑定的事件,附加的数据等都会被移除。

相关文章

  • 使用CamanJS在Web页面上处理图像的技巧

    使用CamanJS在Web页面上处理图像的技巧

    CamanJs库用于个人项目中进行使用的图形操作库,这个库是基于JavaScript的canvas操作库,接下来,通过本篇文章给大家详细介绍使用CamanJS在Web页面上处理图像的技巧,需要的朋友一起来学习下
    2015-08-08
  • JQuery判断正整数整理小结(jQuery 文本框中只能输入正整数)

    JQuery判断正整数整理小结(jQuery 文本框中只能输入正整数)

    这篇文章主要介绍了JQuery判断正整数,附上详细的代码供大家查看具体的方法,需要的朋友可以参考下
    2017-08-08
  • 查看源码的工具 学习jQuery源码不错的工具

    查看源码的工具 学习jQuery源码不错的工具

    jQuery是一个非常好用的javascript框架,我尤其喜欢它强大的选择器和链式表达式,使得我们能通过简单的语句实现复杂的功能。它还有一个重要的特点就是它的可扩展性,使得很多人都可以开发他们的插件并且分享出来
    2011-12-12
  • jQuery添加删除DOM元素方法详解

    jQuery添加删除DOM元素方法详解

    这篇文章主要介绍了jQuery添加删除DOM元素方法,结合实例形式较为详细的分析讲述了jQuery关于DOM元素节点的添加与删除相关技巧,需要的朋友可以参考下
    2016-01-01
  • Jquery实现纵向横向菜单

    Jquery实现纵向横向菜单

    这篇文章主要介绍了Jquery实现纵向横向菜单的相关资料,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-01-01
  • jQuery插件扩展测试实例

    jQuery插件扩展测试实例

    这篇文章主要介绍了jQuery插件扩展方法,结合一个动态改变元素样式功能实例分析了jQuery插件扩展的实现技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2016-06-06
  • jQuery/CSS3图片特效插件整理推荐

    jQuery/CSS3图片特效插件整理推荐

    这里给大家整理汇总了10款jQuery/CSS3图片特效插件,效果都非常棒,推荐给大家,有需要的小伙伴参考下
    2014-12-12
  • jQuery插件fullPage.js实现全屏滚动效果

    jQuery插件fullPage.js实现全屏滚动效果

    这篇文章主要为大家详细介绍了jQuery全屏滚动插件fullPage.js的使用方法,可制作全屏滚动网页,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-12-12
  • jQuery实现验证用户登录

    jQuery实现验证用户登录

    这篇文章主要为大家详细介绍了jQuery实现验证用户登录,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-12-12
  • jQuery+CSS实现简单切换菜单示例

    jQuery+CSS实现简单切换菜单示例

    这篇文章主要介绍了jQuery+CSS实现简单切换菜单的方法,涉及jQuery针对页面元素的遍历及样式动态变换相关技巧,需要的朋友可以参考下
    2016-07-07

最新评论