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="wujindong@foxmail"/>
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("498298758@qq.com")
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 "xinlang@qq.com";
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>

 

posted @ 2016-04-04 21:25  Window2016  阅读(397)  评论(0)    收藏  举报