offset
<body>
<!-- offseth獲取元素以左上角為原點的坐標(biāo)，單位是像素 -->
<!-- 獲取匹配元素在當(dāng)前視口的相對偏移滩报。
返回的對象包含兩個整型屬性：top 和 left浆洗，以像素計就珠。此方法只對可見元素有效玩焰。 -->
<p>1</p>
<p>2</p>
<script type="text/javascript" src="../jQuery\jquery-3.4.1.min.js"></script>
<script>
var p = $("p:last");
//通過offset()獲得值
var offset = p.offset();
//分別輸出對應(yīng)的值
p.html("left:"+offset.left+"---top:"+offset.top)
</script>
</body>
audio和video
<body>
<!-- 音頻播放 ，添加controls="controls",調(diào)出控制臺-->
<audio src="../買辣椒也用券+-+起風(fēng)了.mp3" controls="controls">
</audio>
<!-- 視頻播放 -->
<video src="...." controls="controls"></video>
<script type="text/javascript" src="../jQuery\jquery-3.4.1.min.js"></script>
<script></script>
</body>
each遍歷jQuery對象
<body>
<ul>
<li>行1</li>
<li>行2</li>
<li>行3</li>
<li>行4</li>
<li>行5</li>
<li>行6</li>
</ul>
<script type="text/javascript" src="../jQuery\jquery-3.4.1.min.js"></script>
<script>
$(function(){
//遍歷當(dāng)前的所有l(wèi)i,each(function(){})
$("ul>li").each(function(idx,ele){
//hanlder callback,this代表當(dāng)前Dom對象,
console.log(this.innerHTML);
$(this).click(function(e){
console.log(this);
alert(this.innerHTML);
})
});
});
</script>
</body>
each遍歷jQuery對象
<body>
<ul>
<li>行1</li>
<li>行2</li>
<li>行3</li>
<li>行4</li>
<li>行5</li>
<li>行6</li>
</ul>
<script type="text/javascript" src="../jQuery\jquery-3.4.1.min.js"></script>
<script>
$(function(){
//遍歷當(dāng)前的所有l(wèi)i,each(function(){})
$("ul>li").each(function(idx,ele){
//hanlder callback,this代表當(dāng)前Dom對象,
console.log(this.innerHTML);
$(this).click(function(e){
console.log(this);
alert(this.innerHTML);
})
});
});
</script>
</body>
了解date
<body>
<div data-url="www.baidu.com" data-img="img/xxx.png"></div>
<script type="text/javascript" src="../jQuery\jquery-3.4.1.min.js"></script>
<script>
//讀取date
$(function(){
//輸出data-url="www.baidu.com"
alert($("div").data("url"));
//輸出data-img="img/xxx.png"
alert($("div").data("img"));
})
</script>
</body>
多個css屬性
<body>
<p>hello,good day</p>
<script type="text/javascript" src="../jQuery\jquery-3.4.1.min.js"></script>
<script>
$(function(){
//使用json格式為其賦多個屬性值
$("p").css({"color":"crimson","font-family":"kaiti"});
});
</script>
</body>
案例：格子隔行變色和點擊單個格子變色
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
table {
border-collapse: collapse;
}
td {
width: 100px;
height: 60px;
}
</style>
</head>
<body>
<table border="1px">
<tr>
<td>格子1</td>
<td>格子2</td>
<td>格子3</td>
<td>格子4</td>
</tr>
<tr>
<td>格子5</td>
<td>格子6</td>
<td>格子7</td>
<td>格子8</td>
</tr>
<tr>
<td>格子9</td>
<td>格子10</td>
<td>格子11</td>
<td>格子12</td>
</tr>
<tr>
<td>格子13</td>
<td>格子14</td>
<td>格子15</td>
<td>格子16</td>
</tr>
</table>
<script type="text/javascript" src="../jQuery\jquery-3.4.1.min.js"></script>
<script>
$(function(){
//行數(shù)為雙的格子為skyblue,行數(shù)為單的格子為crimson
$("tr:nth-child(2n)").css({"background":"skyblue","font-family":"kaiti"});
$("tr:nth-child(2n-1)").css("background","crimson");
//遍歷所有的格子
$("table td").each(function(idx,ele){
//添加點擊事件，當(dāng)點擊時格子背景色為白色
$(this).click(function(e){
console.log(this.innerHTML);
$(this).css("background","white");
});
});
});
</script>
</body>
</html>
案例：播放按鈕開始與暫停
<head>
<meta charset="utf-8">
<title>音樂播放與暫停</title>
<style type="text/css">
video {
display: none;/*隱藏播放欄*/
}
button {
background-image: url(../img/player_bg.png);
width: 50px;
height: 50px;
background-position: -100px -38px;
/*background-position: -329px -84px;*/
}
</style>
</head>
<body>
<video src="../music/1.mp3" controls="controls"></video>
<button type="button" onclick="isPlay()"><!-- play --></button>
<script type="text/javascript" src="../jQuery\jquery-3.4.1.min.js"></script>
<script>
var video = document.getElementsByTagName("video")[0];
//聲明一個額外變量，進(jìn)行if判斷
var flag = false;
var but = document.getElementsByTagName("button")[0];
function isPlay(){
if (flag==false) {
//如果原先狀態(tài)為停止播放试和，則進(jìn)行播放，并修改圖標(biāo)和flag值
video.play();
// but.innerHTML = "pause";
but.style.backgroundPosition="-329px -84px";
flag = true;
}else {
//如果原先狀態(tài)播放纫普，則點擊停止阅悍，并修改圖標(biāo)和flag值
video.pause();
// but.innerHTML = "play";
but.style.backgroundPosition="-100px -38px";
flag = false;
}
}
</script>
</body>
事件處理on和off
<body>
<button>點擊</button>
<button>點擊2</button>
<p onclick="demo()" >12345</p>
<p onclick="demo()" >1234567</p>
<p></p>
<script type="text/javascript" src="../jQuery\jquery-3.4.1.min.js"></script>
<script>
//on可為同一對象添加多個事件
$("button:first").on({
//添加點擊事件，點擊時彈出hello
click:function(){alert("hello");},
//添加鼠標(biāo)進(jìn)入事件昨稼，觸發(fā)時节视，背景變色
mouseenter:function(){$("button").css("background-color","yellow")}
})
//移除所有p標(biāo)簽的所有事件
$("p").off("click","**");
alert("ni");
function demo(){
alert("hello");
}
//off移除多個事件
//移除所有p標(biāo)簽的所有事件
$("p").off();
//移除所有p標(biāo)簽的點擊事件
//事件只執(zhí)行一次
$("button:last").on(
"click",function(){alert("hello22");
$("button:last").off("click","**");
});
</script>
</body>
