jquery 屬性&CSS操作 筆記

一、屬性

1、.val([value])

這是一個讀寫雙用的方法，用來處理input的value，當方法沒有參數的時候返回input的value值，當傳遞了一個參數的時候，方法修改input的value值爲參數值

$('input').val()

$('input').val('newValue');

2、.attr()

1. 獲取元素特定屬性的值

var title = $( "em" ).attr( "class" )//返回的是class的值
$('.child').attr('class') //"child"

2.爲元素屬性賦值

$('.child').attr('class','hhhh')

多個屬性同時設置

$('.child').attr({
'id':'hz',
'value':'big'})

3、.removeAttr()

爲匹配的元素集合中的每個元素中移除一個屬性（attribute）

.removeAttr() 方法使用原生的 JavaScript removeAttribute() 函數,但是它的優點是可以直接在一個 jQuery 對象上調用該方法，並且它解決了跨瀏覽器的屬性名不同的問題。

$('div').removeAttr('id');

二、CSS相關

1、.css()

1. 獲取元素style特定屬性的值

var color = $( this ).css( "background-color" );

var styleProps = $( this ).css([
  "width",
  "height",
  "color",
  "background-color"
]);

1. 設置元素style特定css屬性的值

$( this ).css( "width", "+=200" );

$( this ).css( "background-color", "yellow" );

$( this ).css({
  "background-color": "yellow",
  "font-weight": "bolder"
});

2、.addClass(className) / .removeClass(className)

爲元素添加class，不是覆蓋原class，是追加，也不會檢查重複

3、removeClass([className]) / ,removeClass(function(index,class))

移除元素單個/多個/所有class

$( "p" ).removeClass( "myClass yourClass" );

$( "li:last" ).removeClass(function() {
  return $( this ).prev().attr( "class" );
});

4、.hasClass(className)

檢查元素是否包含某個class，返回true/false

$('.child').hasClass('child') //true

5、.toggleClass(className)

toggle是切換的意思，方法用於切換。有這個class，就去掉，沒有這個class，就加上