层级菜单、手风琴、jQuery加载、jQuery选择器和click事件

<!DOCTYPE html>

<head>

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>

$(function(){

//当点击标题的时候

$('.level1').click(function(){

//点击切换展开与收起

$(this).next().toggleClass('current');

})

$('.level1').click(function(){

//以下展与上卷方式切换

$(this).next().slideToggle();

});

$('.level1').click(function(){

//$(this)是当前点击的a元素

//next()获取a元素的下一个元素，即ul

//slideDown()当前ul的子类展开

//parent()获取父类li

//siblings()获取父类兄弟li

//children('ul')获取其它li的子类ul

//slideUp()其它子类收起

$(this).next().slideDown().parent().siblings().children('ul').slideUp();

});

})

</script>

</head>

<body>

<li>

</ul>

</li>

<li>

<ul>

</ul>

</li>

<li>

<ul>

<li><a href="#">内蒙古羊肉</a></li>

</ul>

</li>

<li>

<ul>

</ul>

</li>

<li>

<ul>

</ul>

</li>

</ul>

</body>

</html>

<!DOCTYPE html>

<head>

<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>

$(function(){

$('#accordion li').click(function() {

$(this).animate(

{left: $(this).index()*21}

);

错误的索引用法

这里不能使用function(index)的索引，因为循环会先执行完，当点击事件执行时，会导致索引值不对，所以还应该使用已经保存在this当中的索引值

$(this).prevAll().each(function(index){

alert(index);

$(this).animate(

{left: index*21}

);

})

/*要使用保存在$(this)里边的索引值*/

// 当前li之前的所有兄弟li都往左移

// 由于每个li移动的距离不同，使用each循环分别设置left值

$(this).prevAll().each(function(){

//要移动的每一个元素

$(this).animate(

{left: $(this).index()*21}

);

})

// 当前li之后的所有兄弟li都往右移

$(this).nextAll().each(function(){

//要移动的每一个元素

$(this).animate(

{left: 727-(5-$(this).index())*21}

);

})

});

})

</script>

</head>

<body>

<ul>

</ul>

</div>

</body>

</html>

<!DOCTYPE html>

<head>

<title>jQuery加载</title>

// alert($);//弹出function (a,b){return new n.fn.init(a,b)}表示JQuery已经引进来了，这是它的一个构造函数

//JS写法

window.onload = function(){

var oDiv = document.getElementById('div');

alert(oDiv.innerHTML);//这是一个div元素

}

//jQuery的完整写法

//比上面JS写法先弹出，因为window.onload是把页面元素加载、渲染完才弹出，而ready()是把所有页面的节点加载完之后就弹出了，不用等渲染了

/*$(document).ready(function(){

var $div = $('#div');

alert('jQuery:' + $div.html());//jQuery:这是一个div元素

})*/

//简写方式

$(function(){

var $div = $('#div');//CSS样式怎么写，这里就怎么写

//html()方法相当于原生JS的innerHTML

alert($div.html() + 'jQuery');

})

</script>

</head>

<body>

<div id="div">这是一个div元素</div>

</body>

</html>

<!DOCTYPE html>

<head>

<title>jQuery选择器</title>

#div1{

color: red;

}

.box{

color: green;

}

.list li{

margin-bottom: 10px;

}

</style>

$(function(){

//选择元素的规则和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">这是一个div元素</div>

<div class="box">这是第二个div元素</div>

</ul>

</body>

</html>

<!DOCTYPE html>

<head>

<title>click事件</title>

.box{

width: 200px;

height: 200px;

background-color: gold;

}

.sty{

background-color: green;

}

</style>

$(function(){

// 给按钮绑定click事件

$('#btn').click(function(){

//重复切换sty样式

$('.box').toggleClass('sty');

})

</script>

</head>

<body>

</body>

</html>

层级菜单、手风琴、jQuery加载、jQuery选择器和click事件

推荐阅读更多精彩内容