這次帶給大家jQuery使用須知，jQuery使用的注意事項有哪些，下面就是實戰案例，一起來看一下。
jQuery選擇器$("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
登入後複製
對元素的操作
新增元素<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">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);</pre><div class="contentsignin">登入後複製</div></div>
<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"> $("p").before("<p>hello!</p>"); //在 p 上(前)面插入 "<p>hello!</p>"
$("p").after("<p>hello!</p>"); //在 p 下(后)面插入 "<p>hello!</p>"</pre><div class="contentsignin">登入後複製</div></div>
<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">$("p").wrap("<a>i`m yellow!</a>"); // <p> 下添加子元素 <a></pre><div class="contentsignin">登入後複製</div></div>
#刪除元素<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">$("p#COLOR").empty(); //empty 方法将元素内容清除，但不删除元素
$("p#color).remove(); //remove 方法直接将元素删除
$("p#color").detach(); //detach 方法将元素删除后暂存在浏览器的内存里，
var $L=$("p#color").detach(); //可以将detach赋给一个变量，删除的元素将可以像数组一样存在变量里</pre><div class="contentsignin">登入後複製</div></div>## 取得元素
$("#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"); //随意组合登入後複製
替換元素
<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">$("#fish").replaceWith("<p>hello!</p>"); //把 id=fish 的元素替换成 <p>hello!</p></pre><div class="contentsignin">登入後複製</div></div>this
<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">jQuery:
$(this).click(function(){});
JavaScript:
this.click=function(){};</pre><div class="contentsignin">登入後複製</div></div>對CSS
的操作
jQuery中有
addClass
、removeClass這樣的指令來直接對
單一CSS類別
進行動作JavaScript有className
、###classList####這樣的指令，只能對###全部CSS類別###進行操作###
jQuery:
$("p").addClass("yellow");
$("p").removeClass("yellow");
JavaScript:
p.className= //your code;
p.classList.add("");
p.classList.remove("");登入後複製
###相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！ ######推薦閱讀：#########js原型使用詳解#############React結合TypeScript和Mobx步驟詳解######
以上是jQuery使用須知的詳細內容。更多資訊請關注PHP中文網其他相關文章！
