什麼是jQuery
jQuery 是一個 JavaScript 庫 極大地簡化了 JavaScript 編程
引入方式
建議下載類庫 進行本地引入 下載地址 http://jquery.com/download/
< script type=”text/javascript” src=”../JQuery/jquery-3.3.1.js”>< /script>
JQuery 示例
<div id="d1"></div>
<script src="js/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
/*核心函數: jQuery 簡寫形式$
* $(function) 是 $(document).ready(function(){})的簡寫形式, 表示當頁面中的DOM結構加載完畢時
* $(選擇器) 獲取對應選擇器的元素 返回的是jquery對象
* $(html標籤形式字符串) 創建DOM元素
* $(html元素對象) 將原生js對象轉爲jQuery對象
*/
$(function(){
//jquery code
});
//注: 爲了避免文檔在完全加載之前運行jquery代碼,建議在ready函數中書寫jquery代碼
/*區別window.onload:
* 1.時機不同: onload是當所有資源(DOM,圖片,音視頻)加載完畢; 而ready是當DOM加載完畢時
* 2.onload是原生js中的, 而ready是jquery中的方法
* 3.onload一個頁面只能觸發一次(只能出現一次), 而ready可以同時出現多次, 都可以觸發執行
*/
//獲取元素
$("#d1");
$(".d2");
$("#list>li");
//創建元素
$("<div></div>");
//原生對象轉爲jQuery對象
//若要使用jQuery中提供的方法, 需要轉爲jQuery對象後才能調用
$(document);
</script>強大的基礎選擇器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript" src="../JQuery/jquery-3.3.1.js"></script>
<style media="screen">
.item {
width: 100px;
height: 100px;
background-color: red;
}
</style>
</head>
<body>
<div class="item">1</div>
<div class="item">2</div>
<p>
<ol>
<li>Hello</li>
</ol>
</p>
<p>How are you?</p>
</body>
<script type="text/javascript">
// JQuery
// 獲取元素
// $("選擇器") 獲取和選擇器相匹配的元素
$(".item").css("color", "white");
// 設置多個屬性 參數是對象
$(".item").css({
"background-color": "green",
"margin-left": "50px",
"border": "1px red solid"
})
$(".item").css("width", function(index, oldValue) {
console.log(index, oldValue);
return (index + 1) * 100;
})
// 獲取元素屬性 只能獲取第一個
// 設置元素屬性 是對所有的元素生效
console.log($(".item").css("width"));
// 修改內容
// $("p").text("CLANNAD");
// $("p").text(function() {
// return "after story";
// });
// 通過JQ的選擇器獲取到的是JQ對象
// 通過原生方法獲取的是原生對象
// JQ對象只能調用JQ的方法 原生對象只能調用原生的方法 但是JQ 可以和 JS 混編
// 原生對象 -> JQ 對象
var item = document.getElementsByClassName("item")[0];
$(item).css("color", "red")
// JQ對象 -> 原生對象
$(".item")[1].innerHTML = "JQ轉原生"
$(".item").get(0).innerHTML = "JQ轉原生"
// JQ裏獲取第幾個元素 eq 獲取到的是JQ對象
$(".item").eq(0).html("這是第一個")
// 破壞性操作和回到破壞性操作之前
// end()
// 移交$的控制權
// jQuery(".item") 等價於 $(".item")
// var james = jquery.noConflict(); 從此以後不再使用 $ 代表 jQuery 取而代之的是 james
//創建元素
$("<div></div>").html("新的JQ對象").appendTo($("body"))
// A.append(B) A裏面添加B A是父級
// A.appendTo(B) 把A加到B裏面 B是父級
// A.after(B) A後面添加B A在前面
// A.insertAfter(B) 把A插入到B後面 B在前面
// 刪除元素
// remove() 刪除元素 同時清空綁定的事件
// empty() 刪除元素內容 元素本身還在
// detach() 刪除元素 不清空綁定事件
$("p").filter(function(index) {
return $("ol", this).length == 0;
});
// JQ對象設置屬性
// attr 設置的屬性都會被添加到標籤上 也能讀取到標籤上的自定義屬性 prop不能!
// prop 可以讀取到原生對象的自帶屬性和自定義屬性 attr不能
$(".item").attr("title", "這是提示")
$(".item").prop("title", "這是提示")
</script>
</html>強大的CSS樣式操作
<body>
<input type="text" />
<img src=""/>
<input type="checkbox" name="" id="" checked />
<script src="js/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
/*attr("屬性名", 屬性值 | 函數) 設置元素對應屬性爲對應屬性值
* attr("屬性名") 獲取對應屬性的值
*
* prop("屬性名", 屬性值 | 函數) 設置元素對應屬性爲對應屬性值
* prop("屬性名") 獲取對應屬性的值
*
* removeAttr("屬性名")
* removeProp("屬性名")
*/
/*兩種方式的區別:
* attr() 常用於操作元素的自定義屬性,也可以操作自帶屬性
* prop() 常用於操作元素的自帶屬性
* 當操作的是布爾值類型的屬性時,使用prop()
*/
$(function() {
//添加一個屬性
$("input:eq(0)").attr("placeholder", "請輸入");
//可同時添加多個屬性: 以對象形式設置
$("img").attr({
src: "http://p3.ifengimg.com/a/2018_10/99fc62f2a0b668c_size53_w552_h552.jpg",
width: 300,
height: 400
});
//attr("屬性名") 獲取對應屬性的值
console.log($("img").attr("src"));
//參數2也可以是函數 該函數有兩個參數,分別表示下標以及對應屬性原來的值, 必須返回對應的屬性值
$("img").attr("height", function(i, v) {
console.log(i,v);
return 300;
});
//添加一個屬性
$("input:first").prop("placeholder", "=.=");
//添加多個屬性
$("img").prop({
width: 100,
height: 100,
});
//區別: 當要獲取元素的自帶屬性是布爾類型的值時, 通過attr無法正常獲取布爾值, 該場景下使用prop獲取元素布爾類型的屬性值
console.log($(":checkbox").attr("checked"));
console.log($(":checkbox").prop("checked"));
});
</script>
</body>更多的方便的操作請參考文檔