Jquery中的DOM操作

为了能全面的讲解DOM操作,首先需要构建一个网页。

HTML代码:

  1. <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
  2. <%
  3. String path = request.getContextPath();
  4. String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
  5. %>
  6.  
  7. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
  8. <html>
  9. <head>
  10.  
  11. </head>
  12.  
  13. <body>
  14. <p title="选择你最喜欢的水果。">你最喜欢的水果是?</p>
  15. <ul>
  16. <li title='苹果'>苹果</li>
  17. <li title='橘子'>橘子</li>
  18. <li title='菠萝'>菠萝</li>
  19. </ul>
  20. </body>
  21. </html>

n 节点操作:

一、查找节点

1、查找元素节点

获取元素节点并打印它的文本内容,jQery代码如下:

  1. var li_txt=$("ul li:eq(1)").text();//获取<ul>里第二个<li>节点的文本内容
  2. alert(li_txt);//结果为橘子

2、查找属性节点

利用jQuery选择器查找到需要的元素之后,就可以使用attr()方法来获取它的各种属性的值,attr()方法的参数可以是一个,也可以是两个,当参数是一个时,则是要查询属性的名字,例如:

获取属性节点并打印它的文本内容:

  1. var p_txt=$("p").attr("title");//获取<p>元素节点属性title
  2. alert(p_txt);//结果为 选择你最喜欢吃的水果

二、创建节点

在DOM操作中,常常需要动态创建HTML内容,使文档在浏览器里的呈现效果发生变化,并且达到各种各样的人机交互目的

1、创建元素节点

如果要创建两个<li>元素节点,并要把他们作为<ul>元素节点的子节点添加到DOM节点树上。则需要:

(1)创建<li>新元素

(2)将新元素插入到文档中

  1. 首先创建<li>元素:
  2. var $li_1=$("<li></li>");//创建<li>元素
  3. 然后使用jQuery中的append等方法将新元素插入文档中
  4. $("ul").append($li_1);//添加到<ul>节点中,使之能在网页中显示

注意:

1、动态创建的新元素节点不会被自动添加到文档中,而是需要使用其他方法将其插入文档中

2、当创建单个元素时,要注意闭合标签和使用标准的XHTML格式。

2、创建文本节点

创建文本节点就是在创建元素节点时直接把文本内容写出来,然后使用append()等方法将它们添加到文档中就可以。

  1. var $li_1=$("<li>香蕉</li>");//创建一个<li>元素,"香蕉"就是创建的文本节点
  2. $("ul").append($li_1);//添加到<ul>节点中,使之能在网页中显示

注意:无论$(html)中的HTML代码多么复杂,都要使用相同的方式来创建。

例如:$(“<li><em>这是</em><b>一个</b><a href=”#”>复杂的组合</a></li>”)

3、创建属性节点

创建属性节点与创建文本节点类似:

  1. var $li_1=$("<li title='香蕉'>香蕉</li>");//创建一个<li>元素,title="香蕉"就是创建的title="香蕉属性节点
  2. $("ul").append($li_1);//添加到<ul>节点中,使之能在网页中显示

三、插入节点

append()

向每个匹配的元素内部追加内容:

  1. HTML代码:
  2. <p>我想说:</p>
  3. jQuery代码:
  4. $("p").append("<b>你好</b>");
  5. 结果:
  6. <p>我想说:<b>你好</b></p>

appendTo()

将所有匹配的元素追加到指定的元素中。实际上,使用该方法是颠倒了常规的$(A).append(B)的操作,即不是将B追加到A中,而是将A追加到B中:

HTML代码:

  1. <p>我想说:</p>

jQuer代码:

  1. $("<b>你好</b>").appendTo("p");

结果:

<p>我想说:<b>你好</b></p>

prepend()

向每个匹配的元素内部前置内容:

HTML代码:

  1. <p>我想说:</p>

jQuer代码:

  1. $("p").prepend<"<b>你好</b>");

结果:

<p><b>你好</b>我想说:</p>

prependTo()

将所有匹配的元素前置到指定的元素中。实际上,使用该方法是颠倒了常规的$(A).prepend(B)的操作,即不是将B前置到A中,而是将A前置到B中:

HTML代码:

  1. <p>我想说:</p>

jQuer代码:

  1. $("<b>你好</b>").prependTo("p");

结果:

<p><b>你好</b>我想说:</p>

after()

在每个匹配的元索之后插入内容:

HTML代码:

  1. <p>我想说:</p>

jQuer代码:

  1. $("p").after("<b>你好</b>");

结果:

<p>我想说:</p><b>你好</b>

insertAfler()

将所有匹配的元素插入到指定元素的后面。实际上,使用该方法是颠倒了常规的$(A).after(B)的操作,即不是将B插入到A后面,而是将A插入到B后面:

HTML代码:

  1. <p>我想说:</p>

jQuer代码:

  1. $("<b>你好</b>").insertAfter("p");

结果:

<p>我想说:</p><b>你好</b>

before()

在每个匹配的元素之前插入内容:

HTML代码:

  1. <p>我想说:</p>

jQuer代码:

  1. $("p").before("<b>你好</b>");

结果:

<b>你好</b><p>我想说:</p>

insertBefore()

将所有匹配的元素捅入到指定的元素的前面。实际上,使用该方法是颠倒了常规的$(A).before(B)的操作,即不是将B插入到A前面,而是将A插入到B前面:

HTML代码:

  1. <p>我想说:</p>

jQuer代码:

  1. $("<b>你好</b>").insertBefore("p");

结果:

<b>你好</b><p>我想说:</p>

这些插入节点的方法不仅能将新创建的DOM元素插入到文档中,也能对原有的DOM元素进行移动。例如利用它们创建新元素并对其进行插入操作:

  1. $(function(){
  2. var $li_1 = $("<li title='新增节点:数据结构'>新增节点:数据结构</li>"); // 创建第一个<li>元素
  3. var $li_2 = $("<li title='新增节点:设计模式'>新增节点:设计模式</li>"); // 创建第二个<li>元素
  4. var $li_3 = $("<li title='新增节点:计算机算法'>新增节点:计算机算法</li>"); // 创建第三个<li>元素
  5.  
  6. var $parent = $(".nm_ul"); // 获取<ul>节点。<li>的父节点
  7. var $two_li = $(".nm_ul li:eq(1)"); // 获取<ul>节点中第二个<li>元素节点
  8. $("#btn_1").click(function(){
  9. $parent.append($li_1); // 添加到<ul>节点中,使之能在网页中显示
  10. });
  11. $("#btn_2").click(function(){
  12. // 可以采取链式写法:$parent.append($li_1).append($li_2);
  13. $parent.append($li_2);
  14. });
  15. $("#btn_3").click(function(){
  16. // insertAfter方法将创建的第三个<li>元素元素插入到获取的<li>之后
  17. $li_3.insertAfter($two_li);
  18. });
  19. });

也利用它们对原有的DOM元素进行移动:

  1. $(function(){
  2. var $one_li = $("ul li:eq(1)"); // 获取<ul>节点中第二个<li>元素节点
  3. var $two_li = $("ul li:eq(2)"); // 获取<ul>节点中第三个<li>元素节点
  4. $two_li.insertBefore($one_li); //移动节点
  5. });

四、删除节点

1、Remove

  1. $("ul li:eq(1)").remove();//获取第2个<li>元素节点后,将它从网页中删除

这个方法的返回值是一个指向已被删除的节点的引用,因此可以在以后再使用这些元素。

  1. $("ul li").remove("li[title!=菠萝]");

2、Empty

严格来讲,empty()方法并不是删除元素,而是清空节点,它能清空元素中所有的后代节点。

  1. $("ul li:eq(1)").empty();//获取第2个<li>元素节点后清空此元素里的内容,注意是元素里

五、复制节点

复制实现了节点重用,而不用另外新建,复制的时候可以一并复制节点上面的行为(也就是绑在它上面的事件),也可以只复制节点,分别使用clone(true)和clone()
   例如:

  1. $("ul li").click(function(){
  2. $(this).clone().appendTo("ul")//复制当前的li单击节点,并将其最加到ul元素下
  3. })

六、替换节点
  替换是将已经存在的节点替换成其他的,使用的方法有replaceWith(),replaceAll()
   replaceWith():XX用XXX替换掉
   replaceAll():那XXX替换所有的XX
七、包裹节点
  包裹节点的意思就是将某个或者是符合条件的一组节点用其他的标记包裹起来,在jquery中使用wrap()
   例如:

  1. $("strong").wrap("<b></b>");//使用b标签把strong元素包裹起来

包裹的方法还有wrapAll(),wrapInner()

    wrapAll:将所有匹配的元素用一个元素来包裹<与wrap的不同是,wrap对每个符和条件的元素都进行包裹,而wrapAll不是>


    wrapInner:将每个匹配的元素的子内容进行包裹


    $("strong").wrapInner("<b></b>");//strong元素的子元素被b标签包

n 属性操作:

1、.获取和设置属性

  1. var $var_1=$("p");//这句话是获取节点P
  2. var $p_1=$var_1.attr("title");//获取节点P的title属性
  3. var $p_2=$var_1.attr("title","你好");//设置节点P的title属性为"你好"

2、.删除属性

  1. $("p").removeAttr("title");//删除节点P的Title属性

n 样式操作:

1.获取和设置样式

var $var_class=$("p").attr("class");//获取节点P的class属性

$("p").attr("class","class1");设置节点P的class属性为样式表类class1

2.追加样式

addClass() 添加样式到A

例子:$("p").addClass("another");添加样式表类another类到P

3.移除样式

removeClass() 移除类

4.切换样式

toggleClass() 切换clss属性类为新的类

5.判断某个样式是否存在

hasClass()

n 内容操作:

html() 该方法获取html元素的内容,如:var var1=$("p").html();//获取P元素内的内容

text() 获取或设置某个html元素的内容

val() 获取元素的Value值

children() 获取html元素的所有子节点

next()  获取html元素后紧邻的同辈节点

prev() 获取html元素前紧邻的同辈节点

siblings() 获取html元素前后紧邻的同辈节点

n CSS-DOM技术:

$("p").css("color");//获取颜色属性

$("p").css("color","red");//设置颜色

$("p").css({"fontSize":"30px",”backgroundColor“:”#888888“});//同时设置多个样式。

有两个注意点:

(1)如果值是数字,将会被自动转化为像素值。

(2)在css()方法中,如果属性中带有”-“符号,例如font-size和background-color属性,用驼峰式写法。

hight().width();

offset()  .left .top  获取元素在当前视窗的偏移量,返回值对象包含两个属性left和top。

position()  .left .top 获取元素相对于最近的一个position样式属性设置为relative或者absolute的祖父节点的偏移量。

scrollTop() 、scrollLeft()方法。分别获取元素的滚动条距顶端的距离和距左侧的距离。也可以设置值。scrollTop(300)

[置顶] Jquery中DOM操作(详细)的更多相关文章

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

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

  2. jQuery中DOM操作

    1 定义:jquery中对DOM的操作就是对DOM元素进行增删查改操作 2 分类:      1)DOM Core(核心):用途广泛 支持多种编程语言 2)HTML DOM:代码简短 只用于处理web ...

  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中AJAX参数详细介绍

    Jquery中AJAX参数详细列表: 参数名 类型 描述 url String (默认: 当前页地址) 发送请求的地址. type String (默认: "GET") 请求方式 ...

  7. Jquery中AJAX参数详细(1)-转

    http://www.cnblogs.com/qiufuwu618/archive/2012/12/20/2826190.html Jquery中AJAX参数详细列表: 参数名 类型 描述 url S ...

  8. Jquery中AJAX参数详细介绍

    Jquery中AJAX参数详细列表: 参数名 类型 描述 url String (默认: 当前页地址) 发送请求的地址. type String (默认: "GET") 请求方式 ...

  9. jQuery的DOM操作详解

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

随机推荐

  1. 获取Android 手机屏幕宽度和高度以及获取Android手机序列号

    1.获取Android 手机屏幕宽度 1 DisplayMetrics dm = new DisplayMetrics(); 2 this.getWindowManager().getDefaultD ...

  2. Sciter/HTMLayout内存占用评测

    先从最基础的Exe文件的执行说起: Exe文件要在系统中执行,首先要将Exe文件本身加载入内存中,并且通常在内存中加载完成的Exe所占空间大小会比实际所占的磁盘空间大一些,这是由内存的特殊设定所决定的 ...

  3. busybox filesystem matrix-gui-2.0 undefined function json_encode()

    /******************************************************************************** * matrix-gui-2.0 u ...

  4. php复制目录及文件

    <?php /* 复制目录 */ function copydir($dirsrc,$dirto){ if(is_file($dirto)){ echo "目标不是目录不能创建&quo ...

  5. 3732 Ahui Writes Word

    // N个物品 放进容量为C的背包里面 要求价值最大// 一看 第一反应是0 1背包 不过 N=100000 C=10000// 注意到 v,c在 10以内// 那么 最多就100种组合了 然后就转化 ...

  6. 一天一个Java基础——序列化

    1.概念 Java的“对象序列化”能将一个实现了Serializable接口的对象转换成一组byte,这样日后要用这个对象的时候,能把这些byte数据恢复出来,并据此重新构建那个对象. 对象序列化能实 ...

  7. Jquery插件写法及extentd函数

    JQuery插件写法 JQuery插件又分为类扩展方法和对象扩展方法两种,类插件是定义在JQuery命令空间的全局函数,直接通过可调用,如可调用,如可调用,如.ajax():对象插件是扩展JQuery ...

  8. mount

    产品,平台,RS6000, pseries 软件版本, aix 当NFS在NFS客户端加载时,系统会问是使用 soft-mount 还是hard-mount, 它们之间有什么区别? 它们的区别在于当发 ...

  9. 36、Android Bitmap 全面解析

    Android Bitmap 全面解析(一)加载大尺寸图片 http://www.eoeandroid.com/thread-331669-1-1.html Android Bitmap 全面解析(二 ...

  10. An Oblivious Watermarking for 3-D Polygonal Meshes Using Distribution of Vertex Norms

    An Oblivious Watermarking for 3-D Polygonal Meshes Using Distribution of Vertex Norms 转眼就11月底了,突然开始有 ...