jQuery样式操作
<script type="text/javascript" src="../js/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
$(function(){
console.log($('.div1').css('fontSize'));//16px读样式
$('.div1').css({backgroundColor:'red'});写样式
$('.div1').addClass('big');//添加行间样式
$('.div1').removeClass('div1');//移除行间样式 删掉div1
})
</script>
click事件
<script type="text/javascript" src="../js/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
$(function(){
$('#btn').click(function () {
$('.box').toggleClass('sty');//切换行间样式 有就删 没有就加 toggle切换
})
})
</script>
jQuery索引值
<script type="text/javascript" src="../js/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
$(function(){
$('.list li').click(function () {
// alert(this.innderHTML);//原生的不能获取索引值
alert($(this).index());
// 都是指当前所点的li $this是封装好的
})
})
</script>
jQuery做选项卡
<script type="text/javascript" src="../js/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
$(function(){
$('#btns input').click(function () {
// alert(this);
$(this).addClass('cur').siblings().
removeClass('cur');
alert($(this).index());
$('#contents div').eq($(this).index()).//eq = 内容区对应的
addClass('active').siblings().removeClass('active');
//添加激活的样式 点击哪个按钮对应索引的内容会出现
})
})
</script>
