jQueryの使用手順

php中世界最好的语言
リリース: 2018-05-24 11:54:43
オリジナル
1211 人が閲覧しました

今回はjQueryの使い方についてご紹介します。jQueryを使用する際の注意点は以下の通りです。

jQueryセレクター $("jQuery Selector") CSS selector$("jQuery选择器")css选择器一样,可以是.可以是#可以是标签

$("p")
$(".color")
$("#mylove")
$("p ul .yellow")
$("#color.yellow")
ログイン後にコピー

页面准备就绪时

jQuery:
$(document).ready(function(){
    //your code
});
JavaScript:
window.onload=function(){
    //your code
};
ログイン後にコピー

监听事件

  • 绑定事件

    jQuery:
    $("#click").bind("click",function(){             //jQuery自动判断浏览器类型并做调整
        //your code
    });
    JavaScript:
    var click=document.getElementById("click");
    if(window.attachEvent){        
        click.attachEvent("click",function(){          //IE8或之前
            //your code
        });
    }else{                         
        click.addEventListener("click",function(){    //除了IE8或之前
            //your code
        });
    }
    ログイン後にコピー
  • 解绑事件

    jQuery: 
    //jQuery自动判断浏览器类型并做调整
    $("#click").unbind("click");     删除 click 事件
    $("#click").unbind();            删除所有事件
    JavaScript:
    var click=document.getElementById("click");
    click.removeEventListener("click");    //除了IE8或之前
    click.detachEvent("click");            //IE8或之前
    ログイン後にコピー
  • 单击

    jQuery:
    $("#click").click(function(){
        //your code
    });
    JavaScript:
    document.getElementById("click").onclick=function(){
        //your code
    };
    ログイン後にコピー

遍历

  • each()

    jQuery:
    $("p").each(function(){
        //your code
    });
    JavaScript:
    var p=documentElementsByTagName("p");
    for(var i in p){
        p[i] = //yourcode;
    };
    ログイン後にコピー

jQuery集成了很多效果,很好用

slideUP()              向上收起
slideDown()            向下展开
slideToggle()   
fadeIn(速度/ms)         渐入
$.contains(xxx,yyy);    判断 元素xxx 中是不是有 元素yyy
ログイン後にコピー

对元素的操作

  • 添加元素

    jQuery:
    $("p").append("<p>hello!</p>");    直接在 p 后面添加元素 p ,p 的内容为 hello!
    $("p").append($("#color"));         在 p 后面添加本代码中 id="color" 的元素
    JavaScript:
    var p=document.getElementById("p");
    var p=doucment.createElement("p");
    p.appendChild(p);
    ログイン後にコピー
     $("p").before("<p>hello!</p>");     //在 p 上(前)面插入 "<p>hello!</p>"
     $("p").after("<p>hello!</p>");      //在 p 下(后)面插入 "<p>hello!</p>"
    ログイン後にコピー
    $("p").wrap("<a>i`m yellow!</a>");    // <p> 下添加子元素 <a>
    ログイン後にコピー
  • 删除元素

    $("p#COLOR").empty();      //empty 方法将元素内容清除,但不删除元素
    $("p#color).remove();      //remove 方法直接将元素删除
    $("p#color").detach();     //detach 方法将元素删除后暂存在浏览器的内存里,
    var $L=$("p#color").detach();  //可以将detach赋给一个变量,删除的元素将可以像数组一样存在变量里
    ログイン後にコピー
  • 获取元素

    $("#fish").parent();        //id=fish 的元素的父元素
    $("#fish").children();      //id=fish 的元素的子元素
    $("#fish").prev();          //id=fish 的元素的上(前)一个元素
    $("#fish").next();          //id=fish 的元素的下(后)一个元素
    $("#fish").parents();       //id=fish 的元素的所有父元素
    $("#fish").siblings();      //id=fish 的元素的所有同级元素
    $("#fish").closest("ul");   //离 id=fish 最近的 ul
    $(".fish").first();   //取所有 class=fish 元素中第一个元素
    $(".fish").eq(n);   //取所有 class=fish 元素中第 n 个元素
    $(".fish").last();   //取所有 class=fish 元素中最后一个元素
    $(".fish").slice(a,b);   //取 class=fish 中 a 和 b 之间的所有元素,不包括 a 和 b
    $(".fish").filter();   //取 class=fish 里面符合 括号里规则 的所有元素
    $(".fish").not();   //取 class=fish 里面不符合 括号里规则 的所有元素
    $("#fish").parent().parent().next().remove();    //随意组合
    $("#fish").closest("ul").parents();              //随意组合
    $(".fish").parents().filter(".yellow");          //随意组合
    $(".fish ul").children().not("#yellow");         //随意组合
    ログイン後にコピー
  • 替换元素

    $("#fish").replaceWith("<p>hello!</p>");   //把 id=fish 的元素替换成 <p>hello!</p>
    ログイン後にコピー

this

jQuery:
$(this).click(function(){});
JavaScript:
this.click=function(){};
ログイン後にコピー

CSS的操作

jQuery中有addClassremoveClass这样的命令来直接对单个CSS类进行操作
JavaScript有classNameclassList这样的命令,只能对全部CSS类 も同じです。 にすることもできます。# にすることもできます tag にすることもできます

jQuery:
$("p").addClass("yellow");
$("p").removeClass("yellow");
JavaScript:
p.className= //your code;
p.classList.add("");
p.classList.remove("");
ログイン後にコピー

ページの準備ができたら

rrreee

リスニングイベント

  • バインドイベントrrreee

  • アンバインドイベントrrreee
  • クリックrrreee / li>

Traversal
  • 🎜each()🎜rrreee
🎜jQuery は多くの効果を統合しており、非常に使いやすいです🎜 rrreee🎜要素の操作🎜
  • 🎜要素の追加🎜rrreeerrreeerrreee
  • 🎜要素の削除🎜rrreee
  • 🎜要素の取得🎜 rrreee
  • 🎜要素の置換🎜rrreee
🎜this🎜rrreee🎜 CSS の操作🎜🎜 jQuery には addClass があります。 単一の CSS クラス を直接操作する removeClass コマンド
JavaScript には classNameclassList があります。このようなコマンドでは、 すべての CSS クラス のみを操作します🎜rrreee🎜 この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、PHP 中国語 Web サイトの他の関連記事に注目してください。 🎜🎜推奨読書: 🎜🎜🎜jsプロトタイプの使用方法の詳細な説明🎜🎜🎜🎜 ReactとTypeScriptおよびMobxを組み合わせる手順の詳細な説明🎜🎜

以上がjQueryの使用手順の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート