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');//移除行间样式
})
</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');//切换行间样式 有就删 没有就加
})
})
</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>
jQuery属性操作
<script type="text/javascript">
$(function(){
//innerHTML --> html()
console.log($('.box').html());//这是一个div元素
$('.box').html('<a href="http://www.baidu.com">百度网</a>');//不传值就是读 传值就是写
$('.box').attr({title:'这是一个div!'});
//console.log($('.box').attr('class'));//box
var $src = $('#img1').attr('src');
//alert($src);//imhh/2.jpg
$('#img').attr({src:'img/1.jpg',alt:'啦啦啦'});//important 机试会考
alert($('#check').prop('checked'));//Flase
$('#check').prop({checked:true});//prop看这是的值是true还是false
// alert($('.box2').html());//<span>这是div元素里的值</span> 有标签
alert($('.box2').text());//这是div元素里的span 纯文本
})
</script>
