DOM 操作之获取值

  

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

    

 $("#btn1").click(function(){
alert("Text: " + $("#test").text());
});

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

 $("#btn2").click(function(){
alert("HTML: " + $("#test").html());
});

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

 $("button").click(function(){
alert("Value: " + $("#test").val());
});

  获取属性 - attr() :

  

 <!DOCTYPE html>
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
alert($("#w3s").attr("href"));
});
});
</script>
</head> <body>
<p><a href="http://www.w3school.com.cn" id="w3s">W3School.com.cn</a></p>
<button>显示 href 值</button>
</body> </html>

  设置内容 - text()、html() 以及 val()

  • text() - 设置或返回所选元素的文本内容
  • html() - 设置或返回所选元素的内容(包括 HTML 标记)
  • val() - 设置或返回表单字段的值
<!DOCTYPE html>
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js"></script>
<script>
$(document).ready(function(){
$("#btn1").click(function(){
$("#test1").text("Hello world!");
});
$("#btn2").click(function(){
$("#test2").html("<b>Hello world!</b>");
});
$("#btn3").click(function(){
$("#test3").val("Dolly Duck");
});
});
</script>
</head> <body>
<p id="test1">这是段落。</p>
<p id="test2">这是另一个段落。</p>
<p>Input field: <input type="text" id="test3" value="Mickey Mouse"></p>
<button id="btn1">设置文本</button>
<button id="btn2">设置 HTML</button>
<button id="btn3">设置值</button>
</body>
</html>

  

 设置属性 - attr()

  jQuery attr() 方法也用于设置/改变属性值。attr() 方法也允许您同时设置多个属性。

<!DOCTYPE html>
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#ws").attr({
"href" : "http://www.ibbidream.cn/",
"title" : "jQuery 教程"
});
});
});
</script>
</head> <body>
<p><a href="http://www.baidu.com" id="ws">Baidu</a></p>
<button>改变 href 和 title 值</button>
<p>请把鼠标指针移动到链接上,或者点击该链接,来查看已经改变的 href 值和已经设置的 title 值。</p>
</body>
</html>

添加新的 HTML 内容

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

  • append() - 在被选元素的结尾插入内容
  •  <!DOCTYPE html>
    <html>
    <head>
    <script src="/jquery/jquery-1.11.1.min.js">
    </script>
    <script>
    $(document).ready(function(){
    $("#btn1").click(function(){
    $("p").append(" <b>Appended text</b>.");
    }); $("#btn2").click(function(){
    $("ol").append("<li>Appended item</li>");
    });
    });
    </script>
    </head> <body>
    <p>This is a paragraph.</p>
    <p>This is another paragraph.</p>
    <ol>
    <li>List item </li>
    <li>List item </li>
    <li>List item </li>
    </ol>
    <button id="btn1">追加文本</button>
    <button id="btn2">追加列表项</button>
    </body>
    </html>
  • prepend() - 在被选元素的开头插入内容
  •  <!DOCTYPE html>
    <html>
    <head>
    <script src="/jquery/jquery-1.11.1.min.js"></script>
    <script>
    $(document).ready(function(){
    $("#btn1").click(function(){
    $("p").prepend("<b>Prepended text</b>. ");
    });
    $("#btn2").click(function(){
    $("ol").prepend("<li>Prepended item</li>");
    });
    });
    </script>
    </head>
    <body> <p>This is a paragraph.</p>
    <p>This is another paragraph.</p>
    <ol>
    <li>List item </li>
    <li>List item </li>
    <li>List item </li>
    </ol> <button id="btn1">添加文本</button>
    <button id="btn2">添加列表项</button> </body>
    </html>
  • after() - 在被选元素之后插入内容
  • before() - 在被选元素之前插入内容
  •  <!DOCTYPE html>
    <html>
    <head>
    <script src="/jquery/jquery-1.11.1.min.js"></script>
    <script>
    $(document).ready(function(){
    $("#btn1").click(function(){
    $("img").before("<b>Before</b>");
    }); $("#btn2").click(function(){
    $("img").after("<i>After</i>");
    });
    });
    </script>
    </head> <body>
    <img src="http://www.ibbidream.cn/img/ico.jpg" alt="test" />
    <br><br>
    <button id="btn1">在图片前面添加文本</button>
    <button id="btn2">在图片后面添加文本</button>
    </body>
    </html>

 删除元素/内容

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

  • remove() - 删除被选元素(及其子元素)
  •  <!DOCTYPE html>
    <html>
    <head>
    <script src="/jquery/jquery-1.11.1.min.js"></script>
    <script>
    $(document).ready(function(){
    $("button").click(function(){
    $("#div1").remove();
    });
    });
    </script>
    </head> <body> <div id="div1" style="height:100px;width:300px;border:1px solid black;background-color:yellow;">
    This is some text in the div.
    <p>This is a paragraph in the div.</p>
    <p>This is another paragraph in the div.</p>
    </div> <br>
    <button>删除 div 元素</button> </body>
    </html>
  • empty() - 从被选元素中删除子元素
  •  <!DOCTYPE html>
    <html>
    <head>
    <script src="/jquery/jquery-1.11.1.min.js"></script>
    <script>
    $(document).ready(function(){
    $("button").click(function(){
    $("#div1").empty();
    });
    });
    </script>
    </head> <body> <div id="div1" style="height:100px;width:300px;border:1px solid black;background-color:yellow;">
    This is some text in the div.
    <p>This is a paragraph in the div.</p>
    <p>This is another paragraph in the div.</p>
    </div> <br>
    <button>清空 div 元素</button> </body>
    </html>

JQuery dom 操作总结的更多相关文章

  1. jQuery DOM操作之结点转移复制

    jQuery DOM操作之结点转移复制 $('div').append($('p'))这样即可把p标签移动到div标签里 $('div').append( $('p').html() )是把p标签里的 ...

  2. JQuery DOM操作(属性操作/样式操作/文档过滤)

    jQuery——入门(三)JQuery DOM操作(属性操作/样式操作/文档过滤) 一.DOM属性操作 1.属性 (1).attr() 方法 语法:$(selector).attr(name|prop ...

  3. Jquery DOM 操作列表

    jQuery 文档操作方法 这些方法对于 XML 文档和 HTML 文档均是适用的,除了:html(). jQuery 属性操作方法 下面列出的这些方法获得或设置元素的 DOM 属性. 这些方法对于 ...

  4. JQuery DOM操作 、属性和CSS样式操作、其他函数

    DOM操作 1.在div1内部最后追加一个节点 $("#div1").append("<img src='../01-HTML基本标签/img/Male.gif'/ ...

  5. 事件冒泡及事件委托的理解(JQuery Dom操作)

    jQuery事件冒泡: click mouseenter 等事件没有绑定 也会触发,只是触发后没有任何结果 子元素触发事件后,会把触发事件传递给父元素,那么父元素也会被触发. 不管有没有绑定事件,都会 ...

  6. jquery DOM操作(一)

    上一篇文章是记录了jquery中选择器的作用,这里只要记录下jquery中的DOM操作,还是按照上篇的格式来. 下面是测试用的html代码,接下来DOM的操作会在下面的代码下进行. <body& ...

  7. JQuery -- Dom操作, 示例代码

    1.内部插入节点 *   append(content) :向每个匹配的元素的内部的结尾处追加内容 *   appendTo(content) :将每个匹配的元素追加到指定的元素中的内部结尾处 *   ...

  8. Query节点操作,jQuery插入节点,jQuery删除节点,jQuery Dom操作

    一.创建节点 var box = $('<div>节点</div>'); //创建一个节点,或者var box = "<div>节点</div> ...

  9. jQuery DOM操作

    对节点的操作 查找节点 查找节点可以直接利用jQuery选择器来完成,非常便利. 插入节点 jQuery提供了8种插入节点的方法. 序号 方法 描述 实例 1 append() 向每个匹配的元素内部追 ...

随机推荐

  1. jabberNet 发送出席信息

    没代码我说个J8: public void Presence(User.EStatus status) { string statustxt = ""; //说明文字.比如,离开的 ...

  2. Android+Jquery Mobile学习系列(6)-个人信息设置

    本节开始,进行代码的实战练习.我的这个App是管理保险客户信息的,数据采用Sqlite存储在本地手机上,第一次使用需要先登记自己的个人信息,这个功能非常简单,也无关紧要,我是拿这个练手,方便做后面复杂 ...

  3. 【SDOI 2010】 魔法猪学院

    [题目链接] https://www.lydsy.com/JudgeOnline/problem.php?id=1975 [算法] A*求k短路 [代码] #include<bits/stdc+ ...

  4. [NOI2018]归程(80pts)

    https://www.zybuluo.com/ysner/note/1219964 题面 题面太长,难以概述,[戳我][1] \(ex10pts\ tree\) \(50pts\ n\leq1500 ...

  5. Cuckoo for Hashing

    http://acm.sdut.edu.cn/sdutoj/problem.php?action=showproblem&problemid=2719 #include <stdio.h ...

  6. Constructing Roads In JGShining's Kingdom(LIS)

    http://acm.hdu.edu.cn/showproblem.php?pid=1025 题意:富人路与穷人路都分别有从1到n的n个点,现在要在富人点与穷人点之间修路,但是要求路不能交叉,问最多能 ...

  7. grunt的学习和使用

    目前正在编写公司的部分组件,可能一个组件会包含很多js和css,为了项目上使用方便,应该压缩成一个js库,以供开发者使用,同时也可以减少很多http请求,提高页面访问速度.基于此,学习了grunt自动 ...

  8. Python27天 反射 ,isinstance与ssubclass 内置方法

    所学内容 反射 1.hasattr ( 判断一个属性在对象里有没有 ) -------------------- [对象,字符串属性]本质是:# 判断 ' name ' in obj.__dict__ ...

  9. POJ 3264 线段树 ST

    题意:给你一个数列,从中挑一段,问你这段数的最大值减最小值是多少. 思路:线段树. // by Sirius_Ren #include <cstdio> #include <algo ...

  10. java反射_01

    为什么要用反射? 举个栗子: package com.imooc.reflect; public class Work { // 定义一个word方法 public void word() { Sys ...