jquery 選擇器
jquery用法思想一
選擇某個網(wǎng)頁元素薄料,然后對它進(jìn)行某種操作
jquery選擇器
jquery選擇器可以快速地選擇元素泵琳,選擇規(guī)則和css樣式相同,使用length屬性判斷是否選擇成功谷市。
('li') //選擇所有的li元素
('.myClass') // 選擇class為myClass的元素
('#ul1 li span') //選擇id為為ul1元素下的所有l(wèi)i下的span元素
對選擇集進(jìn)行修飾過濾(類似CSS偽類)
('#ul1 li:odd') //選擇id為ul1元素下的li的奇數(shù)行
('#ul1 li:gt(2)') // 選擇id為ul1元素下的前三個之后的li
('div:visible') //選擇可見的div元素
對選擇集進(jìn)行函數(shù)過濾
('div').not('.myClass'); //選擇class不等于myClass的div元素
('div').first(); //選擇第1個div元素
$('div').eq(5); //選擇第6個div元素
選擇集轉(zhuǎn)移
('div').next('p'); //選擇div元素后面的第一個p元素
('div').parent(); //選擇div的父元素
('div').siblings(); //選擇div的同級元素
$('div').find('.myClass'); //選擇div內(nèi)的class等于myClass的元素
jquery樣式操作
操作行間樣式
// 獲取div的樣式
("div").css("color");
//設(shè)置div的樣式
("div").css("height","30px");
$("div").css({fontSize:"30px",color:"red"});
特別注意
選擇器獲取的多個元素巩梢,獲取信息獲取的是第一個,比如:$("div").css("width")鞠抑,獲取的是第一個div的width忌警。
操作樣式類名
("#div1").removeClass("divClass") //移除id為div1的對象的class名為divClass的樣式
("#div1").toggleClass("anotherClass") //重復(fù)切換anotherClass樣式
jquery屬性操作
1、html() 取出或設(shè)置html內(nèi)容
// 取出html內(nèi)容
var ('#div1').html();
// 設(shè)置html內(nèi)容
$('#div1').html('<span>添加文字</span>');
2箕速、text() 取出或設(shè)置text內(nèi)容
// 取出文本內(nèi)容
var ('#div1').text();
// 設(shè)置文本內(nèi)容
$('#div1').text('<span>添加文字</span>');
3弧满、attr() 取出或設(shè)置某個屬性的值
// 取出圖片的地址
var ('#img1').attr('src');
// 設(shè)置圖片的地址和alt屬性
$('#img1').attr({ src: "test.jpg", alt: "Test Image" })
綁定click事件
給元素綁定click事件此熬,可以用如下方法:
$('#btn1').click(function(){
// 內(nèi)部的this指的是原生對象
// 使用jquery對象用 $(this)
})