jQuery做选项卡
.btns{
width: 500px;
height: 50px;
}
/*选项卡的样式*/
.btns input{
width: 100px;
height: 50px;
background-color: #ddd;/*默认灰色*/
color: #666;
border: 0px;
}
/*被选中的选项卡的样式*/
.btns input.cur{
background-color: gold;
}
/*内容区的样式*/
.contents div{
width: 500px;
height: 300px;
background-color: gold;
display: none;/*默认隐藏*/
line-height: 300px;
text-align: center;
}
/*被选中的内容区的样式*/
.contents div.active{
display: block;
}
$(function(){
$('#btns input').click(function(){
//alert(this);//[object HTMLInputElement]
$(this).addClass('cur').siblings().remveClass('cur');
//alert($(this).index());
$('#contents div').eq($(this).index()).
addClass('active').siblings().removeClass('active');
})
$('#box2 #btns input').click(function() {
$(this).blur();
$(this).addClass('cur').siblings().removeClass('cur');
$('#box2 #contents div').eq($(this).index()).addClass('active').siblings().removeClass('active');
});
})
jQuery属性操作
$(function(){
//innerHtml --> html()
console.log($('.box').html());//这是一个div元素
$('.box').html('百度网');
/*
读写值为布尔类型的属性用prop方法
读写值为非布尔类型的属性用attr方法
*/
$('.box').attr({title:'这是一个div!'});//写入title属性,并赋值
//console.log($('box').attr('class'));//读属性class的值,弹出box
var $src = $('#img1').attr('src');
alert($src);//img/10.png
$('#img1').attr({str:'img/12.png',alt:'大王'});
alert($('#check').prop('checked'));//选中为true,非选中为false
$('#check').prop({checked:true});//设置默认勾选
// alert($('.box2').html());//这是div元素内的span
alert($('.box2').text());//这是div元素内的span
})
多选
这是div元素内的span
jQuery特殊效果
.box{
width: 200px;
height: 200px;
background-color: gold;
display: none;
}
$(function(){
$('#btn').click(function () {
// $('.box').fadeOut();//淡出
// $('.box').fadeIn();//淡入
// $('.box').fadeToggle();//淡入淡出
// $('.box').hide();//隐藏
// $('.box').show();//显示
// $('.box').toggle();//显示隐藏
// $('.box').slideDown();//下展
// $('.box').slideUp();//上收
$('.box').slideToggle();//上收下展
})
})
层级菜单
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();
});
})