Jquery選擇器與樣式操作

jquery選擇器

jquery用法思想一
選擇某個網頁元素，然后對它進行某種操作

jquery選擇器
jquery選擇器可以快速地選擇元素，選擇規則和css樣式相同，使用length屬性判斷是否選擇成功。

$('#myId') //選擇id為myId的網頁元素
$('.myClass') // 選擇class為myClass的元素
$('li') //選擇所有的li元素
$('#ul1 li span') //選擇id為為ul1元素下的所有li下的span元素
$('input[name=first]') // 選擇name屬性等於first的input元素

對選擇集進行過濾

$('div').has('p'); // 選擇包含p元素的div元素
$('div').not('.myClass'); //選擇class不等於myClass的div元素
$('div').filter('.myClass'); //選擇class等於myClass的div元素
$('div').eq(5); //選擇第6個div元素

選擇集轉移

$('div').prev(); //選擇div元素前面緊挨的同輩元素
$('div').prevAll(); //選擇div元素之前所有的同輩元素
$('div').next(); //選擇div元素后面緊挨的同輩元素
$('div').nextAll(); //選擇div元素后面所有的同輩元素
$('div').parent(); //選擇div的父元素
$('div').children(); //選擇div的所有子元素
$('div').siblings(); //選擇div的同級元素
$('div').find('.myClass'); //選擇div內的class等於myClass的元素

判斷是否選擇到了元素
jquery有容錯機制，即使沒有找到元素，也不會出錯，可以用length屬性來判斷是否找到了元素,length等於0，就是沒選擇到元素，length大於0，就是選擇到了元素。

var $div1 = $('#div1');
var $div2 = $('#div2');
alert($div1.length); // 彈出1
alert($div2.length); // 彈出0
......
<div id="div1">這是一個div</div>

jquery樣式操作

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樣式