jQuery实例
一.目录
轮播图
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery-1.12.4.js"></script>
<style>
*{
margin: 0;
padding: 0;
list-style: none;
}
.outer{
height: 500px;
width: 750px;
border: dashed cadetblue 5px;
margin: 0 auto;
position: relative;
}
.outer .img img{
position: absolute;
}
.outer img {
height: 500px;
width: 750px;
}
.num {
position: absolute;
left: 0;
bottom: 10px;
font-size: 0;
text-align: center;
width: 100%; ///有绝对定位加上宽
}
.num li{
width: 20px;
height: 20px;
background-color: #9f9f9f;
color: azure;
border-radius: 60%;
text-align: center;
line-height: 20px;
display: inline-block;
font-size: 10px;
margin: 5px;
cursor: pointer; //小手
}
.button{
height: 60px;
width: 40px;
position: absolute;
background-color: #9f9f9f;
opacity: 0.4;
font-size: 40px;
top: 50%;
margin-top: -30px;
text-align: center;
line-height: 60px;
display: none;
}
.outer:hover .button{
display: block;
}
.butter-reight{
right: 0;
}
.num li.current{
background-color: red;
}
</style>
</head>
<body>
<div class="outer">
<ul class="img">
<li><img src="image/s1.jpg"></li>
<li><img src="image/s2.jpg"></li>
<li><img src="image/s3.jpg"></li>
<li><img src="image/s4.jpg"></li>
<li><img src="image/s5.jpg"></li>
<li><img src="image/s6.jpg"></li>
</ul>
<ul class="num">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>
<div class="buatter-lefat button"> < </div>
<div class="butter-reight button"> > </div>
</div>
<script>
// $(function () {
// $(".num li").first().addClass("current")
// });
$(document).ready(function () {
//--------------数字效果------------------------------
$(".num li").first().addClass("current");
$(".num li").mouseenter(function () {
//this是他自己 mouseenter 鼠标滑到上面效果
$(this).addClass("current").siblings().removeClass('current');//设置红底效果
var index=$(this).index(); //获取元素的索引值
$(".img li").eq(index).fadeIn(1000).siblings().fadeOut(1000);//更具元素的索引值，实现淡入淡出的效果
});
i =0;
var time=setInterval(move,1500);//定时器，2个参数时间和函数
//自动转换
function move() {
i++;
if (i==6){
i = 0
}
$(".num li").eq(i).addClass("current").siblings().removeClass("current");
$(".img li").eq(i).fadeIn(1000).siblings().fadeOut(1000);
}
$("img").hover(function () { //鼠标点上去时，让他停止定时器
clearInterval(time)
} ,function () {
time=setInterval(move,1500)
});
//设置左按键
$(".butter-reight").click(function () {
move()
});
//设置右按键
$(".buatter-lefat").click(function () {
if (i==0){
i =6;
}
i =i-2;
move()
})
})
</script>
</body>
</html>
左侧菜单
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>left_menu</title>
<script src="jquery-1.12.4.js"></script>
<style>
.menu{
height: 500px;
width: 20%;
background-color: sandybrown;
float: left;
}
.content{
height: 500px;
width: 80%;
background-color: red;
float: left;
}
.title{
line-height: 50px;
background-color: darkturquoise;
color: azure;
}
.hide{
display: none;
}
</style>
</head>
<body>
<div class="outer">
<div class="menu">
<div class="item">
<div class="title" onclick="show(this);">菜单一</div>
<div class="con">
<div>111</div>
<div>111</div>
<div>111</div>
</div>
</div>
<div class="item">
<div class="title" onclick="show(this);">菜单二</div>
<div class="con hide">
<div>111</div>
<div>111</div>
<div>111</div>
</div>
</div>
<div class="item">
<div class="title" onclick="show(this);">菜单三</div>
<div class="con hide">
<div>111</div>
<div>111</div>
<div>111</div>
</div>
</div>
</div>
<div class="content"></div>
</div>
<script>
function show(self) { //self是他自己
$(self).next().removeClass("hide"); //找到下一个标签，删除他的隐藏属性
$(self).parent().siblings().children(".con").addClass("hide") ;//找到他的父级兄弟的所有标签，加上隐藏
}
// $(document).ready(function show(self) {
// $(self).next().remove("hide");
// $(self).parent().siblings().children(".con").addClass("hide")
// })
</script>
</body>
</html>
tab菜单
注：含有关联属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery-1.12.4.js"></script>
<style>
*{
margin: 0;
padding: 0;
}
.outer{
width: 70%;
height: 800px;
margin: 0 auto;
background-color: #9f9f9f;
}
.menu{
background-color: red;
cursor: pointer; //变成小手
}
.outer .menu li{
display: inline-block;
}
.content{
background-color: #f0ad4e;
height: 1000px;
/*text-align: center;*/
/*!*line-height: 100px;*!*/
padding: 50px;
}
.cantant{
background-color: azure;
/*color: #e4ff6c;*/
}
.hide{
display: none;
}
</style>
</head>
<body>
<div class="outer">
<ul class="menu">
<li alex="c1" class="cantant" onclick="tab(this)">菜单一</li>
<li alex="c2" onclick="tab(this)">菜单二</li>
<li alex="c3" onclick="tab(this)">菜单三</li>
</ul>
<div class="content" >
<div id="c1">内容一</div>
<div id="c2" class="hide">内容二</div>
<div id="c3" class="hide">内容三</div>
</div>
</div>
<script>
function tab(self) {
$(self).addClass("cantant").siblings().removeClass("cantant");//添加自己的cantant属性，删除兄弟的cantant属性
var index=$(self).attr("alex"); //找到自己的属性值附一个变量
$("#"+index).removeClass("hide").siblings().addClass("hide");//用字符串的拼接。把id和属性拼接到一起，显示内容，让兄弟进行隐藏
}
</script>
</body>
</html>
正反选
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
</style>
<script src="jquery-1.12.4.js"></script>
</head>
<body>
<button onclick="quanxuan()">全选</button>
<button onclick="quxiao()"> 取消</button>
<button onclick="fanxun()">反选</button>
<table style="border: salmon 5px solid">
<tr>
<td><input type="checkbox" ></td>
<td>1111</td>
</tr>
<tr>
<td><input type="checkbox" ></td>
<td>11111</td>
</tr>
<tr>
<td><input type="checkbox" ></td>
<td>11111</td>
</tr>
</table>
<script>
//全选
function quanxuan() {
//prop 获取属性attr有bag
$("table :checkbox").prop("checked",true);
//checked带有一个预选定复选框的 HTML 表单：两个参数，（true/false）
}
//取消
function quxiao() {
$("table :checkbox").prop("checked",false)
}
//反选
function fanxun() {
$("table :checkbox").each(function () {//each循环内容
if ($(this).prop("checked")){ //为true
$(this).prop("checked",false); //改为false
}
else {
$(this).prop("checked",true)
}
})
}
</script>
</body>
</html>
返回顶部
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery-1.12.4.js"></script>
<style>
.div1{
background-color: yellow;
height: 100px;
width: 400px;
overflow: auto; //滚动条效果
/*overflow: scroll;//效果是一样的*/
}
.div2{
height: 800px;
background-color: antiquewhite;
}
.div3{
width: 50px;
height: 50px;
background-color: darkblue;
position: fixed;
right: 10px;
bottom: 10px;
font-size: 20px;
}
.hide{
display: none;
}
</style>
</head>
<body>
<div class="div1">
<p>hello,word</p>
<p>hello,word</p>
<p>hello,word</p>
<p>hello,word</p>
<p>hello,word</p>
<p>hello,word</p>
<p>hello,word</p>
<p>hello,word</p>
<p>hello,word</p>
<p>hello,word</p>
<p>hello,word</p>
<p>hello,word</p>
<p>hello,word</p>
<p>hello,word</p>
<p>hello,word</p>
<p>hello,word</p>
<p>hello,word</p>
<p>hello,word</p>
<p>hello,word</p>
<p>hello,word</p>
<p>hello,word</p>
<p>hello,word</p>
<p>hello,word</p>
<p>hello,word</p>
<p>hello,word</p>
<p>hello,word</p>
<p>hello,word</p>
<p>hello,word</p>
<p>hello,word</p>
<p>hello,word</p>
<p>hello,word</p>
</div>
<div class="div2"></div>
<div class="div3 hide" onclick="returntop()">返回顶部 </div>
<script>
window.onscroll=function () { //滚轮滑动事件
var index=$(window).scrollTop(); //滚轮滑动的距离
if (index>50){
$(".div3").removeClass("hide")
}
else {
$(".div3").addClass("hide")
}
console.log(index)
};
function returntop() {
$(window).scrollTop(0);//直接设置鼠标滑动为0
}
// function returntop() {
// $(".div1").scrollTop(0);//也可以更具窗口进行操作
// }
</script>
</body>
</html>
自定义事件
注创建标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery-1.12.4.js"></script>
</head>
<body>
<button id="clickme">come hel</button>
<script>
var clickmebtn; //创建一个全局变量
$(document).ready(function () {
clickmebtn =$("#clickme");//更具id找到元素
clickmebtn.click(function () { //给他指定有一个事件
var e =jQuery.event("MyEvent"); //创建自己的事件。名为MyEvent
clickmebtn.trigger(e)
});
clickmebtn.bind("MyEvent",function (event) {
console.log(event);
})
})
</script>
</body>
</html>
滑动效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery-1.12.4.js"></script>
<style>
#content,#flipshow,#fliphide,#fliptoggle{
padding: 5px;
text-align: center;
background-color: #FFFF00;
border: solid 1px springgreen;
}
#content{
padding: 50px;
display: none;
}
</style>
</head>
<body>
<div id="flipshow">显示</div>
<div id="fliphide">隐藏</div>
<div id="fliptoggle">隐藏、显示</div>
<div id="content">hello,word</div>
<script>
$(document).ready(function () {
$("#flipshow").click(function () {
$("#content").slideDown(1000);//使用滑动效果，显示隐藏的被选元素。
});
$("#fliphide").click(function () {
$("#content").slideUp(1000); //通过使用滑动效果，隐藏被选元素;
});
$("#fliptoggle").click(function () {
$("#content").slideToggle(1000);//通过使用滑动效果，在显示和隐藏状态之间切换
})
})
</script>
</body>
</html>
淡隐淡出
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery-1.12.4.js"></script>
</head>
<body>
<button id="in">按钮1</button>
<button id="out">按钮2</button>
<button id="toggle">全自动</button>
<button id="to">透明效果</button>
<div id="div1" style="height: 80px;width: 80px;display: none;background-color: #e20052"></div>
<div id="div2" style="height: 80px;width: 80px;display: none;background-color: #FFFF00"></div>
<div id="div3" style="height: 80px;width: 80px;display: none;background-color: darkturquoise"></div>
<script>
$(document).ready(function () {
$("#in").on("click",function () {
$("#div1").fadeIn(1000);//使用淡入效果来显示一个隐藏的元素：
$("#div2").fadeIn(1000);
$("#div3").fadeIn(1000);
});
$("#out").on("click",function () {
$("#div1").fadeOut(1000); //使用淡出效果来隐藏一个元素：
$("#div2").fadeOut(1000);
$("#div3").fadeOut(1000);
});
$("#toggle").on("click",function () {
$("#div1").fadeToggle(1000); //使用淡出淡入效果来显示一个元素：
$("#div2").fadeToggle(1000);
$("#div3").fadeToggle(1000);
});
$("#to").on("click",function () {
$("#div1").fadeTo(1000,0.4); //设置透明的
$("#div2").fadeTo(1000,0.6);
$("#div3").fadeTo(1000,0.8);
});
})
</script>
</body>
</html>
显示和隐藏
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
width: 50px;
height: 50px;
margin: 2px;
background: springgreen;
float: left;
}
</style>
<script src="jquery-1.12.4.js"></script>
</head>
<body>
<script>
for (var i =0;i<10;i++){
$("<div>").appendTo(document.body);//appendTo依次添加、document.body文档的body中
}
$("div").click(function () {
$(this).hide(1000,function () { //隐藏了，但是元素还在
$(this).remove(); //进行删除
});
})
</script>
</body>
</html>
操作元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery-1.12.4.js"></script>
</head>
<body>
<p id="sec">hello,jaychou</p>
<button id="text">点我</button>
<a></a>
<script >
$(document).ready(function () {
// $("#text").click(function () {
// alert("text:"+$("#sec").text())//获取具体内容
// })
$("#text").click(function () {
alert("text:"+$("#sec").html()); // 获取全部内容
})
})
</script>
</body>
</html>
浙公网安备 33010602011771号