JQueryの簡単な学習

プログラミング 2023-09-17 08:54:36 訪問数: null

JQuery

JavaScriptライブラリ

倉庫: この倉庫にはさまざまなものを入れることができます。何かを見つけるには、倉庫内を検索するだけです。

JavaScript ライブラリ: 特定のカプセル化されたコレクション (メソッドと関数) であるライブラリ。多くの関数をカプセル化するという観点からライブラリを理解すると、このライブラリには、アニメーション、非表示、表示、要素の取得など、多くの事前定義された関数がカプセル化されています。

簡単な理解: これは、ネイティブ JS コードをカプセル化して内部に保存する JS ファイルです。このようにして、これらのカプセル化された関数を迅速かつ効率的に使用できます。

たとえば、jQuery は DOM を迅速かつ便利に操作するために設計されており、基本的に関数 (メソッド) で満たされています。

jQueryの基本的な使い方

基本的な手順

  1. jQueryの紹介

    <script src="../js文件/jquery.min.js"></script>

  2. ただ使ってください

jQuery入力関数

	// 1.等着页面DOM加载完毕再去执行js代码
    $(document).ready(function() {
    
    
        ...   //此处是页面DOM加载完成的入口
    })
    // 2.等着页面DOM加载完毕再去执行js代码
    $(function() {
    
    
         ...   //此处是页面DOM加载完成的入口
    })
  1. DOM 構造がレンダリングされた後に内部コードを実行できます。すべての外部リソースがロードされるまで待つ必要はありません。jQuery はカプセル化を完了するのに役立ちます。
  2. ネイティブ JS の DOMContentLoaded と同等です。
  3. ネイティブ JS のロード イベントとは異なり、内部コードを実行する前に、ページ ドキュメント、外部 JS ファイル、CSS ファイル、画像がロードされるのを待ちます。

jQueryのトップレベルオブジェクト$

  1. これは jQuery のエイリアスです。コード内で代わりに jQ uery を使用できます。jQuery のエイリアスです。コード内で代わりに jQuery を使用できます。これはjQ ueryの別名で、コード内で代わりにjQ ueryを使用することもできますが、便宜上、通常は $ が直接使用されます。

  2. これは jQuery のトップレベル オブジェクトであり、ネイティブ Java Script のウィンドウに相当します。この要素は jQuery のトップレベル オブジェクトであり、ネイティブ JavaScript の window に相当します。要素を活用するこれはjQueryの最上位オブジェクトであり、ネイティブJavaScriptのウィンドウに相当します。_ _ 要素をQuery オブジェクトにラップすることで、jQuery メソッドを呼び出すことができます。

jQuery オブジェクトと DOM オブジェクト

  1. ネイティブJSを使用して取得したオブジェクトはDOMオブジェクトです
  2. jQueryメソッドで取得した要素がjQueryオブジェクトです。
  3. jQuery オブジェクトの本質は、$ を使用して DOM オブジェクトをパッケージ化することによって生成されるオブジェクトです (擬似配列の形式で格納されます)。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div></div>
    <span></span>
    <script>
        var mydiv = document.querySelector('div')
        console.dir(mydiv)

        $('div')
        console.dir($('div'))
        // jQuery 对象只能使用jQuery方法，DOM对象则使用原生的 JavaScirpt属性和方法
        // mydiv.style.display = 'none'
        // mydiv.hide()这个无法实现
        // $('div').style.display = 'none'这个无法实现

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

DOM オブジェクトと jQuery オブジェクトは相互に変換できます。

ネイティブ js は jQuery よりも大きいため、一部のネイティブ プロパティとメソッドは jQuery によってカプセル化されません。これらのプロパティとメソッドを使用するには、使用する前に jQuery オブジェクトを DOM オブジェクトに変換する必要があります。

  1. DOM オブジェクトを jQuery オブジェクトに変換します: $(DOM オブジェクト)
$('div')
  1. jQuery オブジェクトを DOM オブジェクトに変換する (2 つの方法)
$('div')[index]      index是索引号

$('div').get(index)    index是索引号

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js文件/jquery.min.js"></script>
</head>
<body>
    <video src="mov.mp4" muted></video>
    <script>
        // DOM对象转换为jQuery对象
        //(1）我们直接获取视频，得到就是jQuery对象I
        $('video')
        // (2）我们已经使用原生js获取过来DOM对象
        var myvideo = document.querySelector('video')
        $(myvideo)
        // jQuery对象转换为DOM对象
        // myvideo.play()
        $(myvideo)[0].play()
        $(myvideo).get(0).play()
    </script>
</body>
</html>

よく使用される API

jQueryセレクター

ネイティブ S では要素を取得する方法が多数あり、非常に複雑で互換性が一貫していないため、要素の取得を統一して標準化するために jQuery でカプセル化しました。

$(“选择器”)//里面选择器直接写CSS选择器即可，但是要加引号
基本セレクター
名前 使用法 説明する
IDセレクター $('#id') 指定したIDの要素を取得する
すべて選択セレクター $('*') すべての要素に一致する
クラスセレクター $('.class') 同じクラスの要素を取得する
タグセレクター $('div') 同じタイプのタグのすべての要素を取得します
ユニオンセレクター $('div,p,li') 複数の要素を選択する
交差点セレクター $('li.current') 交差要素
レベルセレクター
名前 使用法 説明する
子孫セレクター $(“ul>li”); > 記号を使用して、親子レベルの要素を取得します。孫レベルの要素は取得されないことに注意してください。
子孫セレクター $(“ウルリ”); 孫などを含む ul の下のすべての li 要素を取得するには、スペースを使用して子孫セレクターを表します。
jQueryの暗黙的な反復

内部 DOM 要素 (擬似配列形式で格納されている) を走査するプロセスは、暗黙的反復と呼ばれます。

シンプルな理解: 一致したすべての要素をループし、再度ループすることなく対応するメソッドを実行することで、操作が簡素化され、呼び出しが容易になります。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js文件/jquery.min.js"></script>
</head>
<body>
    <div>我是div</div>
    <div>我是div</div>
    <div>我是div</div>
    <div>我是div</div>
    <ul>
        <li>lili</li>
        <li>lili</li>
        <li>lili</li>
    </ul>
    <script>
        //1.获取四个div
        $('div')
        //2.设置颜色  jquery不能使用style
        $('div').css('background','pink')
        $('ul li').css('color','red')
    </script>
</body>
</html>
jQueryフィルターセレクター
文法 使用法 説明する
：初め $('リ:ファースト') 最初の li 要素を取得する
：最後 $('リ:最後') 最後の li 要素を取得する
:eq(インデックス) $('li:eq(2)') 取得した li 要素のうち、インデックス番号 2 の要素を選択します。インデックス番号 Index は 0 から始まります。
：奇数 $('li:奇数') 取得した li 要素のうち、インデックス番号が奇数の要素を選択します
：平 $('リ:偶数') 取得した li 要素のうち、インデックス番号が偶数の要素を選択します。 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js文件/jquery.min.js"></script>
</head>
<body>
    <div>我是div</div>
    <div>我是div</div>
    <div>我是div</div>
    <div>我是div</div>
    <ul>
        <li>lili</li>
        <li>lili</li>
        <li>lili</li>
    </ul>
    <script>
        //1.获取四个div
        $('div')
        //2.设置颜色  jquery不能使用style
        $('div').css('background','pink')
        $('ul li').css('color','red')
        $(function() {
      
      
            $('div:first').css('color','red')
            $('ul li:eq(2)').css('color','blue')
        })
    </script>
</body>
</html>
jQueryのフィルタリング方法（ポイント）
文法 使用法 説明する
親（） $(“li”).parent(); 親を検索
子供(セレクター) $(“ul”).children(“li”); $("u1>li") に相当し、最も近いレベル (生物学的な息子)
検索(セレクタ) $(“ul”).find(“li”); $(""ul li")、子孫セレクターと同等
兄弟(セレクター) $(“.first”).siblings(“li”); それ自体を除く兄弟ノードを検索します
nextAll([expr]) $(“.first”).nextAll(); 現在の要素の後のすべての兄弟要素を検索します
prevtAll([expr]) $(“.last”).prevtAll(); 現在の要素の前にあるすべての兄弟要素を検索します
hasClass(クラス) $(“div”).hasClass('protected'); 現在の要素に特定のクラスが含まれているかどうかを確認し、含まれている場合は true を返します
eq(インデックス) $(“li”).eq(2); $("li:eq(2)") と同等、インデックスは 0 から始まります

覚えておくべき重要なポイント:parent()children()find()兄弟()eq()

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div class="gf">
        <div class="father">
            <div class="son">儿子</div>
        </div>
    </div>

    <div class="nav">
        <p>wsp</p>
        <div>
            <p>wspp</p>
        </div>
    </div>
    <ol>
        <li>我是ol 的li</li>
        <li class="item">我是ol 的li</li>
        <li>我是ol 的li</li>
        <li>我是ol 的li</li>
    </ol>
    <ul>
        <li>我是ol 的li</li>
        <li>我是ol 的li</li>
        <li>我是ol 的li</li>
        <li>我是ol 的li</li>
    </ul>
    <script>
        // 注意一下都是方法带括号
        $(function() {
      
      
            //父   parent()
            console.log($('.son').parent());
            //子
            // (1)亲儿子 children(selector)
            $(".nav").children('p').css('color','red');
            //兄
            $(function() {
      
      
                //1．兄弟元素siblings除了自身元素之外的所有亲兄弟
                $('ol .item').siblings('li').css('color','red')
                // 2．第n个元素
                // (1)我们可以利用选择器的方式选择
                $("ul li:eq(2)").css('color','red')
                // (2）我们可以利用选择方法的方式选择（推荐）
                $("ul li").eq(2).css('color','red')
                // 3．判断是否有某个类名
                $("div:first").hasClass('current')
            })
        })
    </script>
</body>
</html>
Sina ドロップダウン メニュー
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js文件/jquery.min.js"></script>
    <style>
        * {
      
      
            margin: 0;
            padding: 0;
        }
        
        li {
      
      
            list-style-type: none;
        }
        
        a {
      
      
            text-decoration: none;
            font-size: 14px;
        }
        
        .nav {
      
      
            margin: 100px;
        }
        
        .nav>li {
      
      
            position: relative;
            float: left;
            width: 80px;
            height: 41px;
            text-align: center;
        }
        
        .nav li a {
      
      
            display: block;
            width: 100%;
            height: 100%;
            line-height: 41px;
            color: #333;
        }
        
        .nav>li>a:hover {
      
      
            background-color: #eee;
        }
        
        .nav ul {
      
      
            display: none;
            position: absolute;
            top: 41px;
            left: 0;
            width: 100%;
            border-left: 1px solid #FECC5B;
            border-right: 1px solid #FECC5B;
        }
        
        .nav ul li {
      
      
            border-bottom: 1px solid #FECC5B;
        }
        
        .nav ul li a:hover {
      
      
            background-color: #FFF5DA;
        }
    </style>
</head>
<body>
    <ul class="nav">
        <li>
            <a href="#">微博</a>
            <ul>
                <li>
                    <a href="">私信</a>
                </li>
                <li>
                    <a href="">评论</a>
                </li>
                <li>
                    <a href="">@我</a>
                </li>
            </ul>
        </li>
        <li>
            <a href="#">微博</a>
            <ul>
                <li>
                    <a href="">私信</a>
                </li>
                <li>
                    <a href="">评论</a>
                </li>
                <li>
                    <a href="">@我</a>
                </li>
            </ul>
        </li>
        <li>
            <a href="#">微博</a>
            <ul>
                <li>
                    <a href="">私信</a>
                </li>
                <li>
                    <a href="">评论</a>
                </li>
                <li>
                    <a href="">@我</a>
                </li>
            </ul>
        </li>
    </ul>
    <script>
        $(function() {
      
      
            // 鼠标经过
            $('.nav>li').mouseover(function() {
      
      
                // $(this) jQuery    当前元素  this不要加引号
                // show()  显示元素
                $(this).children("ul").show()

            })
            // 鼠标离开
            $(".nav>li").mouseout(function() {
      
      
                $(this).children("ul").hide();
            })
        })
    </script>
</body>
</html>
排他的思考
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js文件/jquery.min.js"></script>
</head>
<body>
    <button>点击</button>
    <button>点击</button>
    <button>点击</button>
    <button>点击</button>
    <button>点击</button>
    <button>点击</button>

    <script>
        $(function() {
      
      
            // 1．隐式迭代给所有的按钮都绑定了点击事件
            $("button").click(function() {
      
      
                //2．当前的元素变化背景颜色
                $(this).css("background","pink")
                // 3．其余的兄弟去掉背景颜色
                $(this).siblings("button").css("background",'')
                // 链式编程
                $(this).css('color','red').siblings().css('color','')
            })
        })
    </script>
</body>
</html>

jQuery スタイルの操作

jQuery は、CSS メソッドを使用して単純な要素のスタイルを変更できます。また、クラスを操作して複数のスタイルを変更することもできます。

  1. パラメータとして属性名のみを記述した場合は、属性値が返されます。

    $(this).css('color');

  2. パラメータは、カンマで区切られた属性名と属性値です。これらは、一連のスタイルを設定します。属性は引用符で囲む必要があります。値が数値の場合、後に単位や引用符を付ける必要はありません。マーク。

    $(this).css('color',"red");

  3. パラメータは、複数のスタイル セットの設定を容易にするオブジェクトの形式にすることができます。属性名と属性値はコロンで区切られており、属性にはプラス記号は必要ありません。

    $(this).css('color':"red","font-size":"20px");
クラススタイルメソッドの設定

機能としては先ほどのclassListと同様にクラススタイルを操作できるものですが、操作クラス内のパラメータにドットを付けないように注意してください。

  1. クラスの追加

    $("div").addClass("current");

  2. クラスの削除

    $("div").removeClass("current")

  3. クラスを切り替える

    $("div").toggleClass("current")

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js文件/jquery.min.js"></script>
    <style>
        div{
      
      
            width: 200px;
            height: 200px;
            background-color: red;
            margin: 100px auto;
            transition: all 0.5s;
        }
        .current {
      
      
            background-color: pink;
            transform: rotate(360deg);
        }
    </style>
</head>
<body>
    <div class="current"></div>
    <script>
        $(function() {
      
      
            // //1．添加类addc1ass()
            // $("div").addClass("current")
            // // 2．删除类 removeClass()
            // $("div").removeClass("current")
            // // 1．切换类 toggleClass()
            // $("div").toggleClass("current")
            $("div").click(function() {
      
      
                $(this).toggleClass("current")
            })
        })
    </script>
</body>
</html>
タブバーの切り替え

上の li をクリックして、現在のクラスを現在の li に追加し、他の兄弟からクラスを削除します。

クリックしながら、現在の li のインデックス番号を取得します

下部の対応するインデックス番号を持つ項目を表示し、残りの項目を非表示にします。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js文件/jquery.min.js"></script>
    <style>
        * {
      
      
            margin: 0;
            padding: 0;
        }
        
        li {
      
      
            list-style-type: none;
        }
        
        .tab {
      
      
            width: 978px;
            margin: 100px auto;
        }
        
        .tab_list {
      
      
            height: 39px;
            border: 1px solid #ccc;
            background-color: #f1f1f1;
        }
        
        .tab_list li {
      
      
            float: left;
            height: 39px;
            line-height: 39px;
            padding: 0 20px;
            text-align: center;
            cursor: pointer;
        }
        
        .tab_list .current {
      
      
            background-color: #c81623;
            color: #fff;
        }
        
        .item_info {
      
      
            padding: 20px 0 0 20px;
        }
        
        .item {
      
      
            display: none;
        }
    </style>
</head>
<body>
    <div class="tab">
        <div class="tab_list">
            <ul>
                <li class="current">商品介绍</li>
                <li>规格与包装</li>
                <li>售后保障</li>
                <li>商品评价(50000)</li>
                <li>手机社区</li>
            </ul>
        </div>
        <div class="tab_con">
            <div class="item" style="display: block;">
                商品介绍模块内容
            </div>
            <div class="item">
                规格与包装模块内容
            </div>
            <div class="item">
                售后保障模块内容
            </div>
            <div class="item">
                商品评价(50000)模块内容
            </div>
            <div class="item">
                手机社区模块内容
            </div>

        </div>
    </div>
    <script>
        // 1.点击上部的li，当前li添加current类，其余兄弟移除类。
        $(function() {
      
      
            $(".tab_list li").click(function() {
      
      
                $(this).addClass('current').siblings().removeClass("current")
                // 2.点击的同时，得到当前li的索引号
                var index = $(this).index()
                console.log(index);
                // 3.让下部里面相应索引号的item显示，其余的item隐藏
                $(".tab_con .item").eq(index).show().siblings().hide()
            })
        })
        
        

    </script>
</body>
</html>
クラス操作と className の違い

ネイティブ JS の className は、要素内の元のクラス名を上書きします。

jQuery のクラス操作は、指定されたクラスに対してのみ動作し、元のクラス名には影響しません。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
      
      
            width: 200px;
            height: 200px;
            margin: 100px auto;
            transform: rotate(360deg);
        }
    </style>
    <script src="../js文件/jquery.min.js"></script>
</head>
<body>
    <div class="one"></div>
    <script>
        // var one = document.querySelector(".one")
        // one.className = "two"
        // $(".one").addClass("two")   这个addclass相当于追加类名不影响以前的类名
        // $(".one").removeClass("two")
    </script>
</body>
</html>

jQuery効果

jQuery は多くのアニメーション効果をカプセル化します。最も一般的なものは次のとおりです。

見せかけの 滑り台 フェードインとフェードアウト カスタムアニメーション
見せる（） スライドダウン() ファデルン() アニメート()
隠れる（） 上にスライドします（） フェードアウト（）
トグル（） slideToggle() フェードトグル()
fadeTo()
  1. 構文仕様を表示
show([speed,[easing],[fn]])

  1. 表示パラメータ

    (1) パラメータを省略し、アニメーションを行わずに直接表示することができます。

    (2) 速度: 3 つの所定の速度 (「遅い」、「標準」、または「速い」) のいずれかの文字列、またはアニメーションの継続時間を表すミリ秒の値 (例: 1000)。

    (3) イージング: (オプション) スイッチング効果を指定するために使用されます。デフォルトは「swing」で、利用可能なパラメータは「linear」です。

    (4) fn: コールバック関数。アニメーション終了時に実行される関数で、要素ごとに 1 回実行されます。

  2. 隠し構文の仕様

hide([speed,[easing],[fn]])

  1. 表示パラメータ

    (1) パラメータを省略し、アニメーションを行わずに直接表示することができます。

    (2) 速度: 3 つの所定の速度 (「遅い」、「標準」、または「速い」) のいずれかの文字列、またはアニメーションの継続時間を表すミリ秒の値 (例: 1000)。

    (3) イージング: (オプション) スイッチング効果を指定するために使用されます。デフォルトは「swing」で、利用可能なパラメータは「linear」です。

    (4) fn: コールバック関数。アニメーション終了時に実行される関数で、要素ごとに 1 回実行されます。

  2. スイッチ構文の仕様

toggle ([speed,[easing],[fn]])

  1. 表示パラメータ

    (1) パラメータを省略し、アニメーションを行わずに直接表示することができます。

    (2) 速度: 3 つの所定の速度 (「遅い」、「標準」、または「速い」) のいずれかの文字列、またはアニメーションの継続時間を表すミリ秒の値 (例: 1000)。

    (3) イージング: (オプション) スイッチング効果を指定するために使用されます。デフォルトは「swing」で、利用可能なパラメータは「linear」です。

    (4) fn: コールバック関数。アニメーション終了時に実行される関数で、要素ごとに 1 回実行されます。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js文件/jquery.min.js"></script>
    <style>
        div{
      
      
            width: 150px;
            height: 300px;
            background-color: pink;
        }
    </style>

</head>
<body>
    <button>显示</button>
    <button>隐藏</button>
    <button>切换</button>
    <div></div>

    <script>
        $(function() {
      
      
            $("button").eq(1).click(function() {
      
      
                $("div").hide(1000,function() {
      
      
                    alert(1) //回调函数
                })
            })

            $("button").eq(0).click(function() {
      
      
                $("div").show(1000,function() {
      
      
                    alert(1) //回调函数
                })
            })
            $("button").eq(2).click(function() {
      
      
                //一般情况下，我们都不加参数直接显示隐藏就可以了
                $("div").toggle(1000)
            })
        })
    </script>
</body>
</html>
スライド効果
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js文件/jquery.min.js"></script>
    <style>
        div{
      
      
            width: 150px;
            height: 300px;
            background-color: pink;
        }
    </style>
</head>
<body>
    <button>下拉滑动</button>
    <button>上拉滑动</button>
    <button>切换滑动</button>
    <div></div>

    <script>
        $(function() {
      
      
            $("button").eq(1).click(function() {
      
      
                // 上拉滑动
                $("div").slideUp(1000,function() {
      
      
                    alert(1) //回调函数
                })
            })

            $("button").eq(0).click(function() {
      
      
                // 下拉滑动
                $("div").slideDown(1000,function() {
      
      
                    alert(1) //回调函数
                })
            })
            $("button").eq(2).click(function() {
      
      
                //一般情况下，我们都不加参数直接显示隐藏就可以了
                $("div").slideToggle(1000)
            })
        })
    </script>
</body>
</html>
イベント切り替え
hover([over,]out)

(1) over: マウスが要素上に移動したときにトリガーされる関数 (mouseenter と同等)

(2) out: マウスが要素の外に出たときにトリガーされる関数 (mouseleave に相当)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js文件/jquery.min.js"></script>
    <style>
        * {
      
      
            margin: 0;
            padding: 0;
        }
        
        li {
      
      
            list-style-type: none;
        }
        
        a {
      
      
            text-decoration: none;
            font-size: 14px;
        }
        
        .nav {
      
      
            margin: 100px;
        }
        
        .nav>li {
      
      
            position: relative;
            float: left;
            width: 80px;
            height: 41px;
            text-align: center;
        }
        
        .nav li a {
      
      
            display: block;
            width: 100%;
            height: 100%;
            line-height: 41px;
            color: #333;
        }
        
        .nav>li>a:hover {
      
      
            background-color: #eee;
        }
        
        .nav ul {
      
      
            display: none;
            position: absolute;
            top: 41px;
            left: 0;
            width: 100%;
            border-left: 1px solid #FECC5B;
            border-right: 1px solid #FECC5B;
        }
        
        .nav ul li {
      
      
            border-bottom: 1px solid #FECC5B;
        }
        
        .nav ul li a:hover {
      
      
            background-color: #FFF5DA;
        }
    </style>
</head>
<body>
    <ul class="nav">
        <li>
            <a href="#">微博</a>
            <ul>
                <li>
                    <a href="">私信</a>
                </li>
                <li>
                    <a href="">评论</a>
                </li>
                <li>
                    <a href="">@我</a>
                </li>
            </ul>
        </li>
        <li>
            <a href="#">微博</a>
            <ul>
                <li>
                    <a href="">私信</a>
                </li>
                <li>
                    <a href="">评论</a>
                </li>
                <li>
                    <a href="">@我</a>
                </li>
            </ul>
        </li>
        <li>
            <a href="#">微博</a>
            <ul>
                <li>
                    <a href="">私信</a>
                </li>
                <li>
                    <a href="">评论</a>
                </li>
                <li>
                    <a href="">@我</a>
                </li>
            </ul>
        </li>
    </ul>
    <script>
        $(function() {
      
      
            // // 鼠标经过
            // $('.nav>li').mouseover(function() {
      
      
            //     // $(this) jQuery    当前元素  this不要加引号
            //     // show()  显示元素
            //     // $(this).children("ul").show()
            //     $(this).children("ul").slideDown(500)

            // })
            // // 鼠标离开
            // $(".nav>li").mouseout(function() {
      
      
            //     $(this).children("ul").slideUp(200)
            // })

            // 1.事件切换   hover就是鼠标经过和离开的复合写法
            // $(".nav>li").hover(function() {
      
      
            //     $(this).children("ul").slideDown(500)
            // },function() {
      
      
            //     $(this).children("ul").slideUp(200)
            // })
            // 2.事件切换 hover如果只写一个函数，那么鼠标经过和鼠标离开都会触发这个函数
            $(".nav>li").hover(function() {
      
      
                // stop  方法必须写到动画的前面
                $(this).children("ul").stop().slideToggle(300)
            })
        })
    </script>
</body>
</html>
アニメーションキューとその停止キューメソッド

1. アニメーションまたはエフェクトのキュー

アニメーションまたはエフェクトは一度トリガーされると実行されます。複数回トリガーされると、複数のアニメーションまたはエフェクトが実行のためにキューに入れられます。

2. 行列をやめる

stop()

(1) stop(メソッドはアニメーションやエフェクトを停止するために使用されます。

(2) 注: stop(アニメーションまたはエフェクトの前に記述することは、最後のアニメーションを停止して終了することと同じです。

フェード効果

1. フェードイン効果の文法仕様

fadeIn([speed,[easing],[fn]])

2. フェードアウト効果の文法仕様

fadeOut([speed,[easing],[fn]])

3. スイッチングエフェクトシンタックスの仕様

fadeToggle([speed,[easing],[fn]])

4.指定した不透明度に徐々に調整します

fadeTo([speed,opacity,[easing],[fn]])

エフェクトパラメータ

(1) 不透明度の透明度は高く、値は 0 ～ 1 である必要があります。

(2) 速度: 3 つの所定の速度 (「遅い」、「標準」、または「速い」) のいずれかの文字列、またはアニメーションの継続時間を示すミリ秒の値 (1000 など)。書かなければなりません

(3) イージング: (オプション) スイッチング効果を指定するために使用されます。デフォルトは「swing」で、利用可能なパラメータは「linear」です。

ハイライト効果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css">
        * {
      
      
            margin: 0;
            padding: 0;
        }
        
        ul {
      
      
            list-style: none;
        }
        
        body {
      
      
            background: #000;
        }
        
        .wrap {
      
      
            margin: 100px auto 0;
            width: 630px;
            height: 394px;
            padding: 10px 0 0 10px;
            background: #000;
            overflow: hidden;
            border: 1px solid #fff;
        }
        
        .wrap li {
      
      
            float: left;
            margin: 0 10px 10px 0;
        }
        
        .wrap img {
      
      
            display: block;
            border: 0;
        }
    </style>
    <script src="../js文件/jquery.min.js"></script>
    <script>
        $(function() {
      
      
            //鼠标进入的时候,其他的li标签透明度：0.5
            $(".warp li").hover(function() {
      
      
                $(this).siblings().stop().fadeTo(400,0.5)
            },function() {
      
      
                // 鼠标离开，其他li 透明度改为 1
                $(this).siblings().stop().fadeTo(400,1)
            })
        })
    </script>
</head>
<body>
    <div class="wrap">
        <ul>
            <li>
                <a href="#"><img src="../素材/images/01.jpg" alt="" /></a>
            </li>
            <li>
                <a href="#"><img src="../素材/images/02.jpg" alt="" /></a>
            </li>
            <li>
                <a href="#"><img src="../素材/images/03.jpg" alt="" /></a>
            </li>
            <li>
                <a href="#"><img src="../素材/images/04.jpg" alt="" /></a>
            </li>
            <li>
                <a href="#"><img src="../素材/images/05.jpg" alt="" /></a>
            </li>
            <li>
                <a href="#"><img src="../素材/images/06.jpg" alt="" /></a>
            </li>
        </ul>
    </div>

    
</body>
</html>
カスタムアニメーションanimate

文法

animate(params,[speed],[easing],[fn])

パラメータ

(1) params: オブジェクト形式で渡される、変更したいスタイル属性を記述する必要があります。属性名には引用符は必要ありません。複合属性の場合は、キャメルケースの borderLeft 命名メソッドを使用する必要があります。他のパラメータはすべて省略できます。

(2) 速度: 3 つの所定の速度 (「遅い」、「標準」、または「速い」) のいずれかの文字列、またはアニメーションの継続時間を表すミリ秒の値 (例: 1000)。

(3) イージング: (オプション) スイッチング効果を指定するために使用されます。デフォルトは「swing」で、利用可能なパラメータは「linear」です。

(4) fn: コールバック関数。アニメーション終了時に実行される関数で、要素ごとに 1 回実行されます。

オナー・オブ・キングス アコーディオンエフェクト

マウスが小さなリーの上を通過すると、2 つのステップがあります。
現在の小さなリーの幅が 224px に変更され、同時に、内側の小さな画像がフェードアウトし、大きな画像がフェードインします。もう 1 つの小さなリーの幅は、 li が 69px に変更され、小さな画像がフェードインし、大きな画像がフェードアウトします。

<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title>手风琴案例</title>

    <style type="text/css">
        * {
      
      
            margin: 0;
            padding: 0;
        }
        
        img {
      
      
            display: block;
        }
        
        ul {
      
      
            list-style: none;
        }
        
        .king {
      
      
            width: 852px;
            margin: 100px auto;
            background: url(images/bg.png) no-repeat;
            overflow: hidden;
            padding: 10px;
        }
        
        .king ul {
      
      
            overflow: hidden;
        }
        
        .king li {
      
      
            position: relative;
            float: left;
            width: 69px;
            height: 69px;
            margin-right: 10px;
        }
        
        .king li.current {
      
      
            width: 224px;
        }
        
        .king li.current .big {
      
      
            display: block;
        }
        
        .king li.current .small {
      
      
            display: none;
        }
        
        .big {
      
      
            width: 224px;
            display: none;
        }
        
        .small {
      
      
            position: absolute;
            top: 0;
            left: 0;
            width: 69px;
            height: 69px;
            border-radius: 5px;
        }
    </style>

</head>

<body>
    <script src="../js文件/jquery.min.js"></script>
    <script type="text/javascript">
        $(function() {
      
      
            // 鼠标经过某个小li 有两步操作：
            $(".king li").mouseenter(function() {
      
      
                // 1.当前小li 宽度变为 224px， 同时里面的小图片淡出，大图片淡入
                $(this).stop().animate({
      
      
                    width: 224
                }).find(".small").stop().fadeOut().siblings(".big").stop().fadeIn();
                // 2.其余兄弟小li宽度变为69px， 小图片淡入， 大图片淡出
                $(this).siblings("li").stop().animate({
      
      
                    width: 69
                }).find(".small").stop().fadeIn().siblings(".big").stop().fadeOut();
            })
        });
    </script>
    <div class="king">
        <ul>
            <li class="current">
                <a href="#">
                    <img src="../素材/images/m1.jpg" alt="" class="small">
                    <img src="../素材/images/m.png" alt="" class="big">
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="../素材/images/l1.jpg" alt="" class="small">
                    <img src="../素材/images/l.png" alt="" class="big">
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="../素材/images/c1.jpg" alt="" class="small">
                    <img src="../素材/images/c.png" alt="" class="big">
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="../素材/images/w1.jpg" alt="" class="small">
                    <img src="../素材/images/w.png" alt="" class="big">
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="../素材/images/z1.jpg" alt="" class="small">
                    <img src="../素材/images/z.png" alt="" class="big">
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="../素材/images/h1.jpg" alt="" class="small">
                    <img src="../素材/images/h.png" alt="" class="big">
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="../素材/images/t1.jpg" alt="" class="small">
                    <img src="../素材/images/t.png" alt="" class="big">
                </a>
            </li>
        </ul>
    </div>
</body>

</html>

jQueryの属性操作

要素のいわゆる固有属性は、要素内の href や要素内の type など、要素自体に付属する属性です。

1. 属性の構文を取得する

prop("属性")

2. 属性の構文を設定する

prop("属性","属性值")
要素のカスタム属性値を設定または取得する attr()

ユーザー自身が要素に追加した属性をカスタム属性と呼びます。たとえば、index = "1" を div に追加します。

1. 属性の構文を取得する

attr(''属性'')      // 类似原生 getAttribute()

2. 属性の構文を設定する

attr(''属性'', ''属性值'')   // 类似原生 setAttribute()

メソッドを変更することで、H5 カスタム属性を取得することもできます。

データキャッシュ data()

data() メソッドは、指定された要素のデータにアクセスできますが、DOM 要素の構造は変更されません。ページが更新されると、以前に保存されたデータはすべて削除されます。

1. 追加のデータ構文

data(''name'',''value'')   // 向被选元素附加数据

2. データを取得する構文

date(''name'')             //   向被选元素获取数据

同時に、HTML5 カスタム属性の data-index を読み取り、数値を取得することもできます。

jQueryコンテンツのテキスト値

主に要素のコンテンツとフォームの値の操作に使用されます。

1. 通常の要素コンテンツ html() (ネイティブ内部 HTML に相当)

html()           // 获取元素的内容


html(''内容'')   // 设置元素的内容

2. 通常の要素のテキストコンテンツ text() (ネイティブの innerText と同等)

text()                     // 获取元素的文本内容

text(''文本内容'')         // 设置元素的文本内容

3. 通常の要素のテキストコンテンツ val() (ネイティブの innervalue と同等)

val()                     // 获取元素的文本内容

val(''文本内容'')         // 设置元素的文本内容

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js文件/jquery.min.js"></script>
</head>
<body>
    <div>我是内容</div>
    <input type="text" value="请输入内容">

    <script>
        // 1．获取设置元素内容 html()
        console.log($("div").html())
        // $("div").html(123)
        // 2．获取设置元素文本内容 text()
        console.log($("div").text())
        $("div").text("123")
        // 3．获取设置表单值val()
        console.log($("input").val())
        $("input").val("113131")
    </script>
</body>
</html>

jQuery要素の操作

主に要素の走査、作成、追加、削除の操作です。

要素を横断する

jQuery の暗黙的反復は、同じ型の要素に対して同じ操作を実行します。同じタイプの要素に対して異なる操作を実行する場合は、トラバーサルを使用する必要があります。

文法1

$("div").each(function(index,domEle) {
    
    xxx;  })

1.each0 メソッドは、一致した各要素を走査します。主にDOMで処理します。それぞれそれぞれ

2 のコールバック関数には 2 つのパラメータがあります: Index は各要素のインデックス番号、demEle は jquery オブジェクトではなく、各 DOM 要素オブジェクトです

3. したがって、jquery メソッドを使用したい場合は、この dom 要素を jquery オブジェクト $(domEle) に変換する必要があります。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js文件/jquery.min.js"></script>
</head>
<body>
    <div>1</div>
    <div>2</div>
    <div>3</div>

    <script>
        $(function() {
      
      
            // $("div").css("color",'red')
            //如果针对于同一类元素做不同操作，需要用到遍历元素（类似for，但是比for强大)
            var arr = ["red",'green',"blue"]
            var sum = 0
            $("div").each(function(i,domEle) {
      
      
                //回调函数第一个参数一定是索引号
                // console.log(index)
                // 可以自己指定索引号号名称
                console.log(i);
                // 回调函数第二个参数一定是dom元素对象
                console.log(domELe);
                $(domEle).css("color",arr[i])
                sum += parseInt($(domEle).text())
            })
            // 1.each()方法遍历元素

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

文法2

$.each(object，function (index, element) {
    
     xxx; }）

  1. $.each() メソッドを使用すると、任意のオブジェクトを反復処理できます。主に配列やオブジェクトなどのデータ処理に使用されます。

  2. 内部の関数には 2 つのパラメータがあります: Index は各要素のインデックス番号です; 要素はコンテンツを横断します

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js文件/jquery.min.js"></script>
</head>
<body>
    <div>1</div>
    <div>2</div>
    <div>3</div>

    <script>
        $(function() {
      
      
            // $("div").css("color",'red')
            //如果针对于同一类元素做不同操作，需要用到遍历元素（类似for，但是比for强大)
            var arr = ["red",'green',"blue"]
            // var sum = 0
            // $("div").each(function(i,domEle) {
      
      
            //     //回调函数第一个参数一定是索引号
            //     // console.log(index)
            //     // 可以自己指定索引号号名称
            //     console.log(i);
            //     // 回调函数第二个参数一定是dom元素对象
            //     console.log(domELe);
            //     $(domEle).css("color",arr[i])
            //     sum += parseInt($(domEle).text())
            // })
            // $.each()   方法遍历元素主要用于遍历数据，处理数据
            // $.each($("div"),function(i,ele) {
      
      
            //     console.log(i)
            //     console.log(ele)
            // })
            $.each(arr,function(i,ele) {
      
      
                console.log(i)
                console.log(ele)
            })
        $.each({
      
      name : "andy",
                age: 18},
                function(i,ele) {
      
      
                console.log(i)   //输出是name  age 属性名
                console.log(ele)   //属性值
            })
        })
    </script>
</body>
</html>
要素の作成、追加、削除

要素の作成

文法

$("<li></li>")

要素の追加

1.内部加算

element.append("内容")

ネイティブの appendChild と同様に、一致する要素の最後にコンテンツを配置します。

2.外部加算

element.after("内容")  //把内容放入目标元素后面

element.before("内容")  //把内容放入目标元素前面

要素は内部で追加され、生成後は親子関係になります。

外部要素が追加されると、それらは兄弟になります。

要素の削除

element.remove()   //删除匹配的元素(本身)

element.empty()   //删除匹配的元素集合中所有的子节点

element.html("")  //清空匹配的元素内容

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js文件/jquery.min.js"></script>
</head>
<body>
    <ul>
        <li>原先的li</li>
    </ul>
    <div class="test">原先的div</div>

    <script>
        $(function() {
      
      
            // 1. 创建元素
            var li = $("<li>后来的li</li>")  
            $("ul").prepend(li)    //内容放入匹配元素内部最前面
            // 2 添加元素
            $("ul").append(li);   //内容放入匹配元素内部最后面

            // (2)外部添加
            var div = $("<div>后来的</div>")
            $(".test").after(div)
            $(".test").before(div)

            //3.删除
            // $("ul").remove()
            $("ul").empty()
            $("ul").html("")
        })
    </script>
</body>
</html>

jQueryのサイズと位置の操作

jQueryのサイズ
文法 使用法
幅高さ（） 一致する要素の幅と高さの値を取得するには、幅/高さのみがカウントされます
innerWidth()/innerHeight() パディングを含む一致する要素の幅と高さの値を取得します
アウター幅()/アウター高さ() padding.borderを含む一致する要素の幅と高さの値を取得します
externalWidth(true)/outerHeight(true) パディング、境界線、マージンを含む、一致する要素の幅と高さの値を取得します
  • 上記のパラメータが空の場合、対応する値が取得され、戻り値は数値になります。
  • パラメータが数値の場合、対応する値が変更されます。
  • パラメータを単位で記述する必要はありません。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js文件/jquery.min.js"></script>
    <style>
        div{
      
      
            width: 200px;
            height: 200px;
            background-color:pink;
            padding: 10px;
            border: 15px solid red;
            margin: 20px;
        }
    </style>
</head>
<body>
    <div></div>
    <script>
        $(function() {
      
      
            console.log($("div").width())
            // console.log($("div").width(300))
            console.log($("div").height())
            console.log($("div").innerWidth())
            console.log($("div").innerHeight()) 
            console.log($("div").outerWidth())
            console.log($("div").outerHeight())
            console.log($("div").outerWidth(true))
            console.log($("div").outerHeight(true))
        })
    </script>
</body>
</html>
jQueryの位置

主な位置は 3 つあります: offset() .position() .scrollTop()/scrollLeft()

1.offset (要素のオフセットを設定または取得します)

  • offset() メソッドは、ドキュメントに対する選択された要素のオフセット座標を設定または返します。親とは何の関係もありません。
  • このメソッドには left と top の 2 つの属性があります。offset().top は文書の上部からの距離を取得するために使用され、offset().left は文書の左側からの距離を取得するために使用されます。
  • 要素のオフセットを設定できます: offset([ top: 10, left: 30 );

2.position() は要素のオフセットを取得します

  • Position() メソッドは、位置決めされた親に対する選択された要素のオフセット座標を返すために使用されます。親が位置決めされていない場合は、ドキュメントが優先されます。
  • このメソッドはオフセットを取得することしかできませんが、設定することはできません

3.scrollTop()/scrollLeft() スクロールされた要素の先頭と左側を設定または取得します

scrollTop() メソッドは、選択した要素のスクロールされたヘッドを設定または返します。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js文件/jquery.min.js"></script>
    <style>
        body {
      
      
            height: 2000px;
        }
        
        .back {
      
      
            position: fixed;
            width: 50px;
            height: 50px;
            background-color: pink;
            right: 30px;
            bottom: 100px;
            display: none;
        }
        
        .container {
      
      
            width: 900px;
            height: 500px;
            background-color: skyblue;
            margin: 400px auto;
        }
    </style>
</head>
<body>
    <div class="back">返回顶部</div>
    <div class="container"> 
    </div>
    <script>
        $(function() {
      
      
            $(document).scrollTop(100)
            var box = $(".container").offset().top
            // scrollTop()/scrollLeft()设置或获取元素被卷去的头部和左侧**
            $(window).scroll(function () {
      
      
                console.log($(document).scrollTop())
                if($(document).scrollTop() >= box){
      
      
                    $(".back").fadeIn()
                }else{
      
      
                    $(".back").fadeOut()
                }
            })
            $(".back").click(function() {
      
      
                // $(document).scrollTop(0)
                // 带动画效果
                // 核心原理:使用animate动画返回顶部。
                // animate动画函数里面有个scrollTop属性，可以设置位置
                // 但是是元素做动画，因此$(“body,html" ).animate({scrollTop: O)
                    $("body,html").stop().animate({
      
      
                        scrollTop:0
                    // $("document").stop().animate({
      
      
                    //     scrollTop:0     不能是文档而是 html和body元素做动画
                    })

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

jQueryイベント

目標：

  • 一般的な登録イベントを 4 つ挙げることができる
  • バインディングイベントの利点を伝えることができる
  • jQueryイベントデリゲーションの利点と方法を説明できる
  • バインディング イベントとアンバインド イベントを伝えることができる
jQueryイベント登録

単一イベントの登録

文法

Element.事件(function() {
    
    })

$("div").click(function(){
    
    事件处理程序})

その他のイベントは基本的にネイティブイベントと同じです。
マウスオーバー、マウスアウト、ぼかし、フォーカス、変更、キーダウン、キーアップ、サイズ変更、スクロールなど。

jQueryイベント処理

on() バインディング イベント

on()方法在匹配元素上绑定一个或多个事件的事件处理函数

语法

element.on(events,[selector],fn)

  1. events:一个或多个用空格分隔的事件类型，如"click"或"keydown”。

  2. selector:元素的子元素选择器。

  3. fn:回调函数即绑定在元素身上的侦听函数。

on() 方法优势1:

可以绑定多个事件,多个处理事件处理程序。

 $(“div”).on({
    
    
  mouseover: function(){
    
    }, 
  mouseout: function(){
    
    },
  click: function(){
    
    }	
});

如果事件处理程序相同

 $(“div”).on(“mouseover mouseout”, function() {
    
    
   $(this).toggleClass(“current”);
  });

实现事件委托

on0方法优势2∶

可以事件委派操作。事件委派的定义就是，把原来加给子元素身上的事件绑定在父元素身上，就是把事件委派给父元素。

 $("ul").on("click",'li',function() {
    
    
                // click是绑定在ul身上的，但是触发的对象是ul里面的小li
                alert("111")
            })

在此之前有bind(), live() delegate(等方法来处理事件绑定或者事件委派，最新版本的请用on替代他们。

on()方法优势3∶

动态创建的元素，click()没有办法绑定事件，on)可以给动态生成的元素绑定事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
    
    
            width: 200px;
            height: 200px;
            background-color: pink;
        }

        .current {
    
    
            background-color: purple;
        }
    </style>
    <script src="../js文件/jquery.min.js"></script>
</head>
<body>
    <ol></ol>
    <div></div>
    <ul>
        <li>我们都是好孩子</li>
        <li>我们都是好孩子</li>
        <li>我们都是好孩子</li>
        <li>我们都是好孩子</li>
        <li>我们都是好孩子</li>
    </ul>
    <script>
        $(function() {
    
    
            // 1.单个事件注册
            // $("div").click(function() {
    
    
            //     $(this).css("background",'red')
            // })
            // $("div").mouseout(function() {
    
    
            //     $(this).css("background",'pink')
            // })
            // 2.事件处理on
            // $("div").on({
    
    
            //     mouseenter:function() {
    
    
            //         $(this).css("background",'red')
            //     },
            //     click: function() {
    
    
            //         $(this).css("background",'skyblue')
            //     },
            //     mouseleave:function() {
    
    
            //         $(this).css("background",'pink')
            //     }
            // })

            $("div").on("mouseover mouseout",function() {
    
    
                $(this).toggleClass("current")
            })

            // (2)on可以实现事件委托
            // $("ul li").click()
            $("ul").on("click",'li',function() {
    
    
                // click是绑定在ul身上的，但是触发的对象是ul里面的小li
                alert("111")
            })

            // on可以给未来动态创建的元素绑定事件
            // $("ol li").click(function() {
    
    
            //     alert('11')
            // })
            $("ol").on("click","li", function() {
    
    
                alert("111")
            })
            var li = $("<li>后来创建的li</li>")
            $("ol").append(li)
        })
    </script>
</body>
</html>
jQuery事件对象

事件被触发，就会有事件对象的产生。

element.on(events,[selector],function(event) {
    
    })

阻止默认行为：event.preventDefault() 或者 return false

阻止冒泡： event.stopPropagation()

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js文件/jquery.min.js"></script>
    <style>
        div {
    
    
            width: 100px;
            height: 100px;
            background-color: pink;
        }
    </style>
    <script>
        $(function() {
    
    
            $(document).on("click",function() {
    
    
                console.log("点击了document")
            })

            $("div").on("click",function(event) {
    
    
                // console.log(event)
                console.log("点击了div")
                event.stopPropagation()
            })
        })
    </script>
</head>
<body>
    <div></div>
</body>
</html>

jQuery 拷贝对象

如果想要把某个对象拷贝（合并） 给另外一个对象使用，此时可以使用 $.extend() 方法

语法：

$.extend([deep], target, object1, [objectN])

  1. deep: 如果设为true 为深拷贝， 默认为false 浅拷贝

  2. target: 要拷贝的目标对象

  3. object1:待拷贝到第一个对象的对象。

  4. objectN:待拷贝到第N个对象的对象。

  5. 浅拷贝是把被拷贝的对象复杂数据类型中的地址拷贝给目标对象，修改目标对象会影响被拷贝对象。

  6. 深拷贝，前面加true， 完全克隆(拷贝的对象,而不是地址)，修改目标对象不会影响被拷贝对象。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js文件/jquery.min.js"></script>
    <script>
        $(function() {
      
      
            // var targetObj = {}
            // var obj = {
      
      
            //     id : 1,
            //     name : "andy"
            // }
            // $.extend(targetObj,obj)
            // console.log(targetObj)

            // var targetObj = {
      
      
            //     id : 0
            // }
            // var obj = {
      
      
            //     id : 1,
            //     name : "andy"
            // }
            // // 会覆盖targetObj里面原来的数据
            // $.extend(targetObj,obj)
            // console.log(targetObj)


            var targetObj = {
      
      
                id : 0,
                msg : {
      
      
                    sex : "男"
                }
            }
            var obj = {
      
      
                id : 1,
                name : "andy",
                msg : {
      
      
                    age : 18
                }
            }
            // 会覆盖targetObj里面原来的数据
            // $.extend(targetObj,obj)
            // console.log(targetObj)
            // // 1.浅拷贝是把被拷贝的对象复杂数据类型中的地址拷贝给目标对象
            // targetObj.msg.age = 20
            // console.log(targetObj)

            // 2.完全克隆(拷贝的对象,而不是地址)，修改目标对象不会影响被拷贝对象。
            $.extend(true,targetObj,obj)
            console.log(targetObj)
            targetObj.msg.age = 20
            console.log(targetObj)  //msg: {sex: '男', age: 20}
            console.log(obj)
        })
    </script>
</head>
<body>
    
</body>
</html>

jQuery 多库共存

问题概述：

jQuery使用 作为标示符，随着 j Q u e r y 的流行 , 其他 j s 库也会用这 作为标示符，随着jQuery的流行,其他 js 库也会用这 作为标示符，随着jQuery的流行,其他js库也会用这作为标识符， 这样一起使用会引起冲突。

客观需求：

需要一个解决方案，让jQuery 和其他的js库不存在冲突，可以同时存在，这就叫做多库共存

jQuery 解决方案：

  1. 把里面的 $ 符号 统一改为 jQuery。 比如 jQuery(‘‘div’’)
  2. jQuery 变量规定新的名称：$.noConflict() var xx = $.noConflict();

jQuery 插件

jQuery 功能比较有限，想要更复杂的特效效果，可以借助于 jQuery 插件完成。

注意: 这些插件也是依赖于jQuery来完成的，所以必须要先引入jQuery文件，因此也称为 jQuery 插件。

jQuery 插件常用的网站：

  1. jQuery 插件库 http://www.jq22.com/

  2. jQuery 之家 http://www.htmleaf.com/ (推荐，免费开源)

jQuery 插件使用步骤：

  1. 引入相关文件。（jQuery 文件 和 插件文件）

  2. 复制相关html、css、js (调用插件)。

jQuery 插件演示：

  1. 瀑布流

  2. 图片懒加载（图片使用延迟加载在可提高网页下载速度。它也能帮助减轻服务器负载）

    当我们页面滑动到可视区域，再显示图片。

    我们使用jquery 插件库 EasyLazyload。 注意，此时的js引入文件和js调用必须写到 DOM元素（图片）最后面

  3. 全屏滚动（fullpage.js）

    gitHub： https://github.com/alvarotrigo/fullPage.js

    中文翻译网站： http://www.dowebok.com/demo/2014/77/

bootstrap JS 插件：

bootstrap 框架也是依赖于 jQuery 开发的，因此里面的 js插件使用 ，也必须引入jQuery 文件。

おすすめ

転載: blog.csdn.net/qq_66970557/article/details/125913700
おすすめ
ランキング
1028リストの並べ替え（25分）
pom.xml ファイルがアイデアによって認識されません
単一テーブルのデータのSQLクエリ組み合わせ（C）
gitのinitとgitの初期化-bare違いやソースファイルなしで問題を解決するには、WWWで見ることができません
BULLETエンジンスターター - コンパイル（cmakeのとPreMake）
vue-crossドメインの問題
ThingsBoard フロントエンド プロジェクトの組み込みコンポーネント開発
単元の学習過程での難しい問題とその解決策 -----(1)
MongoDBのデータは、クライアントで表示することができますが、作業はコマンドラインでlinuxでありません
How to check your PYTHONPATH environment variable
アーカイブ
もっと
2024-06-02(0)
2024-06-01(1)
2024-05-31(1)
2024-05-30(0)
2024-05-29(1)
2024-05-28(0)
2024-05-27(1)
2024-05-26(0)
2024-05-25(1)
2024-05-24(11)

コードワールド

© 2018 codetd.com