jQuery使用須知

這次帶給大家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

對元素的操作

新增元素<pre class="brush:php;toolbar:false">jQuery: $(&quot;p&quot;).append(&quot;&lt;p&gt;hello!&lt;/p&gt;&quot;);    直接在 p 后面添加元素 p ，p 的内容为 hello！ $(&quot;p&quot;).append($(&quot;#color&quot;));         在 p 后面添加本代码中 id=&quot;color&quot; 的元素 JavaScript: var p=document.getElementById(&quot;p&quot;); var p=doucment.createElement(&quot;p&quot;); p.appendChild(p);</pre> <pre class="brush:php;toolbar:false"> $(&quot;p&quot;).before(&quot;&lt;p&gt;hello!&lt;/p&gt;&quot;);     //在 p 上(前)面插入 &quot;&lt;p&gt;hello!&lt;/p&gt;&quot;  $(&quot;p&quot;).after(&quot;&lt;p&gt;hello!&lt;/p&gt;&quot;);      //在 p 下(后)面插入 &quot;&lt;p&gt;hello!&lt;/p&gt;&quot;</pre> <pre class="brush:php;toolbar:false">$(&quot;p&quot;).wrap(&quot;&lt;a&gt;i`m yellow!&lt;/a&gt;&quot;);    // &lt;p&gt; 下添加子元素 &lt;a&gt;&lt;/a&gt;&lt;/p&gt;</pre>

#刪除元素<pre class="brush:php;toolbar:false">$(&quot;p#COLOR&quot;).empty();      //empty 方法将元素内容清除，但不删除元素 $(&quot;p#color).remove();      //remove 方法直接将元素删除 $(&quot;p#color&quot;).detach();     //detach 方法将元素删除后暂存在浏览器的内存里， var $L=$(&quot;p#color&quot;).detach();  //可以将detach赋给一个变量，删除的元素将可以像数组一样存在变量里</pre>## 取得元素

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

替換元素<pre class="brush:php;toolbar:false">$(&quot;#fish&quot;).replaceWith(&quot;&lt;p&gt;hello!&lt;/p&gt;&quot;);   //把 id=fish 的元素替换成 &lt;p&gt;hello!&lt;/p&gt;</pre>this<pre class="brush:php;toolbar:false">jQuery: $(this).click(function(){}); JavaScript: this.click=function(){};</pre>對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中文網其他相關文章！