这次给大家带来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;
};slideUP() 向上收起 slideDown() 向下展开 slideToggle() fadeIn(速度/ms) 渐入 $.contains(xxx,yyy); 判断 元素xxx 中是不是有 元素yyy
添加元素
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>删除元素
$("p#COLOR").empty(); //empty 方法将元素内容清除，但不删除元素
$("p#color).remove(); //remove 方法直接将元素删除
$("p#color").detach(); //detach 方法将元素删除后暂存在浏览器的内存里，
var $L=$("p#color").detach(); //可以将detach赋给一个变量，删除的元素将可以像数组一样存在变量里获取元素
$("#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"); //随意组合替换元素
$("#fish").replaceWith("<p>hello!</p>"); //把 id=fish 的元素替换成 <p>hello!</p>jQuery:
$(this).click(function(){});
JavaScript:
this.click=function(){};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中文网其它相关文章！
推荐阅读：
以上是jQuery使用须知的详细内容。更多信息请关注PHP中文网其他相关文章！
