现在的位置: 首页 > 综合 > 正文

jQuery学习第七课(jquery表单实例)

2014年09月05日 ⁄ 综合 ⁄ 共 2785字 ⁄ 字号 评论关闭

1.复选框的全选,全部选,反选

2.表中记录的搜索

3.textarea有固定的字符数

---------------------------------------------------------1------------------------------------------------------------

<body>
 <div id="checkbox">
  <input type="checkbox" name="" id="" checked="checked" />吃
  <input type="checkbox" name="" id="" />喝
  <input type="checkbox" name="" id="" />玩
  <input type="checkbox" name="" id="" />乐
 </div>
 <div id="btn">
  <input type="button" id="chkAll" value="全选" />
  <input type="button" id="chkNone" value="全不选" />
  <input type="button" id="chkReverse" value="反选" />
 </div>
 <script>
  var chkAll = $('#chkAll');
  var chkNone = $('#chkNone');
  var chkReverse = $('#chkReverse');
  var checkbox = $('#checkbox>:checkbox');

  chkAll.click(function(){
   // checkbox.attr('checked','checked');
   checkbox.attr('checked',true);
  });

  chkNone.click(function(){
   // checkbox.removeAttr('checked');
   checkbox.attr('checked',false);
  });

  chkReverse.click(function(){
   checkbox.each(function(){
    $(this).attr('checked',!$(this).attr('checked'));
   });
  });

 </script>
</body>

-------------------------------------------------------2--------------------------------------------------------------

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
 <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
 <title>demo2</title>
 <style>
  table{
   width: 700px;
   border: 1px solid #abcdef;
   border-collapse: collapse;
  }
  tr{
   height: 30px;
  }
  th,td{
   border: 1px solid #abcdef;
   text-align: center;
  }
 </style>
 <script src="jquery.js"></script>
</head>
<body>
 <table>
  <tr id="thead">
   <th>姓名</th>
   <th>性别</th>
   <th>电话</th>
  </tr>

  <tr>
   <td>张三</td>
   <td>男</td>
   <td>13911911911</td>
  </tr>
  <tr>
   <td>李四</td>
   <td>男</td>
   <td>18620561170</td>
  </tr>
  <tr>
   <td>移动客服</td>
   <td>女</td>
   <td>10086</td>
  </tr>
  <tr>
   <td>移动充值</td>
   <td>女</td>
   <td>13800138000</td>
  </tr>
 </table>
 <input type="text" name="" id="" />
 <input type="button" value="搜索" />
 
 <script>
  $('input[type=button]').click(function(){
   var text = $('input[type=text]').val();

   $('table tr:not("#thead")').hide().filter(':contains("'+text+'")').show();
  });
 </script>
</body>
</html>

---------------------------------------------------------3-------------------------------------------------------------------

<body>
 <textarea name="" id="" cols="30" rows="10"></textarea>
 <span>你还可以输入<strong style="color:red">140</strong>个字</span>
 <script>
  var maxLength = 140;
  $('textarea').keyup(function(){
   var l = $(this).val().length;
   $('strong').text(maxLength-l);

   if(parseInt($('strong').text())<0){
    $('strong').text('0');
    //alert($(this).val());
    var val = $(this).val().substring(0,140);
    // substr(不推荐使用,ECMAScript没有标准化substr()方法)
    $(this).val(val);
   }
  });
 </script>
</body>



抱歉!评论已关闭.