jQuery元素操作

通過jQuery可以操作控制元素的樣式,文本,屬性等

jquery樣式操作

css操作行內樣式

// 獲取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。

類名class操作

操作樣式類名

$("#div1").addClass(“divClass2”) //為id為div1的對象追加樣式divClass2
$("#div1").removeClass(“divClass”) //移除id為div1的對象的class名為divClass的樣式
$("#div1").removeClass(“divClass divClass2”) //移除多個樣式
$("#div1").toggleClass(“anotherClass”) //重復切換anotherClass樣式

文本操作

1、html() 取出或設置html內容

// 取出html內容var $htm = $('#div1').html();// 設置html內容
$('#div1').html('<span>添加文字</span>');

2、text() 取出或設置text內容

// 取出文本內容var $htm = $('#div1').text();// 設置文本內容$('#div1').text('<span>添加文字</span>');

屬性操作

1、attr() 取出或設置某個屬性的值

// 取出圖片的地址var $src = $('#img1').attr('src');// 設置圖片的地址和alt屬性$('#img1').attr({ src: "test.jpg", alt: "Test Image" });//也可以用戶設置class屬性
$('#abc').attr('class','all')//也可以自定義 屬性
$('#abc').attr('love','iloveyou')

2、removeattr()刪除屬性

$('#abc').removeattr('class')$('#abc').removeattr('love')