jQuery簡介
要想使用jQuery,需要現在jq官網上下載下傳jquery-.js和jquery-.min.js兩個壓縮包中的一個,
jquery-.min.js中隻有兩句話,jquery-.js中内容較多有源碼,友善檢視在此前提下
方可繼續jquery的使用
JS中有基礎文法 DOM
在JQ中,JQ可以認為是另一種DOM
<head>
<meta charset="UTF-8">
<title>jQuery</title>
<style type="text/css">
.item{
width:px;
height:px;
background-color:red;
}
</style>
</head>
<body>
<div class="item">1</div>
<div class="item">2</div>
</body>
<script type="text/javascript" src="jquery-3.3.1.js"></script>
擷取元素
jQuery中通過$("選擇器") 擷取與選擇器相比對的所有元素
修改樣式
設定一個屬性
需要先擷取元素 然後将字型顔色設定為藍色 所有類名為
$(".item").css("color","blue");
設定多個屬性
$(".item").css({
"background-color":"blue",
"margin-left":"50px",
"margin-top":"30px",
"border":"1px black solid"
});
所有寫值的地方都可以換成function函數,reurn的傳回值就是設定的值
$(".item").css("width",function(index,value){
console.log(index,value); // 結果為 "100px" "100px"
return (index+)*; // 第一次傳回 第二次傳回
});
擷取元素屬性 隻能擷取到第一個
設定元素屬性 是對所有的元素生效
console.log($(".item").css("width")); //結果:列印的是第一個div的寬度px
修改内容
有html text val 三種,分别相當于js中的innerHTML(用于div,解析标簽) innerText(用于div,不解析标簽) value(用于輸入框)
console.log($("div").html()); // 結果為1
$("div").html("this is <p>a bird</p>");
// 結果如圖:圖1
$("div").html(function(){
return "this is a function" + ;
});
// 結果如圖:圖2
圖1
圖2
原生js對象和jquery js對象
js是動态的弱類型語言,是javaScript的縮寫,而jquery是對js的封裝,擴充,jquery是
使用js封裝的架構,就是讓jquery更友善.
通過JQ選擇器擷取的對象是JQ對象
通過原生方法擷取到的是原生js對象
JQ對象隻能調用JQ的方法,原生對象隻能調用原生的方法,當調用對方的方法時,是無效的
但是JQ和JS可以混編
如何将原生js轉換為jquery的js:通過在原生js外圍加上$ 例如:$(原生js)
通過在jquery的js後面加上get(index)或者[index]來擷取該jquery對象所對應的原生js
原生js對象就是DOM對象
例如:jq對象調用原生js方法 重新整理後是沒有效果的
$("div").innerHTML = "123";
改為js對象,如下,則又效果,不過是針對下标為的div
$("div")[].innerHTML = "234"; // 如圖3
js原生對象調取jq方法也是沒有效果的
var item = document.getElementsByClassName('item')[];
item.html = "456"; // 重新整理頁面後沒有效果 并且不會報錯
item.innerHTML = "678"; // 針對第二個div有效 結果如圖4
jq對象轉js原生對象執行個體
$("div")[].innerHTML = "jq對象轉原生對象";
$("div").get().innerHTML = "這個也是jq對象轉原生對象"; //結果如圖5
js原生對象轉jq對象執行個體
$(item).css("background-color","red"); // item代表第二個div,所有第二個div背景色為紅色 如圖6
js原生對象和jq對象混編使用 示例:外面是js,裡面是jq
item.onclick = function(){
$(item).css("background-color","pink");
}
結果如圖
JQ裡擷取第幾個對象用屬性eq eq擷取的是JQ對象 進而不必對所有div起作用
$(".item").eq().html("用eq擷取的JQ對象"); // 擷取第一個div 并設定裡面的内容
結果如圖
圖3
圖4
圖5
圖6
圖7 點選前如圖6
圖8
jq中的end屬性
破壞性操作和回到破壞性元素之前
如正常代碼為:
$(".item").css("background-color","green").html("正常顯示");
結果如圖:
當出現父級元素時,後面繼續接着寫屬性,則屬性是加給父級元素的
破壞性代碼為:$(".item").css("background-color","green").parent().css("border","1px black solid");
結果如圖:
現在想把屬性加到本類身上而不是父類身上,可用end()屬性
代碼為:$(".item").css("background-color","green").parent().css("border","1px black solid").end().css("height","200px");
結果如圖:
圖9
圖10
圖11
移交$的控制權
jQuery(".item")等價于 $(".item")
var pp = jQuery.noConflict(); // 這句代碼作用後,以後代碼$符号沒有作用,上面的點選事件,代碼運作
完,後再點選,此時控制權在pp身上,如果之前設定的點選事件發生将會出錯
pp(".item"); // 正确代碼,不會出錯
$(".item"); // 錯誤代碼,會顯示錯誤
以上講解的完整代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery</title>
<style type="text/css">
.item{
width:px;
height:px;
background-color:red;
}
</style>
</head>
<body>
<div class="item">1</div>
<div class="item">2</div>
</body>
<script type="text/javascript" src="jquery-3.3.1.js"></script>
<script type="text/javascript">
$(".item").css("color","blue");
$(".item").css({
"background-color":"yellow",
"margin-left":"50px",
"margin-top":"30px",
"border":"1px black solid"
});
$(".item").css("width",function(index,value){
console.log(index,value);
return (index+)*;
});
console.log($(".item").css("width"));
console.log($("div").html());
$("div").html("this is <p>a bird</p>");
$("div").html(function(){
return "this is a function" + ;
});
$("div").innerHTML = "123";
$("div")[].innerHTML = "234";
var item = document.getElementsByClassName('item')[];
item.html = "456";
item.innerHTML= "678";
$("div")[].innerHTML = "jq對象轉原生對象";
$("div").get().innerHTML = "這個也是jq對象轉原生對象";
$(item).css("background-color","red");
item.onclick = function(){
$(item).css("background-color","pink");
}
$(".item").eq().html("用eq擷取的JQ對象");
$(".item").css("background-color","green").html("正常顯示");
$(".item").css("background-color","green").parent().css("border","1px black solid").end().css("height","200px");
var pp = jQuery.noConflict();
pp(".item");
</script>
</html>
不接着上面的div寫,重建立立html重新開始寫 建立元素
建立新的元素對象
$("<div></div>").html();
建立對象并将此元素添加進body中
$("<div></div>").html("新的jq對象").appendTo($("body"));
$("div").css({
"border":"1px red solid",
"width":"100px",
"height":"100px",
"background-color":"red"
})
結果如圖
圖12
添加元素
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() 删除元素,不清空綁定事件
JQ對象設定屬性
prop 與 attr
prop():
如果有相應的屬性,傳回指定屬性值
如果沒有相應的屬性,傳回值是空字元串
設定屬性時,不會改變html結構:如圖
attr():
如果有相應的屬性,傳回屬性值
如果沒有相應的屬性,傳回值是underfined
設定屬性時,會改變html結構:如圖
對于HTML本身就帶有的固有屬性,在處理時,使用prop方法
對于HTML元素我們自己自定義的DOM屬性,在處理時,使用attr方法
具有true和false兩個屬性的屬性,如checked.selected,或者disabled使用prop()
圖13
上述完整代碼
圖14
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jquery</title>
<style type="text/css">
.item{
margin-left:px;
width:px;
height:px;
}
</style>
</head>
<body>
<div class="item"></div>
</body>
<script type="text/javascript" src="jquery-3.3.1.js"></script>
<script type="text/javascript">
$("<div></div>").html("新的jq對象").appendTo($("body"));
$("div").css({
"border":"1px red solid",
"width":"100px",
"height":"100px",
"background-color":"red"
})
$(".item").attr("dsf","這是提示資訊");
</script>
</html>
篩選
過濾
eq(index|-index)
擷取目前鍊式表中的第N個jQuery對象,傳回jQuery對象,當參數大于等于0時為正向選取,比如0代表第一個,1代表第二個,
當參數為負數時為反向選取,如-1為倒數第一個,類似的有get(index),不過get(index)傳回的是DOM對象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jquery</title>
</head>
<body>
<p>This is just a test</p>
<p>So is this</p>
</body>
<script type="text/javascript" src="jquery-3.3.1.js"></script>
<script type="text/javascript">
console.log($("p").eq()[]);
console.log($("p").eq(-)[]);
</script>
</html>
結果如圖13:
圖13
filter(expr|obj|e|e|fn)
篩選出與指定表達式比對的元素集合
這個方法用于縮小比對的範圍,用逗号分隔多個表達式
<body>
<p>Hello</p>
<p class="selected">Hello Again</p>
<p class="selected">And Again</p>
</body>
<script type="text/javascript" src="jquery-3.3.1.js"></script>
<script type="text/javascript">
// 保留帶有selected的元素
console.log($("p").filter(".selected")[]);
console.log($("p").filter(".selected")[]);
</script>
結果如圖14:
圖14
children([expr])
查找div中的每個子元素
<body>
<p>Hello</p>
<p>
<div>
<span>Hello Again</span>
</div>
</p>
<p>And Again</p>
</body>
<script type="text/javascript">
console.log($("div").children()[]);
console.log($("div").children()[]);
</script>
結果如圖15:
圖15
find(e|o|e)
搜尋所有與指定表達式比對的元素。這個函數是找出正在處理的元素的後代元素的好方法。
所有搜尋都依靠jQuery表達式來完成。這個表達式可以使用CSS1-3的選擇器文法來寫。
<body>
<p>
<span>Hello</span>
,how are you?
</p>
</body>
<script type="text/javascript">
console.log($("p").find("span")[]);
console.log($("p").find("span")[]);
</script>
結果如圖16:
圖16