前端 - jQuery

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'); 

       });

    })