JQuery操作HTML

最新推荐文章于 2024-07-14 18:35:32 发布

weixin_38799288

最新推荐文章于 2024-07-14 18:35:32 发布

阅读量283

点赞数 1

CC 4.0 BY-SA版权

文章标签： jQuery操作HTML

本文链接：https://blog.youkuaiyun.com/weixin_38799288/article/details/87968194

本文深入讲解了jQuery中用于操作元素的多种方法，包括text(), html(), val()等用于获取或设置元素内容的方法，attr()和removeAttr()用于获取或设置元素属性的方法，以及append(), prepend(), remove(), empty()等用于动态添加或删除元素的方法。通过实例演示了这些方法的具体应用。

获取或设置元素内容

jQuery中有3个方法用来获取HTML中元素的内容，分别是text()、html()、val()

text()：设置或返回所选元素的文本内容
html()：设置或返回所选元素的内容（包括HTML标记）
val()：设置或返回表单字段的值

text和html的明显区别是text只返回元素的文本内容，而html返回的是将HTML解析的内容。val返回的是表单内容

代码示例如下：

<body>
   <p id = "test">
      <strong> 设置或返回元素内容 </strong>
   </p>
   <textarea name="textvalue" cols="80" rows="5"></textarea>

  <button id="btn1">显示文本</button>
  <button id="btn2">显示HML</button>
 </body>

这两个按钮的事件处理实现如下：

 <script type="text/javascript">
        $(document).ready(function(e) {
            $(btn1).click(function(e) {
                var textStr = $("p").text(); //获取段落的文本内容
                $("textvalue").text(textStr); /使用带参数的text函数，textStr将作为文本内容设置给textarea，textarea中显示 '设置或返回元素内容';
            });
            $(btn2).click(function(e) {
                var htmlStr = $("p").html(); //获取段落的html内容
                $("textvalue").html(htmlStr); //textarea中显示 '<strong>设置或返回元素内容</strong>';
            });
        });
    </script>

获取或设置元素的属性

获取和设置属性使用jQuery的attr方法，而移除属性使用removeAttr方法。获取元素属性的attr方法的语法如下：

$(selector).attr(attribute)

其中，selector是jQuery的选择器，attr中的参数attribute是指定要获取的元素的属性名称，举个例子，要想获取的图像的地址，可以使用语句：

$(‘img’).attr(“src”);

设置和获取的方法是一样的，使用$(‘selector’).attr(“attribute:value”)的方式，也可以同时设置多个，中间使用逗号分隔。

在页面中添加元素

动态添加方法的列表

方法名称	方法描述
append()	在被选元素的结尾（仍然在内部）插入指定内容
appendTo()	在被选元素的结尾（仍然在内部）插入指定内容
prepend()	在被选元素的开头（仍然在内部）插入指定内容
prependTo()	在被选元素的开头（仍然在内部）插入指定内容
after()	在被选元素后插入指定内容
before()	在被选元素前插入指定内容
insertBefore()	把匹配的元素插入到另一个指定的元素集合前面
insertAfter()	把匹配的元素插入到另一个指定的元素集合后面