这次给大家带来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><div class="aritcle_card flexRow"> <div class="artcardd flexRow"> <a class="aritcle_card_img" href="/ai/2023" title="Cardify卡片工坊"><img src="https://img.php.cn/upload/ai_manual/000/000/000/175679994618460.png" alt="Cardify卡片工坊" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a> <div class="aritcle_card_info flexColumn"> <a href="/ai/2023" title="Cardify卡片工坊">Cardify卡片工坊</a> <p>使用Markdown一键生成精美的小红书知识卡片</p> </div> <a href="/ai/2023" title="Cardify卡片工坊" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div>"); 直接在 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>
this
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中文网其它相关文章！
推荐阅读：
