溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇“jQuery的動畫、遍歷和事件綁定怎么實現”文章的知識點大部分人都不太理解，所以小編給大家總結了以下內容，內容詳細，步驟清晰，具有一定的借鑒價值，希望大家閱讀完這篇文章能有所收獲，下面我們一起來看看這篇“jQuery的動畫、遍歷和事件綁定怎么實現”文章吧。
默認顯示和隱藏元素show([speed,[easing],[fn]])hide([speed,[easing],[fn]])toggle([speed,[easing],[fn]])
滾動顯示和隱藏元素slideDown([speed,[easing],[fn]])slideUp([speed,[easing],[fn]])slideToggle([speed,[easing],[fn]])
淡入淡出顯示和隱藏元素fadeIn([speed,[easing],[fn]])fadeOut([speed,[easing],[fn]])fadeToggle([speed,[easing],[fn]])
參數speed：速度，三種預定義的值（“slow”,“normal”,“fast”）或表示動畫時長的毫秒數值（如：1000）easing：用來指定切換效果，默認是"swing"，可用參數"linear"swing：動畫執行時效果是“先慢，中間快，又慢”linear：動畫執行時的速度是勻速的fn：在動畫完成時執行的函數，每個元素執行一次
js遍歷方式for(初始化值;循環結束條件;步長)
jq遍歷方式jq對象.each(callback)$.each(object,[callback])for…of jQuery3.0之后提供的版本
jQuery標準的綁定方式jq對象.事件方法(回調函數);如果調用事件方法，不傳遞回調函數，則觸發瀏覽器默認行為表單對象.submit(); // 讓表單提交
on綁定事件/off解綁事件jq對象.on(事件,回調函數);jq對象.off(事件); 如果不傳遞事件名稱，則解綁所有的事件
事件切換：togglejq對象.toggle(fn1,fn2…); 多次點擊依次執行傳遞的函數
廣告顯示和隱藏需求當頁面加載完成后，3秒后，自動顯示廣告廣告顯示5秒后，自動消失分析使用定時器來完成 setTimeOut()執行一次的定時器jQuery的顯示和隱藏的動畫效果其實就是控制display屬性使用show/hide相關方法完成廣告的顯示
抽象需求點擊開始，小相框快速切換點擊停止，小相框停止切換分析給開始按鈕綁定單擊事件定義循環定時器切換小相框的src屬性定義數組，存放圖片資源路徑生成隨機數，數組索引給結束按鈕綁定單擊事件停止定時器給大相框設置src屬性
實現方式$.fn.extend(object);增強通過jQuery獲取對象的功能 $("#id")$.extend(object);增強jQuery對象自身的功能 $/jQuery
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="../js/jquery-3.3.1.min.js"></script>
<script>
// 隱藏div
function hideFn() {
/*$("#showDiv").hide("slow","swing",function () {
// alert("隱藏了。。。");
})*/
// 默認方式
// $("#showDiv").hide("slow","swing");
// 滑動方式
// $("#showDiv").slideDown("slow","swing");
// 淡入淡出方式
$("#showDiv").fadeOut("slow","swing");
}
// 顯示div
function showFn() {
/*$("#showDiv").show("slow","linear",function () {
// alert("顯示了。。。");
})*/
// 默認方式
// $("#showDiv").show("slow","swing");
// 滑動方式
// $("#showDiv").slideUp("slow","swing");
// 淡入淡出方式
$("#showDiv").fadeIn("slow","swing");
}
// 切換顯示隱藏div
function toggleFn() {
/*$("#showDiv").toggle("slow","swing",function () {
// alert("切換顯示隱藏了。。。");
})*/
// 默認方式
// $("#showDiv").toggle("slow","swing");
// 滑動方式
// $("#showDiv").slideToggle("slow","swing");
// 淡入淡出方式
$("#showDiv").fadeToggle("slow","swing");
}
</script>
</head>
<body>
<input type="button" value="點擊按鈕隱藏div" onclick="hideFn()">
<input type="button" value="點擊按鈕顯示div" onclick="showFn()">
<input type="button" value="點擊按鈕切換div顯示和隱藏" onclick="toggleFn()">
<div id="showDiv" >
div顯示和隱藏
</div>
</body>
</html><!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="../js/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function () {
// 獲取所有ul下面的li
var citys = $("#city li");
// 遍歷li
// js遍歷方式
for (var i = 0;i < citys.length; i++){
// 獲取內容
alert(i+":"+citys[i].innerHTML);
}
// jq遍歷方式
citys.each(function (index,element) {
// 獲取li對象，直接用this
// alert(this.innerHTML);
// alert($(this).html());
// 獲取li對象，在回調函數中定義參數index（索引） element（元素對象）
// alert(index+":"+element.innerHTML);
// alert(index+":"+$(element).html());
// 判斷如果是上海，結束循環
if ("上海"==$(this).html()){
// 如果當前回調函數返回值是false，終止循環
// 如果當前回調函數返回值是true，終止本次循環，繼續下次循環
return false;
// return true;
}
alert(index+":"+$(element).html());
});
$.each(citys,function () {
alert($(this).html());
});
for (li of citys){
alert($(li).html());
}
});
</script>
</head>
<body>
<ul id="city">
<li>北京</li>
<li>上海</li>
<li>天津</li>
<li>重慶</li>
</ul>
</body>
</html><!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="../js/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function () {
// 獲取name對象，綁定click事件
// $("#name").click(function () {
// alert("我被點擊了！");
// });
// 給name對象綁定鼠標移動元素之上事件與鼠標移除事件
// $("#name").mouseover(function () {
// alert("鼠標來了！");
// });
// $("#name").mouseleave(function () {
// alert("鼠標走了！");
// });
// 簡化操作，鏈式編程
// $("#name").mouseover(function () {
// alert("鼠標來了");
// }).mouseleave(function () {
// alert("鼠標走了");
// })
$("#name").focus();// 讓文本輸入框獲得焦點
// 表單對象.submit() // 讓表單提交
})
</script>
</head>
<body>
<input id="name" type="text" value="綁定點擊事件">
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="../js/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function () {
// 使用on綁定事件
$("#btn").on("click",function () {
alert("我被點擊了！");
});
// 使用off解綁事件
$("#btn2").click(function () {
// 解除btn按鈕的click綁定事件
$("#btn").off("click");
});
});
</script>
</head>
<body>
<input id="btn" type="button" value="使用on綁定點擊事件">
<input id="btn2" type="button" value="使用off解綁點擊事件">
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="../js/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
<script src="../js/jquery-migrate-1.0.0.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function () {
$("#btn").toggle(function () {
// 改變背景色為綠色
$("#myDiv").css("backgroundColor","green");
},function () {
// 改變背景色為黃色
$("#myDiv").css("backgroundColor","yellow");
})
})
</script>
</head>
<body>
<input id="btn" type="button" value="事件切換">
<div id="myDiv" >
點擊按鈕變成綠色，再次點擊黃色
</div>
</body>
</html><!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>廣告的自動顯示與隱藏</title>
<style>
#content{width:100%;height:500px;background:#999}
</style>
<!--引入jquery-->
<script type="text/javascript" src="../js/jquery-3.3.1.min.js"></script>
<script>
$(function () {
// 定義定時器，3秒之后顯示廣告
setTimeout(adShow,3000);
// 定義定時器，5秒之后隱藏廣告
setTimeout(adHide,8000);
});
// 顯示廣告
function adShow() {
$("#ad").show("slow");
}
// 隱藏廣告
function adHide() {
$("#ad").hide("slow");
}
</script>
</head>
<body>
<!-- 整體的DIV -->
<div>
<!-- 廣告DIV -->
<div id="ad" >
<img src="../img/adv.jpg" />
</div>
<!-- 下方正文部分 -->
<div id="content">
正文部分
</div>
</div>
</body>
</html><!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jquery案例之抽獎</title>
<script type="text/javascript" src="../js/jquery-3.3.1.min.js"></script>
<script>
var img = ["../img/man00.jpg",
"../img/man01.jpg",
"../img/man02.jpg",
"../img/man03.jpg",
"../img/man04.jpg",
"../img/man05.jpg",
"../img/man06.jpg"];
$(function () {
$("#startID").prop("disabled",false);
$("#stopID").prop("disabled",true);
var startId;
var index;
$("#startID").click(function () {
$("#startID").prop("disabled",true);
$("#stopID").prop("disabled",false);
startId = setInterval(function () {
index = Math.floor(Math.random()*7);
$("#img1ID").prop("src",img[index])
},20);
});
$("#stopID").click(function () {
$("#startID").prop("disabled",false);
$("#stopID").prop("disabled",true);
clearInterval(startId);
$("#img2ID").prop("src",img[index]).hide();
$("#img2ID").show(1000);
});
})
</script>
</head>
<body>
<!-- 小像框 -->
<div >
<img id="img1ID" src="../img/man00.jpg" />
</div>
<!-- 大像框 -->
<div
>
<img id="img2ID" src="../img/man00.jpg" width="800px" height="500px"/>
</div>
<!-- 開始按鈕 -->
<input
id="startID"
type="button"
value="點擊開始"
onclick="imgStart()">
<!-- 停止按鈕 -->
<input
id="stopID"
type="button"
value="點擊停止"
onclick="imgStop()">
<script language='javascript' type='text/javascript'>
//準備一個一維數組，裝用戶的像片路徑
var imgs = [
"../img/man00.jpg",
"../img/man01.jpg",
"../img/man02.jpg",
"../img/man03.jpg",
"../img/man04.jpg",
"../img/man05.jpg",
"../img/man06.jpg"
];
</script>
</body>
</html><!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>01-jQuery對象進行方法擴展</title>
<script src="../js/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
// 使用jQuery插件，給jq添加兩個方法，check()選中所有復選框，uncheck()取消所有選中
// 定義jQuery對象的插件
$.fn.extend({
// 定義一個check方法，所有的jq對象都可以調用該方法
check:function () {
this.prop("checked",true);
},
uncheck:function () {
this.prop("checked",false);
}
});
$(function () {
$("#btn-check").click(function () {
$("input[type='checkbox']").check();
});
$("#btn-uncheck").click(function () {
$("input[type='checkbox']").uncheck();
});
})
</script>
</head>
<body>
<input id="btn-check" type="button" value="點擊選中復選框" onclick="checkFn()">
<input id="btn-uncheck" type="button" value="點擊取消復選框選中" onclick="uncheckFn()">
<br/>
<input type="checkbox" value="football">足球
<input type="checkbox" value="basketball">籃球
<input type="checkbox" value="volleyball">排球
</body>
</html><!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>01-jQuery對象進行方法擴展</title>
<script src="../js/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
//對全局方法擴展2個方法，擴展min方法：求2個值的最小值；擴展max方法：求2個值最大值
$.extend({
max:function (a,b) {
return a >= b ? a : b;
},
min:function (a,b) {
return a <= b ? a : b;
}
});
var max = $.max(2,3);
alert(max);
var min = $.min(1,8);
alert(min);
</script>
</head>
<body>
</body>
</html>以上就是關于“jQuery的動畫、遍歷和事件綁定怎么實現”這篇文章的內容，相信大家都有了一定的了解，希望小編分享的內容對大家有幫助，若想了解更多相關的知識內容，請關注億速云行業資訊頻道。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
