Instructions for using jQuery

This time I will bring you the instructions for using jQuery. What are the precautions for using jQuery? The following is a practical case, let’s take a look.

jQuerySelector$("jQuery Selector") is the same as css Selector, it can be . Can be #Can be tag

$("p")
$(".color")
$("#mylove")
$("p ul .yellow")
$("#color.yellow")

When the page is ready

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

Listen for events

• Binding event

  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
      });
  }

• Unbinding event

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

• Click

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

Traversal

• each()

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

jQuery integrates many effects and is easy to use

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

Operations on elements

• Add element

  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>

• Delete element

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

• Get element

  $("#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");         //随意组合

• Replace element

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

this

jQuery:
$(this).click(function(){});
JavaScript:
this.click=function(){};

Operations on CSS

There are ## in jQuery #addClass, removeClass such commands to directly operate on a single CSS class JavaScript has
className, classList Such a command can only operate on all CSS classes

jQuery:
$("p").addClass("yellow");
$("p").removeClass("yellow");
JavaScript:
p.className= //your code;
p.classList.add("");
p.classList.remove("");

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

Detailed explanation of the use of js prototype

Detailed explanation of the steps of combining React with TypeScript and Mobx

The above is the detailed content of Instructions for using jQuery. For more information, please follow other related articles on the PHP Chinese website!