jQuery选择器
代码：
jQuery选择器
#div1{color: red; }.box{color: green; }.listli{margin-bottom:10px; }
$(function(){//选择元素的规则和css样式相同$('#div1').css({color:'pink'});
$('.box').css({fontSize:'30px'});
$('.list li').css({background:'green',color:'#fff',fontSize:'20px',marginBottom:'10px'});
})这是一个div元素这是第二个div元素
选择集转移
代码：选择集转移$(function(){//prev()是同级的上一个元素，prevAll()
是同级的上面所有的元素//next()是同级的下一个元素，nextAll()是同级的下面所有的元素
修改#div1的下一个元素的样式$('#div1').next().css({color:'red'});
修改#div1的下面所有p标签设置样式$('#div1').nextAll('p').css({color:'red'});//选择上一级的父元素
$('#span01').parent().css({
width:'100px',
height:'100px',
background:'gold'
})
获取祖级用$('#span02').parent().parent()不可取，可用closest('div')获取离span02最近的div//closest可以选择离自己最近的元素，元素可以是父级，也可以是子集
$('#span01').closest('div').css({width:'200px',height:'200px',background:'pink'})/*
$('.list li')与$('.list').children()的区别：
原始的选择集不一样
$('.list li')不能通过end()回到父级
$('.list').children()可以通过end()回到父级
$('.list').children().css({
background:'gold',height:'30px',marginBottom:'10px'
}).end().css({
background:'green'；
})
//eq(2)
是选择索引等于2的第三个li，siblings()表示除第三个之外的其它兄弟li$('.list2 li:eq(2)').css({background:'gold'}).siblings().css({background:'green'});//find()是选择div内的class等于link1的元素$('#div2').find('.link1').css({color:'red'}); })这是一个div元素
jQuery的样式操作
代码：jQuery样式操作.div2{color: red; }
.big{font-size:30px; }
$(function(){/*jQuery用同一个函数即可以取值、也可以赋值读取样式
alert($('#div1').css('fontSize'));
16px//设置（写入）样式$('#div1').css({background:'gold'});
增加行间样式$('#div1').addClass('big');//减少行间样式，多个样式用空格分开
$('#div1').removeClass('div2 big'); })这是一个div元素
click事件
代码：click事件.box{width:200px;height:200px;background-color: gold; }.sty{background-color: green; }$(function(){// 给按钮绑定click事件$('#btn').click(function(){//重复切换sty样式$('.box').toggleClass('sty'); }) })
jQuery索引值
代码：jQuery索引值.listli{height:30px;margin-bottom:10px;background-color: gold; }$(function(){ $('.list li').click(function(){// alert(this.innerHTML);//弹出标签中的内容alert($(this).index());//弹出下标}) })
jQuery作选项卡
代码：
jQuery做选项卡
.btns{width:500px;height:50px; }/*选项卡的样式*/
.btnsinput{width:100px;height:50px;background-color:#ddd;/*默认灰色*/color:#666;border:0px;
}/*被选中的选项卡的样式
btnsinput.cur{background-color: gold; }/*内容区的样式*/
.contentsdiv{width:500px;height:300px;
background-color: gold;display: none;/*默认隐藏*
line-height:300px;text-align: center; }/*被选中的内容区的样式*/
.contentsdiv.active{display: block; }$(function(){
$('#btns input').click(function(){//this是原生的对象//
alert(this);
//弹出[object HTMLInputElement]，说明this就是当前点击的input元素
//jQuery的this对象使用时要用$()包起来，这样就可以调用jQuery的方法了
//给当前元素添加选中样式，为兄弟元素移除选中样式$(this).addClass('cur').siblings().removeClass('cur');
//$(this).index()获取当前按钮所在层级范围的索引值
//显示对应索引的内容区，隐藏其它兄弟内容区
$('#contents div').eq($(this).index()).addClass('active').siblings().removeClass('active');
});
})
