78-81

時間 2020-02-02

原文原文鏈接

jQuery和Dom關係以及jQuery版本

http://jquery.cuishifeng.cn/index.html
jQuery學習參考網址html

jQuery封裝了Dom、Bom、JavaScript，能夠快速的使用其相關功能和擴展jquery

jQuery版本：瀏覽器

版本1系列
版本2系列
版本3系列
推薦使用版本1，對老版本(IE8如下)瀏覽器兼容性更好，且版本1的jQuery功能在高版本中也是適用的。高版本的jQuery在老版本瀏覽器中不適用。
版本1中最高的版本是1.12

http://code.jquery.com/jquery/
jQuery下載地址dom

上圖：下載後的jQuery文件要放入目錄中，而後引入ide

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

</head>
<body>

    <div id="i1">123</div>

    <script src="jquery-1.12.4.js"></script>    <!--引入jQuery-->
    <script>
        jQuery("#i1");
        $("#i1");
    </script>
</body>
</html>

代碼說明：函數

jQuery("#i1") 用來jQuery關聯i1這個標籤； $("#i1")是同樣的，能夠用$符號來代替jquery。學習

上圖：
使用jQuery和document.getElementById均可以關聯i1這個標籤；
分別稱爲jQuery對象和document對象；
jQuery和document各自有類似的功能，也有不一樣的功能；
jQuery與document能夠相互轉換，轉換後可使用對方不一樣的功能。ui

上圖：
jQuery關聯使用$('#i1')[0]就轉換成document對象了。this

上圖：
將document轉成jQuery對象。code

jQuery選擇器

id選擇器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

</head>
<body>

    <div id="i1">123</div>
    <script src="jquery-1.12.4.js"></script>    <!--引入jQuery-->
    <script>
        $("#i1");   <!--選擇了id爲i1的標籤-->
    </script>
</body>
</html>

class選擇器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

</head>
<body>

    <div class="c1">123</div>
    <script src="jquery-1.12.4.js"></script>    <!--引入jQuery-->
    <script>
        $(".c1");   <!--選擇了class爲c1的標籤-->
    </script>
</body>
</html>

標籤選擇器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

</head>
<body>

    <div class="c1">
        <a>a</a>
        <a>b</a>
    </div>
    <div class="c2">
        <a>c</a>
        <a>d</a>
    </div>
    <script src="jquery-1.12.4.js"></script>    <!--引入jQuery-->
    <script>
        $("a");  <!--選擇了全部a標籤-->
    </script>
</body>
</html>

組合標籤

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

</head>
<body>

    <div id="i10" class="c1">
        <a>a</a>
        <a>b</a>
    </div>
    <div class="c2">
        <a>c</a>
        <a>d</a>
    </div>
    <script src="jquery-1.12.4.js"></script>    <!--引入jQuery-->
    <script>
        $("a,.c2,#i10"); <!--選擇了全部的a標籤和全部的c2標籤和全部i10標籤-->
    </script>
    </script>
</body>
</html>

上圖：能夠看到有4個a標籤

上圖：a標籤和c2標籤的組合

上圖：三個組合選擇

層級選擇器

多層選擇

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

</head>
<body>

    <div id="i10" class="c1">
        <div>
            <a>abcdefg</a>
        </div>
        <a>a</a>
        <a>b</a>
    </div>
    <div class="c2">
        <a>c</a>
        <a>d</a>
    </div>

    <script src="jquery-1.12.4.js"></script>    <!--引入jQuery-->
    <script>
        $("#i10 a");    <!--選擇#i10下面全部層級的a標籤-->
    </script>
</body>
</html>

代碼說明：

選擇了#i10下的3個a標籤

子層選擇

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

</head>
<body>

    <div id="i10" class="c1">
        <div>
            <a>abcdefg</a>
        </div>
        <a>a</a>
        <a>b</a>
    </div>
    <div class="c2">
        <a>c</a>
        <a>d</a>
    </div>

    <script src="jquery-1.12.4.js"></script>    <!--引入jQuery-->
    <script>
        $("#i10>a");    <!--只選擇#i10下一層的a標籤，不會選擇更深層-->
    </script>
</body>
</html>

first

<ul>
    <li>list item 1</li>
    <li>list item 2</li>
    <li>list item 3</li>
    <li>list item 4</li>
    <li>list item 5</li>
</ul>

<script>
    $('li:first');  <!--獲取匹配的第一個元素，也就是list item 1-->
</script>

其餘基本選擇器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

</head>
<body>

    <div id="i10" class="c1">
        <div>
            <a>abcdefg</a>
        </div>
        <a>a</a>
        <a>b</a>
    </div>
    <div class="c2">
        <a>c</a>
        <a>d</a>
    </div>

    <script src="jquery-1.12.4.js"></script>    <!--引入jQuery-->
    <script>
        $('#10 a:eq(0)')    <!--選擇#10下的全部a標籤的下標爲第0個a標籤-->
    </script>
</body>
</html>

屬性選擇器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

</head>
<body>

    <div id="i10" class="c1">
        <div>
            <a>abcdefg</a>
        </div>
        <a name="123">a</a>
        <a name="456">b</a>
    </div>
    <div class="c2">
        <a>c</a>
        <a>d</a>
    </div>

    <script src="jquery-1.12.4.js"></script>    <!--引入jQuery-->
    <script>
        $('#10 a:eq(0)')
    </script>
</body>
</html>

表單對象屬性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

</head>
<body>

    <input type="text" disabled>    <!--disabled爲不可編輯-->

    <div id="i10" class="c1">
        <div>
            <a>abcdefg</a>
        </div>
        <a name="123">a</a>
        <a name="456">b</a>
    </div>
    <div class="c2">
        <a>c</a>
        <a>d</a>
    </div>

    <script src="jquery-1.12.4.js"></script>    <!--引入jQuery-->
    <script>
        $(':disabled')  <!--選擇不可編輯的標籤-->
    </script>
</body>
</html>

上圖：由於disabled輸入框是不可編輯的

多選反選取消

全選、取消

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

    <input type="button" value="全選" onclick="checkAll();">
    <input type="button" value="反選" onclick="reverseAll();">
    <input type="button" value="取消" onclick="cancleAll();">

    <table border="1">      <!--設置表格-->
        <thead>     <!--表頭-->
            <tr>
                <th>選項</th>
                <th>IP</th>
                <th>PORT</th>
            </tr>
        </thead>
        <tbody id="tb"> <!--表內容-->
            <tr>
                <td><input type="checkbox"></td>
                <td>1.1.1.1</td>
                <td>80</td>
            </tr>
            <tr>
                <td><input type="checkbox"></td>
                <td>1.1.1.1</td>
                <td>80</td>
            </tr>
            <tr>
                <td><input type="checkbox"></td>
                <td>1.1.1.1</td>
                <td>80</td>
            </tr>
            <tr>
                <td><input type="checkbox"></td>
                <td>1.1.1.1</td>
                <td>80</td>
            </tr>
            <tr>
                <td><input type="checkbox"></td>
                <td>1.1.1.1</td>
                <td>80</td>
            </tr>
        </tbody>
    </table>

    <script src="jquery-1.12.4.js"></script>
    <script>
        <!--調用全選函數-->
        function checkAll() {
            $('#tb :checkbox').prop('checked',true)；  <!--關聯#tb標籤下的全部checkbox標籤，使用prop來對多選框進行編輯，checked爲true就全選-->
        }
        function cancleAll() {
            $('#tb :checkbox').prop('checked',false)；   <!--false所有取消選擇-->
        }

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

上2圖：點擊全選和取消均可以生效。

反選

dom與jQuery對象區分

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

    <input type="button" value="全選" onclick="checkAll();">
    <input type="button" value="反選" onclick="reverseAll();">
    <input type="button" value="取消" onclick="cancleAll();">

    <table border="1">
        <thead>
            <tr>
                <th>選項</th>
                <th>IP</th>
                <th>PORT</th>
            </tr>
        </thead>
        <tbody id="tb">
            <tr>
                <td><input type="checkbox"></td>
                <td>1.1.1.1</td>
                <td>80</td>
            </tr>
            <tr>
                <td><input type="checkbox"></td>
                <td>1.1.1.1</td>
                <td>80</td>
            </tr>
            <tr>
                <td><input type="checkbox"></td>
                <td>1.1.1.1</td>
                <td>80</td>
            </tr>
            <tr>
                <td><input type="checkbox"></td>
                <td>1.1.1.1</td>
                <td>80</td>
            </tr>
            <tr>
                <td><input type="checkbox"></td>
                <td>1.1.1.1</td>
                <td>80</td>
            </tr>
        </tbody>
    </table>

    <script src="jquery-1.12.4.js"></script>
    <script>
        function checkAll() {
            $('#tb :checkbox').prop('checked',true);
        }
        function cancleAll() {
            $('#tb :checkbox').prop('checked',false);
        }
        function reverseAll() {
            <!--使用each會循環每個元素-->
            $('#tb :checkbox').each(function () {
                console.log(this);  <!--this表明循環的每個元素內容-->
            })
        }
    </script>
</body>
</html>

上圖：點擊反選，會將每一個元素（this）打印出來。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

    <input type="button" value="全選" onclick="checkAll();">
    <input type="button" value="反選" onclick="reverseAll();">
    <input type="button" value="取消" onclick="cancleAll();">

    <table border="1">
        <thead>
            <tr>
                <th>選項</th>
                <th>IP</th>
                <th>PORT</th>
            </tr>
        </thead>
        <tbody id="tb">
            <tr>
                <td><input type="checkbox"></td>
                <td>1.1.1.1</td>
                <td>80</td>
            </tr>
            <tr>
                <td><input type="checkbox"></td>
                <td>1.1.1.1</td>
                <td>80</td>
            </tr>
            <tr>
                <td><input type="checkbox"></td>
                <td>1.1.1.1</td>
                <td>80</td>
            </tr>
            <tr>
                <td><input type="checkbox"></td>
                <td>1.1.1.1</td>
                <td>80</td>
            </tr>
            <tr>
                <td><input type="checkbox"></td>
                <td>1.1.1.1</td>
                <td>80</td>
            </tr>
        </tbody>
    </table>

    <script src="jquery-1.12.4.js"></script>
    <script>
        function checkAll() {
            $('#tb :checkbox').prop('checked',true);
        }
        function cancleAll() {
            $('#tb :checkbox').prop('checked',false);
        }
        function reverseAll() {
            // k表示下標
            $('#tb :checkbox').each(function (k) {
                console.log(k,this);
            })
        }
    </script>
</body>
</html>

上圖：將每一個CheckBox的下標給打印出來

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

    <input type="button" value="全選" onclick="checkAll();">
    <input type="button" value="反選" onclick="reverseAll();">
    <input type="button" value="取消" onclick="cancleAll();">

    <table border="1">
        <thead>
            <tr>
                <th>選項</th>
                <th>IP</th>
                <th>PORT</th>
            </tr>
        </thead>
        <tbody id="tb">
            <tr>
                <td><input type="checkbox"></td>
                <td>1.1.1.1</td>
                <td>80</td>
            </tr>
            <tr>
                <td><input type="checkbox"></td>
                <td>1.1.1.1</td>
                <td>80</td>
            </tr>
            <tr>
                <td><input type="checkbox"></td>
                <td>1.1.1.1</td>
                <td>80</td>
            </tr>
            <tr>
                <td><input type="checkbox"></td>
                <td>1.1.1.1</td>
                <td>80</td>
            </tr>
            <tr>
                <td><input type="checkbox"></td>
                <td>1.1.1.1</td>
                <td>80</td>
            </tr>
        </tbody>
    </table>

    <script src="jquery-1.12.4.js"></script>
    <script>
        function checkAll() {
            $('#tb :checkbox').prop('checked',true);
        }
        function cancleAll() {
            $('#tb :checkbox').prop('checked',false);
        }
        function reverseAll() {
            $('#tb :checkbox').each(function (k) {
                // console.log(this);
                console.log($(this));   //this在這裏默認是dom對象，須要將其轉成jQuery對象後才能使用jQuery相關功能。
            })
        }
    </script>
</body>
</html>

上圖：成功轉換後，能夠看到jQuery對象都被[]給括起來的。

使用dom方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

    <input type="button" value="全選" onclick="checkAll();">
    <input type="button" value="反選" onclick="reverseAll();">
    <input type="button" value="取消" onclick="cancleAll();">

    <table border="1">
        <thead>
            <tr>
                <th>選項</th>
                <th>IP</th>
                <th>PORT</th>
            </tr>
        </thead>
        <tbody id="tb">
            <tr>
                <td><input type="checkbox"></td>
                <td>1.1.1.1</td>
                <td>80</td>
            </tr>
            <tr>
                <td><input type="checkbox"></td>
                <td>1.1.1.1</td>
                <td>80</td>
            </tr>
            <tr>
                <td><input type="checkbox"></td>
                <td>1.1.1.1</td>
                <td>80</td>
            </tr>
            <tr>
                <td><input type="checkbox"></td>
                <td>1.1.1.1</td>
                <td>80</td>
            </tr>
            <tr>
                <td><input type="checkbox"></td>
                <td>1.1.1.1</td>
                <td>80</td>
            </tr>
        </tbody>
    </table>

    <script src="jquery-1.12.4.js"></script>
    <script>
        function checkAll() {
            $('#tb :checkbox').prop('checked',true);
        }
        function cancleAll() {
            $('#tb :checkbox').prop('checked',false);
        }
        function reverseAll() {
            $('#tb :checkbox').each(function (k) {

                //使用dom方法
                //checked默認等於true
                if(this.checked){
                    this.checked =false;    //若是等於true就改爲false
                }
                else {
                    this.checked = true;    //若是等於false就改爲true
                }
            })
        }
    </script>
</body>
</html>

上2圖：選中其中兩個，而後點擊反選，起到了反選效果。

使用jQuery方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

    <input type="button" value="全選" onclick="checkAll();">
    <input type="button" value="反選" onclick="reverseAll();">
    <input type="button" value="取消" onclick="cancleAll();">

    <table border="1">
        <thead>
            <tr>
                <th>選項</th>
                <th>IP</th>
                <th>PORT</th>
            </tr>
        </thead>
        <tbody id="tb">
            <tr>
                <td><input type="checkbox"></td>
                <td>1.1.1.1</td>
                <td>80</td>
            </tr>
            <tr>
                <td><input type="checkbox"></td>
                <td>1.1.1.1</td>
                <td>80</td>
            </tr>
            <tr>
                <td><input type="checkbox"></td>
                <td>1.1.1.1</td>
                <td>80</td>
            </tr>
            <tr>
                <td><input type="checkbox"></td>
                <td>1.1.1.1</td>
                <td>80</td>
            </tr>
            <tr>
                <td><input type="checkbox"></td>
                <td>1.1.1.1</td>
                <td>80</td>
            </tr>
        </tbody>
    </table>

    <script src="jquery-1.12.4.js"></script>
    <script>
        function checkAll() {
            $('#tb :checkbox').prop('checked',true);
        }
        function cancleAll() {
            $('#tb :checkbox').prop('checked',false);
        }
        function reverseAll() {
            $('#tb :checkbox').each(function (k) {

                //經過jQuery方法
                //若是this等於true
                if($(this).prop('checked')){
                    $(this).prop('checked',false)   //就將this改成false
                }else {
                    $(this).prop('checked',true)    //不然this改成true
                }

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

代碼說明：

若是是一個選項$(this).prop('checked')就表示對checked進行了選擇，若是是$(this).prop('checked',false)就表示對checked進行賦值。

上2圖：使用jQuery方法，作出反選效果。

jQuery三元運算

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

    <input type="button" value="全選" onclick="checkAll();">
    <input type="button" value="反選" onclick="reverseAll();">
    <input type="button" value="取消" onclick="cancleAll();">

    <table border="1">
        <thead>
            <tr>
                <th>選項</th>
                <th>IP</th>
                <th>PORT</th>
            </tr>
        </thead>
        <tbody id="tb">
            <tr>
                <td><input type="checkbox"></td>
                <td>1.1.1.1</td>
                <td>80</td>
            </tr>
            <tr>
                <td><input type="checkbox"></td>
                <td>1.1.1.1</td>
                <td>80</td>
            </tr>
            <tr>
                <td><input type="checkbox"></td>
                <td>1.1.1.1</td>
                <td>80</td>
            </tr>
            <tr>
                <td><input type="checkbox"></td>
                <td>1.1.1.1</td>
                <td>80</td>
            </tr>
            <tr>
                <td><input type="checkbox"></td>
                <td>1.1.1.1</td>
                <td>80</td>
            </tr>
        </tbody>
    </table>

    <script src="jquery-1.12.4.js"></script>
    <script>
        function checkAll() {
            $('#tb :checkbox').prop('checked',true);
        }
        function cancleAll() {
            $('#tb :checkbox').prop('checked',false);
        }
        function reverseAll() {
            $('#tb :checkbox').each(function (k) {
                // 三元運算格式
                //$(this).prop('checked')：表示若是checked等於true，就將false賦值給v，不然就將true賦值給v

                var v = $(this).prop('checked')?false:true;
                $(this).prop('checked',v);  //將checked賦值成v
            })
        }
    </script>
</body>
</html>

上2圖：使用jQuery三元運算的方式作出反選效果。

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。