jQuery重写隔行换色
方式一：根据选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.whitesmoke{
background-color: whitesmoke;
}
</style>
<script type="text/javascript" src="../js/jquery-3.3.1.js" ></script>
</head>
<body>
<div id="table">
<table border="1px" bordercolor="whitesmoke" cellspacing="0">
<tr>
<td>用户名</td>
<td>密码</td>
</tr>
<tr>
<td>qqqqq</td>
<td>wwwww</td>
</tr>
<tr>
<td>eeeee</td>
<td>ccccc</td>
</tr>
<tr>
<td>ddddd</td>
<td>fffff</td>
</tr>
<tr>
<td>eeeee</td>
<td>ccccc</td>
</tr>
<tr>
<td>eeeee</td>
<td>ccccc</td>
</tr>
</table>
</div>
</body>
<script>
$(function(){
var trs = $("#table tr:not(:first):even").attr("class","whitesmoke");
})
</script>
</html>
方式二：遍历改变元素的class属性
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.whitesmoke{
background-color: whitesmoke;
}
</style>
<script src="../js/jquery-3.3.1.js"></script>
</head>
<body onload="jquerytodo()">
<table border="1px" bordercolor="whitesmoke" cellspacing="0" cellpadding="5px">
<tr>
<th>序号</th>
<th>用户名</th>
<th>密码</th>
</tr>
<tr>
<td>1</td>
<td>昨天</td>
<td>123</td>
</tr>
<tr>
<td>2</td>
<td>今天</td>
<td>123</td>
</tr>
<tr>
<td>3</td>
<td>明天</td>
<td>123</td>
</tr>
<tr>
<td>3</td>
<td>明天</td>
<td>123</td>
</tr>
<tr>
<td>3</td>
<td>明天</td>
<td>123</td>
</tr>
</table>
<input type="checkbox"/>
<input type="text" value="123" id="ll" onclick="test()"/>
<input type="text" name="aaa"/>
<input type="text" name="aaa"/>
<input type="text" name="aaa"/>
<input type="text" name="aaa"/>
</body>
<script>
function jstodo(){
var arrs = document.getElementsByTagName("tr");
//alert(arrs);
for (var i = 1;i<arrs.length;i++) {
if (i%2==0) {
arrs[i].className = "whitesmoke";
}
}
}
function jquerytodo(){
var arrs = $("tr");
arrs.each(function(i,e) {
if((i+1)%2==0){
//alert($(e).html());
//alert($(e).text());
$(e).attr("class","whitesmoke");
}
});
}
</script>
</html>
jQuery弹广告动态隐藏和消失
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="application/javascript" src="../js/jquery-3.3.1.js"></script>
</head>
<body>
<span id="asd"></span>
<div style="margin: 0 auto;width:798px;">
<img src="../img/1.jpg" style="display: none;" title="王四石最帅" id="Img"/>
<div id="buttons">
<input type="button" value="让帅气的王四石自动弹消失" onclick="auto()" />
<input type="button" value="让帅气的王四石出来" onclick="showSiShi()"/>
<input type="button" value="让帅气的王四石休息会" onclick="hideSiShi()"/>
<input type="button" value="切换王四石" onclick="toggleSiShi()"/>
</div>
</div>
</body>
<script>
function auto(){
showSiShi();
var p = setInterval("showSiShi()",4000);
$("#buttons").html("<input type='button' id='clear' value='手动显示休息帅气的王四石'/>");
$("#clear").on("click",function (){
clearInterval(p);
})
}
function showSiShi(){
var showImg = $("#Img");
showImg.fadeIn(1000,function(){
setTimeout("hideSiShi()",2000);
});
}
function hideSiShi(){
var hideImg = $("#Img");
hideImg.fadeOut(1000);
}
function toggleSiShi(){
$("#Img").toggle(1000);
}
</script>
</html>
省市联动
思路：创建一个二维数组，数组第一层为省（用索引0,1,2…表示），第二层为该省所有的市（市名用字符串表示），当省所在的下拉栏改变后，调用onchange()事件并传递这个省的value（与数组第一层的索引对应），能够获取到省里存储的所有市，遍历所有市追加到下拉栏中。
拼接字符串后html()实现
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<script type="text/javascript" src="../js/jquery-3.3.1.js" ></script>
<script>
function showCity(province){
// 定义二维数组,存储城市信息
var cities = new Array();
cities[0] = new Array("海淀区","昌平区","朝阳区");
cities[1] = new Array("郑州市","开封市","洛阳市","平顶山市");
cities[2] = new Array("济南市","青岛市","烟台市","潍坊市","淄博市");
cities[3] = new Array("石家庄市","唐山市","邯郸市","廊坊市");
cities[4] = new Array("南京市","苏州市","扬州市","宿迁市");
// cities[province.value]获取到的是数组
var pro = cities[province.value];
//alert(pro);
// 用于拼接option
var optionstr = "";
// 遍历数组对option拼接
$.each(pro, function(i,e) {
optionstr += "<option value='"+i+"'>"+e+"</option>";
});
$("#city").html(optionstr);
alert(window.location.href);
}
</script>
<body>
<select id="province" style="width:150px" onchange="showCity(this)">
<option value="">----请-选-择-省----</option>
<option value="0">北京</option>
<option value="1">河南省</option>
<option value="2">山东省</option>
<option value="3">河北省</option>
<option value="4">江苏省</option>
</select>
<select id="city" style="width:150px">
<option value="">----请-选-择-市----</option>
</select>
<input type="radio" />
</body>
</html>
jQuery的追加实现
核心代码：
function changeCity(val){
//根据val得到对应的城市信息
var arr = cities[val];
//往哪追加
var city = $("#city");
//追加前恢复到初始状态
city.html("<option value=''>----请-选-择-市----</option>")
//遍历数组
$(arr).each(function(){
//追加什么
var temp = "<option>"+this+"</option>"
//追加
city.append(temp);
})
}
<select id="province" onchange="changeCity(this.value)"
全选-全不选-反选
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="../js/jquery-3.3.1.js" ></script>
</head>
<body>
<table>
<thead>
<th>
<input type="button" id="qx" value="全选" >
<input type="button" id="bx" value="全不选" >
<input type="button" id="fx" value="反选" >
</th>
<th>头1</th>
<th>头2</th>
</thead>
<tbody>
<tr>
<td><input name="xz" type="checkbox"></td>
<td>aa</td>
<td>bbb</td>
</tr>
<tr>
<td><input name="xz" type="checkbox"></td>
<td>aa</td>
<td>bbb</td>
</tr>
<tr>
<td><input name="xz" type="checkbox"></td>
<td>aa</td>
<td>bbb</td>
</tr>
<tr>
<td><input name="xz" type="checkbox"></td>
<td>aa</td>
<td>bbb</td>
</tr>
</tbody>
</table>
</body>
<script>
$("#qx").click(function(){
var xz = $("[name=xz]");
$.each(xz, function(){
$(this).prop("checked",true);
});
})
$("#bx").on("click",function (){
var xz = $("[name=xz]");
$.each(xz, function(){
$(this).prop("checked",false);
$(this).getproper
});
})
$("#fx").on("click",function (){
var xz = $("[name=xz]");
$.each(xz,function(){
var temp = $(this).prop("checked");
$(this).prop("checked",!temp);
})
})
</script>
</html>
扫一扫
595
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
