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;
}
$(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();
});
})
*{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;}
$(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}
);
})
});
})
// 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');
})
#div1{
color: red;
}
.box{
color: green;
}
.list li{
margin-bottom: 10px;
}
$(function(){
//选择元素的规则和css样式相同
$('#div1').css({color: 'pink'});
$('.box').css({fontSize: '30px'});
$('.list li').css({
background: 'green',
color: '#fff',
fontSize: '20px',
marginBottom: '10px'
});
})
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
.box{
width: 200px;
height: 200px;
background-color: gold;
}
.sty{
background-color: green;
}
$(function(){
// 给按钮绑定click事件
$('#btn').click(function(){
//重复切换sty样式
$('.box').toggleClass('sty');
})
})