搜尋

首頁  >  文章  >  web前端  >  jQuery基本語法總結

jQuery基本語法總結

怪我咯
怪我咯原創
2017-06-27 11:13:361733瀏覽

jQuery語法：

jQuery 語法是為 HTML 元素的選取而編製的，可以對元素執行某些動作。 此是重點，初學一定要知道你學的東西的用途是做什麼。

基礎語法是：$(selector).action()。 所有的jQuery就是圍繞著這個進行的，選取頁面的元素再對元素進行某些操作。

範例

$(this).hide() - 隱藏目前元素

文件就緒函數：

是為了防止文件在完全載入（就緒）之前執行jQuery 程式碼。由jQuery的約定，所有的JavaScript程式碼最好都放在這裡面。 


$(document).ready(function(){
});




jQuery元素選擇器和屬性選擇器：它們允許您透過標籤名稱、屬性名稱或內容對HTML 元素進行選擇。 對應$(selector).action()的前半部。

jQuery 元素選擇器：

$("p") 選取 e388a4556c0f65e1904146cc1a846bee 元素。

$("p.intro") 選取所有 class="intro" 的 e388a4556c0f65e1904146cc1a846bee 元素。

$("p#demo") 選取所有 id="demo" 的 e388a4556c0f65e1904146cc1a846bee 元素。

 

jQuery 屬性選擇器：


$("[href]") 選取所有帶有href 屬性的元素。

$("[href='#']") 選取所有帶有 href 值等於 "#" 的元素。

$("[href!='#']") 選取所有帶有 href 值不等於 "#" 的元素。


$("[href$='.jpg']") 選取所有 href 值以 ".jpg" 結尾的元素。

 

jQuery CSS 選擇器：

#$("p").css("background-color","re​​d");

如需完整的jquery選擇器的參考手冊：http://www.w3school.com.cn/jquery/jquery_ref_selectors.asp




jQuery 事件函數：對應$(selector).action()的後半部。


事件處理程序指的是當 HTML 中發生某些事件時所呼叫的方法。 



<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
    $("p").hide();
  });
});
</script>
</head>

<body>
<h2>This is a heading</h2>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<button>Click me</button>
</body>

</html>


Event 函數 綁定函數至
$(document).ready(function) 將函數綁定到文件的就緒事件（當文件完成載入時）
$(selector).click(function) 觸發或將函數綁定到被選元素的點擊事件
$(selector).dblclick(function) 觸發或將函數綁定到被選元素的雙擊事件
$(selector).focus(function) 觸發或將函數綁定到被選元素的獲得焦點事件
#$(selector).mouseover(function) 觸發或將函數綁定到被選元素的滑鼠懸停事件
#

完整的jQuery事件：http://www.w3school.com.cn/jquery/jquery_ref_events.asp



约定：


  • 把所有 jQuery 代码置于事件处理函数中

  • 把所有事件处理函数置于文档就绪事件处理器中

  • 把 jQuery 代码置于单独的 .js 文件中

  • 如果存在名称冲突，则重命名 jQuery 库




jQuery 效果：对应$(selector).action()的后半部分。

隐藏、显示、切换，滑动，淡入淡出，以及动画

通过 jQuery，您可以使用 hide() 和 show() 方法来隐藏和显示 HTML 元素

$(selector).hide(speed,callback);

$(selector).show(speed,callback);


可选的 speed 参数规定隐藏/显示的速度，可以取以下值："slow"、"fast" 或毫秒。

可选的 callback 参数是隐藏或显示完成后所执行的函数名称。


8b05045a5be5764f313ed5b9168a17e6
100db36a723c770d327fc0aef2ce13b1
93f0f5c25f18dab9d176bd4f6de5d30e
df5a3115abdb1f2bf4df02d4bbbd84872cacc6d41bbb37262a98f745aa00fbf0
5cd6e472395e766622bc5d31b556eb7a
$(document).ready(function(){
  $("button#yincang").click(function(){
  $("p#id").hide(1000,function(){alert('bye')});
  });
});
$(document).ready(function(){
  $("button#xian").click(function(){

  $("p#id").show(function(){1000,alert('hello')});

  });
});
2cacc6d41bbb37262a98f745aa00fbf0
9c3bca370b5104690d9ef395f2c5f8d1
6c04bd5ca3fcae76e30b72ad730ca86d
d3259590dd7a1c44081cbc652a12289e显示65281c5ac262bf6d81768915a4a77ac0
c67eb663ef3bebc02acf98265a3b6c6c隐藏65281c5ac262bf6d81768915a4a77ac0
61fff9001bdd35ddad63ed11e0534569这是一个段落。94b3e26ee717c64999d7867364b1b4a3
e388a4556c0f65e1904146cc1a846bee这是另一个段落。94b3e26ee717c64999d7867364b1b4a3
36cc49f0c466276486e50c850b7e4956

73a6ac4ed44ffec12cee46588e518a5e

可以使用 toggle() 方法来切换 hide() 和 show() 方法。

$(selector).toggle(speed,callback);


8b05045a5be5764f313ed5b9168a17e6
100db36a723c770d327fc0aef2ce13b1
93f0f5c25f18dab9d176bd4f6de5d30e
df5a3115abdb1f2bf4df02d4bbbd84872cacc6d41bbb37262a98f745aa00fbf0
5cd6e472395e766622bc5d31b556eb7a
$(document).ready(function(){
  $("button").click(function(){
  $("p").toggle();
  });
});
2cacc6d41bbb37262a98f745aa00fbf0
9c3bca370b5104690d9ef395f2c5f8d1
6c04bd5ca3fcae76e30b72ad730ca86d
a73a95372d4794d0f15522f518a543e9切换65281c5ac262bf6d81768915a4a77ac0
e388a4556c0f65e1904146cc1a846bee这是一个段落。94b3e26ee717c64999d7867364b1b4a3
e388a4556c0f65e1904146cc1a846bee这是另一个段落。94b3e26ee717c64999d7867364b1b4a3
36cc49f0c466276486e50c850b7e4956

73a6ac4ed44ffec12cee46588e518a5e





jQuery 淡入淡出方法

通过 jQuery，您可以实现元素的淡入淡出效果。

jQuery 拥有下面四种 fade 方法：

  • fadeIn()

  • fadeOut()

  • fadeToggle()       jQuery fadeToggle() 方法可以在 fadeIn() 与 fadeOut() 方法之间进行切换。

  • fadeTo()           fadeTo() 方法允许渐变的最终结果为给定的不透明度（值介于 0 与 1 之间，0为透明，1为不透明）。




jQuery 滑动方法


通过 jQuery，您可以在元素上创建滑动效果。

jQuery 拥有以下滑动方法：

  • slideDown()

  • slideUp()

  • slideToggle()




jQuery 动画 - animate() 方法


jQuery animate() 方法用于创建自定义动画。


$(selector).animate({params},speed,callback);


必需的 params 参数定义形成动画的 CSS 属性。

可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。


可选的 callback 参数是动画完成后所执行的函数名称。

如需对位置进行操作，要记得首先把元素的 CSS position 属性设置为 relative、fixed 或 absolute！

可以用animate() 方法來操作所有CSS 屬性， 需要記住一件重要的事情：當使用animate() 時，必須使用Camel 標記法書寫所有的屬性名，例如，必須使用paddingLeft 而不是padding-left，使用marginRight 而不是margin-right，等等。


它把e388a4556c0f65e1904146cc1a846bee 元素移到左邊，直到left 屬性等於250 像素為止：

8b05045a5be5764f313ed5b9168a17e6

100db36a723c770d327fc0aef2ce13b1
93f0f5c25f18dab9d176bd4f6de5d30e
13f74617924f42bfb61a111e3dec0e99
8f6a9574ec35bb7d1ed80586ac074f65
$(document).ready(function(){
  $("button").click(function(){
    $("p") .animate({left:'250px'});
  });
});
2cacc6d41bbb37262a98f745aa00fbf0
9c3bca370b5104690d9ef395f2c5f8d1

< ;body>
bb9345e55eb71822850ff156dfde57c8開始動畫65281c5ac262bf6d81768915a4a77ac0
2e00dd0040e8506703822d6805b3e1af
< ;/p>

36cc49f0c466276486e50c850b7e4956

73a6ac4ed44ffec12cee46588e518a5e

jQuery 提供動畫的佇列功能， 這表示如果您在彼此之後寫更多個animate() 調用，jQuery 會建立包含這些方法調用的「內部」隊列。然後逐一運行這些 animate 調用。

$("button").click(function(){
  var p=$("p");
  p.animate({height:'300px',opacity:'0.4 '},"slow");
  p.animate({width:'300px',opacity:'0.8'},"slow");
  p.animate({height:'100px',opacity: '0.4'},"slow");
  p.animate({width:'100px',opacity:'0.8'},"slow");

#});

#可以用下面這種格式代替

p.animate({height:'300px',opacity:'0.4'},"slow").animate({width:'300px',opacity:'0.8 '},"slow");



#jQuery stop() 方法用於在動畫或效果完成前對它們進行停止。

$(selector).stop(stopAll,goToEnd);

可選的 stopAll 參數規定是否應該清除動畫佇列。預設是 false，即僅停止活動的動畫，允許任何排入佇列的動畫向後執行。

可選的 goToEnd 參數規定是否立即完成目前動畫。預設是 false。


8b05045a5be5764f313ed5b9168a17e6
100db36a723c770d327fc0aef2ce13b1
93f0f5c25f18dab9d176bd4f6de5d30e
e77e3def01ecc49f4830089c2ebfde692cacc6d41bbb37262a98f745aa00fbf0
3f1c4e4b6b16bbbd69b2ee476dc4f83a
$(document).ready(function(){
  $("#flip").click(function( ){
    $("#panel").slideDown(5000);
  });
  $("#stop").click(function(){
    $(" #panel").stop();
  });
});
2cacc6d41bbb37262a98f745aa00fbf0

080b747a20f9163200dd0a7d304ba388
#panel,#flip
{
padding:5px;
text-align:center;
background-color:#e5eecc;
border:solid 1px #c3c3c3;
}
#panel
{
padding:50px;
display:none;
}
531ac245ce3e4fe3d50054a55f265927
9c3bca370b5104690d9ef395f2c5f8d1

6c04bd5ca3fcae76e30b72ad730ca86d

a7a60cea450f42b2b97b16a5d74b9609停止滑動65281c5ac262bf6d81768915a4a77ac0
f558f125c0943b004f5cbfcc7dd20fd7點擊這裡，向下滑動面板6fb279ad3fd4344cbdd93aac6ad173ac
55a50214d3a0454ac595f64158e13d7eHello world!94b3e26ee717c64999d7867364b1b4a3

36cc49f0c466276486e50c850b7e4956

73a6ac4ed44ffec12cee46588e518a5e



#Callback 函數在目前動畫100% 完成之後執行。

$(selector).hide(speed,callback)

$("p").hide(1000,function(){
alert("The paragraph is now hidden" );

});

完整的動畫：http://www.w3school.com.cn/jquery/jquery_ref_effects.asp



#jQuery 擁有可操作HTML 元素和屬性的強大方法。

jQuery DOM 操作：

DOM = Document Object Model（文件物件模型）， 「W3C 文件物件模型獨立於平台和語言的介面，允許程式和腳本動態存取和更新文件的內容、結構以及樣式。個簡單實用的DOM 操作的jQuery 方法：


text() - 設定或傳回所選元素的文字內容


html () - 設定或傳回所選元素的內容（包括HTML 標記）

val() - 設定或傳回表單欄位的值

    $("#btn1 ").click(function(){
  •   alert("Text: " + $("#test").text());

    });

    $("#btn2").click (function(){
    •   alert("HTML: " + $("#test").html());
  • });

    $("#btn1").click(function(){
      alert("Value: " + $("#test").val());
    });

    $("button").click(function(){
      alert($("#w3s").attr("href"));
    });

# 

設定DOM值：

$("#btn1").click(function(){
  $("#test1") .text("Hello world!");
});
$("#btn2").click(function(){
  $("#test2").html("77b003722e569342dca10b48c73631a1");
});
$("#btn3").click(function(){
  $("#test3").val("Dolly Duck");

});

text()、html() 以及val() 的回呼函數， 回呼函數由兩個參數：被選元素清單中目前元素的下標，以及原始（舊的）值。然後以函數return 的傳回內容作為使用的新值。

$("#btn1").click(function(){
  $("#test1").text(function(i,origText){
    return "Old text: " + origText + " New text: Hello world!
    (index: " + i + ")";
  });
});

$("#btn2")#  });
});

$("#btn2").click (function(){
  $("#test2").html(function(i,origText){

    return "Old html: " + origText + " New html:Hello 07aec8279184d16fedc0638ac18fa96e

    (index: " + i + ")";

  });


});

#$("button").click(function() {

  $("#w3s").attr("href", function(i,origValue){

    return origValue + "/jquery";

  });


})) ;


#在DOM中加入新的值：

  • append() - 在被選元素的結尾插入內容

  • prepend() - 在被選元素的開頭插入內容

  • after() - 在被選元素之後插入內容

#before() - 在被選元素之前插入內容


$("p").append("Some appended text.");


$("p").prepend("Some prepended text.");

$("img").after("Some text after");


$("img").before(" Some text before");


#刪除DOM中的元素：

  • ##如需刪除元素和內容，一般可使用以下兩個jQuery 方法：

  • remove() - 刪除被選元素（及其子元素)

empty() - 從被選元素中刪除子元素

$("#p1").remove();


$("#p1").empty();

#jQuery remove() 方法也可接受一個參數，讓您對被刪除元素進行過濾。


此參數可以是任何 jQuery 選擇器的語法。




100db36a723c770d327fc0aef2ce13b1
93f0f5c25f18dab9d176bd4f6de5d30e
13f74617924f42bfb61a111e3dec0e99 2cacc6d41bbb37262a98f745aa00fbf0
3f1c4e4b6b16bbbd69b2ee476dc4f83a
$(document).ready(function(){
  $("button").click(function(){
    $("p" ).remove(".italic");
  });
});
2cacc6d41bbb37262a98f745aa00fbf0
9c3bca370b5104690d9ef395f2c5f8d1

6c04bd5ca3fcae76e30b72ad730ca86d

e388a4556c0f65e1904146cc1a846beeThis is a paragraph in the p.94b3e26ee717c64999d7867364b1b4a3
41ecea7ef1de651b88b36dc73203de945a8028ccc7a7e27417bff9f05adf5932This is another paragraph in the p.41ecea7ef1de651b88b36dc73203de945a8028ccc7a7e27417bff9f05adf5932This is another paragraph in the p.72ac96585ae54b6ae11f849d2649d9e694b3e26ee717c64999d7867364b1b4a3

bb9345e55eb71822850ff156dfde57c8刪除class ="italic" 的所有p 元素65281c5ac262bf6d81768915a4a77ac0

36cc49f0c466276486e50c850b7e4956


#73a6ac4ed44ffec12cee46588e518a5e




#jQuery CSS

##########jQuery 擁有若干進行CSS 操作的方法。我們將學習下面這些：############addClass() - 在被選元素中新增一個或多個類別############removeClass() - 從被選元素刪除一個或多個類別############toggleClass() - 對被選元素進行新增/刪除類別的切換操作###########css( ) - 設定或傳回樣式屬性##################

8b05045a5be5764f313ed5b9168a17e6
100db36a723c770d327fc0aef2ce13b1
93f0f5c25f18dab9d176bd4f6de5d30e
13f74617924f42bfb61a111e3dec0e993fa3f474cbb4b6d948eebecb1be5dde4
3f1c4e4b6b16bbbd69b2ee476dc4f83a
$(document).ready(function(){
  $("button").click(function(){
#    $("h1,h2,p ").addClass("blue");
    $("p").addClass("important");
  });
});
2cacc6d41bbb37262a98f745aa00fbf0
080b747a20f9163200dd0a7d304ba388
.important
{
font-weight:bold;
font-size:xx-large;
}
.blue
{
color:blue;
}
531ac245ce3e4fe3d50054a55f265927
9c3bca370b5104690d9ef395f2c5f8d1
6c04bd5ca3fcae76e30b72ad730ca86d
##4a249f0d628e2318394fd9b75b4636b1標題1< ;/h1>
c1a436a314ed609750bd7c7d319db4da標題22e9b454fa8428549ca2e64dfac4625cd
e388a4556c0f65e1904146cc1a846bee這是一個段落。 94b3e26ee717c64999d7867364b1b4a3
e388a4556c0f65e1904146cc1a846bee這是另一個段落。 94b3e26ee717c64999d7867364b1b4a3
e388a4556c0f65e1904146cc1a846bee這是非常重要的文本！ 94b3e26ee717c64999d7867364b1b4a3
0c6dc11e160d3b678d68754cc175188a
bb9345e55eb71822850ff156dfde57c8為元素加入類別65281c5ac262bf6d81768915a4a77ac0

36cc49f0c466276486e50c850b7e4956

73a6ac4ed44ffec12cee46588e518a5e

您也可以在addClass() 方法中規定多個類別：

$("button").click(function(){

  $("#p1"). addClass("important blue");
});


#jQuery css() 方法


css () 方法設定或傳回被選元素的一個或多個樣式屬性。

如需傳回指定的CSS 屬性的值，請使用下列語法

##$("p").css("background-color");

如需設定指定的CSS 屬性，請使用下列語法：

$("p").css("background-color","yellow");

如需設定多個CSS 屬性，請使用下列語法：

$("p").css({"background-color":"yellow","font-size":"200%"});



#jQuery處理元素尺寸：

透過jQuery，很容易處理元素和瀏覽器窗口的尺寸。


    width()

    • #height()

  • # #innerWidth()

  • innerHeight()

    • ##width() 方法設定或傳回元素的寬度（不包括內邊距、邊框或外邊距）。

height() 方法設定或傳回元素的高度（不包括內邊距、邊框或外邊距）。

$("button").click(function(){

  var txt="";
  txt+="Width: " + $("#p1").width() + "0b9f73f8e206867bd1f5dc5957dbcb38";

  txt+="Height: " + $("#p1").height();

  $("#p1").html(txt);

});




innerWidth() 方法傳回元素的寬度（包括內邊距）。

innerHeight() 方法傳回元素的高度（包括內邊距）。


outerWidth() 方法傳回元素的寬度（包括內邊距和邊框）。

outerHeight() 方法傳回元素的高度（包括內邊距和邊框）。


outerWidth(true) 方法傳回元素的寬度（包括內邊距、邊框和外邊距）。

outerHeight(true) 方法傳回元素的高度（包括內邊距、邊框和外邊距）。


下面的範例設定指定的e388a4556c0f65e1904146cc1a846bee 元素的寬度與高度：

$("button").click(function (){ $("#p1").width(500).height(500); });

 


jQuery的移動：


#jQuery 遍歷，意為“移動”，用於根據其相對於其他元素的關係來「尋找」（或選取）HTML 元素。以某項選擇開始，並沿著這個選擇移動，直到抵達您期望的元素為止。


在家族樹中透過jQuery 遍歷，您能夠從被選（目前的）元素開始，輕鬆地在家族樹中向上移動（祖先），向下移動（子孫），水平移動（同胞）。這種移動稱為對 DOM 進行遍歷。

jQuery 提供了多種遍歷 DOM 的方法。遍歷方法中最大的種類是樹遍歷（tree-traversal）。

向上遍歷DOM 樹

#這些jQuery 方法很有用，它們用於向上遍歷DOM 樹：

parent()


parents()

  • parentsUntil()

  • parent() 方法傳回被選元素的直接父元素。此方法只會向上一級對 DOM 樹進行遍歷。

    • $(document).ready(function(){
  •   $("span").parent();

    });

    • parents() 方法回傳被選元素的所有祖先元素，它一路向上直到文檔的根元素(100db36a723c770d327fc0aef2ce13b1)。


您也可以使用可選參數來過濾對祖先元素的搜尋。

下面的範例傳回所有45a2772a6b6107b401db3c9b82c049c2 元素的所有祖先，而且它是ff6d136ddc5fdfeffaf53ff6ee95f185 元素：

$(document).ready(function(){
  $("span ").parents("ul");
});


#parentsUntil() 方法傳回介於兩個給定元素之間的所有祖先元素，不包括開始也不包括結尾。

下面的範例回傳介於45a2772a6b6107b401db3c9b82c049c2 與e388a4556c0f65e1904146cc1a846bee 元素之間的所有祖先元素：

$(document).ready(function(){
  $ ("span").parentsUntil("p");
});


下遍歷DOM 樹


下面是兩個用於向下遍歷DOM 樹的jQuery 方法：

  • #children()

  • ##find()


jQuery children() 方法


##children() 方法傳回被選取元素的所有直接子元素。此方法只會向下一層對 DOM 樹進行遍歷。

您也可以使用可選參數來過濾子元素的搜尋。


$(document).ready(function(){

  $("p").children("p.1");     // class為1的p元素

});

find() 方法傳回被選元素的後代元素，一路向​​下直到最後一個後代。

下面的範例回傳屬於e388a4556c0f65e1904146cc1a846bee 後代的所有45a2772a6b6107b401db3c9b82c049c2 元素：

$(document).ready(function(){

  $("p") .find("span");

});

下面的範例回傳e388a4556c0f65e1904146cc1a846bee 的所有後代：

$(document).ready(function(){

  $("p").find("*");


});


#有許多有用的方法讓我們在DOM 樹進行水平遍歷：

    siblings()

    • #next()

  • ##nextAll()

  • nextUntil()

  • prev()

  • prevAll()

  • prevUntil()

  • siblings() 方法傳回所有被選元素的同胞元素。不包括自身。
您也可以使用可選參數來過濾同胞元素的搜尋。

$(document).ready(function(){

  $("h2").siblings("p");

});


next() 方法傳回被選元素的下一個同胞元素。該方法只傳回一個元素。

$(document).ready(function(){

  $("h2").next();

});


nextAll() 方法回傳被選元素的所有跟隨的同胞元素。返回後面的所有元素。

nextUntil() 方法傳回介於兩個給定參數之間的所有跟隨的同胞元素。不包括兩端的元素。

prev(), prevAll() 以及prevUntil() 方法的工作方式與上面的方法類似，只不過方向相反而已：它們返回的是前面的同胞元素（在DOM 樹中沿著同胞元素向後遍歷，而不是向前）。


三個最基本的篩選方法是：first(), last() 和eq()，它們允許您基於其在一組元素中的位置來選擇一個特定的元素。其他過濾方法，例如 filter() 和 not() 可讓您選取符合或不符合某項指定標準的元素。

first() 方法傳回被選元素的首個元素。

8b05045a5be5764f313ed5b9168a17e6
100db36a723c770d327fc0aef2ce13b1

93f0f5c25f18dab9d176bd4f6de5d30e

e77e3def01ecc49f4830089c2ebfde69
2cacc6d41bbb37262a98f745aa00fbf0
3f1c4e4b6b16bbbd69b2ee476dc4f83a
$(document).ready(function(){
  $("p p").first( ).css("background-color","yellow");
});
2cacc6d41bbb37262a98f745aa00fbf0
9c3bca370b5104690d9ef395f2c5f8d1
6c04bd5ca3fcae76e30b72ad730ca86d

4a249f0d628e2318394fd9b75b4636b1歡迎來到我的首頁473f0a7621bec819994bb5020d29372a

e388a4556c0f65e1904146cc1a846bee

e388a4556c0f65e1904146cc1a846bee這是p 中的一個段落。 94b3e26ee717c64999d7867364b1b4a3               ba2aa513a77b4a2dc24c0d71e62a23f9

94b3e26ee717c64999d7867364b1b4a3

e388a4556c0f65e1904146cc1a846bee


94b3e26ee717c64999d7867364b1b4a3

e388a4556c0f65e1904146cc1a846bee
<p>這是p>

e388a4556c0f65e1904146cc1a846bee
<p 中的另一個段落。 94b3e26ee717c64999d7867364b1b4a3
94b3e26ee717c64999d7867364b1b4a3

e388a4556c0f65e1904146cc1a846bee這也是段落。 94b3e26ee717c64999d7867364b1b4a3

36cc49f0c466276486e50c850b7e4956

73a6ac4ed44ffec12cee46588e518a5e

eq() 方法傳回被選元素中指定索引號碼的元素。索引號碼從 0 開始，因此首個元素的索引號碼是 0 而不是 1。下面的範例選取第二個e388a4556c0f65e1904146cc1a846bee 元素（索引號1）：





#100db36a723c770d327fc0aef2ce13b1
93f0f5c25f18dab9d176bd4f6de5d30e
#13f74617924f42bfb61a111e3dec0e99
2cacc6d41bbb37262a98f745aa00fbf0
3f1c4e4b6b16bbbd69b2ee476dc4f83a
$(document).ready(function(){
$("p").eq(1).css("background-color","yellow");
});
2cacc6d41bbb37262a98f745aa00fbf0

9c3bca370b5104690d9ef395f2c5f8d1

6c04bd5ca3fcae76e30b72ad730ca86d

###4a249f0d628e2318394fd9b75b4636b1歡迎來到我的首頁473f0a7621bec819994bb5020d29372a######e388a4556c0f65e1904146cc1a846bee我是唐老鴨(index 0)。 94b3e26ee717c64999d7867364b1b4a3###

e388a4556c0f65e1904146cc1a846bee唐老鴨 (index 1)。 94b3e26ee717c64999d7867364b1b4a3                       f48bb828b0a5f026bb860fdf7949f22c       

e388a4556c0f65e1904146cc1a846bee 我住在 Duckburg (index 2)。 94b3e26ee717c64999d7867364b1b4a3
e388a4556c0f65e1904146cc1a846bee我最好的朋友是米老鼠 (index 3)。 94b3e26ee717c64999d7867364b1b4a3

36cc49f0c466276486e50c850b7e4956

73a6ac4ed44ffec12cee46588e518a5e

filter() 方法可讓您規定一個標準。不符合這個標準的元素會被從集合中刪除，符合的元素會被回傳。


100db36a723c770d327fc0aef2ce13b1
93f0f5c25f18dab9d176bd4f6de5d30e
13f74617924f42bfb61a111e3dec0e99
2cacc6d41bbb37262a98f745aa00fbf0
3f1c4e4b6b16bbbd69b2ee476dc4f83a
$(document).ready(function(){
  $("p").filter(".intro").css(" background-color","yellow");
});
2cacc6d41bbb37262a98f745aa00fbf0
9c3bca370b5104690d9ef395f2c5f8d1
6c04bd5ca3fcae76e30b72ad730ca86d

#4a249f0d628e2318394fd9b75b4636b1歡迎來到我的首頁473f0a7621bec819994bb5020d29372a
e388a4556c0f65e1904146cc1a846bee我是唐老鴨。 94b3e26ee717c64999d7867364b1b4a3
03c914392195facb4bb03ef129401e65我住在 Duckburg。 94b3e26ee717c64999d7867364b1b4a3
03c914392195facb4bb03ef129401e65我愛 Duckburg。 94b3e26ee717c64999d7867364b1b4a3
e388a4556c0f65e1904146cc1a846bee我最好的朋友是 Mickey。 94b3e26ee717c64999d7867364b1b4a3

36cc49f0c466276486e50c850b7e4956

73a6ac4ed44ffec12cee46588e518a5e

not() 方法傳回所有不符合標準的元素。提示：not() 方法與 filter() 相反。

以上是jQuery基本語法總結的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn
上一篇：JQuery Deferred 物件剖析下一篇：JQuery Deferred 物件剖析

相關文章

看更多