一些簡單的jQuery案例
QQ表情包選擇
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>QQ表情包選擇</title>
</head>
<style type="text/css">
*{
margin: 0;padding: 0;list-style: none;
}
.emoji{
margin:50px;
}
ul{
overflow: hidden;
}
li{
float: left;width: 48px;height: 48px;cursor: pointer;
}
.emoji img{
cursor: pointer;
}
</style>
<body>
<script type="text/javascript" src="../JQuery_JS/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
//定義入口函數
$(function () {
$("li > img").click(function () {
//追加 克隆
$("#div").append($(this).clone());
});
});
</script>
<div class="emoji">
<ul>
<li><img src="../img/06.gif"/></li>
<li><img src="../img/07.gif"/></li>
<li><img src="../img/08.gif"/></li>
<li><img src="../img/09.gif"/></li>
<li><img src="../img/10.gif"/></li>
<li><img src="../img/11.gif"/></li>
<li><img src="../img/12.gif"/></li>
</ul>
</div>
<div id="div">
<font color="fuchsia" size="3">請輸入：</font></span>
<img src="../img/11.gif"/>
</div>
</body>
</html>
效果
下拉列表選中條目左右移動
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>下拉列表選中條目左右移動</title>
</head>
<style type="text/css">
#div1,#div2,#div3{
float: left;
}
</style>
<script type="text/javascript" src="../JQuery_JS/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
/**
* 1.append()：父元素將子元素追加到末尾:對象1.append(對象2)：將對象2添加到對象1的內部，並且在末尾
* 2.appendTo()：對象1.appendTo(對象2)：將對象1添加到對象2內部，並在末尾
*/
//定義入口函數
$(function () {
//給向右按鈕綁定點擊事件
$("#but1").click(function () {
//append()：父元素將子元素追加到末尾:對象1.append(對象2)：將對象2添加到對象1的內部，並且在末尾
//將s1中被選中的元素追加到s2的末尾
$("#s2").append($("#s1 > option:selected"));
});
//給向左按鈕綁定點擊事件
$("#but2").click(function () {
//appendTo()：對象1.appendTo(對象2)：將對象1添加到對象2內部，並在末尾
//將s1中選中的數據追加到s2的內部，並在末尾
$("#s2 >option:selected").appendTo($("#s1"));
});
});
</script>
<body>
<!--下拉列表-->
<div id="div1">
<select multiple="multiple" id="s1">
<option>張三</option>
<option>李四</option>
<option>王五</option>
<option>趙六</option>
</select>
</div>
<div id="div2">
<input type="button" value="-->" id="but1"/>
<input type="button" value="<--" id="but2"/>
</div>
<div id="div3">
<select multiple="multiple" id="s2">
<option>錢七</option>
</select>
</div>
</body>
</html>
效果
抽獎
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>抽獎</title>
</head>
<style type="text/css">
#small{
border: darkorchid dotted 3px;
width: 200px;
height: 200px;
/*position: absolute;*/
/*top: 250px;*/
/*left: 600px;*/
}
#big{
border: fuchsia solid 2px;
width: 400px;
height: 400px;
position: absolute;
top: 150px;
left: 500px;
}
#img1{
width: 200px;
height: 200px;
}
#img2{
width: 400px;
height: 400px;
}
</style>
<script type="text/javascript" src="../JQuery_JS/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
/**
* 有線程安全問題
* @type {string[]}
*/
//定義數組用來儲存圖片的URL
var arr = [
"imgs/1.jpg",
"imgs/2.jpg",
"imgs/3.jpg",
"imgs/4.jpg",
"imgs/5.jpg",
"imgs/6.jpg",
"imgs/7.jpg",
"imgs/8.jpg",
"imgs/9.jpg",
"imgs/10.jpg"
];
//定義全局變量
var interval;
var index;
//定義函數入口
$(function () {
$("#start").css("disabled",true);
$("#stop").css("disabled",false);
//給開始按鈕綁定點擊事件
$("#start").click(function () {
$("#big").prop("style","display:none");
//定義循環定時器,獲取返回值 用來停止定時器
interval = setInterval(function () {
//生成隨機數 1 - 10
$("#start").prop("disabled",true);
$("#stop").prop("disabled",false);
index = Math.floor(Math.random() * (10+1));
$("#img1").prop("src",arr[index]);
},10);
});
//給停止按鈕綁定點擊事件
$("#stop").click(function () {
$("#start").prop("disabled",false);
$("#stop").prop("disabled",true);
//取消定時器
clearInterval(interval);
$("#img1").prop("src",arr[index]);
$("#img2").prop("src",arr[index]);
$("#big").prop("style","display:block");
});
});
</script>
<body>
<div align="center">
<input type="button" value="開始" id="start"/>
<input type="button" value="停止" id="stop"/>
</div>
<div id="small">
<img src="imgs/1.jpg" id="img1"/>
</div>
<div id="big" style="">
<img src="imgs/1.jpg" id="img2"/>
</div>
</body>
</html>
效果
電燈開關
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>電燈開關</title>
</head>
<body>
<script type="text/javascript" src="../JQuery_JS/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
$(function () {
var img = $("#img");
$("#liang").click(function () {
$(img).prop("src","../img/liang.png");
});
$("#an").click(function () {
$(img).prop("src","../img/an.png");
});
});
</script>
<img src="../img/an.png" align="center" id="img"/>
<input type="button" name="button" value="開燈" id="liang"/>
<input type="button" name="button" value="關燈" id="an"/>
</body>
</html>
效果
表單全選和全不選
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表單全選和全不選</title>
</head>
<body>
<script type="text/javascript" src="../JQuery_JS/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
$(function () {
//全部選中
var input = $("input:checkbox");
$("#but1").click(function () {
input.each(function () {
$(this).prop("checked",true);
})
});
//全部不選中
$("#but2").click(function () {
input.each(function () {
$(this).prop("checked",false);
});
});
//選中第一個 -- 全部選中
$(input[0]).click(function () {
input.each(function () {
$(this).prop("checked",input[0].checked);
});
});
});
</script>
<div align="center"><font color="red" size="4">學生信息</font></div>
<from>
<table border="1" width="400" cellpadding="0" cellspacing="1" align="center">
<tr>
<td>
<input type="checkbox" name="bobby" value="" class="hobby" />
</td>
<td>姓名</td>
<td>年齡</td>
</tr>
<tr>
<td>
<input type="checkbox" name="bobby" value="" class="hobby"/>
</td>
<td>張三</td>
<td>23</td>
</tr>
<tr>
<td>
<input type="checkbox" name="bobby" value="" class="hobby"/>
</td>
<td>李四</td>
<td>24</td>
</tr>
<tr>
<td>
<input type="checkbox" name="bobby" value="" class="hobby"/>
</td>
<td>王五</td>
<td>25</td>
</tr>
</table>
</from>
<div align="center">
<input type="button" name="button" value="全選" id="but1"/>
<input type="button" name="button" value="全不選" id="but2"/>
</div>
</body>
</html>
效果
輪播圖
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>輪播圖</title>
</head>
<style type="text/css">
#imgs{
width: 400px;
height: 400px;
}
</style>
<script type="text/javascript" src="../JQuery_JS/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
$(function () {
var number = 1;
function show() {
number++;
if (number > 5) {
number = 1;
}
var imgs = $("#imgs");
imgs.prop("src","../img/"+number+".jpg");
}
setInterval(show,2000);
});
</script>
<body>
<img src="../img/1.jpg" id="imgs"/>
</body>
</html>
效果
在瀏覽器頁面中每兩秒切換一張圖片
隔行換色
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>隔行換色</title>
</head>
<style>
</style>
<body>
<script type="text/javascript" src="../JQuery_JS/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
$(function () {
$("tr:gt(0):even").css("background-color","#CC66FF");
$("tr:gt(0):odd").css("background-color","#7DFF34");
$("tr:gt(0)").mouseover(function () {
$(this).css("background-color","#ff1212");
});
var tr = $("tr:gt(0)");
tr.mouseout(function(){
tr.each(function (index,element) {
if (index % 2 == 0) {
$(element).css("background-color", "#CC66FF");
} else {
$(element).css("background-color","#7DFF34");
}
});
});
});
</script>
<form>
<table align="center" cellspacing="0" cellpadding="1" width="400" border="1">
<tr>
<td>姓名</td>
<td>年齡</td>
<td>性別</td>
</tr>
<tr>
<td>張三</td>
<td>23</td>
<td>女</td>
</tr>
<tr>
<td>李四</td>
<td>24</td>
<td>男</td>
</tr>
<tr>
<td>王五</td>
<td>25</td>
<td>女</td>
</tr>
<tr>
<td>趙六</td>
<td>26</td>
<td>男</td>
</tr>
</table>
</form>
</body>
</html>
效果
第三行的紅色是鼠標移入變色，如果鼠標移出就恢復之前的顏色
