1.jQuery全选反选全不选
<!DOCTYPEhtml PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>无标题文档</title>
<scripttype="text/javascript"src="../script/jquery-1.4.2.min.js"></script>
<script>
/*functioncont(){
alert($("input[name='xuan']:checked").length);
}*/
$(function(){
//全选
$("#checkAll").click(function(){
$(":checkbox").attr("checked",true)
});
//全不选
$("#checkNo").click(function(){
$(":checkbox").attr("checked",false)
});
//反选
$("#reverse").click(function(){
//先找到所有的复选框，然后再循环遍历每一个复选框 each()
/*$(":checkbox[name=itmes]").each(function(){
$(this).attr("checked",!$(this).attr("checked"))*/
$(":checkbox[name=items]").each(function(){
$(this).attr("checked",!$(this).attr("checked"))
});
});
})
</script>
</head>
<body>
<form action="#"method="post">
<input type="checkbox"name="items" value="篮球" >篮球
<input type="checkbox"name="items" value="足球">足球
<input type="checkbox"name="items" value="羽毛球">羽毛球
<input type="checkbox"name="items" value="乒乓球">乒乓球<br/>
<input type="button" id="checkAll" value="全选">
<input type="button" id="checkNo" value="全不选">
<input type="button" id="reverse" value="反选">
</form>
</body>
</html>
2，jQuery精简品牌列表
<!DOCTYPEhtml PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>无标题文档</title>
<style>
*{margin:0; padding:0}
body{ font-size:15px; text-align:center}
.showLess{ margin:auto; width:600px} /*margin:auto;居中显示*/
.showLess ul li{ display:block; float:left; width:300px;line-height:30px}
.showMore{ clear:both; padding-top:15px;}
a{ text-decoration:none}
a:hover{color:green; text-decoration:underline;}
</style>
<script type="text/javascript"src="../script/jquery-1.4.2.min.js"></script>
<script>
$(function(){
/*1默认情况下 显示前3个 需要将第三个之后的隐藏（not排除）
2 点击显示全部品牌的时候 显示全部的 同时‘显示全部品牌’ 切换成‘精简显示品牌’
3点击 精简显示品牌 要将第三个之后的隐藏起来 同时要将 精简显示品牌 替换成 ‘显示全部品牌’
*/
var $cat=$(".showLess ulli:gt(2):not(:last)");
$cat.hide();
$(".showMore aspan").toggle(function(){
$cat.show();
$(".showMore a span").text("精简显示品牌")
return false;
},function(){
$cat.hide();
$(".showMore a span").text("显示全部品牌")
return false;
});
})
</script>
</head>
<body>
<div class="showLess">
<ul>
<li><a href="#">美利达</a></li>
<li><a href="#">捷安特</a></li>
<li><a href="#">宝马</a></li>
<li><a href="#">飞哥</a></li>
<li><a href="#">凤凰</a></li>
<li><a href="#">二八</a></li>
<li><a href="#">艾玛</a></li>
<li><a href="#">永久</a></li>
<li><a href="#">巴赫</a></li>
<li><a href="#">迈巴赫</a></li>
<li><a href="#">更多品牌</a></li>
</ul>
<div class="showMore"><ahref="#"><span>显示全部品牌</span></a></div>
</div>
</body>
</html>
3，jQuery选项卡
<!DOCTYPEhtml PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>无标题文档</title>
<style>
*{margin:0; padding:0}
body{ font-size:15px; width:300px; margin:50px auto}
/* margin:50px auto 居中显示居上50px*/
.tab_menu ul li{ list-style:none; float:left; width:50px; border:1pxsolid #99C;
line-height:30px;margin-left:20px; border-bottom:none; text-align:center; cursor:pointer}
/*float:left 向左浮动;border-bottom:none底边消失；text-align:center文本居中;border:1pxsolid #99C 显示边框;cursor:pointer出现小手*/
.tab_content{clear:both; border:1px solid #CF3; height:200px;margin-left:20px; padding-left:10px;}
/*clear:both第二个div换行；padding-left:10px 让div中的文字居左10px*/
.hide{display:none}
/*隐藏*/
.tab_selected{ background:#FC9}
.hover{ background:#6F3}
</style>
<script type="text/javascript"src="../script/jquery-1.4.2.min.js"></script>
<script>
/*
1 鼠标点击那个栏目 内容框要想使该栏目对应的内容
2 同时该栏目切换背景颜色
*/
$(function(){
var$li=$(".tab_menu ul li");
$li.click(function(){
//获得当前点击的元素在集合中的索引
var$index = $li.index(this);
$("div.tab_contentdiv").eq($index).show().siblings().hide();
$(this).addClass("tab_selected").siblings().removeClass("tab_selected");
}).hover(function(){
$(this).addClass("hover");
},function(){$(this).removeClass("hover");
});
})
</script>
</head>
<body>
<div class="tab">
<div class="tab_menu">
<ul>
<liclass="tab_selected">时事</li>
<li>体育</li>
<li>娱乐</li>
</ul>
</div>
<div class="tab_content">
<div > 时事</div>
<div class="hide">体育</div>
<div class="hide">娱乐</div>
</div>
</div>
</body>
</html>
4，jQuery实现用户注册的表单验证
<!DOCTYPEhtml PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript"src="../script/jquery-1.4.2.min.js"></script>
<script>
$(function(){
//添加*到表单的后面
$(":input.required").each(function(){
var$required = $("<strong>*</strong>");
$(this).parent().append($required);
});
$(":input.required").blur(function(){
//判断一下鼠标离开谁
if($(this).is("#username")){
//按照用户名的规则验证
$(".formtip").remove();
if(this.value==""||this.value.length<6){
varerrMsg="<span class='formtip'><font color=red>用户名至少是6个字母</font></span>";
$(this).parent().append(errMsg);
}else{
varmsg="<span class='formtip'><font color=green>用户名可以使用</font></span>"
$(this).parent().append(msg);
}
}
//判断一下如果是email的话 应该按照email的规则去验证
if($(this).is("#email")){
//按照email的跪着去验证
$(".emailtip").remove();
varreg=/^\w{1,}@\w+\.\w+$/;
var$email=$("#email").val();
if(!reg.test($email)){
varerrMsg="<span class='emailtip'><font color=red>邮箱不合法</font></span>";
$(this).parent().append(errMsg);
}else{
varMsg="<span class='emailtip'><font color=green>邮箱可以使用</font></span>"
$(this).parent().append(Msg);
}
}
});
})
</script>
</head>
<body>
<form action="#"method="post">
<div> 用户名：<input type="text" name="username" id="username"class="required"/></div>
<div> 邮箱 ：<inputtype="text" name="email" id="email"class="required"/></div>
<div>个人资料：<input type="text" /></div>
</form>
</body>
</html>
扫一扫
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
