zoukankan      html  css  js  c++  java
  • 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>
  • 相关阅读:
    牛人读书 列表
    设计模式 简介
    java 并发编程 list
    Spring Boot 概念知识
    JS原生Date类型方法的一些冷知识
    JavaScript 操作 Cookie
    nodeJS(express4.x)+vue(vue-cli)构建前后端分离详细教程(带跨域)
    Vue学习笔记(一)
    windows下常查看端口占用方法总结
    webstorm添加*.vue文件代码提醒支持webstorm支持es6vue里支持es6写法
  • 原文地址:https://www.cnblogs.com/wujindong/p/5352978.html
Copyright © 2011-2022 走看看