久久久在线网站,91麻豆蜜桃在线

文章頭圖

學(xué)習(xí)了jQuery的基本語法，發(fā)現(xiàn)jQuery的選擇器非常強(qiáng)大，還解決了瀏覽器的兼容問題，迫不及待想要嘗試一下，于是對著書本的案例實現(xiàn)了一些小案例，雖然是小案例，但是對我來說也不容易，花了好多時間才調(diào)試通過。意識到知識不去整理，很快就忘記，加上本次學(xué)習(xí)的都是一些比較常用的案例，于是想記錄下來，方便以后直接拷貝~~

1、單行文本框添加獲取、失去焦點(diǎn)樣式事件

對文本框的操作，包括獲取焦點(diǎn)時候輸入框變色、失去焦點(diǎn)時恢復(fù)原來的顏色。需要注意的是：input的邊框必須設(shè)置為2px，textarea的邊框必須設(shè)置為1px，這樣才能防止它們獲取和失去焦點(diǎn)時，產(chǎn)生“抖動”現(xiàn)象。具體請看下面代碼，大家可以新建一個html文件，隨意改動一下input和textarea的邊框看看效果。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文本框獲取和失去焦點(diǎn)事件</title>
    <style type="text/css">
        body fieldset{
            width: 400px;
            margin: 0 auto; /*垂直居中*/
        }
        body input{
            width: 200px;
            height: 28px;
        }
        body div{
            margin: 15px 0;
        }
        body textarea{
            vertical-align: middle;
            width: 400px;
            height: 100px;
        }

        .bor{
            outline: none;
            border:2px solid red; /*input的邊框大小設(shè)置為2px，防止focus和blur時組件的大小發(fā)生改變，產(chǎn)生“抖動”。*/
        }
        .bor2{
            outline: none;
            border:1px solid red; /*textarea的邊框大小設(shè)置為2px，防止focus和blur時組件的大小發(fā)生改變，產(chǎn)生“抖動”*/。
        }
    </style>
</head>


<body>
    <form action="#" method="POST" id="regForm">
        <fieldset>
            <legend>個人基本信息</legend>
            <div>
                <label for="userName">名稱：</label>
                <input type="text" name="用戶名" id="userName">
            </div>
            <div>
                <label for="psw">密碼：</label>
                <input type="password" name="密碼" id="psw">
            </div>
            <div>
                <label for="msg">詳細(xì)信息:</label>
                <textarea id="msg"></textarea>
            </div>
        </fieldset>
    </form>
    <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){  //單獨(dú)input設(shè)置樣式，防止邊框大小產(chǎn)生的“抖動”！
            $("input").focus(function(){
                $(this).addClass("bor");
            }).blur(function(){
                $(this).removeClass("bor");
            });

            $("textarea").focus(function(){ //單獨(dú)textarea設(shè)置樣式，防止邊框大小產(chǎn)生的“抖動”！
                $(this).addClass("bor2");
            }).blur(function(){
                $(this).removeClass("bor2");
            });
        });
    </script>

</body>
</html>

運(yùn)行效果如下：

文本框獲取和失去焦點(diǎn)樣式控制

2、多行文本框高度和滾動條的操作

對多行文本框添加事件，包括調(diào)整文本框的高度、操作滾動條，加上過度動畫等。具體請看代碼：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>多行文本框高度變化</title>
    <style type="text/css">
        span{
            display: inline-block;
            width: 60px;
            height: 40px;
            background: #ccc;
            font-size: 12px;
            color: white;
            line-height: 40px;
            text-align: center;
            cursor: pointer; /*設(shè)置指針為手型，使其像可點(diǎn)擊的按鈕*/
        }
        span:hover{  /*鼠標(biāo)經(jīng)過，背景變?yōu)槌壬?/
            background-color: orange; 
        }

        form{
            width: 400px;
            margin: 0 auto;
        }

        textarea{
            overflow: visible;
        }
    </style>
</head>
<body>
    <form action="">
        <div class="msg_caption">
            <span class="bigger">增加高度</span>
            <span class="smaller">減少高度</span>
            <span class="up">滾動條上</span>
            <span class="down">滾動條下</span>
        </div>
        <div>
            <label for="comment">文本框的高度（范圍50px-500px，每次調(diào)整50px）</label>
            <textarea id="comment" name="" cols="56" rows="8"></textarea>
        </div>
        
    </form>
    <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.js"></script>
    <script type="text/javascript">
        $(function(){
            var $comment=$('#comment');//獲取評論框
            var heigh="";
            $('.bigger').click(function(){  //給“放大按鈕”綁定事件
                if (!$comment.is(":animated")){ //確保當(dāng)前沒有動畫正在執(zhí)行，防止動畫隊列累積。
                    if ($comment.height()<500) {
                        // $comment.height($comment.height() - 50);沒有動畫的代碼
                        $comment.animate({height:"+=50"},300); //設(shè)置動畫。讓過度更自然
                    }
                }

            }); 

            $('.smaller').click(function(){ //給“縮小按鈕”綁定事件
                if (!$comment.is(":animated")) { //確保當(dāng)前沒有動畫正在執(zhí)行，防止動畫隊列累積。
                    if ($comment.height()>50) {
                        // $comment.height($comment.height() - 50);沒有動畫的代碼
                        $comment.animate({height:"-=50"},300); //設(shè)置動畫。讓過度更自然
                    }
                }

            }); 


            $('.up').click(function(){ //給“向上滾動”綁定事件
                if (!$comment.is(":animated")) { //確保當(dāng)前沒有動畫正在執(zhí)行，防止動畫隊列累積。
                    // $comment.height($scrollTop.height() - 50);沒有動畫的代碼
                    $comment.animate({scrollTop:"-=50"},300); //設(shè)置動畫。讓過度更自然
                }

            }); 

            $('.down').click(function(){ //給“向下滾動”綁定事件
                if (!$comment.is(":animated")) { //確保當(dāng)前沒有動畫正在執(zhí)行，防止動畫隊列累積。
                    // $comment.height($scrollTop.height() + 50);沒有動畫的代碼
                    $comment.animate({scrollTop:"+=50"},300); //設(shè)置動畫。讓過度更自然
                }

            }); 
        });
    </script>
</body>
</html>

運(yùn)行效果如下：

image.png

3、復(fù)選框的基本操作（全選/全不選、反選、聯(lián)動）

對復(fù)選框的操作，包括：全選/全不選、反選、聯(lián)動（全選按鈕的狀態(tài)會跟隨選項組的變化而變化，選項組中有一個沒有選中，全選按鈕都不會選中。反過來也一樣，選項組全部選中時，全選按鈕會自動變?yōu)檫x中狀態(tài)）。代碼如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>復(fù)選框基本操作</title>
    <style type="text/css">
        form{
            width: 600px;
            margin: 0 auto;
        }
        form div{
            margin: 10px 0;
        }
    </style>
</head>
<body>
    <form>
        <h3>你愛好的運(yùn)動是什么？</h3>
            <input type="checkbox" name="items" value="足球"/>足球
            <input type="checkbox" name="items" value="籃球"/>籃球
            <input type="checkbox" name="items" value="羽毛球"/>羽毛球
            <input type="checkbox" name="items" value="棒球"/>棒球
            <span>|</span>
            <input type="checkbox" id="checkAll"/><label for="checkAll">全選/全不選</label>
            <input type="checkbox" id="checkRev"/><label for="checkAll">反選</label>
        <div>
            <input type="button" value="提交" id="send"/>
        </div>
    </form>
    <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.js"></script>
    <script type="text/javascript">
        $(function(){ 
            $("#checkAll").click(function(){ //全選/全不選操作
                $('[name=items]:checkbox').prop("checked",this.checked);
            });
    
            $("#checkRev").click(function(){ //反選操作
                $('[name=items]:checkbox').each(function(){
                    $(this).prop("checked",!$(this).prop("checked"));//jQuery寫法
                    // this.checked=!this.checked;//JavaScript寫法，更加簡潔
                });
            });

            $('[name=items]:checkbox').click(function(){  //對復(fù)選框組綁定事件
                var flag=true;
                $('[name=items]:checkbox').each(function(){ //遍歷每一個名為items的checkbox
                    if(!this.checked){//如果有未選中的
                        flag=false;
                    }
                });
                $('#checkAll').prop('checked',flag);//將全選框設(shè)置為“未選中”狀態(tài) 
            });

            $('#send').click(function(){ //為發(fā)送按鈕綁定click事件，彈出選中的選項。
                var str="你選中的是:\r\n";
                $('[name=items]:checkbox:checked').each(function(){
                    str += $(this).val()+"\r\n";
                });
                alert(str);
            });

        });


    </script>
</body>
</html>

運(yùn)行效果：

復(fù)選框操作

4、移動下拉框內(nèi)容（單擊移動、全部移動、雙擊移動）

對下拉框的操作，包括：將選中的內(nèi)容移動到另一個選項組中、雙擊某個選項移動到另一個選項組中、全部選項移動到另一個選項組中。代碼如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>復(fù)制下拉框的內(nèi)容</title>
    <style type="text/css">
        .comWidth{
            width: 400px;
            margin: 0 auto;
        }
        .content{
            float: left;
            margin: 0 auto;
            /*height: 240px;*/
            margin-right: 10px;
            padding:10px 5px;
        }
        #select1{
            width: 140px;
            height: 160px;
            margin-bottom: 10px;
        }
        #select2{
            width: 140px;
            height: 160px;
            margin-bottom: 10px;
        }

        span{
            display: block;
            background: #ccc;
            padding: 2px;
            font-size: 12px;
            cursor: pointer;
            margin-bottom: 5px;
        }

        .tips{
            clear: both;
            color: #f00;
            font-size: 10px;
            text-indent: 5px;
        }
    </style>
</head>
<body>
<div class="comWidth">
    <div class="content">
        <h3>左邊：</h3>
        <select multiple id="select1">
            <option value="1">選項1</option>
            <option value="2">選項2</option>
            <option value="3">選項3</option>
            <option value="4">選項4</option>
            <option value="5">選項5</option>
        </select>
        <div>
            <span id="add">>>添加選中內(nèi)容到右邊</span>
            <span id="addAll">>>添加所有內(nèi)容到右邊</span>
        </div>
    </div>
    <div class="content">
        <h3>右邊：</h3>
        <select multiple id="select2">
        </select>
        <div>
            <span id="remove">>>移動選中內(nèi)容到左邊</span>
            <span id="removeAll">>>移動所有內(nèi)容到左邊</span>
        </div>
    </div>
    <div class="tips">提示：雙擊也可以移動選項！</div>
</div>


<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.js"></script>
<script type="text/javascript">
    $(function(){
        $('#add').click(function(){ //將選中的option移動到右邊
            var $options = $('#select1 option:selected');
            // var $remove = $options.remove();//append方法自帶刪除功能，不用remove也行。
            $options.appendTo('#select2');
        });

        $('#addAll').click(function(){ //將全部option移動到右邊
            var $options = $('#select1 option');
            // var $remove = $options.remove();//append方法自帶刪除功能，不用remove也行。
            $options.appendTo('#select2');
        });

        $('#remove').click(function(){ //將全部option移動到左邊
            var $options = $('#select2 option:selected');
            // var $remove = $options.remove();//append方法自帶刪除功能，不用remove也行。
            $options.appendTo('#select1');
        });

        $('#removeAll').click(function(){ //將全部option移動到左邊
            var $options = $('#select2 option');
            // var $remove = $options.remove();//append方法自帶刪除功能，不用remove也行。
            $options.appendTo('#select1');
        });

        $('#select1').dblclick(function(){ //雙擊將選中option移動到右邊
            // var $options = $('option:selected',this);//另一種選中方式
            var $options = $('#select1 option:selected');
            // var $remove = $options.remove();//append方法自帶刪除功能，不用remove也行。
            $options.appendTo('#select2');
        });


        $('#select2').dblclick(function(){ //雙擊將選中option移動到左邊
            var $options = $('option:selected',this);
            // var $options = $('#select1 option:selected');//另一種選中方式
            // var $remove = $options.remove();//append方法自帶刪除功能，不用remove也行。
            $options.appendTo('#select1');
        });
    });
</script>
</body>
</html>

運(yùn)行效果：

移動下拉框的內(nèi)容

5、表單驗證

表單驗證包括：對輸入內(nèi)容進(jìn)行實時檢測并給出相應(yīng)提示、內(nèi)容不符合要求時阻止表單提交。代碼如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表單驗證</title>
    <style type="text/css">
        form{
            width: 400px;
            margin: 0 auto;
            border: 1px solid #ccc;
            padding: 10px;
        }

        body div{
            margin-bottom: 10px;
        }

        label{
            display: inline-block;
            text-align: right;
            width: 80px;
        }

        .sub{
            margin-left: 85px;
        }
        h3{
            text-align: center;
        }
    </style>
</head>
<body>
    <h3>表單驗證(郵箱沒有進(jìn)行正則表達(dá)式驗證)</h3>
    <form action="" method="POST">
        <div class="inpt">
            <label for="userName">用戶名：</label>
            <input type="text" id="userName" class="required" />
        </div>
        <div class="inpt">
            <label for="email">郵箱：</label>
            <input type="text" id="email" class="required" />
        </div>
        <div class="inpt">
            <label for="personalInfo">個人信息：</label>
            <input type="text" id="personalInfo" />
        </div>
        <div class="sub">
            <input type="submit" id="send" value="提交" />
            <input type="reset" id="res">
        </div>
    </form>

    <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
            $("form :input.required").each(function(){
                var $required = $('<strong class="high" style="color:#f00;">*</strong>');//創(chuàng)建元素
                $(this).parent().append($required);//把元素追加到文檔中
            });

            $('form :input').blur(function(){ //為表單元素添加失去焦點(diǎn)事件
                var $parent=$(this).parent();
                $parent.find(".formTips").remove();//刪除以前的提醒元素
                //驗證用戶名
                if ($(this).is('#userName')) {
                    if (this.value==""||this.value.length<6) {
                        var errMsg = "請至少輸入6位用戶名";
                        $parent.append('<span class="formTips onError" style="color:red;font-size:10px;">'+errMsg+'</span>').find('.high').remove();
                    }else {
                        var okMsg='輸入正確';
                        $parent.append('<span class="formTips onSuccess" style="color:#333;font-size:10px;">'+okMsg+'</span>').find('.high').remove();
                    }
                }
                //驗證郵箱
                if ($(this).is('#email')) {
                    if (this.value=="") {
                        var errMsg = "請輸入正確的郵箱地址";
                        $parent.append('<span class="formTips onError" style="color:red;font-size:10px;">'+errMsg+'</span>').find('.high').remove();
                    }else {
                        var okMsg='輸入正確';
                        $parent.append('<span class="formTips onSuccess" style="color:#333;font-size:10px;">'+okMsg+'</span>').find('.high').remove();
                    }
                }
            }).keyup(function(){
                $(this).triggerHandler("blur");
            }).focus(function(){
                $(this).triggerHandler("blur");
            });

                //提交事件
                $('#send').click(function(){
                    $('form .required:input').trigger('blur');//觸發(fā)失去焦點(diǎn)事件
                    var $errNum=$('form .onError').length;
                    if ($errNum>0) {
                        return false;
                    }
                    console.log('aa');
                    alert("已提交！");
                });
        });
    </script>
</body>
</html>

運(yùn)行效果：

表單驗證

6、表格應(yīng)用

6.1 普通的隔行變色

普通的隔行變色可以，新建兩個不同的樣式，例如新建兩個樣式：.even{background:orange;} 和 .odd{background:skyblue;}。然后通過jQuery給表格的奇數(shù)行添加一個名為odd的類，給偶數(shù)行添加一個名為even的類。這樣就可以實現(xiàn)隔行變色效果了。代碼如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>常規(guī)表格隔行高亮</title>
    <style type="text/css">
        table{
            border: 1px solid #ccc;
            width: 400px;
            margin: 0 auto;
        }
        table thead tr{
            background-color: silver;
        }

        .even{
            background-color: orange;
        }

        .odd{
            background-color: skyblue;
        }
    </style>
</head>
<body>
    <table>
        <thead>
            <th>姓名</th>
            <th>性別</th>
            <th>暫住地</th>
        </thead>
        <tbody>
            <tr>
                <td>張三</td>
                <td>男</td>
                <td>浙江寧波</td>
            </tr>
            <tr>
                <td>李四</td>
                <td>女</td>
                <td>山東濟(jì)南</td>
            </tr>
            <tr>
                <td>王五</td>
                <td>男</td>
                <td>湖南長沙</td>
            </tr>
            <tr>
                <td>趙六</td>
                <td>女</td>
                <td>浙江溫州</td>
            </tr>
            <tr>
                <td>Rain</td>
                <td>男</td>
                <td>韓國首爾</td>
            </tr>
        </tbody>
    </table>
    <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.js"></script>
    <script type="text/javascript">
        $(function(){
            $('tbody>tr:odd').addClass('odd');
            $('tbody>tr:even').addClass('even');
        });
    </script>
</body>
</html>

運(yùn)行效果：

常規(guī)隔行高亮

6.2 單選框控制表格行高亮（單行高亮）

單選框控制表格行高亮，主要思路是：

在每個行第一個td前增加一個單選框；
新建一個行的樣式（例如：selected{...}），用于區(qū)分選中和未選中狀態(tài)；
給表格每行增加單擊事件，單擊時給對應(yīng)行增加樣式addClass("selected")，并移除其他行的樣式removeClass("selected")；
找到當(dāng)前行的單選按鈕，設(shè)置按鈕為選中狀態(tài)prop('checked',true)。
具體請看下方代碼（注意：請將radio的name設(shè)置為一致的，否則無法實現(xiàn)單選功能）：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>單選框單選高亮行</title>
    <style type="text/css">
        table{
            border: 1px solid #ccc;
            width: 400px;
            margin: 0 auto;
        }
        table thead tr{
            background-color: silver;
        }

        .even{
            background-color: orange;
        }

        .odd{
            background-color: skyblue;
        }

        .selected{
            background-color: skyblue;
        }
    </style>
</head>
<body>
    <table>
        <thead>
            <th>姓名</th>
            <th>性別</th>
            <th>暫住地</th>
        </thead>
        <tbody>
            <tr>
                <!-- radio如果要單選，請將它們的name設(shè)置為一樣的 -->
                <td><input checked="" type="radio" name="haha">張三</td> 
                <td>男</td>
                <td>浙江寧波</td>
            </tr>
            <tr>
                <td><input type="radio" name="haha">李四</td>
                <td>女</td>
                <td>山東濟(jì)南</td>
            </tr>
            <tr>
                <td><input type="radio" name="haha">王五</td>
                <td>男</td>
                <td>湖南長沙</td>
            </tr>
            <tr>
                <td><input type="radio" name="haha">趙六</td>
                <td>女</td>
                <td>浙江溫州</td>
            </tr>
            <tr>
                <td><input type="radio" name="haha">Rain</td>
                <td>男</td>
                <td>韓國首爾</td>
            </tr>
        </tbody>
    </table>
    <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.js"></script>
    <script type="text/javascript">
        $(function(){
            //判斷當(dāng)前行（的radio）是否被選中，如果選中則加上selected類使其變色
            $('tbody>tr:has(:checked)').addClass('selected');
            $('tbody>tr').click(function(){
                $(this)
                .addClass('selected')
                .siblings().removeClass('selected')
                .end()
                .find(':radio').prop('checked',true); //如果要能反復(fù)切換選中狀態(tài)，請使用prop()代替attr()。
              });

             
        });
    </script>
</body>
</html>

運(yùn)行效果：

單選框選中時列表行高亮

6.3 復(fù)選框控制表格行高亮（多行高亮）

復(fù)選框可以讓選中的表格行高亮，支持多選。思路和單行選擇差不多，這里不做過多贅述，代碼如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>復(fù)選框選擇行并高亮</title>
    <style type="text/css">
        table{
            border: 1px solid #ccc;
            width: 400px;
            margin: 0 auto;
        }
        table thead tr{
            background-color: silver;
        }

        .even{
            background-color: orange;
        }

        .odd{
            background-color: skyblue;
        }

        .selected{
            background-color: skyblue;
        }
    </style>
</head>
<body>
    <table>
        <thead>
            <th>姓名</th>
            <th>性別</th>
            <th>暫住地</th>
        </thead>
        <tbody>
            <tr>
                <!-- checkbox如果要單選，請將它們的name設(shè)置為一樣的 -->
                <td><input checked type="checkbox" name="haha">張三</td> 
                <td>男</td>
                <td>浙江寧波</td>
            </tr>
            <tr>
                <td><input type="checkbox" name="haha">李四</td>
                <td>女</td>
                <td>山東濟(jì)南</td>
            </tr>
            <tr>
                <td><input type="checkbox" name="haha">王五</td>
                <td>男</td>
                <td>湖南長沙</td>
            </tr>
            <tr>
                <td><input type="checkbox" name="haha">趙六</td>
                <td>女</td>
                <td>浙江溫州</td>
            </tr>
            <tr>
                <td><input type="checkbox" name="haha">Rain</td>
                <td>男</td>
                <td>韓國首爾</td>
            </tr>
        </tbody>
    </table>
    <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.js"></script>
    <script type="text/javascript">
        $(function(){
            //判斷當(dāng)前行（的checkbox）是否被選中，如果選中則加上selected類使其變色
            $('tbody>tr:has(:checked)').addClass('selected');
            $('tbody>tr').click(function(){
                //判斷當(dāng)前行(tr)是否含有selected類
                var hasSelected = $(this).hasClass('selected');
                //如果選中，則移除selected類,否則就加上selected類
                $(this)[hasSelected?"removeClass":"addClass"]('selected')
                // .find(':checkbox').attr('checked',!hasSelected); //使用attr()設(shè)置checked屬性，會導(dǎo)致取消選中后無法再次選中，建議使用prop()
                .find(':checkbox').prop('checked',!hasSelected); //查找內(nèi)部checkedbox，設(shè)置對應(yīng)的屬性
              });
        });
    </script>
</body>
</html>

復(fù)選框，多行高亮

6.4 表格展開關(guān)閉

表格的展開和關(guān)閉，主要是對行進(jìn)行編組，單擊組名對應(yīng)的行，可以展開/折疊對應(yīng)的子行。主要思路是：

新建對應(yīng)組，組名對應(yīng)的行，id設(shè)置為row_x,x代表第x組；
子行的類名可以設(shè)置為child_row_x這樣方便jQuery代碼的編寫；
通過jQuery給每行添加單擊事件，使用toggleClass()函數(shù)刪除/添加高亮；該函數(shù)可以增加或刪除控制高亮的類，存在就刪除，不存在就添加；
通過siblings()和toggle()隱藏/顯示行。siblings()用于選擇同組內(nèi)的子行，然后通過toggle()控制顯示和隱藏（隱藏的就設(shè)置為顯示，顯示的就設(shè)置為隱藏）。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格打開/關(guān)閉</title>
    <style type="text/css">
        table{
            border: 1px solid #ccc;
            width: 400px;
            margin: 0 auto;
        }
        table thead tr{
            background-color: silver;
        }

        table tbody>tr{
            background-color: #f0f0f0;
        }

        .even{
            background-color: orange;
        }

        .odd{
            background-color: skyblue;
        }

        .selected{
            background-color: skyblue;
        }
    </style>
</head>
<body>
    <table>
        <thead>
            <th>姓名</th>
            <th>性別</th>
            <th>暫住地</th>
        </thead>
        <tbody>
            <tr class="parent" id="row_01"><td colspan="3">設(shè)計組</td></tr>
            <tr class="child_row_01"><td>張三</td><td>男</td><td>浙江寧波</td></tr>
            <tr class="child_row_01"><td>李四</td><td>女</td><td>浙江杭州</td></tr>

            <tr class="parent" id="row_02"><td colspan="3">技術(shù)組</td></tr>
            <tr class="child_row_02"><td>王五</td><td>男</td><td>浙江寧波</td></tr>
            <tr class="child_row_02"><td>趙六</td><td>女</td><td>浙江杭州</td></tr>

            <tr class="parent" id="row_03"><td colspan="3">產(chǎn)品組</td></tr>
            <tr class="child_row_03"><td>田七</td><td>男</td><td>浙江寧波</td></tr>
            <tr class="child_row_03"><td>林峰</td><td>女</td><td>浙江杭州</td></tr>
        </tbody>
    </table>
    <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.js"></script>
    <script type="text/javascript">
        $(function(){
            $('tr.parent').click(function(){
                $(this)
                .toggleClass('selected')//添加/刪除高亮
                .siblings('.child_'+this.id).toggle();//隱藏/顯示行
            });
        });
    </script>
</body>
</html>

運(yùn)行效果：

表格行的展開與關(guān)閉

6.5 表格內(nèi)容篩選

表格內(nèi)容的篩選，主要通過contains()和filter()來實現(xiàn)。主要步驟如下：

首先給輸入框綁定keyup事件，隱藏表格的所有“行(tr)”；
通過contains()篩選出用戶輸入的內(nèi)容，然后通過filter()篩選出包含對應(yīng)字符的“行(tr)”；
將第2步篩選出的“行(tr)”顯示出來。
代碼如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格內(nèi)容篩選</title>
    <style type="text/css">
        table{
            width: 400px;
            border: 1px solid #ccc;
            text-align: center;
        }
        .comWidth{
            width: 400px;
            margin: 0 auto;
            /*border: 1px solid #ccc;*/
            padding: 5px;
            font-size: 14px;
        }

        #search{
            /*display: inline-block;*/
            margin: 5px;
        }

        table thead tr{
            background-color: silver;
        }

        .selected{
            background-color: skyblue;
        }
    </style>
</head>
<body>
    <div class="comWidth">
    <label for="search">篩選：</label>
    <input id="search" type="text" name="search">
    <table>
        <thead>
            <th>姓名</th>
            <th>性別</th>
            <th>暫住地</th>
        </thead>
        <tbody>
            <tr>
                <!-- checkbox如果要單選，請將它們的name設(shè)置為一樣的 -->
                <td>張三</td> 
                <td>男</td>
                <td>浙江寧波</td>
            </tr>
            <tr>
                <td>李四</td>
                <td>女</td>
                <td>山東濟(jì)南</td>
            </tr>
            <tr>
                <td>王五</td>
                <td>男</td>
                <td>湖南長沙</td>
            </tr>
            <tr>
                <td>趙六</td>
                <td>女</td>
                <td>浙江溫州</td>
            </tr>
            <tr>
                <td>Rain</td>
                <td>男</td>
                <td>韓國首爾</td>
            </tr>
        </tbody>
    </table>
    </div>
    <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.js"></script>
    <script type="text/javascript">
        $(function(){
            $('#search').keyup(function(){ //給輸入框綁定keyup事件
                $('table tbody tr').hide() //隱藏所有的tr
                .filter(":contains('"+($(this).val())+"')").show(); //顯示值與輸入框中一致的tr
            }).keyup();//綁定事件后立即觸發(fā)一次，防止表格更新了而表單元素的值還存在
        });
    </script>
</body>
</html>

運(yùn)行效果：

表格內(nèi)容篩選

7、其他應(yīng)用

7.1 網(wǎng)頁字體大小

控制網(wǎng)頁的字體，思路已經(jīng)體現(xiàn)在代碼的注釋中，值得注意的是單位的獲取以及數(shù)值的轉(zhuǎn)換。
代碼如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>網(wǎng)頁字體大小縮放</title>
    <style type="text/css">
        .msg_caption>span{
            display: inline-block;
            font-size: 14px;
            width: 100px;
            height: 25px;
            line-height: 25px; 
            background-color: #ccc;
            text-align: center;
            cursor: pointer;
        }
        .msg_caption>span:hover{
            background-color: orange;
            color: white;
        }

        .comWidth{
            width: 400px;
            margin: 0 auto;
            border: 1px solid #ccc;
            padding: 10px;
        }
    </style>
</head>
<body>
    <div class="comWidth">
        <h3>放大/縮小網(wǎng)頁字體(12px-30px)：</h3>
        <div class="msg_caption">
            <span class="bigger">放大字體</span>
            <span class="smaller">縮小字體</span>
        </div>
        <div>
            <p id="para">
                This is some text.This is some text.This is some text.This is some text.This is some text.This is some text.This is some text.This is some text.This is some text.This is some text.This is some text.
            </p>
        </div>
    </div>

    <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.js"></script>
    <script type="text/javascript">
        $(function(){
            $('.msg_caption>span').click(function(){
                var fontSize = $('#para').css("font-size");//獲取段落文字的大小
                var textFontSize = parseInt(fontSize,10);//十進(jìn)制取整
                var unit = fontSize.slice(-2);//獲取單位“px”字符串
                var cName = $(this).attr("class");// 獲取當(dāng)前點(diǎn)擊元素的類名
                if(cName == "bigger"){ //如果點(diǎn)擊的是bigger，則將字體的數(shù)值+2
                    if (textFontSize < 30) {
                        textFontSize += 2;
                    }
                }else if(cName == "smaller"){ //如果點(diǎn)擊的是smaller，則將字體的數(shù)值-2
                    if (textFontSize > 12) {
                        textFontSize -= 2;
                    }
                }
                $("#para").css("font-size",textFontSize + unit); //設(shè)置段落字體的大小，unit表示單位，即px
            });
        });
    </script>
</body>
</html>

運(yùn)行效果：

改變網(wǎng)頁字體大小

7.2 網(wǎng)頁選項卡

網(wǎng)頁選項卡的實現(xiàn)思路：

使用li創(chuàng)建選項，并為每個選擇創(chuàng)建單獨(dú)的內(nèi)容div，除了第一個div外都設(shè)置為隱藏（display：none;）；
為每個選項li綁定單擊事件，單擊時給對應(yīng)元素$(this)添加選中的樣式；
獲取當(dāng)前l(fā)i的索引值（index），并設(shè)置與當(dāng)前l(fā)i索引值一致的內(nèi)容div為顯示（display：block;）；
使用siblings（）選擇其他的內(nèi)容div，設(shè)置為隱藏（display：none;）。
代碼如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>網(wǎng)頁選項卡</title>
    <style type="text/css">

        .tab{
            font-size: 14px;
            width: 300px;
            margin: 0 auto;
            padding: 10px;
            border: 1px solid #ccc;
        }
        .tab_menu{
            /*float: left;*/
            width: 300px;
            /*border: 1px solid #ccc;*/
            /*height: 30px;*/
        }

        .tab_menu ul{
            float: left;
            padding: 0;
            margin: 0;
            height: 22px;
            /*margin-left: -1px;*/
            margin-bottom: -1px;
        }

        .tab_menu ul li{
            list-style: none;
            float: left;
            display: inline-block;
            width: 50px;
            height: 20px;
            line-height: 20px;
            text-align: center;
            margin-right: 5px;
            border: 1px solid #ccc;
            border-bottom: none;
            background-color: #f6f6f6;
        }

        .tab_box{
            clear: both;
            width: 300px;
            height: 100px;
            border: 1px solid #ccc;
        }

        .hide{
            display: none;
        }
        
        .tab_menu ul .selected,.tab_menu ul li:hover{
            background-color: silver;
            color: white;
            border-color: silver;
        }

    </style>
</head>
<body>
    <div class="tab">
        <div class="tab_menu">
            <ul>
                <li class="selected">時事</li>
                <li>體育</li>
                <li>娛樂</li>
            </ul>
        </div>
        <div class="tab_box">
            <div>時事新聞</div>
            <div class="hide">體育</div>
            <div class="hide">娛樂</div>
        </div>
    </div>

    <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.js"></script>
    <script type="text/javascript">
        $(function(){
            var $div_li = $('div.tab_menu ul li');
            $div_li.click(function(){
                $(this).addClass('selected') //為點(diǎn)擊的元素添加樣式
                .siblings().removeClass('selected');//移除沒有點(diǎn)擊的元素樣式
                var index = $div_li.index(this);//獲取當(dāng)前l(fā)i的索引值
                $('div.tab_box > div')//選擇tab_box的所有子div，注意：這里只需要選擇子div即可。
                .eq(index).show() //顯示與li對應(yīng)的div
                .siblings().hide();//隱藏其他的div
            });
        });
    </script>
</body>
</html>

運(yùn)行效果：

網(wǎng)頁選項卡

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九欧美,1769亚洲,黄色成人av

jQuery對表單、表格的操作及更多應(yīng)用

jQuery對表單、表格的操作及更多應(yīng)用

1、單行文本框添加獲取、失去焦點(diǎn)樣式事件

2、多行文本框高度和滾動條的操作

3、復(fù)選框的基本操作（全選/全不選、反選、聯(lián)動）

4、移動下拉框內(nèi)容（單擊移動、全部移動、雙擊移動）

5、表單驗證

6、表格應(yīng)用

6.1 普通的隔行變色

6.2 單選框控制表格行高亮（單行高亮）

6.3 復(fù)選框控制表格行高亮（多行高亮）

6.4 表格展開關(guān)閉

6.5 表格內(nèi)容篩選

7、其他應(yīng)用

7.1 網(wǎng)頁字體大小

7.2 網(wǎng)頁選項卡

7.3 網(wǎng)頁換膚（Cookie的使用）

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九 欧美,1769亚洲,黄色成人av

jQuery對表單、表格的操作及更多應(yīng)用

1、單行文本框添加獲取、失去焦點(diǎn)樣式事件

2、多行文本框高度和滾動條的操作

3、復(fù)選框的基本操作（全選/全不選、反選、聯(lián)動）

4、移動下拉框內(nèi)容（單擊移動、全部移動、雙擊移動）

5、表單驗證

6、表格應(yīng)用

6.1 普通的隔行變色

6.2 單選框控制表格行高亮（單行高亮）

6.3 復(fù)選框控制表格行高亮（多行高亮）

6.4 表格展開關(guān)閉

6.5 表格內(nèi)容篩選

7、其他應(yīng)用

7.1 網(wǎng)頁字體大小

7.2 網(wǎng)頁選項卡

7.3 網(wǎng)頁換膚（Cookie的使用）

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九欧美,1769亚洲,黄色成人av

1、單行文本框添加獲取、失去焦點(diǎn)樣式事件

2、多行文本框高度和滾動條的操作

3、復(fù)選框的基本操作（全選/全不選、反選、聯(lián)動）

4、移動下拉框內(nèi)容（單擊移動、全部移動、雙擊移動）

6、表格應(yīng)用

7、其他應(yīng)用