ASP.NET Core – MVC vs Razor Page
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();
});
可對其進行修改