1.jQuery样式操作
.div2{
color: red;
}
.big{
font-size: 30px;
}
</style>
js/jquery-1.12.4.min.js"></script>
$(function(){
/*jQuery用同一个函数即可以取值、也可以赋值*/
//读取样式
alert($('#div1').css('fontSize'));//16px
//设置（写入）样式
$('#div1').css({background:'gold'});
//增加行间样式
$('#div1').addClass('big');
//减少行间样式，多个样式用空格分开
$('#div1').removeClass('div2 big');
})
2.click事件
.box{
width: 200px;
height: 200px;
background-color: gold;
}
.sty{
background-color: green;
}
</style>
js/jquery-1.12.4.min.js"></script>
$(function(){
// 给按钮绑定click事件
$('#btn').click(function(){
//重复切换sty样式
$('.box').toggleClass('sty');
})
})
3.jQuery索引值
.list li{
height: 30px;
margin-bottom: 10px;
background-color: gold;
}
</style>
js/jquery-1.12.4.min.js"></script>
$(function(){
$('.list li').click(function(){
// alert(this.innerHTML);//弹出标签中的内容
alert($(this).index());//弹出下标
})
})
4.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;
}
</style>
js/jquery-1.12.4.min.js"></script>
$(function(){
$('#box1 #btns input').click(function() {
//失去焦点，避免出现默认的蓝框
$(this).blur();
//this是原生的对象
// alert(this);//弹出[object HTMLInputElement]，说明this就是当前点击的input元素
//jQuery的this对象使用时要用$()包起来，这样就可以调用jQuery的方法了
//给当前元素添加选中样式，为兄弟元素移除选中样式
$(this).addClass('cur').siblings().removeClass('cur');
//$(this).index()获取当前按钮所在层级范围的索引值
//显示对应索引的内容区，隐藏其它兄弟内容区
$('#box1 #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');
});
})
