title: jQuery小案例
date: 2015-12-21 20:10:50
categories: jQuery基础语法
tags: jQuery
使用jQuery完成定时弹出广告
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<script type="text/javascript" src="js/jquery-1.11.3.min.js" ></script>
<script>
var time;
$(function(){
time = setInterval("visible()",2000);
});
function visible(){
$("#VisibleDiv").fadeIn(2000);
clearInterval(time);
time = setInterval("NoneDiv()",5000);
}
function NoneDiv(){
$("#VisibleDiv").fadeOut(2000);
clearInterval(time);
}
</script>
<body>
<div id="VisibleDiv" style="width: 1000px; height: 500px; border: 3px solid purple; overflow: hidden; display: none;">
<img src="img/鉴赏5.jpg"/>
</div>
</body>
</html>
jQuery完成表格各行换色
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript" src="js/jquery-1.11.3.min.js" ></script>
<script>
$(function(){
$("tr:odd").addClass("odd");
$("tr:even").addClass("even");
});
</script>
<style>
.odd{
background-color: purple;
}
.even{
background-color: palevioletred;
}
</style>
</head>
<body>
<center>
<table id="Tab" width="1000px" height="400px">
<tr>
<td>11</td>
<td>12</td>
<td>13</td>
<td>14</td>
</tr>
<tr>
<td>21</td>
<td>22</td>
<td>23</td>
<td>24</td>
</tr>
<tr>
<td>31</td>
<td>32</td>
<td>33</td>
<td>34</td>
</tr>
<tr>
<td>41</td>
<td>42</td>
<td>43</td>
<td>44</td>
</tr>
<tr>
<td>51</td>
<td>52</td>
<td>53</td>
<td>54</td>
</tr>
<tr>
<td>61</td>
<td>62</td>
<td>63</td>
<td>64</td>
</tr>
</table>
</center>
</body>
</html>
使用JQuery完成复选框的全选和全不选
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript" src="js/jquery-1.11.3.min.js" ></script>
<script>
//实现全选和全部选
$(function(){
$("tr:odd").addClass("odd");
$("tr:even").addClass("even");
$("#selectALL").click(function(){
if($("#selectALL").prop("checked") == true){
$(":checkbox[name='selectBox']").prop("checked",true);
}else{
$(":checkbox[name='selectBox']").prop("checked",false);
}
});
});
//实现单选全部选择复选就选上，反之不选
$(function(){
$(":checkbox[name='selectBox']").click(function(){
var AllBox = $(":checkbox[name='selectBox']");
AllBox.each(function(i,n){
if($(this).prop("checked") == false){
//注意这里很容易出错，错误在于js和jQuery的转换，
//比如用js获取被选中的复选框值，写法：this.checked
//使用jQuery写法：$(this).prop("checked")
$("#selectALL").prop("checked",false);
}else{
$("#selectALL").prop("checked",true);
}
})
});
});
</script>
<style>
.odd{
background-color: purple;
}
.even{
background-color: palevioletred;
}
</style>
</head>
<body>
<center>
<table id="Tab" width="1000px" height="400px">
<tr>
<td><input id="selectALL" type="checkbox"/></td>
<td>12</td>
<td>13</td>
<td>14</td>
</tr>
<tr>
<td><input name="selectBox" type="checkbox"/></td>
<td>22</td>
<td>23</td>
<td>24</td>
</tr>
<tr>
<td><input name="selectBox" type="checkbox"/></td>
<td>32</td>
<td>33</td>
<td>34</td>
</tr>
<tr>
<td><input name="selectBox" type="checkbox"/></td>
<td>42</td>
<td>43</td>
<td>44</td>
</tr>
<tr>
<td><input name="selectBox" type="checkbox"/></td>
<td>52</td>
<td>53</td>
<td>54</td>
</tr>
<tr>
<td><input name="selectBox" type="checkbox"/></td>
<td>62</td>
<td>63</td>
<td>64</td>
</tr>
</table>
</center>
</body>
</html>
jQuery制作省市联动
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript" src="js/jquery-1.11.3.min.js" ></script>
<script>
$(function(){
var arr = [['长沙','株洲','湘潭'],['广州','东莞','深圳']];
$("#selectS").change(function(){
$("#selectCS").get(0).options.length = 1;
var id = this.value;
id = id - 1;
$.each(arr[id], function(i,n) {
$("#selectCS").append("<option>" + arr[id][i] + "</option>")
});
});
});
</script>
</head>
<body>
<center>
<div style="width: 1600px; height: 100px; border: 3px solid purple;">
<select id="selectS">
<option value="0">--请选择--</option>
<option value="1">湖南</option>
<option value="2">广东</option>
</select>
<select id="selectCS">
<option>--请选择--</option>
</select>
</div>
</center>
</body>
</html>
822
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
