JavaEE學習日誌持續更新----> 必看！JavaEE學習路線（文章總彙）
jQuery基礎
jQuery介紹
jQuery是一個非常優秀的javaScript框架。
通用功能實現完畢，編寫自己的特殊功能。
jQuery特點：
- 輕量級
- 兼容CSS3
- 實現瀏覽器兼容性。但從2.0版本開始，不支持IE678
- 代碼減少，功能增多
- AJAX異步請求
jQuery基礎語法
-
使用jQuery框架，必須調用核心函數
jQuery -
核心函數的參數：傳遞自己編寫的匿名函數，會在頁面加載完成後調用匿名函數。
-
核心函數名字可以簡寫爲
$
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="../js/jquery-3.3.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
//能使用多次
jQuery(function(){
alert("jQuery");
});
$(function(){
alert("jQuery");
});
//只能寫一次，多了會覆蓋
window.onload = function(){
alert(1);
}
window.onload = function(){
alert(2);
}
</script>
</head>
<body>
</body>
</html>
DOM對象和jQuery對象
DOM對象：document對象獲取的頁面元素，如document.getElementById()
jQuery對象：使用jQuery方式獲取的頁面元素，如$("#id")
注意：DOM對象和jQuery對象不通用
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="../js/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
function fn(){
//DOM方式，獲取文本框輸入的內容
var user = document.getElementById("user");
//alert(user.value);
//jQuery方式獲取
var $user = $("#user");
alert($user.val())
}
</script>
</head>
<body>
<input type="text" id="user" />
<input type="button" value="按鈕" onclick="fn()"/>
</body>
</html>
dom對象和jQuery對象互轉
- 把DOM對象轉化成jQuery對象
$(DOM對象)
alert($(user).val());
- jQuery對象轉換成DOM對象：jQuery本質上是個數組，數組元素是DOM對象。示例：
jQuery對象[0]
alert($user[0].value);
jQuery選擇器
選擇器作用：快速且精準地定位到頁碼中的html元素，與css選擇器基本一致。
基本選擇器（重點）
- 元素選擇器
$("標籤名") - id選擇器
$("#id屬性值") - class選擇器
$(".class屬性值")
注意：css函數，操作樣式表，CSS的屬性和屬性值。
例如：$("div").css("css屬性","css屬性值");
<script type="text/javascript">
//<input type="button" value="改變 id 爲 one 的元素的背景色爲 紅色" id="b1"/>
//jQuery對象調用函數(事件函數)
$("#b1").click(function(){
//css函數，操作樣式表，CSS的屬性和屬性值
$("#one").css("background-color","red");
});
// <input type="button" value=" 改變元素名爲 <div> 的所有元素的背景色爲 紅色" id="b2"/>
$("#b2").click(function(){
$("div").css("background-color","red");
});
//<input type="button" value=" 改變 class 爲 mini 的所有元素的背景色爲 紅色" id="b3"/>
$("#b3").click(function(){
$(".mini").css("background-color","red");
});
// <input type="button" value=" 改變所有的<span>元素和 id 爲 two 的元素的背景色爲紅色" id="b4"/>
$("#b4").click(function(){
// $("span").css("background-color","red");
// $("#two").css("background-color","red");
$("#two, span").css("background-color","red");
});
</script>
層次選擇器
$("A B")獲取A元素的所有後代B元素$("A>B")獲取A元素的所有後代子元素B$("A+B")獲取A元素的同級的後面的下一個B元素$("A~B")獲取A元素的同級後面的所有B元素
<script type="text/javascript">
//<input type="button" value=" 改變 <body> 內所有 <div> 的背景色爲紅色" id="b1"/>
$("#b1").click(function(){
$("body div").css("background-color","red");
})
//<input type="button" value=" 改變 <body> 內子 <div> 的背景色爲 紅色" id="b2"/>
$("#b2").click(function(){
$("body>div").css("background-color","red");
});
//<input type="button" value=" 改變 id 爲 one 的下一個 <div> 的背景色爲 紅色" id="b3"/>
$("#b3").click(function(){
$("#one+div").css("background-color","red");
});
//<input type="button" value=" 改變 id 爲 two 的元素後面的所有兄弟<div>的元素的背景色爲 紅色" id="b4"/>
$("#b4").click(function(){
$("#two~div").css("background-color","red");
});
//<input type="button" value=" 改變 id 爲 two 的元素所有 <div> 兄弟元素的背景色爲紅色" id="b5"/>
$("#b5").click(function(){
$("#two").siblings("div").css("background-color","red");
});
</script>
屬性選擇器
<script type="text/javascript">
//<input type="button" value=" 含有屬性title 的div元素背景色爲紅色" id="b1"/>
$("#b1").click(function(){
//屬性選擇器,選擇帶有title
$("div[title]").css("background-color","red");
});
// <input type="button" value=" 屬性title值等於test的div元素背景色爲紅色" id="b2"/>
$("#b2").click(function(){
//獲取屬性值是test的元素
$("div[title=test]").css("background-color","red");
});
// <input type="button" value=" 屬性title值不等於test的div元素(沒有屬性title的也將被選中)背景色爲紅色" id="b3"/>
$("#b3").click(function(){
//屬性值不等於test
$("div[title!=test]").css("background-color","red");
});
// <input type="button" value=" 屬性title值 以te開始 的div元素背景色爲紅色" id="b4"/>
$("#b4").click(function(){
//屬性值以te開始的
$("div[title^=te]").css("background-color","red");
});
// <input type="button" value=" 屬性title值 以est結束 的div元素背景色爲紅色" id="b5"/>
$("#b5").click(function(){
//屬性值是est結束的
$("div[title$=est]").css("background-color","red");
});
// <input type="button" value="屬性title值 含有es的div元素背景色爲紅色" id="b6"/>
$("#b6").click(function(){
//屬性值含有es的
$("div[title*=te]").css("background-color","red");
});
// <input type="button" value="選取有屬性id的div元素，然後在結果中選取屬性title值含有“es”的 div 元素背景色爲紅色" id="b7"/>
$("#b7").click(function(){
//屬性值是est結束的
$("div[id][title*=es]").css("background-color","red");
});
</script>
過濾選擇器
<script type="text/javascript">
// <input type="button" value=" 改變第一個 div 元素的背景色爲 紅色" id="b1"/>
$("#b1").click(function(){
$("div:first").css("background-color","#FF0000");
});
// <input type="button" value=" 改變最後一個 div 元素的背景色爲 紅色" id="b2"/>
$("#b2").click(function(){
$("div:last").css("background-color","#FF0000");
});
// <input type="button" value=" 改變class不爲 one 的所有 div 元素的背景色爲 紅色" id="b3"/>
$("#b3").click(function(){
$("div:not(.one)").css("background-color","#FF0000");
});
// <input type="button" value=" 改變索引值爲偶數的 div 元素的背景色爲 紅色" id="b4"/>
$("#b4").click(function(){
$("div:even").css("background-color","#FF0000");
});
// <input type="button" value=" 改變索引值爲奇數的 div 元素的背景色爲 紅色" id="b5"/>
$("#b5").click(function(){
$("div:odd").css("background-color","#FF0000");
});
// <input type="button" value=" 改變索引值爲大於 3 的 div 元素的背景色爲 紅色" id="b6"/>
$("#b6").click(function(){
$("div:gt(3)").css("background-color","#FF0000");
});
// <input type="button" value=" 改變索引值爲等於 3 的 div 元素的背景色爲 紅色" id="b7"/>
$("#b7").click(function(){
$("div:eq(3)").css("background-color","#FF0000");
});
// <input type="button" value=" 改變索引值爲小於 3 的 div 元素的背景色爲 紅色" id="b8"/>
$("#b8").click(function(){
$("div:lt(3)").css("background-color","#FF0000");
});
// <input type="button" value=" 改變所有的標題元素的背景色爲 紅色" id="b9"/>
$("#b9").click(function(){
$(":header").css("background-color","#FF0000");
});
// <input type="button" value=" 改變當前正在執行動畫的所有元素的背景色爲 紅色" id="b10"/>
$("#b10").click(function(){
$(":animated").css("background-color","#FF0000");
});
function moveFn(){
//div向上滑動, slideUp方法,slideToggle方法
$("#mover").slideToggle("slow",function(){
moveFn();
});
}
moveFn();
</script>
表單選擇器
- 可用：
:enabled - 不可用：
:disabled - 選中（單選radio ，多選checkbox）：
:checked - 選擇（下列列表
<select>）：:selected
<script type="text/javascript">
// <input type="button" value=" 利用 jQuery 對象的 val() 方法改變表單內可用 <input> 元素的值" id="b1"/>
$("#b1").click(function(){
//獲取多個input標籤屬性值是 enabled, type屬性值是text 返回數組
var $inputs = $("input[type='text']:enabled");
for(var i=0;i<$inputs.length;i++){
//把數組中的DOM對象變成Jquery對象,調用方法val()
alert($($inputs[i]).val());
}
});
// <input type="button" value=" 利用 jQuery 對象的 val() 方法改變表單內不可用 <input> 元素的值" id="b2"/>
$("#b2").click(function(){
//獲取多個input標籤屬性值是disabled,返回數組
var $inputs = $("input[type='text']:disabled");
for(var i=0;i<$inputs.length;i++){
//把數組中的DOM對象變成Jquery對象,調用方法val()
alert($($inputs[i]).val("修改後的"));
}
});
// <input type="button" value=" 利用 jQuery 對象的 length 屬性獲取多選框選中的個數" id="b3"/>
$("#b3").click(function(){
var $inputs = $("input[type='checkbox']:checked");
alert($inputs.length);
});
// <input type="button" value=" 利用 jQuery 對象的 text() 方法獲取下拉框選中的內容" id="b4"/>
/*
* html()==DOM對象的innerHTML
* text()==DOM對象的innerText
*/
$("#b4").click(function(){
var $inputs = $("option:selected");
for(var i=0;i<$inputs.length;i++){
alert($($inputs[i]).text());
}
});
</script>