jQuery（二）
2019-08-23 本文已影响0人
以宇宙为海的蓝鲸
offset
<body>
<!-- offseth获取元素以左上角为原点的坐标，单位是像素 -->
<!-- 获取匹配元素在当前视口的相对偏移。
返回的对象包含两个整型属性：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();
//分别输出对应的值
p.html("left:"+offset.left+"---top:"+offset.top)
</script>
</body>
audio和video
<body>
<!-- 音频播放 ，添加controls="controls",调出控制台-->
<audio src="../买辣椒也用券+-+起风了.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(){
//遍历当前的所有li,each(function(){})
$("ul>li").each(function(idx,ele){
//hanlder callback,this代表当前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(){
//遍历当前的所有li,each(function(){})
$("ul>li").each(function(idx,ele){
//hanlder callback,this代表当前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(){
//行数为双的格子为skyblue,行数为单的格子为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){
//添加点击事件，当点击时格子背景色为白色
$(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];
//声明一个额外变量，进行if判断
var flag = false;
var but = document.getElementsByTagName("button")[0];
function isPlay(){
if (flag==false) {
//如果原先状态为停止播放，则进行播放，并修改图标和flag值
video.play();
// but.innerHTML = "pause";
but.style.backgroundPosition="-329px -84px";
flag = true;
}else {
//如果原先状态播放，则点击停止，并修改图标和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");},
//添加鼠标进入事件，触发时，背景变色
mouseenter:function(){$("button").css("background-color","yellow")}
})
//移除所有p标签的所有事件
$("p").off("click","**");
alert("ni");
function demo(){
alert("hello");
}
//off移除多个事件
//移除所有p标签的所有事件
$("p").off();
//移除所有p标签的点击事件
//事件只执行一次
$("button:last").on(
"click",function(){alert("hello22");
$("button:last").off("click","**");
});
</script>
</body>
