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使用须知的详细内容。