选择集转移 jquery样式操作 click事件

选择集转移

$(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'});

})

jquery用法思想二 

同一个函数完成取值和赋值

操作行间样式

// 获取div的样式

$("div").css("width");

$("div").css("color");

//设置div的样式

$("div").css("width","30px");

$("div").css("height","30px");

$("div").css({fontSize:"30px",color:"red"});

特别注意 

选择器获取的多个元素，获取信息获取的是第一个，比如：$("div").css("width")，获取的是第一个div的width。

操作样式类名

$("#div1").addClass("divClass2") //为id为div1的对象追加样式divClass2

$("#div1").removeClass("divClass")  //移除id为div1的对象的class名为divClass的样式

$("#div1").removeClass("divClass divClass2") //移除多个样式

$("#div1").toggleClass("anotherClass") //重复切换anotherClass样式

绑定click事件

给元素绑定click事件，可以用如下方法：

$('#btn1').click(function(){

    // 内部的this指的是原生对象

    // 使用jquery对象用 $(this)

})