Heim > Web-Frontend > js-Tutorial > Hauptteil

Anleitung zur Verwendung von jQuery

php中世界最好的语言
Freigeben: 2018-05-24 11:54:43
Original
1210 Leute haben es durchsucht

Dieses Mal bringe ich Ihnen die Anweisungen zur Verwendung von jQuery. Was sind die Vorsichtsmaßnahmen für die Verwendung von jQuery? Das Folgende ist ein praktischer Fall.

jQuery Selektor$("jQuery选择器") ist dasselbe wie CSS-Selektor, es kann . es kann sein # es kann 标签
$("p")
$(".color")
$("#mylove")
$("p ul .yellow")
$("#color.yellow")
Nach dem Login kopieren

Wenn die Seite fertig ist

jQuery:
$(document).ready(function(){
    //your code
});
JavaScript:
window.onload=function(){
    //your code
};
Nach dem Login kopieren

Ereignis anhören

  • Ereignis binden

    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
        });
    }
    Nach dem Login kopieren
  • Bindung aufheben Ereignis

    jQuery: 
    //jQuery自动判断浏览器类型并做调整
    $("#click").unbind("click");     删除 click 事件
    $("#click").unbind();            删除所有事件
    JavaScript:
    var click=document.getElementById("click");
    click.removeEventListener("click");    //除了IE8或之前
    click.detachEvent("click");            //IE8或之前
    Nach dem Login kopieren
  • Klicken

    jQuery:
    $("#click").click(function(){
        //your code
    });
    JavaScript:
    document.getElementById("click").onclick=function(){
        //your code
    };
    Nach dem Login kopieren
Traverse

  • each()

    jQuery:
    $("p").each(function(){
        //your code
    });
    JavaScript:
    var p=documentElementsByTagName("p");
    for(var i in p){
        p[i] = //yourcode;
    };
    Nach dem Login kopieren
jQuery integriert viele Effekte, was sehr einfach zu verwenden ist

slideUP()              向上收起
slideDown()            向下展开
slideToggle()   
fadeIn(速度/ms)         渐入
$.contains(xxx,yyy);    判断 元素xxx 中是不是有 元素yyy
Nach dem Login kopieren

Operationen an Elementen

  • Elemente hinzufügen

    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);
    Nach dem Login kopieren
     $("p").before("<p>hello!</p>");     //在 p 上(前)面插入 "<p>hello!</p>"
     $("p").after("<p>hello!</p>");      //在 p 下(后)面插入 "<p>hello!</p>"
    Nach dem Login kopieren
    $("p").wrap("<a>i`m yellow!</a>");    // <p> 下添加子元素 <a>
    Nach dem Login kopieren
  • Element löschen

    $("p#COLOR").empty();      //empty 方法将元素内容清除,但不删除元素
    $("p#color).remove();      //remove 方法直接将元素删除
    $("p#color").detach();     //detach 方法将元素删除后暂存在浏览器的内存里,
    var $L=$("p#color").detach();  //可以将detach赋给一个变量,删除的元素将可以像数组一样存在变量里
    Nach dem Login kopieren
  • Element abrufen

    $("#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");         //随意组合
    Nach dem Login kopieren
  • Element ersetzen

    $("#fish").replaceWith("<p>hello!</p>");   //把 id=fish 的元素替换成 <p>hello!</p>
    Nach dem Login kopieren
this

jQuery:
$(this).click(function(){});
JavaScript:
this.click=function(){};
Nach dem Login kopieren

Operationen auf

CSS

jQuery hat Befehle wie

und addClass, um direkt auf removeClass单个CSS类JavaScript zu operieren
und classNameSo Ein Befehl kann nur auf classList全部CSS类

jQuery:
$("p").addClass("yellow");
$("p").removeClass("yellow");
JavaScript:
p.className= //your code;
p.classList.add("");
p.classList.remove("");
Nach dem Login kopieren
ausgeführt werden. Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

Detaillierte Erläuterung der Verwendung des js-Prototyps

Detaillierte Erläuterung der Schritte zur Kombination von TypeScript und Mobx mit React

Das obige ist der detaillierte Inhalt vonAnleitung zur Verwendung von jQuery. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage