1、:content是內容選擇器，查詢的時候即使有標籤，也能查到其表籤內部的文字。

例如：

$（function(){

$("li:content(l列表)").css("color","red")

})

//------------------

<li>列表1</li>
<li>列表2</li>
<li><span>列表3</span></li>

列表3在span標籤內也可以被查詢到

2、:has（選擇器）

選擇的時候，有元素在內的話，可以元素和元素內部的東西一起被匹配出來

3、:empty選擇器，可以選擇不包含元素或者文字的元素

4、:parent選擇器,將含有子元素或者文字的元素選擇出來

5、

:hidden匹配所有不可見元素或者是type為hidden的元素

:visible匹配所有可見元素

這倆個的話都是可見選擇器，

例如：

$("div:hidden").css("color","red")//display：none

//---------------------------------

<div style="width: 100px; height: 100px; background-color: yellow;display: none;">
11
</div>
<div style="width: 100px; height: 100px; background-color: burlywood;visibility: hidden;">
22
</div>

其中display:none也可以把元素不可見

6、attr和prop屬性

其中attr返回的型別是string型別，而prop返回的型別是boolean型別，所以prop選中複選框為true，沒選中為false。

共同返回的屬性值的函式，第一個引數為當前元素的索引值，第二個引數為原先的屬性值。

attr第一個引數是獲取，第二個為設定，可以替換第一個獲取的值。

例如：

$(".div").attr("data","2")

var ch1=$(":checked:eq(3)").attr("checked")
console.log(typeof ch1)

if(ch1==="checkde"){

}

var ch2=$(":checked:eq(3)").prop("checked")
console.log(typeof ch2)

if(ch1===true){

}
$(":checkbox:eq(3)").prop("checked",false)

//----------------------------------------------------------------

<div class="div" data= "1" vale="000">這是一個<span>div</span></div>
<input type="checkbox" checked value="足球" />
<input type="checkbox" checked=""/>
<input type="checkbox" checked="checked"/>
<input type="checkbox" checked="1212"/>
<input type="checkbox" checked="true"/>

7、基本效果

show（顯示隱藏的匹配元素）

hide（隱藏顯示的元素）

toggle（用於繫結兩個或多個事件處理器函式，以響應被選元素的輪流的 click 事件。如果元素是可見的，切換為隱藏的；如果元素是隱藏的，切換為可見的。）

$(".show").click(function() {
$("div").show()
})
$(".hide").click(function() {
$("div").hide()
})
$(".toggle").click(function() {
$("div").toggle()
})

--------------------------------------------------

<button class="show">show</button>
<button class="hide">hide</button>
<button class="toggle">toggle</button>

<div style="width: 100px; height: 100px;background-color: darkcyan;"></div>

基本效果主要改變的是display:none

8、滑動效果

slideDown（

通過高度變化（向下增大）來動態地顯示所有匹配的元素，在顯示完成後可選地觸發一個回撥函式。

這個動畫效果只調整元素的高度，可以使匹配的元素以“滑動”的方式顯示出來。

）

slideUp（

通過高度變化（向上減小）來動態地隱藏所有匹配的元素，在隱藏完成後可選地觸發一個回撥函式。

這個動畫效果只調整元素的高度，可以使匹配的元素以“滑動”的方式隱藏起來。

）

slideToggle（

通過高度變化來切換所有匹配元素的可見性，並在切換完成後可選地觸發一個回撥函式。

這個動畫效果只調整元素的高度，可以使匹配的元素以“滑動”的方式隱藏或顯示。

）

$(".slideDown").click(function() {
$("div").slideDown(3000)
})
$(".slideUp").click(function() {
$("div").slideUp(3000)
})
$(".slideToggle").click(function() {
$("div").slideToggle()
})

--------------------------------------------------------

<button class="slideDown">slideDown</button>
<button class="slideUp">slideUp</button>
<button class="slideToggle">slideToggle</button>

<div style="width: 100px; height: 100px;background-color: darkcyan;"></div>

注意：3000其為展示效果為3秒

其效果只調整元素的高height

9、淡入淡出效果

fadeTo（

把所有匹配元素的不透明度以漸進方式調整到指定的不透明度，並在動畫完成後可選地觸發一個回撥函式。

這個動畫只調整元素的不透明度，也就是說所有匹配的元素的高度和寬度不會發生變化。

）

//時間 透明度
$("div").fadeTo(1000, 0.5)

注意：第一個引數為時間1秒，第二個為效果減少0.5

fadeIn（

通過不透明度的變化來實現所有匹配元素的淡入效果，並在動畫完成後可選地觸發一個回撥函式。

這個動畫只調整元素的不透明度，也就是說所有匹配的元素的高度和寬度不會發生變化。

）

fadeOut（

通過不透明度的變化來實現所有匹配元素的淡出效果，並在動畫完成後可選地觸發一個回撥函式。

這個動畫只調整元素的不透明度，也就是說所有匹配的元素的高度和寬度不會發生變化。

）

fadeToggle（

通過不透明度的變化來開關所有匹配元素的淡入和淡出效果，並在動畫完成後可選地觸發一個回撥函式。

這個動畫只調整元素的不透明度，也就是說所有匹配的元素的高度和寬度不會發生變化。

）

$(".fadeIn").click(function() {
$("div").fadeIn()
})
$(".fadeOut").click(function() {
$("div").fadeOut()
})
$(".fadeToggle").click(function() {
$("div").fadeToggle()
})

-------------------------------------------------------------

<button class="fadeIn">fadeIn</button>
<button class="fadeOut">fadeOut</button>
<button class="fadeToggle">fadeToggle</button>
<div style="width: 100px; height: 100px;background-color: darkcyan;"></div>

效果改變的為opacity

10、自定義的效果

stop（

停止所有在指定元素上正在執行的動畫。

如果佇列中有等待執行的動畫(並且clearQueue沒有設為true)，他們將被馬上執行

）

例如：

/ 開始動畫
$("#go").click(function() {
$("div").animate({
width: '+200px'
}, 5000);
});
// 當點選按鈕後停止動畫
$("#stop").click(function() {
$("div").stop();
});

-----------------------------------------------------

<button id="go">Go</button>
<button id="stop">STOP!</button>
<div style="width: 50px; height: 50px; background-color: red;"></div>

delay（

設定一個延時來推遲執行佇列中之後的專案

）

例如：

$("div").animate({
width: '+200px'
}, 5000);
//delay,我將她放在這裡，效果是把一個div向上滑動並消失，但其可以改變她消失的速度
$('div').slideUp(8000).delay(8000).fadeIn(8000);

------------------------------------------------------------------

<button id="go">Go</button>
<button id="stop">STOP!</button>
<div style="width: 50px; height: 50px; background-color: red;"></div>

注意：這是一個時間設定，只能改變效果的快慢，並不能改變其方式和效果

11、可以改變自定義的長寬高

$("#go").click(function() {
$("div").animate({
width: "+=50px",
height: "+=50px",
}, 1000);
});

----------------------------------

<button id="go"> Run</button>
<div style="width: 50px; height: 50px; background-color: red;"></div>

注意：紅色部位是時間，在1秒的時間內將這個div的長，寬增加50px

12、finish

停止當前正在執行的動畫，刪除所有排隊的動畫，並完成匹配元素所有的動畫。

當.finish()在一個元素上被呼叫，立即停止當前正在執行的動畫和所有排隊的動畫（如果有的話），並且他們的CSS屬性設定為它們的目標值（所有動畫的目標值）。所有排隊的動畫將被刪除。

如果第一個引數提供，該字串表示的佇列中的動畫將被停止。

.finish()方法和.stop(true, true)很相似，.stop(true, true)將清除佇列，並且目前的動畫跳轉到其最終值。但是，不同的是，.finish()會導致所有排隊的動畫的CSS屬性跳轉到他們的最終值。

例如：

$("#complete").click(function() {
$("div").finish();
});

可對其進行修改