jQueryのイベント、アニメーション、申請書:戦闘にWebフロントエンドの取得

イベントとは何ですか?

ページには、さまざまな来場者への応答事件と呼ばれます。特定のイベントがHTMLの呼び出しで発生することをイベントハンドラメソッド手段。多くの場合(または「励起」)一般的に使用されるクリック()メソッドは、イベントでトリガされる用語「トリガー」を使用しています

DOMのロード

$(ドキュメント).ready()メソッドとwindow.onload()メソッドとの違い:

jQueryのイベント、アニメーション、申請書:戦闘にWebフロントエンドの取得

イベントバインディング

イベントマッチング要素イベントハンドラを結合、各特定の利用バインド()メソッド。バインド()メソッドの呼び出し形式:バインド(タイプ、[データ] のFn

タイプ:複数のイベントは、スペースで区切られた1つ以上のイベントタイプの文字列が含まれています。このような「クリック」または「提出」として、また、カスタムイベント名にすることができます。
データ:イベントオブジェクトの追加データへのevent.dataプロパティ値として渡さ
のFn 上記の一致するイベントハンドラの各要素にバインド

例:

//事件绑定
$("#btn1").bind("click",function(){
   alert("点我触发bind函数");
})

<button id="btn1">点我触发bind函数</button>

jQueryのである()メソッドを使用して要素が見え、使用されている()メソッドであるか否かを判断します。

alert($("button").parent().is("body"));
 /*
  * $("#b1").is(":visible") 判断id为d1的元素是否可见
  * 可见返回true,不可见就返回false
  * 
  * next($("#b1").is(":visible"));
  */
alert("#btn2").is(":visible");
$("#btn2").click(function(){
    if($("#b1").is(":visible")){
        //$(this).next().css();
         $(this).next().hide();
    }else{
        $(this).next().show();
    }
})

()-hover合成イベント

ホバー()をシミュレートカーソルホバリングイベントカーソルが要素の上に移動すると、この要素のうち、カーソルが、指定された第2の機能をトリガーする場合、指定された最初の機能をトリガします。

ホバー()構文構造は、方法であって、ホバー([上、] OUT)

•オーバー:トリガ機能への要素の上にマウス
•アウト:トリガされる要素のうち、マウスの機能

例:

web前端开发学习Q-q-u-n: ⑦⑧④-⑦⑧③-零①②,分享学习的方法和需要注意的小细节,不停更新最新的教程和学习方法(详细的前端项目实战教学视频)
$(function(){           
    /*
     * 合成事件hover()方法的语法结构:
     *  hover(enter,leave);
     * 
     * */
     $("#btn2").hover(function(){
         $(this).next().show();
     },function(){
        $(this).next().hide();
     })
})

<button id="btn1">点我触发bind函数</button>
<button id="btn2">隐藏或者显示</button>
<div id="b1" style="display: none;">
    <img src="img/log.jpg"/>
</div>

合成イベント-toggle():行のマウスクリックイベントをシミュレートするために使用さは、第一、第一の特定の機能をトリガー、要素をクリックして同じ要素は、第2の指定された機能をトリガするときにもう一度クリック。より多くの機能がある場合、ターントリガーの最後まで。

$(function(){       
    /*
     * 合成事件toggle()方法的语法结构:
     *  toggle(f1,f2,f3,f4....);
     * 
     * 有俩个功能:
     *    1:模拟连续点击(自动点击,不是你手动点击);
     *      2.如果元素本身可见,则会自动隐藏,如果本身是隐藏的,则会自动显示
     * */
    /* $("#btn1").toggle(function(){
        alert("触发toggle函数");
     });*/
     //带俩个参数的toggle方法
     $("#btn1").toggle(function(){
          $("#btn1").css("color","turquoise");
         //alert("触发toggle函数");
     },function(){
        //alert("触发toggle2函数")
        $("#btn1").css("background-color","deepskyblue");
     })
})

イベントバブリング:

ページ上の複数の要素も同じイベントに応答することができ、複数のイベントを持つことができます。

ページ、1は内の他の要素内にネストされ、ボディ要素もクリックイベントにバインドされている間、イベントをクリックしてバインドされていることを前提とした2つの要素があります。

水疱と同じ階層に従いますDOMのイベントは、トップまで続け

<style type="text/css">
            #body1{
                background-color: deepskyblue;
            }
            #div1{
                background-color: white;
            }
            #span1{
                background-color: yellow;
            }
        </style>
        <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
        <script type="text/javascript">
            $(function(){
                 /*
                  *演示事件冒泡
                  *    当一个元素的本身和父类都绑定了相同事件时,它本身触发该事件,则父类也会触发该事件
                  * 解决方法:停止冒泡
                  *      方法1:本身return false;
                  *     方法2:stopPropagation(); [event是事件对象]
                  */
                 $("#body1").click(function(){
                     alert("body的click方法");
                 })
                  $("#div1").click(function(){
                     alert("div的click方法");
                 })
                   $("#span1").click(function(){
                     alert("span的click方法");
                    // return false;
                    event.stopPropagation();
                 })

            })
        </script>
    </head>
    <body id="body1">
         body
         <div id="div1">
            div
            <span id="span1">
                span
            </span>
         </div>
    </body>
</html>

デフォルトの動作を妨げます

Webページの要素は、独自のデフォルトの動作を持つ、例えば、ハイパーリンクをクリックしてジャンプし、フォームを送信し、送信ボタンをクリックし、デフォルトの動作では、要素を防ぐために必要がある場合があります。

jQueryの中の要素のデフォルト動作を防止するためでpreventDefault()メソッドを提供します。

例:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
        <script type="text/javascript">
            $(function(){
                 //阻止点击之后跳转
                 $("#a1").click(function(){
                     alert("你正在阻止a标签的默认行为");
                     //return false;        //方法一
                     event.preventDefault(); //方法二
                 })
                 /*
                  * 写一个登录表单,设置如果用户名不满足正则表达式的要求,阻止请求服务
                  * 正则判断是否满足符合规则
                  * 
                  */ 
                  $(":submit").click(function(){
                    var na=$("#na").val();
                     var uPattern = /^[a-zA-Z0-9_-]{4,16}$/; 
                       if(!uPattern.test(na)){
                            alert("你正在阻止a标签的默认行为");
                            return false;
                       }

                  })

            })
        </script>
    </head>
    <body>
        <a href="http://baidu.com" id="a1">跳转百度</a>
        <form action="http://baidu.com" method="post">
            用户名<input type="text" id="na"/><br/>
            密码<input type="password" id="pa" /><br/>
              <button type="submit">登录</button>

        </form>
    </body>
</html>

イベントオブジェクトのプロパティ

Eventオブジェクト:トリガーイベントは、イベントオブジェクトは、プログラム内のイベントを使用して作成されている場合にのみ機能にパラメータを追加する必要があります。

event.type:イベントの種類を取得します。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
        <script type="text/javascript">
            $(function(){
                 /*
                  * 事件对象:对事件对象的常用属性进行封装
                  * 1.event.type获取事件的类型(也就是事件名称)
                  * 2\. event.preventDefault();  阻止默认的事件行为 (在IE中无效)
                  * 3\. event.stopPropagation() 阻止事件冒泡
                  *  4.event.target  获取触发事件的元素(获取触发的目标)
                  * 5.event.pageX / event.pageY 获取事件光标的X和Y的坐标
                  * 6.event.which  获取鼠标的按键(左键返回1,中键返回2,右键返回3)
                  */
                 $("#a1").click(function(){
                      //alert(event.pageX+","+event.pageY);
                       alert(event.which);
                      return false;
                 })

            })
        </script>
    </head>
    <body>
        <a href="http://baidu.com" id="a1">查看事件对象的属性</a>

    </body>
</html>

イベントを削除します。

イベントを結合する過程では、だけでなく、あなたが同じ要素に対して複数のイベントをバインドすることができ、また複数の要素に対して同じイベントをバインドすることができます。

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
        <script type="text/javascript">
            $(function() {
                $("#btn1").one("click", function() {
                    $("#test").append("<p>我的绑定函数1</p>");
                }).one("click", function() {
                    $("#test").append("<p>我的绑定函数2</p>");
                }).one("click", function() {
                    $("#test").append("<p>我的绑定函数3</p>");

                })
            })
        </script>
    </head>

    <body>
        <button id="btn1">绑定函数</button>
        <div id="test">

        </div>
    </body>

</html>

ワン()メソッド

1():ハンドラがいったんトリガされたときに、この方法は、すなわち、直ちに各オブジェクトに削除され、要素のハンドラにバインドすることができ、イベントハンドラは、一度だけ実行されます...

()およびバインド()の違いについて

jQueryの1.7 +バージョンから、上の提供()とオフ()バインドすると、イベントハンドラをキャンセルします。

このパラメータのセレクタ値をサポートするかどうかの違いの嘘。あなたが時間通りに使用している場合は、セレクタを設定しないので、バインドに違いはありません。

jQueryのアニメーション

非表示および表示要素が-show()メソッドと非表示()メソッド

非表示():HTMLドキュメントでは、非表示を求める要素は、()メソッドは、CSS(「表示」、「なし」)で、コードの機能をなしの表示スタイル要素を変更します。

()表示:隠された要素の後、前の表示状態に表示スタイル要素に使用されるshow()メソッド(「ブロック」またはそれに加えて、または他の「なし」の値に「インライン」)であってもよいです。

$(function(){
$("div").hover(function(){
    $(this).next().show();
},function(){
    $(this).next().hide();
})
})
</script>

-fadeIn()メソッドとフェードアウト()メソッドアウトとフェードフェード

フェードイン()、フェードアウト():要素のみフェードアウト(の透明度を変更する)が完全に消失要素まで、時間の指定された期間内の要素の不透明度を減少させる(「表示:なし」)、フェードイン()は逆です。

そして、スライドスライド-slideUp()メソッドとslideDown()メソッドダウン

slideDown()、slideUp()は:、要素の高さのみを変化させる素子の表示属性はどれもない場合slideDown()メソッドを呼び出すとき、表示素子は、上から下へ拡張する、逆にslideUp()メソッドは、要素ボトム短縮隠さ。

カスタムアニメーション法のアニメーション()

カスタムアニメーションから使用アニメイト()メソッド、構文構造:

アニメーション(paramsは、[速度]、[のFn])のparams:アニメーションプロパティのセットおよびスタイル属性と値、および最終値のセットとして含む、例えば{プロパティ1のように:「値1」、property2 :「値2」、.. }
スピード:スピードの3種類のうちの所定の文字列(「遅い」、「ノーマル」 、または「速い」) またはミリ秒数長いアニメーション表現(例:1000)

Fn:各要素に対して一度実行アニメーションが完了したときに実行機能、

トグル()メソッド

スイッチング素子のトグル()メソッドが表示されてもよいです。要素は、隠されたスイッチ表示されている場合は、隠された要素が見えるように切り替えられた場合ならば。

トグルは、()も高さ、幅及び透明度の要素を変更します

slideToggle()方法

slideToggle()メソッドは、その高さを調整することにより、マッチした要素の表示を切り替えることができます。このアニメーションはのみの要素の高さを調整します。

fadeTo()方法

fadeTo()メソッドは、(0-1間)に指定された値に調整漸近的に不透明要素であることができます。このアニメーションは要素だけ、変更しない要素を一致させ、高さと幅の不透明度を調整します。

fadeToggle()メソッド

fadeToggle()メソッドは、不透明切替可能整合要素の可視性を変更します。このアニメーションはのみの要素の不透明度を調整します

アニメーションメソッド説明:

jQueryのイベント、アニメーション、申請書:戦闘にWebフロントエンドの取得

アニメーションの属性カスタムメソッドは、上記の方法のアニメーションはすべて、内部コールのアニメーション()メソッドの本質です。また、直接使用アニメイト()メソッドは、例えば、他のスタイルの属性をカスタマイズすることができます:「scrollTopスプライト」など、「marginLeft」、「左」

申込書:

フォームは、3つの基本的な構成要素があります。

•フォームのラベルは:サーバーへのサーバーとURLのデータが使用する処理手順をフォームデータを送信するための方法が含まれています。

•フォームフィールド:テキストボックス、パスワードボックス、複数行のテキストボックス、チェックボックス、ラジオボタン、ドロップダウン選択ボックスとファイルアップロードボックスが含まれていますというように。

•フォームボタン:他の定義は、スクリプト処理の処理を制御するために使用することができる、また、サーバにデータを送信するためのボタン、リセットボタン、および一般的なボタンを送信し、又は送信を中止含みます。

ATTR()と支柱()メソッドの区別:

attrの戻り値は、小道具の戻り値が唯一の真と偽の、どちらかがチェックされるか定義されていません。

小道具()**結果機能**:

  1.如果有相应的属性,返回指定属性值。

  2.如果没有相应的属性,返回值是空字符串。

**のattr()関数の結果:**

  1.如果有相应的属性,返回指定属性值。

  2.如果没有相应的属性,返回值是undefined。

HTML、プロペラを用いた治療法と素子自体の固有の特性のために。

HTML DOMは、処理中に、attrの方法を使用し、私たち自身のカスタム要素の属性。

真と偽の属性)は、(チェック選択や小道具を使用して無効として2つのプロパティを、持っています

おすすめ

転載: blog.51cto.com/14592820/2463479