下拉列表
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
ul {
list-style: none;
}
.wrap {
width: 330px;
height: 30px;
margin: 100px auto 0;
padding-left: 10px;
background-image: url(imgs/bg.jpg);
}
.wrap li {
background-image: url(imgs/libg.jpg);
}
.wrap > ul > li {
float: left;
margin-right: 10px;
position: relative;
}
.wrap a {
display: block;
height: 30px;
width: 100px;
text-decoration: none;
color: #000;
line-height: 30px;
text-align: center;
}
.wrap li ul {
position: absolute;
top: 30px;
display: none;
}
</style>
<script src="jquery-1.12.4.js"></script>
<script>
//加载页面
$(function () {
$(".wrap>ul>li").mouseenter(function () {
//从当前li中所有的子元素中找到ul
//$(this).children("ul").show();//把里面的内容显示出来
//传入参数可以实现渐变效果
//$(this).children("ul").show(1000);
//防止出现堵塞
$(this).children("ul").stop().show(1000);
});
$(".wrap>ul>li").mouseleave(function () {
$(this).children("ul").hide();//把里面的内容隐藏起来
});
});
</script>
</head>
<body>
<div class="wrap">
<ul>
<li>
<a href="javascript:void(0);">一级菜单1</a>
<ul class="ul">
<li><a href="javascript:void(0);">二级菜单11</a></li>
<li><a href="javascript:void(0);">二级菜单12</a></li>
<li><a href="javascript:void(0);">二级菜单13</a></li>
</ul>
</li>
<li>
<a href="javascript:void(0);">一级菜单2</a>
<ul>
<li><a href="javascript:void(0);">二级菜单21</a></li>
<li><a href="javascript:void(0);">二级菜单22</a></li>
<li><a href="javascript:void(0);">二级菜单23</a></li>
</ul>
</li>
<li>
<a href="javascript:void(0);">一级菜单3</a>
<ul>
<li><a href="javascript:void(0);">二级菜单31</a></li>
<li><a href="javascript:void(0);">二级菜单32</a></li>
<li><a href="javascript:void(0);">二级菜单33</a></li>
</ul>
</li>
</ul>
</div>
</body>
</html>
高亮显示
<script src="jquery-1.12.4.js"></script>
<script>
$(function () {
//鼠标进入事件
$("#uu>li").mouseenter(function () {
$(this).css("backgroundColor","red");
});
//鼠标离开事件
$("#uu>li").mouseleave(function () {
$(this).css("backgroundColor","");
});
//修改字体
$("#uu>li").click(function () {
$(this).css("fontColor","#ffffff");
$(this).css("fontSize","30px");
$(this).css("fontFamily","楷体");
});
});
</script>
<ul id="uu">
<li>倩女幽魂</li>
<li>丑八怪</li>
<li>爱情转移</li>
<li>爱情码头</li>
<li>体面</li>
<li>说散就散</li>
<li>纸短情长</li>
<li>因为爱情</li>
<li>有点甜</li>
</ul>
</body>
高光显示的链式编程
<script src="jquery-1.12.4.js"></script>
<script>
//链式编程
$(function () {
//鼠标进入事件
$("#uu>li").mouseenter(function () {
$(this).css("backgroundColor","red");
}).mouseleave(function () {
$(this).css("backgroundColor","");
}).click(function () {
$(this).css("fontColor","#ffffff").css("fontSize","30px").css("fontFamily","楷体");
});
});
</script>
表单验证:验证表单是否为汉字姓名
<body>
<script src="jquery-1.12.4.js"></script>
<script>
$(function () {
$("#txt").keyup(function () {
if(/^[\u4e00-\u9fa5]{2,6}$/.test($(this).val())){
$(this).css("backgroundColor","green");
}else {
$(this).css("backgroundColor","red");
}
});
});
</script>
<input type="text" value="" id="txt">
</body>
鼠标经过,更改div内的图片内容
<script src="jquery-1.12.4.js"></script>
//链式编程
<script>
$(function () {
$(function () {
$("#left>li").mouseenter(function () {
$("#center>li:eq(" + $(this).index() + ")").show().siblings().hide();
});
$("#right>li").mouseenter(function () {
$("#center>li").eq($(this).index() + 9).show().siblings().hide();
});
})
});
</script>
//非链式编程
<script>
$(function () {
$("#left>li").mouseenter(function () {
//.index()----->当前这个元素的索引
var index=$(this).index();
//先隐藏,再显示
$("#center>li").hide();
//:eq(索引值)---->是一个选择器,获取的是对应元素的索引
$("#center>li:eq("+index+")").show();
});
$("#right>li").mouseenter(function () {
//索引需要+9
var index=$(this).index()+9;
$("#center>li").hide();
$("#center>li:eq("+index+")").show();
});
});
</script>
该案例html部分的代码
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style type="text/css">
* {
margin: 0;
padding: 0;
font-size: 12px;
}
ul {
list-style: none;
}
a {
text-decoration: none;
}
.wrapper {
width: 298px;
height: 248px;
margin: 100px auto 0;
border: 1px solid pink;
overflow: hidden;
}
#left, #center, #right {
float: left;
}
#left li, #right li {
background: url(images/lili.jpg) repeat-x;
}
#left li a, #right li a {
display: block;
width: 48px;
height: 27px;
border-bottom: 1px solid pink;
line-height: 27px;
text-align: center;
color: black;
}
#left li a:hover, #right li a:hover {
background-image: url(images/abg.gif);
}
#center {
border-left: 1px solid pink;
border-right: 1px solid pink;
}
</style>
</head>
<body>
<div class="wrapper">
<ul id="left">
<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>
<ul id="center">
<li><a href="#"><img src="images/女靴.jpg" width="200" height="250"/></a></li>
<li><a href="#"><img src="images/雪地靴.jpg" width="200" height="250"/></a></li>
<li><a href="#"><img src="images/冬裙.jpg" width="200" height="250"/></a></li>
<li><a href="#"><img src="images/呢大衣.jpg" width="200" height="250"/></a></li>
<li><a href="#"><img src="images/毛衣.jpg" width="200" height="250"/></a></li>
<li><a href="#"><img src="images/棉服.jpg" width="200" height="250"/></a></li>
<li><a href="#"><img src="images/女裤.jpg" width="200" height="250"/></a></li>
<li><a href="#"><img src="images/羽绒服.jpg" width="200" height="250"/></a></li>
<li><a href="#"><img src="images/牛仔裤.jpg" width="200" height="250"/></a></li>
<li><a href="#"><img src="images/女包.jpg" width="200" height="250"/></a></li>
<li><a href="#"><img src="images/男靴.jpg" width="200" height="250"/></a></li>
<li><a href="#"><img src="images/登山鞋.jpg" width="200" height="250"/></a></li>
<li><a href="#"><img src="images/皮带.jpg" width="200" height="250"/></a></li>
<li><a href="#"><img src="images/围巾.jpg" width="200" height="250"/></a></li>
<li><a href="#"><img src="images/皮衣.jpg" width="200" height="250"/></a></li>
<li><a href="#"><img src="images/男毛衣.jpg" width="200" height="250"/></a></li>
<li><a href="#"><img src="images/男棉服.jpg" width="200" height="250"/></a></li>
<li><a href="#"><img src="images/男包.jpg" width="200" height="250"/></a></li>
</ul>
<ul id="right">
<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>
</body>
</html>
tab切换案例
<script src="jquery-1.12.4.js"></script>
<script>
$(function () {
//获取li标签,鼠标进入事件
$(".tab>li").mouseenter(function () {
//保存索引值
var index=$(this).index();
//给鼠标进入的li添加样式,移除li的兄弟元素中的样式
$(this).addClass("active").siblings().removeClass("active");
//根据鼠标进入的li的索引值添加div的类样式,移除其兄弟元素的类样式
// $(".products>div:eq("+index+")").addClass("selected").siblings().removeClass("selected");
$(".products>div").eq(index).addClass("selected").siblings().removeClass("selected");
});
});
</script>
该案例html部分的代码
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
ul {
list-style: none;
}
.wrapper {
width: 1000px;
height: 475px;
margin: 0 auto;
margin-top: 100px;
}
.tab {
border: 1px solid #ddd;
border-bottom: 0;
height: 36px;
width: 320px;
}
.tab li {
position: relative;
float: left;
width: 80px;
height: 34px;
line-height: 34px;
text-align: center;
cursor: pointer;
border-top: 4px solid #fff;
}
.tab span {
position: absolute;
right: 0;
top: 10px;
background: #ddd;
width: 1px;
height: 14px;
overflow: hidden;
}
.products {
width: 1002px;
border: 1px solid #ddd;
height: 476px;
}
.products .main {
float: left;
display: none;
}
.products .main.selected {
display: block;
}
.tab li.active {
border-color: red;
border-bottom: 0;
}
</style>
</head>
<body>
<div class="wrapper">
<ul class="tab">
<li class="tab-item active">国际大牌<span>◆</span></li>
<li class="tab-item">国妆名牌<span>◆</span></li>
<li class="tab-item">清洁用品<span>◆</span></li>
<li class="tab-item">男士精品</li>
</ul>
<div class="products">
<div class="main selected">
<a href="###"><img src="imgs/guojidapai.jpg" alt=""/></a>
</div>
<div class="main">
<a href="###"><img src="imgs/guozhuangmingpin.jpg" alt=""/></a>
</div>
<div class="main">
<a href="###"><img src="imgs/qingjieyongpin.jpg" alt=""/></a>
</div>
<div class="main">
<a href="###"><img src="imgs/nanshijingpin.jpg" alt=""/></a>
</div>
</div>
</div>
</body>
</html>
动态创建列表并高亮显示
<script src="jquery-1.12.4.js"></script>
<script>
var arr=[
{"name":"传智播客","href":"http://www.itcas.com"},
{"name":"百度","href":"http://www.itcas.com"},
{"name":"哔哩哔哩","href":"http://www.itcas.com"},
{"name":"快播","href":"http://www.itcas.com"},
{"name":"腾讯视频","href":"http://www.itcas.com"},
{"name":"爱奇艺","href":"http://www.itcas.com"},
{"name":"网易云课堂","href":"http://www.itcas.com"},
{"name":"开眼","href":"http://www.itcas.com"}
];
$(function () {
$("#btn").click(function () {
//创建表格
var table=$("<table border='1' cellpadding='0' cellspacing='0'></table>");
//把表格添加进div中
$("#dv").append(table);
for (var i=0;i<arr.length;i++){
var dt=arr[i];
//创建行
var tr=$("<tr></tr>");
//把行添加进表格中
tr.appendTo(table).mouseenter(function () {
$(this).css("backgroundColor","green");
}).mouseleave(function () {
$(this).css("backgroundColor","");
});
//创建td并加入到行中
var td01=$("<td>"+dt.name+"</td>");
tr.append(td01);
var td02=$("<td><a href='"+dt.href+"'>"+dt.name+"</a></td>");
tr.append(td02);
}
});
});
</script>
固定导航栏案例
jQuery代码
<script src="jquery-1.12.4.js"></script>
<script>
$(function () {
//为window注册卷曲事件
$(window).scroll(function () {
//向上卷曲的距离大于顶部的高
if($(this).scrollTop()>=$(".top").height()){
//固定.nav
$(".nav").css("position","fixed");
$(".nav").css("top",0);
$(".main").css("marginTop",$(".nav").height());
}else {
//恢复原样
$(".nav").css("position","static");
$(".main").css("marginTop",0);
}
});
})
</script>
Html代码
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
* {
margin: 0;
padding: 0
}
img {
vertical-align: top;
}
.main {
margin: 0 auto;
width: 1000px;
margin-top: 10px;
}
.fixed {
position: fixed;
top: 0;
left: 0;
}
</style>
</head>
<body>
<div class="top" id="topPart">
<img src="images/top.png" alt=""/>
</div>
<div class="nav" id="navBar">
<img src="images/nav.png" alt=""/>
</div>
<div class="main" id="mainPart">
<img src="images/main.png" alt=""/>
</div>
</body>
</html>