今回はjQueryの使い方についてご紹介します。jQueryを使用する際の注意点は以下の通りです。
$("jQuery Selector")
と CSS selector$("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类
も同じです。 にすることもできます。
は #
にすることもできます tag
にすることもできます
jQuery: $("p").addClass("yellow"); $("p").removeClass("yellow"); JavaScript: p.className= //your code; p.classList.add(""); p.classList.remove("");
ページの準備ができたら
rrreeeリスニングイベント
バインドイベントrrreee
クリックrrreee / li>
CSS
の操作🎜🎜 jQuery には addClass
があります。 単一の CSS クラス
を直接操作する removeClass
コマンドclassName
、classList
があります。このようなコマンドでは、 すべての CSS クラス
のみを操作します🎜rrreee🎜 この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、PHP 中国語 Web サイトの他の関連記事に注目してください。 🎜🎜推奨読書: 🎜🎜🎜jsプロトタイプの使用方法の詳細な説明🎜🎜🎜🎜 ReactとTypeScriptおよびMobxを組み合わせる手順の詳細な説明🎜🎜以上がjQueryの使用手順の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。