jq學習第3天
阿新 • • 發佈：2018-11-06
1.捲曲方法，scroll裡面scrollTop不帶單位
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> body{ width: 4000px; height: 4000px; } </style> </head> <body> <script src="jquery-1.12.4.js"></script> <script> $(function () { //註冊window scroll事件 返回的是數字，不是帶px的 $(window).scroll(function () { console.log($(window).scrollTop()); }) })
2.on事件以及阻止冒泡（先執行自己的事件在執行委託，再執行外部的事件），阻止跳轉所用到的事件處理引數
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <script src="jquery-1.12.4.js"></script> <a href="http://www.baidu.com">百度</a> <script> //on事件引數 // 1：事件型別 // 2：委託執行物件 // 3：data資料 // 4：回撥函式 $(function () { // var num = 10; // $("a").on("click",num,function (e) { // console.log(e.data); // }); $("a").on("click",function (e) { console.log("哈哈"); //如果不阻止冒泡，先執行本身事件，再執行外層的事件 // e.stopPropagation(); //阻止瀏覽器預設跳轉 // e.preventDefault(); return false; }); $("body").on("click",function () { console.log("嘻嘻"); });
3.刪除(remove())是指幹掉節點，清除(empty())是指幹掉節點內容,追加標籤不能存在換行，如要換行得加 \n和+
$(function () { $("table").on("click","a",function () { $(this).parent().parent().remove(); }); $("#btn").on("click",function () { $("#j_tb").empty(); }); $("#btnAdd").on("click",function () { $('<tr><td>html</td><td>中微-前端與移動開發學院</td><td><a href="javascrip:;class ="get">DELETE</a></td></tr>').appendTo($("#j_tb")); });
4.事件解綁（$().off()），觸發($().事件名 $().trigger.("事件名") ) ---------注意這裡帶引號
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input type="button"value="btn1">
<input type="button"value="btn2">
<p>這是一個p</p>
<script src="jquery-1.12.4.js"></script>
<script>
$(function () {
$("p").click(function () {
alert();
});
$("input").eq(0).click(function () {
// $("p").trigger("click"); //trigger觸發事件
$("p").click; //物件.click直接觸發事件
});
$("input").eq(1).click(function () {
$("p").off("click");
});
//點選按鈕觸發事件
$("p").on("click",function () {
console.log("hah");
});
$("input").click(function () {
$("p").trigger("click");
});
})
</script>
</body>
</html>5.音樂導航欄
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
* {
margin: 0;
padding: 0;
list-style: none;
}
.nav {
width: 900px;
height: 60px;
background-color: black;
margin: 0 auto;
}
.nav li {
width: 100px;
height: 60px;
/*border: 1px solid yellow;*/
float: left;
position: relative;
overflow: hidden;
}
.nav a {
position: absolute;
width: 100%;
height: 100%;
font-size: 24px;
color: blue;
text-align: center;
line-height:60px;
text-decoration: none;
z-index: 2;
}
.nav span {
position: absolute;
width: 100%;
height: 100%;
background-color: yellow;
top: 60px;
}
</style>
</head>
<body>
<div class="nav">
<ul>
<li>
<a href="javascript:void(0);">導航1</a>
<span></span>
</li>
<li><a href="javascript:void(0);">導航2</a><span></span></li>
<li><a href="javascript:void(0);">導航3</a><span></span></li>
<li><a href="javascript:void(0);">導航4</a><span></span></li>
<li><a href="javascript:void(0);">導航5</a><span></span></li>
<li><a href="javascript:void(0);">導航6</a><span></span></li>
<li><a href="javascript:void(0);">導航7</a><span></span></li>
<li><a href="javascript:void(0);">導航8</a><span></span></li>
<li><a href="javascript:void(0);">導航9</a><span></span></li>
</ul>
<!--音訊標籤-->
<!--<audio src="mp3/1.ogg" controls="controls"></audio>-->
<div>
<audio src="mp3/1.ogg"></audio>
<audio src="mp3/2.ogg"></audio>
<audio src="mp3/3.ogg"></audio>
<audio src="mp3/4.ogg"></audio>
<audio src="mp3/5.ogg"></audio>
<audio src="mp3/6.ogg"></audio>
<audio src="mp3/7.ogg"></audio>
<audio src="mp3/8.ogg"></audio>
<audio src="mp3/9.ogg"></audio>
</div>
<!--<video src="movie/movie01.mp4" controls autoplay loop width="400"></video> -->
</div>
<script src="jquery-1.12.4.js"></script>
<script>
$(function () {
$(".nav>ul>li").mouseenter(function () {
$(this).children("span").stop().animate({top:0});
var index = $(this).index();
$("audio").get(index).load();
$("audio").get(index).play();
});
$(".nav>ul>li").mouseleave(function () {
$(this).children("span").stop().animate({top:60});
});
//用按鍵
var flag = true; //節流閥，判斷按鍵是否彈起
$(document).keydown(function (e) {
if(flag) { //如果按鍵按下，給flag返回true，下次不會再執行按下的操作了
flag=false;
if (e.keyCode >= 49 && e.keyCode <= 57) {
$(".nav li").eq(e.keyCode - 49).mouseenter(); //如果按鍵的值-49等於第一個音那麼就觸發移入事件
}
}
});
$(document).keyup(function (e) {
flag = true; //一旦彈起，那麼再次按下時，又會執行按下操作
if (e.keyCode >= 49 && e.keyCode <= 57) {
$(".nav li").eq(e.keyCode - 49).trigger("mouseleave"); //如果按鍵的值-49等於第一個音那麼就觸發移入事件
}
});
});
6.需要注意的點
$（window）不用打雙引號，與document一樣，計算機認識， 加括號是因為將物件變成jq物件，如果加上雙引號，就是選擇器了，那是標籤選擇器
捲曲事件srcoll() scrollTop獲得的是數值
出現的錯誤，本該出現的多效果只出現了某一個1.this多加了引號，2.沒用this