这次给大家带来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
对元素的操作添加元素
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>
thisjquery:
$(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();
相信看了本文案例你已经掌握了方法，更多精彩请关注其它相关文章！
推荐阅读：
js原型使用详解
react结合typescript和mobx步骤详解
以上就是jquery使用须知的详细内容。