jQuery属性&CSS操作

• .val()

.val()方法主要用于获取表单元素的值，比如 input, select 和 textarea
当方法没有参数的时候返回input的value值，当传递了一个参数的时候，方法修改input的value值为参数值

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

• .attr()

.attr(attributeName)

获取元素特定属性的值

<div class='header'></div>
console.log( $("div").attr("class"))    //header

.attr(attributeName,value)
.attr(attributesJson)
.attr( attributeName, function(index, attr) )

为元素属性赋值

<img id="greatphoto" src="brush-seller.jpg" alt="brush seller" />
$('#greatphoto').attr('alt', 'Beijing Brush Seller');   //设置单个属性
$( "#greatphoto" ).attr({
  alt: "Beijing Brush Seller",
  title: "photo by Kelly Clark"
});  //设置多个属性
$('#greatphoto').attr('title', function(i, val) {
  return val + ' - photo by Kelly Clark'
});   //通过函数设置属性

• .removeAttr()

为匹配的元素集合中的每个元素中移除一个属性（attribute）

<div class="header"></div>
$('div').removeAttr('class');   //移除class属性

• .prop()

.prop( propertyName )

获取匹配的元素集中第一个元素的属性（property）值

.prop( propertyName, value )

为匹配的元素设置一个或多个属性（properties）

当设置selectedIndex,tagName, nodeName, nodeType, ownerDocument, defaultChecked, 或 defaultSelected必须使用prop方法。从jQuery1.6开始，这些属性可以不再使用.attr()方法来设置。他们没有相应的属性（attributes），只有属性(property)。

CSS相关

---

• .css()

用来处理元素的css

.css(propertyName)
.css(propertyNames)

获取元素style特定property的值

  <style>
    div{
       width:100px;
       height:200px;
       color:yellow;
       background-color:black;
    }
  </style>
$('div').css( "width" );   //"100px"
var styleProps = $('div').css([
  "width",
  "height",
  "color",
  "background-color"
]);
//{width: "100px", height: "200px", color: "rgb(255, 255, 0)", background-color: "rgb(0, 0, 0)"}

.css(propertyName,value)
.css( propertyName, function(index, value) )
.css( propertiesJson )

设置元素style特定property的值

$( 'div' ).css( "width", function( index ) {
  return index * 50;
});    //通过函数设置属性

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

$('div' ).css( "background-color", "yellow" );   //设置单个属性

$('div' ).css({
  "background-color": "yellow",
  "font-weight": "bolder"
});    //设置多个属性

• .addClass()

'.addClass(className)'
.addClass(function(index,currentClass))

为元素添加class，不是覆盖原class，是追加，也不会检查重复

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

$( "ul li" ).addClass(function( index ) {
  return "item-" + index;
});

• .removeClass()

removeClass([className])
removeClass(function(index,class))

移除元素单个/多个/所有class

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

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

• .hasClass()

.hasClass(className)

检查元素是否包含某个class，返回true/false

$( "#mydiv" ).hasClass( "foo" )

• .toggleClass()

在匹配的元素集合中的每个元素上用来切换的一个或多个（用空格隔开）样式类名。

<div class="tumble">Some text.</div>

$( "div.tumble" ).toggleClass( "bounce" )   //第一次执行
<div class="tumble bounce">Some text.</div>  //执行结果

$( "div.tumble" ).toggleClass( "bounce" )  //第二次执行
<div class="tumble">Some text.</div>    //执行结果