jquery中选择器的 html() text() val() attr() 方法的区别与使用方式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>html() text() val() attr()</title>
    <script src="./js/jquery-1.12.4.min.js"></script>
    <script>
        $(function(){
       $box = $(".box")

       // 获取到的是包括标签在内的内容 可以使用 $box.html("内容") 对整个标签进行替换, 通常会在拿到数组数据后 使用for 循环遍历出数据       // 然后构造ul li 标签,并将数据填充,然后使用html()方法进行整体替换从而实现数据渲染       var data = $box.html(); 

       // 取出目标标签的文本内容,如果存在换行,取出的数据中会存在 \n ,需要注意!!!!!!!! 使用 $box.text("内容") 可以进行数据替换        var data_1 = $box.text();

       // 取出目标标签的value属性值(如果该标签存在该属性值的话) 可以使用 $(".box_1").val("内容") 进行数据的替换       var data_2 = $(".box_1").val()

       // 取出该标签的某个属性 也可以使用 $(".box").attr("a", "嘿嘿") 的方式改变属性值       var data_3 = $(".box").attr("class")
        });
    </script>
</head>
<body>
    <div class="box" a="">
        嘿嘿
    </div>
    <input type="text" value="嘿嘿" class="box_1">
</body>
</html>

原文地址:https://www.cnblogs.com/lowmanisbusy/p/9034111.html

时间: 2024-10-09 05:52:33

jquery中选择器的 html() text() val() attr() 方法的区别与使用方式的相关文章

jQuery获取文本节点之 text()/val()/html() 方法区别

在jquery中val,text,html都能取到值,或加一个参数来赋值,那么它们有些什么区别?下面我们来举例说明: 首先,html属性中有两个方法,一个有参,一个无参 1. 无参html():取得第一个匹配元素的html内容.这个函数不能用于XML文档.但可以用于XHTML文档,返回的是一个String 例子: html页面代码:<div><p>Hello</p></div> jquery代码:$("div").html(); 结果:H

jquery中append、prepend, before和after方法的区别(一)

原文:http://blog.csdn.net/woosido123/article/details/64439490 在 jquery中append() 与 prepend()是在元素内插入内容(该内容变成该元素的子元素或节点),after() 与before()是在元素的外面插入内容(其内容变成元素的兄弟节点). 1. append()和prepend() <div class='a'> <div class='b'>b</div> </div> 1 2

jQuery中几个关于元素宽高方法的区别

几个关于元素宽高的方法 height():带参数设置,不带参数获取,参数是number类型 width():带参数设置,不带参数获取,参数是number类型 innerHeight() :内边距+内容的高度 innerWidth() :内边距+内容的宽度 outerHeight:上下内边距+内容+上下边框 outerWidth :左右内边距+内容+左右边框 案例测试: <!DOCTYPE html> <html lang="en"> <head> &

jquery中prop()方法和attr()方法的区别

jquery1.6中新加了一个方法prop(),一直没用过它,官方解释只有一句话:获取在匹配的元素集中的第一个元素的属性值. 大家都知道有的浏览器只要写disabled,checked就可以了,而有的要写成disabled = "disabled",checked="checked",比如用attr("checked")获取checkbox的checked属性时选中的时候可以取到值,值为"checked"但没选中获取值就是un

jquery中选择器input:hidden和input[type=hidden]的差别

jquery中选择器input:hidden和input[type=hidden]的差别 关于选择器:hidden的申明, 在jquery申明文档中是如许说的:匹配所有不成见元素,或者type为hidden的元素.而[type=hidden]是查找所有type属性便是hidden的元素.两者是有雷同之处和不合之处的. :hidden匹配所有不成见元素,或者type为hidden的元素,所有样式display便是none的元素和子元素以及type="hidden"的表单位素都在查找的成果

jquery中checkbox全选失效的解决方法

这篇文章主要介绍了jquery中checkbox全选失效的解决方法,需要的朋友可以参考下 如果你使用jQuery 1.6 ,代码if ( $(elem).attr(“checked”) ),将获得一个属性(attribute) ,它不改变该复选框被选中和选中.它只是用来存储默认或选中属性的初始值.为了保持向后兼容,.attr() 方法从 jQuery 1.6.1+ 开始除了返回属性值外,还会更新 property 属性,因此 boolean attribute(布尔属性)不需要通过 .prop(

Jquery中的append()和prepend(),after()和before()的区别

Jquery中的append()和preappend(),after()和before()的区别 append()和prepend() 假设 <div class='a'> //<---you want div c to append in this <div class='b'>b</div> </div> 使用 $('.a').append($('.c')); 则会这样: <div class='a'> //<---you wan

prop()方法和attr()方法的区别

prop()方法和attr()方法的区别:关于这两个方法的具体用法这里就不多介绍了,可以参阅prop()和attr()方法相关手册即可.这两个方法作用好像是一模一样,其实绝大多数作用都是一样,只有在一些特殊的情况下才有可能出现一些差异,下面就结合实例实例介绍一下在这两个方法的区别.先看一段代码实例: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name=&q

JQuery中关于html()、text()、val()三者之间的区别

html():该方法类似于Javascrpt 中的innerHTML的方法,该方法获取标签元素中所有内容文本. text():该方法类似于Javascrpt 中的innerText方法,获取的是纯文本内容. val():获取对象的value的值.获取的是选择对象的第一个元素的value值.当然该属性并不局限于只有value的元素,对于表单元素都适合. <div id="one">hello <span>word</span></div>