jquery对dom的操作常用方法整理

Jquery对dom的操作也是很总要的。

1.三个简单实用的用于 DOM 操作的 jQuery 方法：

· text() - 设置或返回所选元素的文本内容

· html() - 设置或返回所选元素的内容（包括 HTML 标记）

· val() - 设置或返回表单字段的值

2.attr()获取属性。当然这两也是可以自己设置值来修改的，

3.对html内容的添加。添加新的 HTML 内容

我们将学习用于添加新内容的四个 jQuery 方法：

· append() - 在被选元素的结尾插入内容

· prepend() - 在被选元素的开头插入内容

· after() - 在被选元素之后插入内容

· before() - 在被选元素之前插入内容

4.删除元素/内容

如需删除元素和内容，一般可使用以下两个 jQuery 方法：

· remove() - 删除被选元素（及其子元素）

· empty() - 从被选元素中删除子元素

5.jQuery 操作 CSS

jQuery 拥有若干进行 CSS 操作的方法。我们将学习下面这些：

· addClass() - 向被选元素添加一个或多个类

· removeClass()- 从被选元素删除一个或多个类

· toggleClass()- 对被选元素进行添加/删除类的切换操作

· css() - 设置或返回样式属性

例子

$("h1,h2,p").addClass("blue");首先我们知道当对多种标签添加样式的时候我们用‘，'分开。Blue一定是一个设置好的.Blue{}类选择器

$("h1,h2,p").removeClass("blue");

$("h1,h2,p").toggleClass("blue");有样式就会移除，没样式就会添加

6.设置多个 CSS 属性

如需设置多个 CSS 属性，请使用如下语法：

css({"propertyname":"value","propertyname":"value",...});

7.jQuery 尺寸 方法

jQuerywidth() 和height() 方法

width() 方法设置或返回元素的宽度（不包括内边距、边框或外边距）。

height() 方法设置或返回元素的高度（不包括内边距、边框或外边距）。

jQueryinnerWidth() 和innerHeight() 方法

innerWidth() 方法返回元素的宽度（包括内边距）。

innerHeight() 方法返回元素的高度（包括内边距）。

jQueryouterWidth() 和outerHeight() 方法

outerWidth() 方法返回元素的宽度（包括内边距和边框）。

outerHeight() 方法返回元素的高度（包括内边距和边框）。

赞 (0)

相关推荐

  • jquery 操作DOM的基本用法分享

    例子展示: jquery代码: 复制代码 代码如下: <script language="javascript"> $(document).ready(function(){ alert($("ul li:eq(1)").text()); //选取第二个li的值 alert($("p").attr("title")); //选取p的title属性的值 //追加元素 $('ul').append("<

  • jQuery的DOM操作之删除节点示例

    jQuery的DOM操作之删除节点示例

    如果文档中某一个元素多余,那么应将其删除.jQuery提供了两种删除节点的方法,remove()方法和empty()方法. 1. remove(): <%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <html> <head> <meta http-equiv="Content-Type" content=&quo

  • DOM操作原生js 的bug,使用jQuery 可以消除的解决方法

    js的 bug 类型:  Uncaught TypeError:Cannot set/read property 'xxx' of null 在进行DOM操作的时候比较容易发生这个错误,比如: 1.  document.getElementById('test1').style.display='none' 2.  document.getElementById('test1').onclick=function(){/*相关代码*/} 假如DOM中无此 test1对象,将会抛出上面的错误,发生

  • jquery对dom的操作常用方法整理

    Jquery对dom的操作也是很总要的. 1.三个简单实用的用于 DOM 操作的 jQuery 方法: · text() - 设置或返回所选元素的文本内容 · html() - 设置或返回所选元素的内容(包括 HTML 标记) · val() - 设置或返回表单字段的值 2.attr()获取属性.当然这两也是可以自己设置值来修改的, 3.对html内容的添加.添加新的 HTML 内容 我们将学习用于添加新内容的四个 jQuery 方法: · append() - 在被选元素的结尾插入内容 · p

  • jQuery遍历DOM节点操作之filter()方法详解

    本文实例分析了jQuery遍历DOM节点操作之filter()方法.分享给大家供大家参考,具体如下: .filter(selector) 此方法用于在匹配元素中按照选择器表达式进行筛选. 记住:使用此方法必须得传入选择器表达式参数,不然会报错"'nodeType' 为空或不是对象" 另外请注意这个filter方法和jquery中的find方法的区别: filter方法是对匹配元素进行筛选,而find方法是对匹配元素的后代元素进行筛选. 从jquery1.4版本开始,filter方法又添

  • jQuery中DOM树操作之使用反向插入方法实例分析

    本文实例讲述了jQuery中DOM树操作之使用反向插入方法.分享给大家供大家参考.具体分析如下: 使用反向插入方法 这里我们先把创建的内容插人到元素前面,然后再把同一个元素插人到文档 中的另一个位置.通常,当在jQuery中操作元素时,利用连缀方法更简洁也更有效.可是我们现在没有办法这样做,因为this是.insertBefore()的目标,是.appendTo()的内容.此时,利 用反向插入方法,可以帮我们解决问题. 像.insertBefore()和.appendTo()这样的插人方法,一般

  • jQuery中DOM树操作之复制元素的方法

    jQuery中DOM树操作之复制元素的方法

    本文实例讲述了jQuery中DOM树操作之复制元素的方法.分享给大家供大家参考.具体分析如下: 复制元素 前面提到的操作包括:插人新创建的元素.将元素从文档中的一个位置移动 到另一个位置,以及通过新元素来包装已有的元素.可是,有时候也会用到复制元素的操作.例如,可以复制出现在页面顶部的导航菜单,并把副本放到页脚上.实际上,无论何时,只要能通过复制元素增强页面的视觉效果,都是以重用代码来实现的好机会.毕竟,如果能够只编写一次代码并让jQuery替我们完成复制,何必要重写两遍同时又增加双倍的出错机会

  • jQuery中DOM常见操作实例小结

    本文实例讲述了jQuery中DOM常见操作.分享给大家供大家参考,具体如下: DOM属性操作 属性列表 属性 版本 说明 attr() 1.0 设置或返回文档节点的属性. removeAttr() 1.0 移除文档节点的属性. prop() 1.6 设置或返回DOM元素的属性. removeProp() 1.6 移除每个匹配元素的属性. addClass() 1.0 添加CSS类名. removeClass() 1.0 移除CSS类名. toggleClass() 1.2 切换CSS类名(存在就

  • Jquery对数组的操作技巧整理

    1. $.each(array, [callback]) 遍历[常用] 解释: 不同于例遍 jQuery 对象的 $.each() 方法,此方法可用于例遍任何对象(不仅仅是数组哦~). 回调函数拥有两个参数:第一个为对象的成员或数组的索引, 第二个为对应变量或内容. 如果需要退出 each 循环可使回调函数返回 false, 其它返回值将被忽略. each遍历,相信都不陌生,在平常的事件处理中,是for循环的变体,但比for循环强大.在数组中,它可以轻松的攻取数组索引及对应的值.例: 复制代码

  • JQuery 选择器、DOM节点操作练习实例

    JQuery 选择器、DOM节点操作练习实例

    一.练习一 1.需求效果分析: 2.代码示例: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <script s

  • 浅析JS操作DOM的一些常用方法

    getElementById(): 获取有指定惟一ID属性值文档中的元素 getElementsByName(name): 返回的是数组 getElementsByTagName(): 返回具有指定标签名的元素子元素集合 getAttribute(): 返回指定属性名的属性值 document.getElementsByTagName("a")[0].getAttribute("target"); setAttribute(): 添加指定的属性,并为其赋指定的值.

  • jquery操作ul的一些操作笔记整理(干货)

    1.html标记 <ul id="attachText"> <li data-text="111"><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="ex

  • jquery中dom操作和事件的实例学习 仿yahoo邮箱登录框的提示效果

    但感觉这样写很没意思. jquery的优势就是简单的代码就能带来更好的用户体验. 所以就找几个我感觉实用的例子,拿出来介绍下.顺带把其中用到的操作和事件介绍下. html代码: <input type="text" id="address" value="请输入邮箱地址"/> jquery代码: 复制代码 代码如下: $(document).ready(function(){ $('#address').focus(function(

随机推荐