jquery 设置元素内容html(),text(),val()

Posted 平凡的世界

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了jquery 设置元素内容html(),text(),val()相关的知识,希望对你有一定的参考价值。

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>wrap</title>
 6     <script type="text/javascript" src="../jquery/jquery-1.11.3.min.js"></script>
 7     <style type="text/css">
 8     </style>
 9 </head>
10 <body>
11 <a href="http://www.baidu.com" class="baidu">百度</a>
12 <a href="http://www.souhu.com" class="souhu">百度</a>
13 <a href="http://www.xinlang.com" class="xinlng">百度</a>
14 <img src="1.jpg" alt="这是张图片"/>
15 <input type="text" value="你好"/>
16 <input type="password" value="123456"/>
17 <input type="email" value="[email protected]"/>
18 <script type="text/javascript">
19     $(document).ready(function () {
20         $("a").text(function(index,elem){
21             if(index==1){
22                 return "搜狐";
23             }else if(index==2){
24                 return "新浪";
25             }
26         });
27         //动态获取表单元素的属性和值
28         $("input").each(function(index,elem){
29             console.log($(elem).attr("type")+":"+$(elem).val());
30         });
31 
32         $("input").each(function(index,elem){//index是索引 elem是当前元素
33 
34             switch (index){
35                 case 0:
36                     $(elem).val("你是谁?");
37                     break;
38                 case 1:
39                     $(elem).val("65321");
40                     break;
41                 case 2:
42                     $(elem).val("[email protected]")
43             }
44         });
45 
46 
47         $("input").val(function(index,elem){//index是索引 elem是当前属性值
48             if(index==0){
49                 return "你不是人?";
50             }else if(index==1){
51                 return "215412121";
52 
53             }else if(index==2){
54                 return "[email protected]";
55             }
56         });
57 
58 
59         //给元素绑定数据
60         $("img").each(function(){
61             $(this).data("product",$(this).siblings("input").val());
62         });
63         $("*").filter(function(){
64             return $(this).data !=null;
65         }).each(function(){
66             console.log($(this).data("product"));
67         });
68         $("img").removeData();
69     });
70 
71 </script>
72 </body>
73 </html>

 

以上是关于jquery 设置元素内容html(),text(),val()的主要内容,如果未能解决你的问题,请参考以下文章

jquery - 设置/获取内容和属性

jQuery 获取和设置HTML元素

jQuery - 设置内容和属性

jQuery - 设置内容和属性

JQuery text()html() 以及 val()

JQuery HTML