一：簡介
jQuery是免費、開源的。jQuery已經成爲最流行的javascript庫。 jQuery能夠使用戶的html頁面保持代碼和html內容分離，也就是說，不用再在html裏面插入一堆js來調用命令了，只需要定義id即可。
二：基本語法
<script type="text/javascript">
//js 執行時，有加載順序
/* jQuery獲得數據
* * 語法：$("選擇器") == jQuery("選擇器")
*
*/
var username = $("#username");
// * val()函數 用於獲得 value屬性的值
alert(username.val());
</script>
三：JQuery與DOM對象的轉換
<script type="text/javascript">
//1 使用javascript獲得value值
var username = document.getElementById("username");
//alert(username.value);
//2 將 dom對象轉換 jQuery對象
// * 語法：$(dom對象)
// * 建議：jQuery對象變量名，建議爲$開頭
var $username = $(username);
// alert($username.val());
//3 將 jQuery對象轉換 dom對象
//3.1 jQuery對象內部使用【數組】存放所有的數據，可以數組的下標獲取（索引）
var username2 =$username[0];
alert(username2.value);
//3.2 jQuery提供函數 get() 轉換成dom對象
var username3 =$username.get(0);
alert(username3.value);
</script> 三：選擇器
3.1 基本選擇器
<script type="text/javascript">
$(document).ready(function(){
}); // 這這個就是加載頁面 類似於window.onlad
// <input type="button" value="選擇 id爲 one 的元素." id="btn1"/>
$(document).ready(function() {
$("#btn1").click(function() {
$("#one").css("background-color","#ff0");
});
// <input type="button" value="選擇 class 爲 mini 的所有元素." id="btn2"/>
$("#btn2").click(function(){
$(".mini").css("background-color","#ff0");
});
// <input type="button" value="選擇 元素名是 div 的所有元素." id="btn3"/>
$("#btn3").click(function(){
$("div").css("background-color","#ff0");
});
//// <input type="button" value="選擇 所有的元素." id="btn4"/>
$("#btn4").click(function(){
$("*").css("background-color","#ff0");
});
// <input type="button" value="選擇 所有的span元素和id爲two的元素." id="btn5"/>
$("#btn5").click(function(){
$("span,#two").css("background-color","#ff0");
});
});
</script>3.2層級
<script type="text/javascript">
$(document).ready(function(){
//<input type="button" value="選擇 body內的所有div元素." id="btn1"/>
$("#btn1").click(function(){
$("body div").css("background-color","red");
// div元素裏的也算
});
// <input type="button" value="在body內,選擇子元素是div的。" id="btn2"/>
$("#btn2").click(function(){
$("body>div").css("background-color","red"); // 只算div元素
});
// <input type="button" value="選擇 id爲one 的下一個div元素." id="btn3"/>
$("#btn3").click(function(){
$("#one+div").css("background-color","red");
});
// <input type="button" value="選擇 id爲two的元素後面的所有div兄弟元素." id="btn4"/>
$("#btn4").click(function(){
$("#two~div").css("background-color","red");
});
// <input type="button" value="選擇 id爲two的元素的所有div兄弟元素." id="btn5"/>
// 要用到篩選
$("#btn5").click(function(){
$("#two").siblings("div").css("background-color","red");
});
});
</script>3.3基本過濾
<script type="text/javascript">
$(document).ready(function(){
//<input type="button" value="選擇第一個div元素." id="btn1"/>
$("#btn1").click(function(){
$("div:first").css("background-color","red");
});
//<input type="button" value="選擇最後一個div元素." id="btn2"/>
$("#btn2").click(function(){
$("div:last").css("background-color","red");
});
//<input type="button" value="選擇class不爲one的 所有div元素." id="btn3"/>
$("#btn3").click(function(){
$("div:not('.one')").css("background-color","red");
});
//<input type="button" value="選擇索引值爲偶數 的div元素." id="btn4"/>
$("#btn4").click(function(){
$("div:even()").css("background-color","red");
});
//<input type="button" value="選擇索引值爲奇數 的div元素." id="btn5"/>
$("#btn5").click(function(){
$("div:odd()").css("background-color","red");
});
//<input type="button" value="選擇索引值等於3的元素." id="btn6"/>
$("#btn6").click(function(){
$("div:eq(3)").css("background-color","red");
});
//<input type="button" value="選擇索引值大於3的元素." id="btn7"/>
$("#btn7").click(function(){
$("div:gt(3)").css("background-color","red");
});
//<input type="button" value="選擇索引值小於3的元素." id="btn8"/>
$("#btn8").click(function(){
$("div:lt(3)").css("background-color","red");
});
//<input type="button" value="選擇所有的標題元素." id="btn9"/>
$("#btn9").click(function(){
$(":header").css("background-color","red");
});
//<input type="button" value="選擇當前正在執行動畫的所有元素." id="btn10"/>
$("#btn10").click(function(){
$(":animated").css("background-color","red");
});
//<input type="text" value="請輸入賬號" defaultValue="請輸入賬號" />
//<input type="text" value="請輸入密碼" defaultValue="請輸入密碼"/>
// 實現功能
$("input[type='text']").on("blur focus",function(){ // 獲得帳號密碼的文本框
// 現獲取默認值
var mr = $(this).attr("defaultValue");
// 判斷是否是獲取到焦點，
if($(this).is(":focus"))
{
// 如果爲空則進行默認值
if($(this).val() ==mr)
{
$(this).val("");
$(this).css("color","#000");
}
}
else // 若不是
{
// 如果不爲空，則不進行清空
if($(this).val() == "")
{
$(this).val(mr);
$(this).css("color","#999");
}
}
// 在html5中 ， 一句話就搞定
// 在119行 placeholder
});
});
</script>3.4內容過濾
<script type="text/javascript">
$(document).ready(function(){
// <input type="button" value="選取含有文本“di”的div元素." id="btn1"/>
$("#btn1").click(function(){
$("div:contains('di')").css("background-color","red");
});
// <input type="button" value="選取不包含子元素(或者文本元素)的div空元素." id="btn2"/>
$("#btn2").click(function(){
$("div:empty").css("background-color","red");
});
// <input type="button" value="選取含有class爲mini元素 的div元素." id="btn3"/>
$("#btn3").click(function(){
$("div:has('.mini')").css("background-color","red");
});
//<input type="button" value="選取含有子元素(或者文本元素)的div元素." id="btn4"/>
// 意思就是自己是父元素，裏面包含別的
$("#btn4").click(function(){
$("div:parent").css("background-color","red");
});
});
</script>3.5可見性過濾（★）
<script type="text/javascript">
$(document).ready(function(){
// <input type="button" value=" 選取所有可見的div元素" id="b1"/>
$("#b1").click(function(){
$("div:visible").css("background-color","red");
});
// <input type="button" value=" 選取所有不可見的元素, 利用 jQuery 中的 show() 方法將它們顯示出來" id="b2"/>
$("#b2").click(function(){
$("div:hidden").css("background-color","red").show(1000);
});// 顯示出來
// <input type="button" value=" 選取所有的文本隱藏域, 並打印它們的值" id="b3"/>
$("#b3").click(function(){
$("input:hidden").each(function(){
alert($(this).val() );
});
});
// <input type="button" value=" 選取所有的文本隱藏域, 並打印它們的值" id="b4"/>
$("#b4").click(function(){
$("input:hidden").each(function(){
alert($(this).val() );
});
});
});
</script>3.6屬性選擇器
<script type="text/javascript">
$(document).ready(function(){
// <input type="button" value="選取含有 屬性title 的div元素." id="btn1"/>
$("#btn1").click(function(){
$("div[title]").css("background","red");
});
// <input type="button" value="選取 屬性title值等於“test”的div元素." id="btn2"/>
$("#btn2").click(function(){
$("div[title='test']").css("background","red");
});
// <input type="button" value="選取 屬性title值不等於“test”的div元素(沒有屬性title的也將被選中)." id="btn3"/>
$("#btn3").click(function(){
$("div[title!='test']").css("background","red");
});
// <input type="button" value="選取 屬性title值 以“te”開始 的div元素." id="btn4"/>
$("#btn4").click(function(){
$("div[title^='te']").css("background","red");
});
// <input type="button" value="選取 屬性title值 以“est”結束 的div元素." id="btn5"/>
$("#btn5").click(function(){
$("div[title$='est']").css("background","red");
});
// <input type="button" value="選取 屬性title值 含有“es”的div元素." id="btn6"/>
$("#btn6").click(function(){
$("div[title*='es']").css("background","red");
});
// <input type="button" value="組合屬性選擇器,首先選取有屬性id的div元素，然後在結果中 選取屬性title值 含有“es”的元素." id="btn7"/>
$("#btn7").click(function(){
$("div[id][title*='es']").css("background","red");
});
});
</script>3.7子元素過濾
<script type="text/javascript">
$(document).ready(function(){
// <input type="button" value="選取每個class爲one的div父元素下的第2個子元素." id="btn1"/>
$("#btn1").click(function(){
// 在div加元素後，一定加空格 否則不可以實現
// 不加空格就是本身div的樣式；
$("div[class='one'] :nth-child(2)").css("background-color","red");
});
// <input type="button" value="選取每個class爲one的div父元素下的第一個子元素." id="btn2"/>
$("#btn2").click(function(){
$("div[class='one'] :first-child").css("background-color","red");
});
// <input type="button" value="選取每個class爲one的div父元素下的最後一個子元素." id="btn3"/>
$("#btn3").click(function(){
$("div[class='one'] :last-child").css("background-color","red");
});
// <input type="button" value="如果class爲one的div父元素下的僅僅只有一個子元素，那麼選中這個子元素." id="btn4"/>
$("#btn4").click(function(){
$("div[class='one'] :only-child").css("background-color","red");
});
});
</script>3.8 表單對象屬性過濾
<script type="text/javascript">
$(document).ready(function(){
// <button id="btn1">對錶單內 可用input 賦值操作.</button>
$("#btn1").click(function(){
$("input:enabled").val("aaa");
});
// <button id="btn2">對錶單內 不可用input 賦值操作.</button>
$("#btn2").click(function(){
$("input:disabled").val("assss");
});
// <button id="btn3">獲取多選框選中的個數.</button>
$("#btn3").click(function(){
var s11 = $("[name='newsletter']").length; // 獲得總共的單選框個數
var s1 = $("[name='newsletter']:checked").length; // 標識選中的個數；
alert(s1);
});
// <button id="btn4">獲取下拉框選中的內容.</button>
$("#btn4").click(function(){
$(":selected").each(function(){
$(this).val();
// 添加到selectDivId div中
// 若沒有val值，則會取出text值；
// html標籤是獲得內容
$("#selectDivId").append($(this).html());
});
});
});
</script>