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. machine learning in coding（python）：使用贪心搜索【进行特征选择】

    print "Performing greedy feature selection..." score_hist = [] N = 10 good_features = set( ...

  2. acc文件的运行

    1.method 1: use "acc" >acc hello.acc world.mc <--- compilation will generate the hel ...

  3. GYM 100741A Queries(树状数组)

    A. Queries time limit per test 0.25 seconds memory limit per test 64 megabytes input standard input ...

  4. Python 39 数据库的数据类型

    一:整型 为什么需要 数据分类? 1.为了描述事物更加准确 2.描述起来更方便 3.节省内存空间 例:1 a 你     utf8 下 5个字节 1 a b c   unicode 6个字节 mysq ...

  5. centos7安装python3.7和ipython

    一.centos7为刚安装的 1)配置yum源和epel源 采用国内源 查看yum的配置文件 (里面的镜像网址)是否ping的通 全部更改成 国内的 yum .epel源 在图中位置 下载相应的 re ...

  6. android 自定义view 前的基础知识

    本篇文章是自己自学自定义view前的准备,具体参考资料来自 Android LayoutInflater原理分析,带你一步步深入了解View(一) Android视图绘制流程完全解析,带你一步步深入了 ...

  7. （转）vuex2.0 基本使用(3) --- getter

    有的组件中获取到 store 中的state,  需要对进行加工才能使用,computed 属性中就需要写操作函数,如果有多个组件中都需要进行这个操作,那么在各个组件中都写相同的函数,那就非常麻烦,这 ...

  8. svn命令行批量删除和批量添加

    svn命令行批量删除和批量添加 如果使用svn的命令行,例如在linux下的终端中使用,svn的添加命令是svn add,删除命令是svn del,但是缺乏批量的操作,如果我在资源管理器中,手动添加了 ...

  9. 2星|《腾讯产品法》：标题党，作者只有QQ手机助手的短期产品经验

    腾讯产品法(一本书读懂腾讯产品思维与运营方法,<腾讯传>作者吴晓波推荐) 全书是作者的一些产品设计与运营的经验.如果书名不误导读者,这本书的内容值3星. 基于书名的误导,读后比较失望,作者 ...

  10. slf4j日志只输出到控制台，没输出到日志文件

    最近使用SLF4J遇到了一个比较头疼的坑,日志输出到控制台没有问题,但是始终没有输出到日志文件.无论怎麽修改日志配置,始终是老样子. 有一种绝望,是各种百度.google却还是解决不了问题..直到我在 ...