1 定义:jquery中对DOM的操作就是对DOM元素进行增删查改操作

2 分类:
      1)DOM Core(核心):用途广泛 支持多种编程语言

2)HTML DOM:代码简短 只用于处理web文档

3)CSS DOM:对样式的操作
                  作用:用于获取和设置style对裂的各种属性 使网页呈现不同效果

3 DOM操作

1)节点操作

a)查找节点: 查节点:利用jquery选择器
                      例:$("ul li:eq(2)") 查找到ul下的li节点的第三个节点
             查属性:使用attr()方法,若参数为一个则传入属性名称.若参数为两个则为设置属性

例:$("p").attr("title") 查找到p标签的title属性

b)创建节点:元素节点:$("<li></li>") 创建<li>节点
         文本节点:$("<li>xxxxx</li>")
     属性节点:$("<li title='xxxx'></li>")

c)插入节点:append():给与a元素匹配的元素内部添加 $("a").append("content")
      例:$("p").append("<b>其他</b>");
      appendTo():将content添加到a元素内部 $("content").appendTo("a")
      例:$("<b>其他</b>").appendTo("p");
     prepend():在a元素内部前面添加content $("a").prepend("content")
      例:$("p").prepend("<b>其他</b>");
       prependTo():将content添加到a元素内部前置 $("content").prependTo("a")
      例:$("<b>Hello</b>").prependTo("p");
       after():在a元素外部的后面添加content $("a").after("content")
      例:$("p").after("<b>Hello</b>");
       insertAfter():将content插入到a外部之后 $("content").insertAfter("a")
      例:$("<b>Hello</b>").insertAfter("p");
       before():在a元素外部的前面插入content $("a").before("content")
      例:$("p").before("<b>Hello</b>");
       insertBefore():将content插入到a外部的前面 $("content").insertBefore("a")
      例:$("<b>Hello</b>").insertBefore("p");

d)删除节点:
      remove():作用:删除所有匹配元素以及它的后代元素 删除元素引用

($("ul li:eq(1)").remove()).appendTo("ul");

      empty():清空节点 $("ul li:eq(1)").empty();

e)复制节点:$("ul li").click(function(){
      $("this").clone().appendTo(); //复制当前点击的节点将它追加到<ul>元素

f)替换节点:
      replaceWith():$("p").replaceWith("<strong>你最不喜欢的球类运动是?</strong>")
      replaceAll():$("<strong>你最不喜欢的球类运动是?</strong>").replaceAll("p");

g)包裹节点:wrap()与wrapAll()相同,都是从外部包裹元素
       warpInner():从该元素内部开始包裹 不包裹该元素

h)遍历节点:
      children():获取匹配元素子元素集合
            语法:$(a).children();
      next():取得该元素匹配元素的下一个同辈元素 相当于层次选择器
            语法:$(a).next()==>>$(a+next)
      prev():取得与该元素匹配的前面的同辈元素
            语法:$(a).prev()
      siblings():取得与该元素匹配的所有同辈元素,自身除外
            语法:$(a).siblings();
      Closest():取得最近的匹配元素
            语法:$(a).closet();
      nextAll(String):查找当前元素之后的所有元素。
      prevAll(string):查找当前元素之前所有的同辈元素
      parent():取得一个包含着所有匹配元素的直接父元素
      parents():取得该元素的所有父元素
      find():找到所有与指定表达式匹配的元素。
      filter():筛选出与指定表达式匹配的元素集合
      andSelf():加入先前所选的加入当前元素中

      例:

//选取所有div以及内部的p,并加上border类
//HTML 代码:
<div><p>First Paragraph</p><p>Second Paragraph</p></div>
//jQuery 代码:
$("div").find("p").andSelf().addClass("border");
//结果:
<div class="border"><p class="border">First Paragraph</p><p class="border">Second Paragraph</p></div>

      end():将匹配的元素列表变为前一次的状态。

      例:

//例:选取所有的p元素,查找并选取span子元素,然后再回过来选取p元素
//HTML 代码:
<p><span>Hello</span>,how are you?</p>
//jQuery 代码:
$("p").find("span").end()
//结果:
<p><span>Hello</span> how are you?</p>

2)属性操作:
    获取设置属性:$(a).attr(); //获取
           $(a).attr("属性名称","值"); //设置

          设置多个属性:attr(属性1:值1,属性2:值2,属性n:值n)
    删 除 属 性:removeAttr()
          语法:$(a).removeAttr(属性名称);

3)样式操作:
    a)获取设置: 获取:$(a).attr(样式名); 设置:$(a).attr(样式名,样式);
    b)追加样式:$(a).addClass(样式名称)
    c)移除样式:$(a).removeClass(样式名); 移除多个:$(a).removeClass(样式1 样式2 样式n)
    d)切换样式: toggle():控制行为上的切换 toggleClass():控制样式上的切换
    e)判断样式是否存在: hasClass():$(a).hasClass(样式名)==>>$(a).is("."+样式名);

4)设置和获取HTML,文本和值:
    html()方法: 相当于javascript中的innerHTML属性 获取或设置某元素中的html内容
    text()方法:==>>JS中innertText属性 读取或设置元素的文本内容
    val() 方法:==>>JS中value属性 设置和获取元素值

4 CSS DOM
    a)css():获取元素样式 传入一个参数 //获取元素样式 传入两个参数 //设置元素样式
    b)opacity属性:设置透明度 数值越大可见度越高 透明度越低
    c)height(em): em为空值:获取元素高度 反之:设置元素高度
    d)offset():浏览器边框的偏移度 仅仅对可见元素有效 包含top和left两个属性
    e)position():
    f)scrollTop():获取元素滚动条距离顶端的距离
    g)scrollLeft():获取元素滚动条距离左侧的距离

jQuery中DOM操作的更多相关文章

  1. jQuery学习笔记(二)jQuery中DOM操作

    目录 DOM操作分类 jQuery中的各种DOM操作 查找节点 创建节点 删除节点 复制节点 替换节点 包裹节点 属性操作 样式操作 对HTML.文本和值的操作 遍历节点 CSS-DOM操作 小结 本 ...

  2. [置顶] Jquery中DOM操作(详细)

    Jquery中的DOM操作 为了能全面的讲解DOM操作,首先需要构建一个网页. HTML代码: <%@ page language="java" import="j ...

  3. JQuery中DOM操作(一)

    节点操作 1.插入节点,在JQuery中插入的节点方法很多,可以满足各种不同的节点插入的情况,根据不同的插入方式分为:增加环绕节点.节点内部插入和外部插入三种方式 今天我们要讲的是增加环绕节点,它有三 ...

  4. jQuery笔记(二)jQuery中DOM操作

    前言 本篇主要介绍DOM操作,在说DOM操作之前,首先我们应该熟悉DOM树,以一个例子为例来说明DOM树.首先看这段HTML代码.(本文后面的代码如果没有特别指出,都是针对下述HTML代码进行操作) ...

  5. 第75天:jQuery中DOM操作

    一.基础操作 1.html() 使用html()方法读取或者设置元素的innerHTML. 就是相当于javascript里头的innerHTML. 2.text() 使用text()方法读取或者设置 ...

  6. jQuery的DOM操作详解

    DOM(Document Object Model-文档对象模型):一种与浏览器, 平台, 语言无关的规则, 使用该接口可以轻松地访问页面中所有的标准组件DOM操作的分类 核心-DOM: DOM Co ...

  7. 解密jQuery内核 DOM操作

    jQuery针对DOM操作的插入的方法有大概10种 append.prepend.before.after.replaceWith appendTo.prependTo.insertBefore.in ...

  8. 第3章 jQuery的DOM操作

    一.  DOM 分为DOM核心,HTML-DOM和CSS-DOM 1.DOM核心 不专属与javascript. 获取对象:document.getElementsByTagName('div') 获 ...

  9. jQuery – 3.JQuery的Dom操作

    3.1 JQuery的Dom操作     1.使用html()方法读取或者设置元素的innerHTML    2.使用text()方法读取或者设置元素的innerText     3.使用attr() ...

随机推荐

  1. BOM和DOM的联系和区别

    BOM中的对象 Window对象: 是整个BOM的核心,所有对象和集合都以某种方式回接到window对象.Window对象表示整个浏览器窗口,但不必表示其中包含的内容. Document对象: 实际上 ...

  2. 武汉科技大学ACM:1006: 华科版C语言程序设计教程(第二版)例题4.17

    Problem Description 输入一个整数,求它的素数因子.并按照格式输出. Input 一个整数n.(2<=n<=100) Output n=a*b*c*... (a,b,c为 ...

  3. Eclipse搭建struts2环境

    搭建struts2环境 大的方面分为三步: 1. 加入jar包 2. 在web.xml中配置struts2 3. 添加struts2的配置文件struts.xml 下面是详细步骤: 1. 新建一个Dy ...

  4. 洛谷 P1316 丢瓶盖

    P1316 丢瓶盖 题目描述 陶陶是个贪玩的孩子,他在地上丢了A个瓶盖,为了简化问题,我们可以当作这A个瓶盖丢在一条直线上,现在他想从这些瓶盖里找出B个,使得距离最近的2个距离最大,他想知道,最大可以 ...

  5. JavaScript不一样的语法

    JavaScript除了面向对象的部分,基本语法和C语言类似,但是也有一些自己的特别之处,现总结如下: (1)break和continue后面可以跟label 语法: break labelname; ...

  6. [算法]动态规划(Dynamic programming)

    转载请注明原创:http://www.cnblogs.com/StartoverX/p/4603173.html Dynamic Programming的Programming指的不是程序而是一种表格 ...

  7. WinForm------DateTime获取月第一天和最后一天取法

    转载: http://blog.csdn.net/livening/article/details/6049341/ 代码: /// <summary> /// 取得某月的第一天 /// ...

  8. HttpClient3.1 警告: Cookie rejected:

    四月 , :: 下午 org.apache.commons.httpclient.HttpMethodBase processCookieHeaders 警告: Cookie rejected: : ...

  9. CentOS 6.5 + Nginx 1.8.0 + PHP 5.6(with PHP-FPM) 负载均衡源码安装 之 (三)Nginx负载均衡配置

    Nginx反向代理到单个PHP-FPM(PHP-FPM可位于不同机器) 0.首先,创建我们的网站根目录[注:须在PHP-FPM所在的那台机器创建](以后网站的代码放到此目录下): mkdir /opt ...

  10. LINQ 学习笔记(1)

    学习资源参考 : http://www.cnblogs.com/lifepoem/archive/2011/12/16/2288017.html 常用方法是 Where, OrderBy, Selec ...