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. Android动态逆向分析工具ZjDroid--脱壳神器

    项目地址:https://github.com/BaiduSecurityLabs/ZjDroid 前提条件: 1.Root手机一部 2.须要通过Xposed installer( http://dl ...

  2. 蒟蒻的trie树专题

    POJ 3630 Phone List: 模板 ///meek #include<bits/stdc++.h> using namespace std; using namespace s ...

  3. 托管在IIS上的wcf，在启动的时候，写log

    https://blogs.msdn.microsoft.com/wenlong/2006/01/11/how-to-initialize-hosted-wcf-services/ Using App ...

  4. SQL Server2012 T-SQL基础教程--读书笔记（5-7章）

    SQL Server2012 T-SQL基础教程--读书笔记(5-7章) SqlServer T-SQL 示例数据库:点我 Chapter 05 表表达式 5.1 派生表 5.1.1 分配列别名 5. ...

  5. WingIDE4.1 破解及支持中文设置

    1.下面提供最新版本的破解方法. 先到http://wingware.com/downloads/wingide下载最新版本的IDE. 安装之前,先修改时间到一个月前. 安装 安装之后然后获取试用版的 ...

  6. VBA 字符串处理函数集

    转自:http://blog.csdn.net/jyh_jack/article/details/2315345 mid(字符串,从第几个开始,长度)  在[字符串]中[从第几个开始]取出[长度个字符 ...

  7. js实用篇之数组、字符串常用方法

    常常在开发中,会使用到很多js数组和字符串的处理方法,这里列举一些我常用到的一些,方便大家参考使用. 数组方面 push:向数组尾部增加内容,返回的是新数组的长度. var arr = [1,2,3] ...

  8. MySQL学习笔记之右连接

    MySQL的右连接 #右连接,以右表为基表 select course.stuid,course.stuname,sex,course,city from class1 right join cour ...

  9. 自学Python六 爬虫基础必不可少的正则

    要想做爬虫,不可避免的要用到正则表达式,如果是简单的字符串处理,类似于split,substring等等就足够了,可是涉及到比较复杂的匹配,当然是正则的天下,不过正则好像好烦人的样子,那么如何做呢,熟 ...

  10. 【原创】python中文编码问题深入分析（三）：python2.7文件读写中文编码问题

    上一篇文章介绍和分析了python2.7中使用print遇到的中文编码问题的原因和解决方案,本篇主要介绍一下python2.7中执行文件读写可能遇到的编码问题. 1.文件读取 假如我们读取一个文件,文 ...