Maison > interface Web > js tutoriel > Instructions pour utiliser jQuery

Instructions pour utiliser jQuery

php中世界最好的语言
Libérer: 2018-05-24 11:54:43
original
1215 Les gens l'ont consulté

Cette fois, je vais vous apporter les instructions d'utilisation de jQuery. Quelles sont les précautions d'utilisation de jQuery ? Ce qui suit est un cas pratique, jetons un coup d'œil. Le

le sélecteur jQuery$("jQuery选择器") est le même que le le sélecteur css, il peut être . il peut être # il peut être 标签

$("p")
$(".color")
$("#mylove")
$("p ul .yellow")
$("#color.yellow")
Copier après la connexion

Lorsque la page est prête

jQuery:
$(document).ready(function(){
    //your code
});
JavaScript:
window.onload=function(){
    //your code
};
Copier après la connexion

Écouter les événements

  • Lier les événements

    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
        });
    }
    Copier après la connexion
  • Dissocier l'événement

    jQuery: 
    //jQuery自动判断浏览器类型并做调整
    $("#click").unbind("click");     删除 click 事件
    $("#click").unbind();            删除所有事件
    JavaScript:
    var click=document.getElementById("click");
    click.removeEventListener("click");    //除了IE8或之前
    click.detachEvent("click");            //IE8或之前
    Copier après la connexion
  • Cliquez

    jQuery:
    $("#click").click(function(){
        //your code
    });
    JavaScript:
    document.getElementById("click").onclick=function(){
        //your code
    };
    Copier après la connexion

Traverse

  • each()

    jQuery:
    $("p").each(function(){
        //your code
    });
    JavaScript:
    var p=documentElementsByTagName("p");
    for(var i in p){
        p[i] = //yourcode;
    };
    Copier après la connexion

jQuery intègre de nombreux effets et est très simple à utiliser

slideUP()              向上收起
slideDown()            向下展开
slideToggle()   
fadeIn(速度/ms)         渐入
$.contains(xxx,yyy);    判断 元素xxx 中是不是有 元素yyy
Copier après la connexion

Opérations sur les éléments

  • Ajouter un élément

    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);
    Copier après la connexion
     $("p").before("<p>hello!</p>");     //在 p 上(前)面插入 "<p>hello!</p>"
     $("p").after("<p>hello!</p>");      //在 p 下(后)面插入 "<p>hello!</p>"
    Copier après la connexion
    $("p").wrap("<a>i`m yellow!</a>");    // <p> 下添加子元素 <a>
    Copier après la connexion
  • Supprimer un élément

    $("p#COLOR").empty();      //empty 方法将元素内容清除,但不删除元素
    $("p#color).remove();      //remove 方法直接将元素删除
    $("p#color").detach();     //detach 方法将元素删除后暂存在浏览器的内存里,
    var $L=$("p#color").detach();  //可以将detach赋给一个变量,删除的元素将可以像数组一样存在变量里
    Copier après la connexion
  • Obtenir un élément

    $("#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");         //随意组合
    Copier après la connexion
  • Remplacer l'élément

    $("#fish").replaceWith("<p>hello!</p>");   //把 id=fish 的元素替换成 <p>hello!</p>
    Copier après la connexion

ce

jQuery:
$(this).click(function(){});
JavaScript:
this.click=function(){};
Copier après la connexion

Opération sur CSS

dans jQuery Il existe des commandes comme addClass et removeClass pour fonctionner directement 单个CSS类
JavaScript a des commandes comme className et classList pour fonctionner uniquement sur 全部CSS类

jQuery:
$("p").addClass("yellow");
$("p").removeClass("yellow");
JavaScript:
p.className= //your code;
p.classList.add("");
p.classList.remove("");
Copier après la connexion

Je crois vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Explication détaillée de l'utilisation du prototype js

Explication détaillée des étapes de combinaison de TypeScript et Mobx avec React

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal