78-81

サーバー 2019-10-25 23:12:33 訪問数: null

jQueryとjQueryのバージョンとドムの関係

http://jquery.cuishifeng.cn/index.html
jQueryのリファレンスサイトを学びます

jQueryのは、ドム、ボム、JavaScriptをカプセル化し、すばやく機能とそれに関連する拡張機能を使用することができます

jQueryのバージョン：

  • バージョン1シリーズ
  • バージョン2シリーズ
  • バージョン3シリーズは、
    高いバージョンでは、バージョン1を使用して、旧バージョン（IE8以下）のためのより良いブラウザの互換性をお勧めします、とjQueryの機能バージョン1も適用可能です。jQueryのの高いバージョンのブラウザーの古いバージョンには適用されません。
    最高のバージョン1は1.12であります

http://code.jquery.com/jquery/
jQueryのダウンロード

ここでの説明を入力します。

フィギュア：そのディレクトリに配置するファイルをダウンロードした後にjQuery、および導入

<!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は」）I1 jQueryのラベルを関連付けるために使用され、$（「＃I1は」）と同じであり、代わりにシンボル$ jQueryを用いてもよいです。

ここでの説明を入力します。

図：
jQueryののdocument.getElementByIdとこのタグI1に関連付けることができ、
jQueryのオブジェクト、文書オブジェクトをいう;
jQueryと各文書は、同様の機能を有する、異なる機能を有し、
文書を互いに変換することができるjQueryを、変換後に使用することができます他のさまざまな機能。

ここでの説明を入力します。

図：
jQueryのは、アソシエーション$（「＃1 I1」）で使用 0] ドキュメントオブジェクトに変換されます。

ここでの説明を入力します。

トップ：
jQueryオブジェクトに変換した文書。

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>

クラスセレクタ

<!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タグを見ることができます

ここでの説明を入力します。

上：タグやラベルC2の組み合わせ

ここでの説明を入力します。

上：3の組み合わせを選択

レベルセレクタ

  • マルチレイヤの選択
<!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>

コード説明：

＃1 I10に選択される3タグ

ここでの説明を入力します。

  • サブレイヤを選択
<!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>

最初

<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>

その他の基本的なセレクタ

ここでの説明を入力します。

  • EQ
<!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>

ここでの説明を入力します。

上：入力ボックスが編集できないので無効

キャンセル複数の選択肢抗選挙

すべて選択、キャンセル

<!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>

ここでの説明を入力します。

上記の各要素を印刷（この）で、選択範囲を反転します。

<!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>

ここでの説明を入力します。

トップ：チェックボックスの各インデックスプリント

<!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：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>

コード説明：

それはオプション$（この）.propであれば、それは$（この）.prop（「確認」、false）のであれば（「確認」）、それをチェックすることが選択されている、それは割り当てをチェックすることを意味します。

ここでの説明を入力します。

ここでの説明を入力します。

図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のは、選択されていない効果を作りました。

おすすめ

転載: blog.51cto.com/daimalaobing/2445616
おすすめ
ランキング
Python 描画 3D 動的ヒストグラム コード チュートリアル
[vue3 共通エラー 5] Uncaught (in Promise) TypeError: xxx は関数ではありません
シンプルアップロードExcelファイルやデータベースにデータを追加
springboot における import アノテーションの役割
numpy 多维矩阵的维度交换
WMS システム - ウェーブ管理
Redis（7）マスター/スレーブレプリケーション
三北斗七星星座コアグローバルシステムの導入は完了です！グローバルネットワークを推進するために、
sql server语法——排序查询
続行することはできません立ち往生
アーカイブ
もっと
2024-05-16(24)
2024-05-15(5)
2024-05-14(9)
2024-05-13(8)
2024-05-12(27)
2024-05-11(31)
2024-05-10(33)
2024-05-09(30)
2024-05-08(18)
2024-05-07(34)

コードワールド

© 2018 codetd.com