前端jQuery之html（）、text（）、val（）、attr（）、prop（）的区别

最新推荐文章于 2024-05-01 23:02:39 发布

喜羊羊love红太狼

最新推荐文章于 2024-05-01 23:02:39 发布

阅读量764

点赞数 4

分类专栏：前端jQuery小知识点

本文链接：https://blog.csdn.net/qq_38423256/article/details/86583573

版权

前端jQuery小知识点专栏收录该内容

6 篇文章 0 订阅

订阅专栏

搞后台开发的前端不熟悉，经常遇到一些前端的方法，但是理解的不是很深刻希望通过总结一下这方面的知识。来弥补这方面的不足了！！！

---------------------------------------------------- --- 简单的html内容------------------------------------------------------------------------------------------<!DOCTYPE html>
<html>
   <head>
       <meta charset="UTF-8">
       <title></title>
       <script src="./js/jquery-1.8.3.min.js"></script>
   </head>
   <body>
   <div id="box">
      年龄:<input type="text" name="age" id="x1" value="18"/>
      <p>文本内容</p>
   </div>

   <div id="box1">
   <a href="#" id="link1" action="delete">删除</a>
   </div>

   </body>
   <script type="application/javascript">
       $(function(){
       /*val()获取value的值*/
   var str1=$("#x1").val();
       console.log("使用val()方法获取的是属性value的值:"+str1);
       var str2= $("#x1").attr("name");
       console.log("使用attr()获取的是元素任意属性的值:"+str2);
       var str3= $("#x1").attr("value");
       console.log("使用attr()获取的是元素属性的值:"+str3);
       var str4 =$("#box").html();
       console.log("使用html()获取的是div中所有内容包含标签:"+str4);
       var str5=$("#box").text();
       console.log("使用text()方法获取的是div中内部的所有文本值:"+str5);
       /*attr()和prop()的区别：主要在于自定义属性和固有属性的区别*/
       var str6 = $("#link1").attr("action");
       console.log("使用attr()获取自定义属性的值："+str6);
       var str7 = $("#link1").prop("action");
       console.log("使用prop()获取自定属性的值:"+str7);
       });
   </script>
</html>

-----------------------------------------------------浏览器运行结果-----------------------------------------------------------------------------------------------

----------------------------------------------------------------总结---------------------------------------------------------------------------------------------------

val()方法获取的仅仅是标签中的value属性的值。
text（）方法获取的是标签中包含的仅仅是文本值，并不包含标签内的任何元素。
att()方法可以获取标签中任意属性的值。
html()方法获取的是标签中的内部的一切，包括文本。
att（）和prop()的区别在于标签中的自定义属性，对于标签中的固有属性两者的效果一样，对于自定义的属性att()可以获取到自定义属性的值而prop()获取到的自定义属性的值为underfined。
建议：在获取自定义属性的值时使用attr(),在获取固有属性的值时使用prop();

喜羊羊love红太狼

关注

4
点赞
踩
5

收藏

觉得还不错? 一键收藏
1
评论
前端jQuery之html（）、text（）、val（）、attr（）、prop（）的区别

搞后台开发的前端不熟悉，经常遇到一些前端的方法，但是理解的不是很深刻希望通过总结一下这方面的知识。来弥补这方面的不足了！！！---------------------------------------------------- --- 简单的html内容------------------------------------------------------------...
复制链接

扫一扫