<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>層級(jí)菜單</title>
<style type="text/css">
body{
font-family:'Microsoft Yahei';
}
body,ul{
margin:0px;
padding:0px;
}
ul{list-style:none;}
.menu{
width:200px;
margin:20px auto 0;
}
.menu .level1,.menu li ul a{
display:block;
width:200px;
height:30px;
line-height:30px;
text-decoration:none;
background-color:#3366cc;
color:#fff;
font-size:16px;
text-indent:10px;
}
.menu .level1{
border-bottom:1px solid #afc6f6;
}
.menu li ul a{
font-size:14px;
text-indent:20px;
background-color:#7aa1ef;
}
.menu li ul li{
border-bottom:1px solid #afc6f6;
}
.menu li ul{
display:none;
}
.menu li ul.current{
display:block;
}
.menu li ul li a:hover{
background-color:#f6b544;
}
</style>
<script type="text/javascript" src="../js/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
$(function(){
//當(dāng)點(diǎn)擊標(biāo)題的時(shí)候
/*
$('.level1').click(function(){
//點(diǎn)擊切換展開(kāi)與收起
$(this).next().toggleClass('current');
})
*/
/*
$('.level1').click(function(){
//以下展與上卷方式切換
$(this).next().slideToggle();
});
*/
$('.level1').click(function(){
//$(this)是當(dāng)前點(diǎn)擊的a元素
//next()獲取a元素的下一個(gè)元素，即ul
//slideDown()當(dāng)前ul的子類展開(kāi)
//parent()獲取父類li
//siblings()獲取父類兄弟li
//children('ul')獲取其它li的子類ul
//slideUp()其它子類收起
$(this).next().slideDown().parent().siblings().children('ul').slideUp();
});
})
</script>
</head>
<body>
<ul class="menu">
<li>
<a href="#" class="level1">水果</a>
<ul class="current">
<li><a href="#">蘋(píng)果</a></li>
<li><a href="#">梨子</a></li>
<li><a href="#">葡萄</a></li>
<li><a href="#">火龍果</a></li>
</ul>
</li>
<li>
<a href="#" class="level1">海鮮</a>
<ul>
<li><a href="#">蟶子</a></li>
<li><a href="#">扇貝</a></li>
<li><a href="#">龍蝦</a></li>
<li><a href="#">象拔蚌</a></li>
</ul>
</li>
<li>
<a href="#" class="level1">肉類</a>
<ul>
<li><a href="#">內(nèi)蒙古羊肉</a></li>
<li><a href="#">進(jìn)口牛肉</a></li>
<li><a href="#">野豬肉</a></li>
</ul>
</li>
<li>
<a href="#" class="level1">蔬菜</a>
<ul>
<li><a href="#">娃娃菜</a></li>
<li><a href="#">西紅柿</a></li>
<li><a href="#">西芹</a></li>
<li><a href="#">胡蘿卜</a></li>
</ul>
</li>
<li>
<a href="#" class="level1">速凍</a>
<ul>
<li><a href="#">冰淇淋</a></li>
<li><a href="#">灣仔碼頭</a></li>
<li><a href="#">海參</a></li>
<li><a href="#">牛肉丸</a></li>
</ul>
</li>
</ul>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>手風(fēng)琴</title>
<style>
*{margin:0;padding:0;}
body{font-size:12px;}
#accordion{width:727px; height:350px; margin:100px auto 0 auto; position:relative; overflow:hidden; border:1px solid #CCC;}
#accordion ul{list-style:none;}
#accordion ul li{width:643px;height:350px; position:absolute; background:#FFF;}
#accordion ul li span{display:block;width:20px; height:350px; float:left; text-align:center; color:#FFF; padding-top:5px; cursor:pointer;}
#accordion ul li img{display:block; float:right;}
.bar01{left:0px;}
.bar02{left:643px;}
.bar03{left:664px;}
.bar04{left:685px;}
.bar05{left:706px;}
.bar01 span{background:#09E0B5;}
.bar02 span{background:#3D7FBB;}
.bar03 span{background:#5CA716;}
.bar04 span{background:#F28B24;}
.bar05 span{background:#7C0070;}
</style>
<script type="text/javascript" src="../js/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
$(function(){
$('#accordion li').click(function() {
$(this).animate(
{left: $(this).index()*21}
);
/*
錯(cuò)誤的索引用法
這里不能使用function(index)的索引小作，因?yàn)檠h(huán)會(huì)先執(zhí)行完亭姥，當(dāng)點(diǎn)擊事件執(zhí)行時(shí)，會(huì)導(dǎo)致索引值不對(duì)顾稀，所以還應(yīng)該使用已經(jīng)保存在this當(dāng)中的索引值
$(this).prevAll().each(function(index){
alert(index);
$(this).animate(
{left: index*21}
);
})
*/
/*要使用保存在$(this)里邊的索引值*/
// 當(dāng)前l(fā)i之前的所有兄弟li都往左移
// 由于每個(gè)li移動(dòng)的距離不同达罗，使用each循環(huán)分別設(shè)置left值
$(this).prevAll().each(function(){
//要移動(dòng)的每一個(gè)元素
$(this).animate(
{left: $(this).index()*21}
);
})
// 當(dāng)前l(fā)i之后的所有兄弟li都往右移
$(this).nextAll().each(function(){
//要移動(dòng)的每一個(gè)元素
$(this).animate(
{left: 727-(5-$(this).index())*21}
);
})
});
})
</script>
</head>
<body>
<div id="accordion">
<ul>
<li class="bar01"><span>非洲景色01</span><img src="images/001.jpg" /></li>
? ? <li class="bar02"><span>非洲景色02</span><img src="images/002.jpg" /></li>
? ? <li class="bar03"><span>非洲景色03</span><img src="images/003.jpg" /></li>
? ? <li class="bar04"><span>非洲景色04</span><img src="images/004.jpg" /></li>
? ? <li class="bar05"><span>非洲景色05</span><img src="images/005.jpg" /></li>
</ul>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery加載</title>
<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
// alert($);//彈出function (a,b){return new n.fn.init(a,b)}表示JQuery已經(jīng)引進(jìn)來(lái)了，這是它的一個(gè)構(gòu)造函數(shù)
//JS寫(xiě)法
window.onload = function(){
var oDiv = document.getElementById('div');
alert(oDiv.innerHTML);//這是一個(gè)div元素
}
//jQuery的完整寫(xiě)法
//比上面JS寫(xiě)法先彈出静秆，因?yàn)閣indow.onload是把頁(yè)面元素加載粮揉、渲染完才彈出绍载，而ready()是把所有頁(yè)面的節(jié)點(diǎn)加載完之后就彈出了，不用等渲染了
/*$(document).ready(function(){
var $div = $('#div');
alert('jQuery:' + $div.html());//jQuery:這是一個(gè)div元素
})*/
//簡(jiǎn)寫(xiě)方式
$(function(){
var $div = $('#div');//CSS樣式怎么寫(xiě)滔蝉，這里就怎么寫(xiě)
//html()方法相當(dāng)于原生JS的innerHTML
alert($div.html() + 'jQuery');
})
</script>
</head>
<body>
<div id="div">這是一個(gè)div元素</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery選擇器</title>
<style type="text/css">
#div1{
color: red;
}
.box{
color: green;
}
.list li{
margin-bottom: 10px;
}
</style>
<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
$(function(){
//選擇元素的規(guī)則和css樣式相同
$('#div1').css({color: 'pink'});
$('.box').css({fontSize: '30px'});
$('.list li').css({
background: 'green',
color: '#fff',
fontSize: '20px',
marginBottom: '10px'
});
})
</script>
</head>
<body>
<div id="div1">這是一個(gè)div元素</div>
<div class="box">這是第二個(gè)div元素</div>
<ul class="list">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
</ul>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>click事件</title>
<style type="text/css">
.box{
width: 200px;
height: 200px;
background-color: gold;
}
.sty{
background-color: green;
}
</style>
<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
$(function(){
// 給按鈕綁定click事件
$('#btn').click(function(){
//重復(fù)切換sty樣式
$('.box').toggleClass('sty');
})
})
</script>
</head>
<body>
<input type="button" value="切換" id="btn">
<div class="box"></div>
</body>
</html>
