jQuery练习 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>exe_1.html</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
      <script type="text/javascript" src="/js/jquery-1.8.2.js"></script>
  </head>
  <body>
  
      <p>段落1</p>
      <p>段落2</p>
      <p>段落3</p>

      <script type="text/javascript" >

          //定位3个p标签
          $("p").click( function(){
              alert( $(this).text() );
          } )
      </script>
      
  </body>
</html>



 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>exe_2.html</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
      <script type="text/javascript" src="/js/jquery-1.8.2.js"></script>
  </head>
  <body>
      <form>
        <table border="1" align="center" width="70%">
            <tr>
                <th>用户名</th>
                <th>密码</th>
                <th>0</th>
            </tr>
            <tr>
                <td>张三</td>
                <td>123456</td>
                <th>1</th>
            </tr>
            <tr>
                <td>李四</td>
                <td>654321</td>
                <th>2</th>
            </tr>
            <tr>
                <td>王五</td>
                <td>162534</td>
                <th>3</th>
            </tr>
        </table> 
    </form>
    
    
    <script type="text/javascript">

        //NO1)将索引号为奇数的行背景色设为蓝色
        $("table tr:odd").css("background-color","blue");
                
        //NO2)将索引号为偶数的行背景色设为黄色
        $("table tr:even").css("background-color","yellow");

        //NO3)将第一行背景色设为粉色
        $("table tr:first").css("background-color","pink");
        
    </script>     
  
  </body>
</html> 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>exe_3.html</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
      <script type="text/javascript" src="/js/jquery-1.8.2.js"></script>
  </head>
  <body>
    
    <input type="checkbox" value="篮球"/>篮球
    <input type="checkbox" value="排球"/>排球    
    <input type="checkbox" value="羽毛球"/>羽毛球    
    <input type="checkbox" value="乒乓球"/>乒乓球
    
    <input type="button" value="选中的个数"/>
    <input type="button" value="依次显示选中的value"/>
    
    <script type="text/javascript">
        //定位"选中的个数"按钮，同时添加单击事件
        $(":button:first").click( function(){
            //获取选中的复选框个数
            var size = $(":checkbox:checked").size();    
            //判断
            if(size == 0){
                alert("这家伙太赖了");
            }else{
                alert("你选中了"+size+"个项目");
            }
        } );
        //定位"依次显示选中的value"按钮，同时添加单击事件
        $(":button:last").click( function(){
            //获取选中的复选框
            var $checkbox = $(":checkbox:checked");
            //迭代所有选中的复选框的value属性值
            $checkbox.each(function(){
                //alert( $(this).val() );//提倡
                alert( this.value );//不提倡
            });
        } );
    </script>
    
  </body>
</html>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <script type="text/javascript" src="/js/jquery-1.8.2.js"></script>
  </head>
  <body>
      <div>    
          <select style="width:60px" multiple size="10" id="leftID">
              <option>选项A</option>
              <option>选项B</option>
              <option>选项C</option>
              <option>选项D</option>
              <option>选项E</option>
              <option>选项F</option>
              <option>选项G</option>
              <option>选项H</option>
              <option>选项I</option>
              <option>选项J</option>
          </select>
      </div>
      <div style="position:absolute;left:100px;top:60px">
          <input type="button" value="批量右移" id="rightMoveID"/>
      </div>
      <div style="position:absolute;left:100px;top:90px">
          <input type="button" value="全部右移" id="rightMoveAllID"/>
      </div>
      <div style="position:absolute;left:220px;top:20px">    
          <select multiple size="10" style="width:60px" id="rightID">
          </select>
      </div>
  </body>
  
  <script type="text/javascript">
          
          //双击右移
          //定位左边的下拉框，同时添加双击事件
          $("#leftID").dblclick(function(){
              //获取双击时选中的option标签
              var $option = $("#leftID option:selected");
              //将选中的option标签移动到右边的下拉框中
              $("#rightID").append( $option );
          });
          
          //批量右移
          //定位批量右移按钮，同时添加单击事件
        $("#rightMoveID").click(function(){
            //获取左边下拉框中选中的option标签
            var $option = $("#leftID option:selected");
            //将选中的option标签移动到右边的下拉框中
              $("#rightID").append( $option );
        });          

          //全部右移
          //定位全部右移按钮，同时添加单击事件
          $("#rightMoveAllID").click(function(){
              //获取左边下拉框中所有的option标签
              var $option = $("#leftID option");
              //将选中的option标签移动到右边的下拉框中
              $("#rightID").append( $option );
          });
          
  </script>
  
</html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <script type="text/javascript" src="/js/jquery-1.8.2.js"></script>
  </head>
  <body>
      <table id="tableID" border="1" align="center" width="60%">
          <thead>
              <tr>    
                  <th>用户名</th>
                  <th>密码</th>
                  <th>操作</th>
              </tr>
          </thead>
          <tbody id="tbodyID">
              <!-- 动态增加行 
              <tr>
                  <td>哈哈</td>
                  <td>123</td>
                  <td><input type="button" value="删除" onclick=""/></td>
              </tr>
              -->
          </tbody>
      </table>
      
      <hr/>
      用户名：<input type="text" id="usernameID"/>
      密码：  <input type="text" id="passwordID"/>
              <input type="button" value="增加" id="addID"/>
              
  </body>
  
  <script type="text/javascript">
          //定位"增加"按钮，同时添加单击事件
          $("#addID").click(function(){
              //获取用户名和密码的值
              var username = $("#usernameID").val();
              var password = $("#passwordID").val();
              //去掉二边的空格
              username = $.trim(username);
              password = $.trim(password);
              //如果用户名或密码没有填
              if(username.length == 0 || password.length == 0){
                //提示用户                  
                  alert("用户名或密码没有填");
              }else{
                  //创建1个tr标签
                  var $tr = $("<tr></tr>");
                  //创建3个td标签
                  var $td1 = $("<td>"+username+"</td>");
                  var $td2 = $("<td>"+password+"</td>");
                  var $td3 = $("<td></td>");
                  //创建input标签，设置为删除按钮
                  var $del = $("<input type='button' value='删除'>");
                  //为删除按钮动态添加单击事件
                  $del.click(function(){
                      //删除按钮所有的行，即$tr对象
                      $tr.remove();
                  });
                  //将删除按钮添加到td3标签中
                  $td3.append($del);
                  //将3个td标签依次添加到tr标签中
                  $tr.append($td1);
                  $tr.append($td2);
                  $tr.append($td3);
                  //将tr标签添加到tbody标签中
                  $("#tbodyID").append($tr);
                  //清空用户名和密码文本框中的内容
                  $("#usernameID").val("");
                  $("#passwordID").val("");
              }
          });
  </script>
  
</html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
    <head>
        <meta http-equiv="content-type" content="text/html; charset=UTF-8">
        <script type="text/javascript" src="/js/jquery-1.8.2.js"></script>
    </head>
    <body>
        <table border="1" align="center">
            <thead>
                <tr>
                    <th>状态</th>
                    <th>用户名</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td><input type="checkbox" /></td>
                    <td>赵</td>
                </tr>
                <tr>
                    <td><input type="checkbox" /></td>
                    <td>钱</td>
                </tr>
                <tr>
                    <td><input type="checkbox" /></td>
                    <td>孙</td>
                </tr>
                <tr>
                    <td><input type="checkbox" /></td>
                    <td>李</td>
                </tr>
                <tr>
                    <td><input type="checkbox" /></td>
                    <td>周</td>
                </tr>
            </tbody>
            <tfoot>
                <tr>
                    <td>
                        <input type="checkbox" />
                        全选
                    </td>
                    <td>
                        <input type="button" value="全反选" />
                    </td>
                </tr>
            </tfoot>
        </table>
        
        <script type="text/javascript">
            //全选中和全取消
            //定位tfoot中的全选复选框，同时添加单击事件
            $("tfoot input:checkbox").click(function(){
                //获取该全选复选框的状态
                var flag = this.checked; 
                //如果选中
                if(flag){
                    //将tbody中的所有复选框选中
                    $("tbody input:checkbox").attr("checked","checked");
                //如果未选中
                }else{
                    //将tbody中的所有复选框取消
                    $("tbody input:checkbox").removeAttr("checked");
                }
            });
            
        </script>
        
        <script type="text/javascript">
            //全反选
            //定位tfoot标签中的全反选按钮，同时添加单击事件
            $("tfoot input:button").click(function(){
                //将tbody标签中的所有选中的复选框失效
                $("tbody input:checkbox:checked").attr("disabled","disabled");
                //将tbody标签中的所有生效的复选框选中
                $("tbody input:checkbox:enabled").attr("checked","checked");
                //将tbody标签中的所有生效的复选框生效且设置为未选中
                $("tbody input:checkbox:disabled").removeAttr("disabled").removeAttr("checked");
            });
            
        </script>
        
    </body>
</html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <style type="text/css">
        .myClass{
            color:inactivecaption
        }
    </style>
    <script type="text/javascript" src="/js/jquery-1.8.2.js"></script>
  </head>
  <body>
    <table border="1" align="center">
        <tr>
            <th>用户名</th>
            <td>
                <input type="text" value="输入用户名"/>
            </td>
        </tr>
    </table>
    
    <script type="text/javascript">
    </script>    
    
  </body>
</html>

 

posted on 2018-12-03 11:38  LoaderMan  阅读(246)  评论(0)  编辑  收藏  举报

导航