jQuery相關

時間 2019-12-14

標籤 jquery 相關欄目 JQuery 简体版

原文原文鏈接

jQuery官網：http://jquery.comjavascript

jQuery在線API：http://api.jquery.comcss

jQuery UI:http://jqueryui.comhtml

jQuery核心選擇器Sizzle.js:http://sizzlejs.comjava

一、jQuery的ready事件與window.onload事件的區別：1）、window.onload須要等頁面上所有加載完畢，其中包含頁面中的標籤引用的其它資源（整個頁面須要加載完畢）；而jQuery的ready事件，只要等待頁面上的全部標籤加載完畢就能觸發。因此說從用戶的角度來講，使用jQuery事件會讓用戶感受處理速度變快了jquery

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <script src="jQuery/scripts/jQuery-3.2.1.js"></script>
    <script type="text/javascript">
        //一、javascript中頁面加載完畢觸發
        window.onload = function () { };
        //二、jQuery中頁面加載完畢觸發
        //2.一、完整的寫法
        $(document).ready(function () { });
        //2.二、簡寫
        $(function () { });
        //2.三、完整寫法，jQuery的符號就是‘$’
        jQuery(document).ready(function () { });
        //2.四、簡寫
        jQuery(function () { });
        //三、以上jQuery的寫法只是window.onload的相似寫法，下面這纔是和window.onload表達意思相同的寫法
        $(window).load(function () { });
    </script>
</head>
<body>

</body>
</html>

二、$.each(obj,function(){});循環遍歷鍵值對或數組編程

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <script src="jQuery/scripts/jQuery-3.2.1.js"></script>
    <script type="text/javascript">
        var arrInt = [1, 2, 3, 4, 5, 6, 7, 8];
        $.each(arrInt, function (key,value) {
            alert(key + '      ,      ' + value);
        });
        var p = { 'name': '張三', '年齡': 20, 'email': '123@yaho.com' };
        $.each(p, function (key, value) {
            alert(key + '      ,      ' + value);
        });
    </script>
</head>
<body>

</body>
</html>

三、$.map(obj,function(elements,index){});遍歷數組或者鍵值對將返回值添加到新的數組或鍵值對api

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <script src="jQuery/scripts/jQuery-3.2.1.js"></script>
    <script type="text/javascript">
        var arrInt = [10, 20, 30, 40, 50, 60, 70];
        var newArr = $.map(arrInt, function (elements,index) {
            if (index > 3) {
                return elements * 2;
            } else {
                return elements;
            }
        });
        alert(newArr);
    </script>
</head>
<body>

</body>
</html>

四、jQuery對象和dom對象是能夠互相轉換的。數組

1）、當直接使用dom對象的時候會存在瀏覽器兼容問題，因此這時候能夠把dom對象轉換位jQuery對象，而後再操做。瀏覽器

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <script src="jQuery/scripts/jQuery-3.2.1.js"></script>
    <script type="text/javascript">
        $(function () {
            document.getElementById('btn1').onclick = function () {
                //得到一個dom對象
                var domObj = document.getElementById('div1');
                //將dom對象轉換位jQuery對象
                var $jqObj = $(domObj);
                //調用jQuery對象的text方法
                $jqObj.text('Hello!');
            }
        });
        
    </script>
</head>
<body>
    <input type="button" name="name" value="添加" id="btn1"/>
    <div id="div1" style="width:200px;height:200px;border:1px solid green;">


    </div>
</body>
</html>

五、jQuery中的一些經常使用方法安全

1）、val方法：有參數表示設置文本框的值，無參數表示取得文本框中的值

2）、css方法：設置對象的樣式，能夠一個鍵值對一個鍵值對的設置，也能夠一次性傳一個鍵值對集合批量設置

3）、text方法和html方法：均可以設置超連接顯示的文字，html能夠顯示圖片

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <script src="jQuery/scripts/jQuery-3.2.1.js"></script>
    <script type="text/javascript">
        $(function () {
            $('#btn1').click(function () {
                //獲取文本框對象
                var $txt = $(document.getElementById('txt1'));
                //取得文本框中的內容，無參的val表示獲取值
                alert($txt.val());
                //給文本框中設置值，有參的val表示設置值
                $txt.val('啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊！');
                //設置樣式(傳一對鍵值對一個一個設置)
                $txt.css('border', '2px solid blue');
                //設置樣式（傳一個鍵值對集合批量設置樣式）
                $txt.css({
                    'border': '2px solid red',
                    'width': '200px',
                    'height':'100px'
                });
                var $alink = $(document.getElementById('a1'));
                $alink.text('百度一下你就知道');
                $alink.html('百度兩下你就不知道');
            });
        });
    </script>
</head>
<body>
    <input type="button" id="btn1" name="name" value="按鈕" />
    <input type="text" id="txt1" value="" />
    <a id="a1" href="http://www.baidu.com">百度</a>
</body>
</html>

六、選擇器

1）、id選擇器：$('#id')

2）、標籤選擇器：$('p')

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <script src="jQuery/scripts/jQuery-3.2.1.js"></script>
    <script type="text/javascript">
        $(function () {
            $('#div1').css({
                'width':'200px',
                'height': '200px',
                'background-color':'red'
            });
            $('p').css({
                'background-color': 'red'
            });
        });
    </script>
</head>
<body>
    <div id="div1"></div>
    <p>吼吼吼吼吼吼吼吼吼</p>
    <p>吼吼吼吼吼吼吼吼吼</p>
    <p>吼吼吼吼吼吼吼吼吼</p>
    <p>吼吼吼吼吼吼吼吼吼</p>
    <p>吼吼吼吼吼吼吼吼吼</p>
    <p>吼吼吼吼吼吼吼吼吼</p>
    <p>吼吼吼吼吼吼吼吼吼</p>
</body>
</html>

3）、類選擇器：$('.x')

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <script src="jQuery/scripts/jQuery-3.2.1.js"></script>
    <script type="text/javascript">
        $(function () {
            //選取全部應用了x類的元素
            $('.x').css({
                 'border':'2px solid red'
            });
        });
    </script>
</head>
<body>
    <div id="div1"></div>
    <input class="x" type="button" />
    <input class="x" type="text" />
    <span class="x">哈哈</span>
    <p class="x">春眠不覺曉</p>
</body>
</html>

4）、標籤+類選擇器：$('input.x')

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <script src="jQuery/scripts/jQuery-3.2.1.js"></script>
    <script type="text/javascript">
        $(function () {
            //選取全部應用了x類的元素
            $('.x').css({
                 'border':'2px solid red'
            });
            //選取全部應用了x類的input元素
            $('input.x').css({
                'border':'4px solid yellow'
            });
        });
    </script>
</head>
<body>
    <div id="div1"></div>
    <input class="x" type="button" />
    <input class="x" type="text" />
    <span class="x">哈哈</span>
    <p class="x">春眠不覺曉</p>
</body>
</html>

5）、組合選擇：$(.class1,#btn1,p,div) $('選擇器1，選擇器2，選擇器3')

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <script src="jQuery/scripts/jQuery-3.2.1.js"></script>
    <script type="text/javascript">
        $(function () {
            $('.class1,#btn1,p,div').css({
                'backgroundColor':'red'
            });
        });
    </script>
</head>
<body>
    <input type="button" name="name" value="button" id="btn1"/>
    <p class="class1">test</p>
    <p class="class1">test</p>
    <p class="class1">test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <div>div1</div>
    <div>div1</div>
    <div class="class1">div1</div>
    <div class="class1">div1</div>
</body>
</html>

6）、層次選擇器：

I、後代選擇器：$('選擇器1 選擇器2')選擇器之間用空格隔開，選取的是選擇器1下面的全部的選擇器2

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <script src="jQuery/scripts/jQuery-3.2.1.js"></script>
    <script type="text/javascript">
        $(function () {
            //選取頁面上全部的p元素
            $('p').css('backgroundColor', 'red');
            //選取全部div1下的p元素
            $('#div1 p').css('backgroundColor', 'yellow');
            //選取頁面上全部div下的p元素
            $('div p').css('backgroundColor', 'blue');
        });
    </script>
</head>
<body>
    <div id="div1">
        <p>11111111111111</p>
        <p>22222222222222</p>
        <p>33333333333333</p>
        <p>44444444444444</p>
    </div>
    <p>55555555555</p>
    <div>
        <p>11111111111111</p>
        <p>22222222222222</p>
        <p>33333333333333</p>
        <p>44444444444444</p>
    </div>
</body>
</html>

II、子元素選擇器：$('選擇器1 > 選擇器2')，選取的是選擇器1下直接子元素選擇器2

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <script src="jQuery/scripts/jQuery-3.2.1.js"></script>
    <script type="text/javascript">
        $(function () {
            //選取body下的直接子元素span
            $('body > span').css({
                'font-size': '30px',
                'backgroundColor': 'pink'
            });
        });
    </script>
</head>
<body>
    <span>
        我是body下的span
    </span>
    <div>
        <span>我是div下的span</span>
    </div>
    <p><span>我是p下的span</span></p>
</body>
</html>

III、相鄰元素選擇器（必須是同級元素）：$('選擇器1 + 選擇器2')，取得是緊跟着選擇器1後面的一個選擇器2（下一個元素若是不是選擇器2，中間只要隔開了就取不到了，必須是緊鄰），等價於$('選擇器1').next('選擇器2')

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <script src="jQuery/scripts/jQuery-3.2.1.js"></script>
    <script type="text/javascript">
        $(function () {
            $('div + p').css('backgroundColor','red');
        });
    </script>
</head>
<body>
    <div>div1</div><p>春眠不覺曉</p><p>到處聞啼鳥</p><p>夜來風雨聲</p><p>花落知多少</p>
</body>
</html>

IV、相鄰選擇器（必須是同級元素）：$('選擇器1 ~ 選擇器2'),取得是選擇器1後面的全部選擇器2（選擇器1和選擇器2之間能夠容許有間隔），

等價於$('選擇器1').nextAll('選擇器2')

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <script src="jQuery/scripts/jQuery-3.2.1.js"></script>
    <script type="text/javascript">
        $(function () {
            $('div ~ p').css('backgroundColor', 'red');
        });
    </script>
</head>
<body>
    <div>div1</div><p>春眠不覺曉</p><p>到處聞啼鳥</p><p>夜來風雨聲</p><p>花落知多少</p>
</body>
</html>

V、其它選擇器：

$('選擇器1').next()=$('選擇器1 + *')；選擇器1的下一個任意兄弟（同級）元素

$('選擇器1').nextAll()=$('選擇器1 ~ *')；選擇器1的後面的全部任意兄弟（同級）元素

$('選擇器1').prev('選擇器2')；選擇器1前面的一個兄弟（同級）選擇器2

$('選擇器1').prev()；選擇器1前面的一個兄弟（同級）任意元素

$('選擇器1').prevAll('選擇器2');選擇器1前面的全部兄弟（同級）選擇器2

$('選擇器1').prevAll();選擇器1前面的全部兄弟（同級）任意元素

$('選擇器1').siblings('選擇器2');除了選擇器1的全部兄弟（同級）選擇器2

$('選擇器1').siblings();除了選擇器1的全部兄弟（同級）任意元素

VI、選擇器練習：有些方法是會破壞鏈式編程的鏈的，好比：next(),nextAll,prev(),prevAll(),siblings(),無參數的text()、val()、html()

一旦鏈式編程的鏈被破壞以後能夠經過end()方法來修復。

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <script src="jQuery/scripts/jQuery-3.2.1.js"></script>
    <script type="text/javascript">
        $(function () {
            //給li註冊鼠標移上事件，移上的li背景色變紅其他變白
            //再給li註冊單擊事件，點擊的li前面的li變綠，以後的變橘黃
            //在單擊事件的時候，prevAll()方法會破壞鏈式編程的鏈（prevAll方法返回的是前面全部的li對象，不是當前點擊的對象），
　　　　　　　//因此要調用一下end()方法來修復鏈（end()方法的做用就是返回最近點擊的那個對象）
            $('#u1 li').mouseover(function () {
                $(this).css('backgroundColor', 'red').siblings('li').css('backgroundColor','');
            }).click(function () {
                $(this).prevAll().css('backgroundColor', 'green').end().nextAll().css('backgroundColor','orange');
            });
        });
    </script>
</head>
<body>
    <ul id="u1">
        <li>大天狗</li>
        <li>茨木</li>
        <li>酒吞</li>
        <li>妖刀</li>
    </ul>
</body>
</html>

jQuery實現五角星評分

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <script src="jQuery/scripts/jQuery-3.2.1.js"></script>
    <script type="text/javascript">
        $(function () {
            //一、給td設置樣式
            //二、註冊鼠標移上事件，當鼠標移上，當前以及以前爲★，以後爲☆
            //三、註冊鼠標移出事件，當鼠標移出，全部都爲☆，屬性爲isclicked=isclicked的及以前的爲★
            //四、給每一個td添加一個屬性score，分別爲10，20，30，40，50
            //五、給每一個td註冊一個單擊事件，當單擊某個td就給這個td添加一個isclicked屬性，其他的td刪除isclicked屬性，而後將這個td的score屬性的值給pscore
            $('#tb1 td').css({
                'width': '50px',
                'height': '50px',
                'color': 'red',
                'font-size': '50px',
                'cursor':'pointer'   
            }).mouseover(function () {
                $(this).text('★').prevAll().text('★').end().nextAll().text('☆');
            }).mouseout(function () {
                $('#tb1 td').text('☆');
                $('#tb1 td[isclicked=isclicked]').text('★').prevAll().text('★');
            }).attr('score', function (index) {
                return (index + 1) * 10;
            }).click(function () {
                $(this).attr('isclicked', 'isclicked').siblings().removeAttr('isclicked');
                $('#pscore').text($(this).attr('score'));
            });

        });
    </script>
</head>
<body>
    <p id="pscore"></p>
    <table id="tb1" border="0" cellpadding="0" cellspacing="0">
        <tr>
            <td>
                ☆
            </td>
            <td>
                ☆
            </td>
            <td>
                ☆
            </td>
            <td>
                ☆
            </td>
            <td>
                ☆
            </td>
        </tr>
    </table>
</body>
</html>

七、jQuery能夠鏈式編程和隱式迭代

爲何能夠鏈式編程呢？由於jQuery對象的方法默認在執行完畢都有一個返回值即對象自己（return this）,因此能夠進行鏈式編程八、attr（）和prop（）

attr：是attribute的簡稱，表示的是’屬性‘的意思，具體是表示文檔節點的屬性，在獲取和設置本身定義的屬性的時候用

prop:是proprety的簡稱，表示的也是‘屬性’的意思，具體是表示js對象的屬性，在獲取和設置js dom對象的原生的屬性的時候用，經過prop獲取的值是通過計算的，不是直接在網頁中看到的屬性的值。

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <script src="jQuery/scripts/jQuery-3.2.1.js"></script>
    <script type="text/javascript">
        $(function () {
            //全選
            $('#btn1').click(function () {
                $('input[type=checkbox]').attr('checked', true);
                $('input[type=checkbox]').prop('checked', true);
            });
            //全不選
            $('#btn2').click(function () {
                $('input[type=checkbox]').attr('checked', false);
                $('input[type=checkbox]').prop('checked', false);
            });
            //反選
            $('#btn3').click(function () {
                //經過遍從來設置
                $.each($('input[type=checkbox]'), function (k, v) {
                    $(v).attr('checked', !$(v).attr('checked'));
                    $(v).prop('checked', !$(v).prop('checked'));
                });
                //$('input[type=checkbox]').attr('checked', function (index, attr_value) {
                //    return !attr_value;
                //});
            });
        });
    </script>
</head>
<body>
    <input type="button" name="name" value="全選" id="btn1" />
    <input type="button" name="name" value="全不選" id="btn2" />
    <input type="button" name="name" value="反選" id="btn3" />
    <input type="checkbox" name="name" value="" id="ch1" />
    <input type="checkbox" name="name" value="" id="ch2" />
    <input type="checkbox" name="name" value="" id="ch3" />
    <input type="checkbox" name="name" value="" id="ch4" />
</body>
</html>

八、jQuery對象就是一個dom對象的集合，因此能夠經過索引直接訪問其中的任何一個對象，而且返回的就是dom對象

九、經過jQuery來操做類樣式：

1）、獲取類樣式：hasClass('類樣式')；獲取到了反回true,不然爲false。

2）、追加類樣式：addClass('類樣式')；不對對象本來應用的類樣式有影響，直接追加給對象
3）、移出類樣式：removeClass('類樣式');移出指定的類樣式

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <script src="jQuery/scripts/jQuery-3.2.1.js"></script>
    <script type="text/javascript">
        $(function () {
            $('#btn').click(function () {
                //一、判斷是否應用了某個樣式
                //二、若是存在移除某個類樣式
                //三、若是不存在追加某個類樣式
                if ($('body').hasClass('closeLingt')) {
                    $('#btn').val('關燈');
                    $('body').removeClass('closeLingt');
                } else {
                    $('body').addClass('closeLingt');
                    $('#btn').val('開燈');
                }
            });
        });
    </script>
    <style type="text/css">
        .closeLingt {
            background-color:black;
        }
    </style>
</head>
<body>
    <input type="button" name="name" value="關燈" id="btn" />
</body>
</html>

4）、自動設置類樣式：toggleClass('類樣式')；方法本身判斷是否有某個類樣式，若是有就移除這個類樣式，沒有就追加這個類樣式。

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <script src="jQuery/scripts/jQuery-3.2.1.js"></script>
    <script type="text/javascript">
        $(function () {
            $('#btn').click(function () {
                $('body').toggleClass('closeLingt');
                if ($('#btn').val() == '開燈') {
                    $('#btn').val('關燈');
                } else {
                    $('#btn').val('開燈');
                }
            });
        });
    </script>
    <style type="text/css">
        .closeLingt {
            background-color:black;
        }
    </style>
</head>
<body>
    <input type="button" name="name" value="關燈" id="btn" />
</body>
</html>

十、經常使用的過濾器：使用冒號將標籤和過濾器隔開，中間沒有空格

1）、:first ---取第一個

2）、:last---取最後一個

3）、:eq(n)---取第n個

4）、:gt(n)---取大於n的

5）、:lt(n)---取小於n的

6）、:not(類樣式)---取除了某中類樣式的

7）、:header---取全部的h標籤

8）、:even---取偶數行（這裏的偶數指的是索引）

9）、:odd---取奇數行（這裏的奇數指的是索引）

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <script src="jQuery/scripts/jQuery-3.2.1.js"></script>
    <script type="text/javascript">
        $(function () {
            $('#btn').click(function () {
                //$('p').css('backgroundColor', 'red');//給全部的p標籤設置背景色
                //$('p:first').css('backgroundColor','red');//給第一個p標籤設置背景色
                //$('p:last').css('backgroundColor', 'red');//給最後一個p標籤設置背景色
                //$('p:eq(2)').css('backgroundColor', 'red');//給第n個p標籤設置背景色，n表示p標籤的索引
                //$('p:gt(2)').css('backgroundColor', 'red');//給索引大於2的p標籤設置背景色，gt表示大於的意思
                //$('p:lt(2)').css('backgroundColor', 'red');//給索引小於2的p標籤設置背景色，lt表示小於的意思
                //$('p:not(.cls1)').css('backgroundColor', 'red');//給除了應用了cls1樣式的p標籤設置背景色
                //$(':header').css('backgroundColor', 'red');//給頁面上全部的h標籤設置背景色
            });
        });
    </script>
</head>
<body>
    <input type="button" name="name" value="button" id="btn" />
    <h1>hhhhhhhhhhh</h1>
    <h2>hhhhhhhhhhh</h2>
    <h3>hhhhhhhhhhh</h3>
    <h4>hhhhhhhhhhh</h4>
    <h5>hhhhhhhhhhh</h5>
    <h6>hhhhhhhhhhh</h6>
    <p>1111111111111</p>
    <p class="cls1">1111111111111</p>
    <p>1111111111111</p>
    <p>1111111111111</p>
    <p class="cls1">1111111111111</p>
    <p class="cls1">1111111111111</p>
    <p>1111111111111</p>
</body>
</html>

10）、選擇器練習

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <script src="jQuery/scripts/jQuery-3.2.1.js"></script>
    <script type="text/javascript">
        $(function () {
            $('#btn').click(function () {
                //點擊按鈕表格隔行變色，奇紅偶黃
                $('#tb1 tr:even').css('backgroundColor', 'red');//索引爲偶數在頁面上顯示出來纔是表格的奇數行
                $('#tb1 tr:odd').css('backgroundColor', 'yellow');//索引爲奇數在頁面上顯示出來纔是表格的偶數行
                //表格前三行字體爲粗體
                $('#tb1 tr:lt(3)').css('font-weight','bolder');
            });
            //鼠標移到的行變成黃色，其他行變爲藍色
            $('#tb1 tr').mouseover(function () {
                $(this).css('backgroundColor', 'yellow').siblings().css('backgroundColor','blue');
            });
        });
    </script>
</head>
<body>
    <input type="button" name="name" value="button" id="btn" />
    <table border="0" cellpadding="0" cellspancing="0" id="tb1">
        <tr><td>姓名</td><td><input type="text" id="txt1" /></td></tr>
        <tr><td>學號</td><td><input type="text" id="txt2" /></td></tr>
        <tr><td>語文</td><td><input type="text" id="txt3" /></td></tr>
        <tr><td>數學</td><td><input type="text" id="txt4" /></td></tr>
        <tr><td>物理</td><td><input type="text" id="txt5" /></td></tr>
        <tr><td>化學</td><td><input type="text" id="txt6" /></td></tr>
        <tr><td>生物</td><td><input type="text" id="txt7" /></td></tr>
        <tr><td>英語</td><td><input type="text" id="txt8" /></td></tr>
    </table>
</body>
</html>

11）、$('選擇器',this)或者$('選擇器',$(this))表達的意思如出一轍，this表示的是在必定範圍內獲取選擇器選擇的對象

 1 <!DOCTYPE html>
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
 5     <title></title>
 6     <script src="jQuery/scripts/jQuery-3.2.1.js"></script>
 7     <script type="text/javascript">
 8         $(function () {
 9             //設置每一個單元格的樣式
10             $('#tb1 td').css({
11                 'width': '50px',
12                 'height': '30px',
13                 'text-align':'center'
14             });
15             //給tb1下的全部行註冊一個單擊事件
16             $('#tb1 tr').click(function () {
17                 //將全部td的背景色設爲默認
18                 $('#tb1 td').css('backgroundColor', '');
19                 //設置當前點擊行的偶數（索引爲奇數）單元格爲黃色
20                 $('td:odd', this).css('backgroundColor','yellow');//這裏的this表示的是‘當前行’這麼個範圍，也能夠寫成$(this)
21                 //設置當前點擊行的奇數（索引爲偶數）單元格爲紅色
22                 $('td:even', this).css('backgroundColor','red');
23             });
24         });
25     </script>
26 </head>
27 <body>
28     <table id="tb1" border="1" cellpadding="2" cellspancing="2">
29         <tr>
30             <td>AAA</td>
31             <td>AAA</td>
32             <td>AAA</td>
33             <td>AAA</td>
34             <td>AAA</td>
35         </tr>
36         <tr>
37             <td>AAA</td>
38             <td>AAA</td>
39             <td>AAA</td>
40             <td>AAA</td>
41             <td>AAA</td>
42         </tr>
43         <tr>
44             <td>AAA</td>
45             <td>AAA</td>
46             <td>AAA</td>
47             <td>AAA</td>
48             <td>AAA</td>
49         </tr>
50         <tr>
51             <td>AAA</td>
52             <td>AAA</td>
53             <td>AAA</td>
54             <td>AAA</td>
55             <td>AAA</td>
56         </tr>
57         <tr>
58             <td>AAA</td>
59             <td>AAA</td>
60             <td>AAA</td>
61             <td>AAA</td>
62             <td>AAA</td>
63         </tr>
64         <tr>
65             <td>AAA</td>
66             <td>AAA</td>
67             <td>AAA</td>
68             <td>AAA</td>
69             <td>AAA</td>
70         </tr>
71     </table>
72 </body>
73 </html>

十一、屬性過濾選擇器

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <script src="jQuery/scripts/jQuery-3.2.1.js"></script>
    <script type="text/javascript">
        
        $(function () {
            //一、選取全部name爲txt1的元素
            //$('input[name=txt1]').css('backgroundColor', 'red');
            //二、選取全部具備name屬性的input
            //$('input[name]').css('backgroundColor', 'red');
            //三、選取具備name屬性的元素
            //$('body *[name]').css('backgroundColor', 'red');
            //四、選取name屬性爲txt1的元素
            //$('body [name = txt1]').css('backgroundColor', 'red');
            //五、選取頁面上具備name屬性，且name屬性以a開頭
            //$('body *[name^=a]').css('backgroundColor', 'red');
            //六、選取頁面上具備name屬性，且name屬性以a結尾
            //$('body *[name$=a]').css('backgroundColor', 'red');
            //七、選取頁面上具備name屬性，且name屬性爲空的
            //$('body *[name=""]').css('backgroundColor', 'red');
            //八、選取頁面上具備name屬性，且name屬性包含a
            //$('body *[name*=a]').css('backgroundColor', 'red');
            //九、選取頁面上name屬性不等於txt6(沒有name屬性的也會被選擇)
            //$('body *[name!=txt6]').css('backgroundColor', 'red');
            //十、選取具備多個屬性的元素
            $('body *[name][id][value]').css('backgroundColor', 'red');
        });
    </script>
</head>
<body>
    <input type="text" name="txt1" value="" id="t1" />
    <input type="text" name="txt2a" value="" />
    <input type="text" name="atxt3" value="" />
    <input type="text" name="txt4a" value="" />
    <input type="text" name="atxt5" value="" />
    <input type="text" name="txt6" value="" />
    <input type="text" name="" value="" />
    <input type="text" value="" />
    <input type="text" name="123a321" value="" />
    <input type="text" name="123ab321" value="" />
    <textarea name="txt1"></textarea>
</body>
</html>

十二、屬性表單過濾器

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <script src="jQuery/scripts/jQuery-3.2.1.js"></script>
    <script type="text/javascript">
        $(function () {
            //一、選取頁面上全部被禁用的元素
            //$(':disabled').css('backgroundColor', 'red');
            //二、選取頁面上全部沒被禁用的元素
            //$(':enabled').css('backgroundColor', 'red');
            //三、選取form1下的全部被禁用的元素
            //$('#form1 :disabled').css('backgroundColor', 'red');
            //四、選取form1下的全部沒被禁用的元素
            //$('#form1 :enabled').css('backgroundColor', 'red');
            //五、選取全部沒被禁用的input標籤
            //$('input:enabled').css('backgroundColor', 'red');
            //六、單擊按鈕，獲取全部被選中的checkbox或radio
            //這裏不知道爲何實現不了
            $('#btn').click(function () {
                $(':not(:true)').css('border', '1px solid blue');
            });
            //獲取被選中的option
            $('#btn1').click(function () {
                $(':selected').text(function (key,value) {
                    return '★'+value+'★';
                });
                $('select :not(:selected)').text(function (key, value) {
                    return '☆' + value + '☆';
                });
            });
        });
    </script>
</head>
<body>
    <input type="button" name="name" id="btn1" value="button" />
    <select>
        <option value="value">遼寧</option>
        <option value="value">遼寧1</option>
        <option value="value">遼寧2</option>
        <option value="value">遼寧3</option>
    </select>
    <input type="button" name="name" id="btn" value="button" />
    <div>
        <input type="checkbox" name="name" value="" />
        <input type="checkbox" name="name" value="" />
        <input type="radio" name="name" value="" />
        <input type="checkbox" name="name" value="" />
        <input type="radio" name="name" value="" />
    </div>
    <form id="form1" action="/" method="post">
        <input type="text" name="name" value="" disabled="disabled"/>
        <input type="text" name="name" value="" />
        <input type="text" name="name" value="" />
        <input type="button" name="name" value="button" disabled="disabled"/>
        <input type="button" name="name" value="button" />
        <input type="button" name="name" value="button" disabled="disabled"/>
        <input type="button" name="name" value="button" />
    </form>
    <p>----------------------------------------------------------------------</p>
        <input type="text" name="name" value="" disabled="disabled"/>
        <input type="text" name="name" value="" />
        <input type="text" name="name" value="" />
        <input type="button" name="name" value="button" disabled="disabled"/>
        <input type="button" name="name" value="button" />
        <input type="button" name="name" value="button" disabled="disabled"/>
        <input type="button" name="name" value="button" />
</body>
</html>

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <script src="jQuery/scripts/jQuery-3.2.1.js"></script>
    <script type="text/javascript">
        $(function () {
            //爲每一個checkbox註冊單擊事件
            $('input[type=checkbox]').click(function () {
                //1\獲取當前被選中的
                var chks = $('input[type=checkbox]:checked');
                //2獲取個數
                var n = chks.length;
                //3獲取每一個value
                var names = [];
                $.each(chks, function (k,chkObj) {
                    names[names.length]=$(chkObj).val();
                });
                //4顯示到p中
                $('#pmsg').text('共選中了'+n+'項，分別是：'+names);
            });
        });
    </script>
</head>
<body>
    <input type="checkbox" name="name" value="鼠" />鼠
    <input type="checkbox" name="name" value="牛" />牛
    <input type="checkbox" name="name" value="猴" />猴
    <input type="checkbox" name="name" value="雞" />雞
    <p id="pmsg">
        共選擇了0項，分別是：
    </p>
</body>
</html>

1三、jQuery動態建立元素

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <script src="jQuery/scripts/jQuery-3.2.1.js"></script>
    <script type="text/javascript">
        $(function () {
            $('#btn').click(function () {
                //追加到元素後面
                //$('<a href="http://www.baidu.com">百度</a>').appendTo('#div1');
                //$('#div1').append('<a href="http://www.baidu.com">百度</a>');
                //插入到前面
                //$('#div1').prepend('<a href="http://www.baidu.com">百度</a>');
                //插入到div1前面
                $(('<a href="http://www.baidu.com">百度</a>')).insertBefore('#div1');
                //插入到div1後
                $(('<a href="http://www.baidu.com">百度</a>')).insertAfter('#div1');
            });
        });
    </script>
    <style type="text/css">
        #div1 {
            width:200px;
            height:200px;
            border:1px solid blue;
        }
    </style>
</head>
<body>
    <input type="button" name="name" value="button" id="btn" />
    <div id="div1">
        adasd
    </div>
</body>
</html>

jQuery實現屬性選擇器

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <script src="jQuery/scripts/jQuery-3.2.1.js"></script>
    <script type="text/javascript">
        $(function () {
            $(':button[value=">>"]').click(function () {
                $('#s1 option').appendTo('#s2');
            });
            $(':button[value=">"]').click(function () {
                $('#s1 option:selected').appendTo('#s2');
            });
            $(':button[value="<<"]').click(function () {
                $('#s2 option').appendTo('#s1');
            });
            $(':button[value="<"]').click(function () {
                $('#s2 option:selected').appendTo('#s1');
            });
        });

    </script>
    <style type="text/css">
        select {
            width:200px;
            height:200px;
            border:1px solid blue;
        }
    </style>
</head>
<body>
    <select id="s1" multiple="multiple">
        <option>新增</option>
        <option>修改</option>
        <option>刪除</option>
        <option>查詢</option>
    </select>
    <input type="button" name="name" value="<<" />
    <input type="button" name="name" value="<" />
    <input type="button" name="name" value=">>" />
    <input type="button" name="name" value=">" />
    <select id="s2" multiple="multiple">
    </select>
</body>
</html>

jQuery動態建立表格

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <script src="jQuery/scripts/jQuery-3.2.1.js"></script>
    <script type="text/javascript">
        var arrs = {
            '大天狗': 'datiangou',
            '妖刀姬': 'yaodaoji',
            '妖刀姬1':'yaodaoji1'
        };
        $(function () {
            $('#btn1').click(function () {
                var tbObj = $('<table border="1"></table>').appendTo('body');
                for (var key in arrs) {
                    $('<tr><td>' + key + '</td><td>' + arrs[key] + '</td></tr>').appendTo(tbObj);
                }
            });
        });
    </script>
</head>
<body>
    <input type="button" id="btn1" value="動態建立表格" />
</body>
</html>

1四、empty和remove

empty()方法：刪除元素內部

remove()方法：連帶本身一塊兒刪除

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <script src="jQuery/scripts/jQuery-3.2.1.js"></script>
    <script type="text/javascript">
        $(function () {
            $('#btn1').click(function () {
                $('#div1').empty();
            });
            $('#btn2').click(function () {
                $('#div1').remove();
            });
        });
    </script>
    <style type="text/css">
        #div1 {
            width:100px;
            height:200px;
            border:1px solid blue;
        }
    </style>
</head>
<body>
    <input type="button" name="name" id="btn1" value="empty" />
    <input type="button" name="name" id="btn2" value="remove" />
    <div id="div1">
        <a></a><p>sdads</p>
    </div>
</body>
</html>

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <script src="jQuery/scripts/jQuery-3.2.1.js"></script>
    <script type="text/javascript">
        $(function () {
            var sec = 4;
            var intervalId = setInterval(function () {
                if (sec > 0) {
                    $('#btn').val('倒計時' + sec + '秒');
                    sec--;
                } else {
                    $('#btn').val('贊成').prop('disabled',false);
                }
            }, 1000);
        });
    </script>
</head>
<body>
    <input type="button" name="name" id="btn" value="倒計時5秒" disabled="disabled" />
</body>
</html>

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <script src="jQuery/scripts/jQuery-3.2.1.js"></script>
    <script type="text/javascript">
        $(function () {
            $('#btn1').click(function () {
                $('<tr><td>' + $('#txtName').val() + '</td><td>' + $('#txtAge').val() + '</td><td><input onclick="deleteCurrentRow(this);" type="button" value="刪除"/></td></tr>').appendTo('#tbody1');
            });
        });
        function deleteCurrentRow(current) {
            //先拿到當前點的這一行，current表明的就是button按鈕，它的父節點就是th,th的父節點就是tr。
            var tr = current.parentNode.parentNode;
            $(tr).remove();
            //而後再從tbody中把這一行刪除出去
           // document.getElementById('tbody1').removeChild(tr);
        }
    </script>
</head>
<body>
    <fieldset style="width: 300px;">
        <legend>新增人員信息</legend>
        <p>
            姓名：<input type="text" id="txtName" />
        </p>
        <p>
            年齡：<input type="text" id="txtAge" />
        </p>
        <p>
            <input type="button" name="name" id="btn1" value="新增" />
        </p>

    </fieldset>
    <legend style="width: 300px; text-align: center;">人員信息表</legend>
    <table border="1" cellpadding="0" cellspacing="0" style="width: 300px;">
        <thead>
            <tr>
                <th>姓名
                </th>
                <th>年齡
                </th>
                <th>刪除
                </th>
            </tr>
        </thead>
        <tbody id="tbody1">
        </tbody>
    </table>
</body>
</html>

1五、節點替換和節點包裹

replaceWith()，替換，$('待替換元素').replaceWith('替換成的元素')

replaceAll()，替換，$('動態建立的一個元素').replaceAll('待替換元素')

wrap(),包裹，$('被包裹元素').wrap('將要用來包裹的某種標籤')，在元素外包裹

wrapInner(),包裹，$('被包裹元素').wrapInner('將要用來包裹的某種標籤')，在元素內包裹

wrapAll(),包裹，$('被包裹元素').wrapAll('將要用來包裹的某種標籤')，將某類元素用一個標籤來包裹

1六、設置radio，checkbox的選中項

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <script src="jQuery/scripts/jQuery-3.2.1.js"></script>
    <script type="text/javascript">
        $(function () {
            $('#btn').click(function () {
                $(':radio').val(['nan']);
                $(':checkbox').val(['ppq','dlq']);
            });
        });
    </script>
</head>
<body>
    <input type="button" name="name" id="btn" value="button" />
    <p>
        <input type="radio" name="gender" value="nan" />男
        <input type="radio" name="gender" value="nv" />女
        <input type="radio" name="gender" value="baomi" />保密
    </p>
    <p>
        <input type="checkbox" name="hb" value="dlq" />打籃球
        <input type="checkbox" name="hb" value="tzq" />踢足球
        <input type="checkbox" name="hb" value="ppq" />乒乓球
    </p>
</body>
</html>

1七、高亮選中函數

1八、jQuery事件對象evt

evt.pageX 獲取x座標

evt.pageY 獲取y座標

evt.which 獲取鼠標按下的值或鍵盤按下的值（具體看什麼事件）

evt.stopPropagation() 取消事件冒泡

1九、動畫

show(3000),3秒顯示出來

hide(3000)，3秒隱藏完畢

slideUP(3000)，3秒隱藏完畢（像窗簾一下拉上去）

slideDown(3000)，3秒顯示出來（像窗簾一下拉下來）

fadeIn(3000)，3秒內淡入進來，顯示

fadeOut(3000),3秒內淡出，隱藏

fadeTo(3000,0.3),3秒內淡入淡出到透明度爲0.3止

toggle(3000),點擊按鈕若是當前是show,則爲hide;反之爲show

slideToggle(3000),點擊按鈕若是當前是slideUP,則爲slideDown;反之爲slideUP

fadeToggle(3000),點擊按鈕若是當前是fadeIn,則爲fadeOut;反之爲fadeIn

20、animate動畫

animate({height:'10px',width:'10px'},1000);1秒內完成某個動畫，花括號內是要完成的樣式

$(':animated').stop();中止當前正在執行的動畫，不會中止以後的動畫

$(':animated').stop(true);中止當前正在執行的動畫，而且清除以後隊列中的動畫

$(':animated').stop(true,true);//中止當前動畫，而且將元素設置到當前動畫正常結束時的位置，後續動畫隊列被清除

2一、jQuery.cookie插件

1）、cookie是保存到本地硬盤裏 2）、有必定安全性問題 3）、和瀏覽器相關 4）、通過瀏覽器寫入到本地硬盤 5）、和域名相關

6）、是由瀏覽器在用戶請求相同域名的時候自動攜帶一塊兒來發起請求的

7）、由於cookie是寫在客戶端瀏覽器的，因此能夠隨時刪除對應的cookie信息

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <script src="jQuery/scripts/jQuery-3.2.1.js"></script>
    <script src="jQuery/scripts/jquery.cookie.js"></script>
    <script type="text/javascript">
        $(function () {
            //一、檢查是否有對應的cookie
            if ($.cookie('uname')) {
                $('#pmsg').text('歡迎您'+$.cookie('uname')+'！');
            } else {
                $('#pmsg').text('歡迎您，遊客！');
            }
            $('#btn').click(function () {
                var user_name = $('#txt').val();
                $.cookie('uname', user_name, { expires: 7, path: '/', secure: false });
                alert('寫入成功！');
            });
        });
    </script>
</head>
<body>
    請輸入姓名：<input type="text" name="name" value="" id="txt" /><input type="button" name="name" value="登錄" id="btn" />
    <p id="pmsg">歡迎您，遊客！</p>
</body>
</html>