JAva web-11.7 Jqueryケースおよびプラグイン
27588 ワード
ケース1:広告の表示と非表示
需要:1.ページのロードが終わったら、3秒後に自動的に広告を表示する2.広告が5秒後に、自動的に消えて分析する1.タイマーを使って完成する.settimeOut(1回実行)2.jqueryの表示と非表示のアニメーション効果は実はdisplayを制御することであることが分かった3.show、hideの方法を使って広告の表示コードの実現を完成する
ケース2:抽選プレゼンテーション
需要点击开始小图片変化,且不能再点击开始点击停,大图片出现停止的图片分析1.给开始ボタンバインドクリックイベント1.1定义循环时器1.2切换小相枠的src属性①定义组列,存置图片资源経路②生成乱数,配列インデックス2.停止ボタンバインドクリックイベント2.1停止タイマ2.2大きいフォトフレームにsrcプロパティを設定する
プラグイン
jqueryの機能実装を強化
jqueryで取得したオブジェクトの機能の強化
jqueryオブジェクト自体の機能の強化
需要:1.ページのロードが終わったら、3秒後に自動的に広告を表示する2.広告が5秒後に、自動的に消えて分析する1.タイマーを使って完成する.settimeOut(1回実行)2.jqueryの表示と非表示のアニメーション効果は実はdisplayを制御することであることが分かった3.show、hideの方法を使って広告の表示コードの実現を完成する
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../js/jquery-3.3.1.min.js"></script>
<script>
// ， ， ， a
$(function () {
// ， adShow ，3
setTimeout(adShow,3000);
// ， adHide ，8
setTimeout(adHide,8000);
})
//
function adShow() {
$("#ad").show("slow");
}
//
function adHide() {
$("#ad").hide("slow");
}
</script>
</head>
<body>
<!-- div-->
<div>
<!-- div-->
<div id="ad" style="display: none">
<img style="width: 100%" src="../img/adv.jpg"/>
</div>
<!-- -->
<div id="content">
</div>
</div>
</body>
</html>
ケース2:抽選プレゼンテーション
需要点击开始小图片変化,且不能再点击开始点击停,大图片出现停止的图片分析1.给开始ボタンバインドクリックイベント1.1定义循环时器1.2切换小相枠的src属性①定义组列,存置图片资源経路②生成乱数,配列インデックス2.停止ボタンバインドクリックイベント2.1停止タイマ2.2大きいフォトフレームにsrcプロパティを設定する
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../js/jquery-3.3.1.min.js"></script>
<script>
/*
var imgs = ["../img/man00.jpg",
"../img/man01.jpg",
"../img/man02.jpg",
"../img/man03.jpg",
"../img/man04.jpg",
"../img/man05.jpg",
"../img/man06.jpg",
];
var startId;// id
var index;//
//
$(function () {
//
$("#startID").prop("disabled",false);
$("#stopID").prop("disabled",true);
//1.
$("#startID").click(function () {
//1.1 20ms
startId = setInterval(function () {
//
$("#startID").prop("disabled",true);
$("#stopID").prop("disabled",false);
//1.2 0-6
index = Math.floor(Math.random()*7);
//1.3 src
$("#img1ID").prop("src",imgs[index]);
},20)
})
//2.
$("#stopID").click(function () {
//
$("#startID").prop("disabled",false);
$("#stopID").prop("disabled",true);
//2.1
clearInterval(startId);
//2.2 src
$("#img2ID").prop("src",imgs[index]).hide();
//1s
$("#img2ID").show(1000);
})
})
</script>
</head>
<body>
<!-- -->
<div style="border-style:dotted;width: 160px;height: 100px">
<img id = "img1ID" src="../img/man00.jpg" style="width: 160px"height="100px"/>
</div>
<!-- -->
<div style="border-style:double;width: 800px;height: 500px;position: absolute;left: 500px;top:10px">
<img id = "img2ID" src="../img/man00.jpg" width="800px"height="500px"/>
</div>
<!-- -->
<input
id="startID"
type="button"
value=" "
style="width: 150px;height: 150px;font-size: 22px">
>
<!-- -->
<input
id="stopID"
type="button"
value=" "
style="width: 150px;height: 150px;font-size: 22px">
>
</body>
</html>
プラグイン
jqueryの機能実装を強化
1.$.fn.extend(object)
jqueryで取得したオブジェクトの機能の強化
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../js/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
// jquery jq 2 check（） ，unchecked
// jquery
$.fn.extend({
// check（） ， jq
check:function () {
//
//this jq
this.prop("checked",true);
},
uncheck:function () {
//
this.prop("checked",false);
}
});
//
$(function () {
// .check
$("#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>
2.$.extend(object)
jqueryオブジェクト自体の機能の強化
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../js/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
// 2 ， min ， 2 ， max ，
$.extend({
max:function (a,b) {
//
return a >= b ? a:b;
},
min:function (a,b) {
//
return a <= b ? a:b;
}
});
// a
var max1 = $.max(2,3);
alert(max1)
var min = $.min(2,1);
alert(min)
</script>
</head>
<body>
</body>
</html>