JQuery
ready
<script type="text/javascript">
//ready類似于onload事件
//onload：頁(yè)面資源加載完成蝙茶，才會(huì)執(zhí)行。
//ready:頁(yè)面元素加載完成论笔，就執(zhí)行。
//比如加載一張圖片爹谭，ready等圖片標(biāo)簽加載完成后就執(zhí)行祟牲，而onload要等具體圖片加載出來(lái)才執(zhí)行
$(document).ready(function(){
alert("hello,JQuery");
});
$(function(){
alert("hello,JQuery2");
});
window.onload(alert("hello,onload"));
</script>
基本選擇器
id 隙畜； element； .class
<body>
<!-- #id,element,.class -->
<div id="dv" class="dv">hello</div>
<p>hello</p>
<script type="text/javascript" src="../jQuery\jquery-3.4.1.min.js"></script>
<script>
$(function(){
//通過(guò)$("#id名")獲取對(duì)象
console.log($("#dv").html());
//通過(guò)$("元素名")獲取對(duì)象
console.log($("div").html());
//通過(guò)$(".class名")獲取對(duì)象
console.log($(".dv").html());
});
</script>
</body>
Dom與jQuery的轉(zhuǎn)化
<body>
<div id="dv">
hello,afternooon
</div>
<script type="text/javascript" src="C:\Users\22507\OneDrive\計(jì)算機(jī)\前端\JQuery\jquery-3.4.1.min.js"></script>
<script type="text/javascript">
//聲明一個(gè)DOM對(duì)象
var dv = document.getElementById("dv");
console.log(dv);
//聲明一個(gè)jQuery對(duì)象
var $dv = $("#dv");
console.log($dv);
//將DOM轉(zhuǎn)化為jQuery说贝，$(Dom對(duì)象名)
console.log($(dv));
//將jQuery轉(zhuǎn)化為DOM议惰，$jQuery名[0]
console.log($dv[0]);
</script>
</body>
層級(jí)，基本篩選器和內(nèi)容
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.dv {
width: 300px;
height: 30px;
background-color: black;
}
p.dv {
background-color: crimson;
}
</style>
</head>
<body>
<div class="dv">
<p>p</p>
</div>
<p class="dv"></>
<div id="container">
<p>p</p>
<span>span</span>
<p>p</p>
<div>
div
<p>pp</p>
<p></p>
</div>
</div>
<p></p>
<p></p>
<ul>
<li>li1</li>
<li>li2</li>
<li>li3</li>
<li>li4</li>
<li>li5</li>
<li>li6</li>
</ul>
<script type="text/javascript" src="../jQuery\jquery-3.4.1.min.js"></script>
<script type="text/javascript">
$(function(){
//選擇所有的后代元素
console.log($("div p").length);
//僅選擇同級(jí)下一個(gè)元素
console.log($(".dv+p").length);
//僅選擇兒子元素
console.log($("#container>p").length);
//選擇所有的同級(jí)下面元素
console.log($(".dv~p").length);
//獲取匹配的第一個(gè)元素
console.log($("ul li:first").html());
//獲取匹配的最后一個(gè)元素
console.log($("ul li:last"));
//匹配前三個(gè)元素
console.log($('ul li:lt(3)').html());
//匹配后三個(gè)元素
console.log($('ul li:gt(2)'));
//匹配第三個(gè)元素
console.log($('ul li:eq(2)').html());
//查找所有包含此屬性的
console.log($("div:has(p)"));
//查找所有不包含此屬性的
console.log($("div:not(p)"));
//查找p標(biāo)簽不包含內(nèi)容的
console.log($('p:empty').length);
//查找p標(biāo)簽包含特定內(nèi)容的
console.log($('p:contains(pp)').length);
//查找p標(biāo)簽不包含內(nèi)容的
console.log($('p:empty').length);
});
</script>
</body>
</html>
可見(jiàn)性
<body>
<!-- ：hidden狂丝，匹配所有不可見(jiàn)元素换淆，如表單隱藏域，display：none等
：visible,匹配所有可見(jiàn)元素几颜，包括透明 -->
<table>
<tr><td>我是td1</td></tr>
<tr><td style="display: none;">我是td2</td></tr>
</table>
<script type="text/javascript" src="C:\Users\22507\OneDrive\計(jì)算機(jī)\前端\JQuery\jquery-3.4.1.min.js"></script>
<script>
$(function(){
console.log($("td:hidden").html());
//顯示我是td2
console.log($("td:visible").text());
//顯示我是td1
});
</script>
</body>
表單
屬性：
| ：input | :text | :password | :radio | :image |
|---|---|---|---|---|
| :submit | :file | :reset | :button | :checkbox |
表單對(duì)象屬性
| ：enabled | :disabled | :checked | :selected |
|---|---|---|---|
用戶條款判定
使用jQuery實(shí)現(xiàn)用戶條款的判定
<body>
<form action="#" method="get">
<input type="checkbox" name="checkbox" value="1" onclick="isAgree()" id="agr" />同意此條款
<input type="submit" name="" value="提交" disabled="disabled">
</form>
<script type="text/javascript" src="C:\Users\22507\OneDrive\計(jì)算機(jī)\前端\JQuery\jquery-3.4.1.min.js"></script>
<script>
function isAgree(){
//prop:獲取在匹配的元素集中的第一個(gè)元素的屬性值倍试。
//查找此對(duì)象是否選中復(fù)選框，選中為true蛋哭，沒(méi)選中為false
if($("#agr").prop("checked")){
//選中提交县习，使disable失效
$(":submit:first").prop("disabled",false);
}else {
//選中提交，使disable啟用
$(":submit:first").prop("disabled",true);
}
}
</script>
</body>
屬性
<body>
<!-- attribute,匹配包含給定屬性的元素 -->
<div id="dv">
a
</div>
<div id="dv2">
b
</div>
<div id="dv3"></div>
<script type="text/javascript" src="C:\Users\22507\OneDrive\計(jì)算機(jī)\前端\JQuery\jquery-3.4.1.min.js"></script>
<script>
$(function(){
//[attribute]
console.log($("div[id]"));
//匹配有id屬性的div標(biāo)簽,結(jié)果為3
//[attribute=dv]
console.log($("div[id=dv]"));
//匹配有id屬性且屬性值為dv的div標(biāo)簽谆趾，結(jié)果為1
//[attribute躁愿！=dv]
console.log($("div[id!=dv]"));
//匹配有id屬性且屬性值不為dv的div標(biāo)簽，結(jié)果為2
//[attribute^=dv]
console.log($("div[id^=dv]"));
//匹配有id屬性且屬性值為dv開(kāi)頭的div標(biāo)簽沪蓬，結(jié)果為3
//[attribute$=dv]
console.log($("div[id$=dv]"));
//匹配有id屬性且屬性值,以dv結(jié)尾的div標(biāo)簽彤钟，結(jié)果為1
//[attribute*=dv]
console.log($("div[id*=dv]"));
//匹配有id屬性且屬性值,包含dv的div標(biāo)簽，結(jié)果為3
//[attr1],[attr2]...[attrN]
console.log($("div[id][name$=3]"));
//匹配有id屬性且屬性值為結(jié)尾為3的div標(biāo)簽跷叉，結(jié)果為1
});
</script>
</body>
基本效果
show：顯示逸雹；hide：隱藏；toggle:前面兩種效果的切換云挟，當(dāng)原本元素為顯示時(shí)梆砸，執(zhí)行此方法后消失；
當(dāng)原本元素為消失時(shí)园欣，執(zhí)行此方法后顯示帖世。
點(diǎn)擊按鈕，實(shí)現(xiàn)其他元素的顯示及隱藏效果沸枯，同時(shí)修改按鈕的文字
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
div {
width: 400px;
height: 400px;
border-radius: 50%;
background-color: black;
}
button {
width: 100px;
}
</style>
</head>
<body>
<!--作業(yè)： 點(diǎn)擊按鈕日矫，實(shí)現(xiàn)其他元素的顯示及隱藏效果，同時(shí)修改按鈕的文字 -->
<div id="dv"></div>
<!-- 當(dāng)點(diǎn)擊button按鈕時(shí)辉饱，觸發(fā)isDisapper()函數(shù) -->
<button onclick="isDisapper();" >消失</button>
<script type="text/javascript" src="C:\Users\22507\OneDrive\計(jì)算機(jī)\前端\JQuery\jquery-3.4.1.min.js"></script>
<script>
function isDisapper(){
//判斷按鈕名字
if($('button').html()=="消失"){
//如果按鈕名字為消失搬男，隱藏圓，并改變名字為出現(xiàn)
$("#dv").hide("slow",function(){
$("button").html("出現(xiàn)");
});
}else {
//如果按鈕名字不為消失彭沼，顯示圓缔逛，并改變名字為消失
$("#dv").show("slow",function(){
$("button").html("消失");
})
}
}
</script>
</body>
</html>
使用toggle實(shí)現(xiàn)
<body>
<!-- <li><a href="#">使用toggle實(shí)現(xiàn)題一的功能</a></li> -->
<div id="dv"></div>
<!-- 當(dāng)點(diǎn)擊button按鈕時(shí)，觸發(fā)isDisapper()函數(shù) -->
<button onclick="isDisapper();" >消失</button>
<script type="text/javascript" src="../jQuery\jquery-3.4.1.min.js"></script>
<script>
function isDisapper(){
//判斷按鈕名字
if($('button').html()=="消失"){
//如果按鈕名字為消失，隱藏圓褐奴，并改變名字為出現(xiàn)
$("#dv").toggle("slow",function(){
$("button").html("出現(xiàn)");
});
}else {
//如果按鈕名字不為消失按脚，顯示圓，并改變名字為消失
$("#dv").toggle("slow",function(){
$("button").html("消失");
})
}
}
</script>
</body>
添加敦冬，移除class類
jQuery代碼
為匹配的元素加上 一個(gè)或多個(gè)'selected' 類
jQuery 代碼:
$("p").addClass("selected");添加一個(gè)
$("p").addClass("selected1 selected2");添加多個(gè)
從匹配的元素中刪除 'selected' 類
$("p").removeClass("selected");
刪除匹配元素的所有類
jQuery 代碼:
$("p").removeClass();
點(diǎn)擊圖片辅搬，實(shí)現(xiàn)元素的旋轉(zhuǎn)（css的動(dòng)畫(huà)效果），再次點(diǎn)擊圖片實(shí)現(xiàn)元素停止旋轉(zhuǎn)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.rotate1 {
width: 400px;
height: 400px;
border-radius: 50%;
animation-play-state: paused;/*規(guī)定動(dòng)畫(huà)停止*/
}
/*規(guī)定動(dòng)畫(huà)的屬性脖旱，綁定的動(dòng)畫(huà)名稱rot堪遂，動(dòng)畫(huà)持續(xù)時(shí)間3s，動(dòng)畫(huà)速度勻速萌庆，動(dòng)畫(huà)次數(shù)無(wú)限*/
.rotate2 {
animation: rot 3s linear infinite ;
}
/*綁定的動(dòng)畫(huà)溶褪，使用變化*/
@keyframes rot
{ /*開(kāi)始時(shí)的狀態(tài)*/
form{transform: rotate(0deg) ;
}
/*結(jié)束時(shí)的狀態(tài)*/
to {
transform: rotate(360deg) ;
}
}
</style>
</head>
<body>
<img id="img2" src="../09c6fe7b1326861c2caea0850709c6bb.jpg" class="rotate1">
<script type="text/javascript" src="C:\Users\22507\OneDrive\計(jì)算機(jī)\前端\JQuery\jquery-3.4.1.min.js"></script>
<script>
//點(diǎn)擊圖片時(shí)觸發(fā)此事件
$("#img2").click(function(){
//如果animation-play-state值為paused,添加class屬性，否則點(diǎn)擊時(shí)移除class屬性
if ($("#img2").css("animation-play-state")=="paused") {
$("img").addClass("rotate2");
}else {
$("img").removeClass("rotate2");
}
})
</script>
</body>
</html>
attr和prop
attr:設(shè)置或返回被選元素的屬性值践险。
prop:獲取在匹配的元素集中的第一個(gè)元素的屬性值猿妈。
html代碼/文本/值
<body>
<p><span>hello,evening</span></p>
<input type="text" name="" value="123456">
<script type="text/javascript" src="../jQuery\jquery-3.4.1.min.js"></script>
<script>
$(function(){
//獲取p標(biāo)簽中的文本及span標(biāo)簽
alert($("p").html());
//獲取p標(biāo)簽中的純文本
alert($("p").text());
//獲取input的value值123456
alert($("input").val());
//通過(guò)括號(hào)設(shè)值可修改對(duì)于的內(nèi)容
$("p").html("<a>hello</a>");
alert($("p").html());
$("p").text("hello");
alert($("p").text());
$("input").val("123");
alert($("input").val());
});
</script>
</body>
