进阶篇：jquery 属性 & CSS操作（20-2）

饥人谷学习进阶第 20 天

属性相关

.val([value])

读写两用的方法，用来处理input的value，当方法没有参数的时候返回input的value值，当传递了一个参数的时候，方法修改input的value值为参数值

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

.attr()

.attr(attributeName)

获取元素特定属性的值

var title = $("em").attr("title")

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

为元素属性赋值

$( "#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";
});//这里用id选择符举例是不是function永远最多迭代一次？用类选择符是不是更好些？

.removeAttr()

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

.removeAttr() 方法使用原生的 JavaScript removeAttribute() 函数,但是它的优点是可以直接在一个 jQuery 对象上调用该方法，并且它解决了跨浏览器的属性名不同的问题。

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

.prop() / .removeProp()

这两个方法用来操作元素的 property，property和attibute是非常相似的概念

jQuery的attr与prop

CSS相关

.css()

和attr非常相似的方法，用来处理元素的css

.css(propertyName) / .css(propertyNames)

获取元素style特定的property的值

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

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

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

设置元素style特定的property的值

$( "div.example" ).css( "width", function( index ) {
  return index * 50;
});

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

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

$( this ).css({  // 对象方式批量设置
  "background-color": "yellow",
  "font-weight": "bolder"
})

---

.addClass(className) / .removeClass(className)

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

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

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

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

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

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

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

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

.hasClass(className)

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

$('.child').hasClass('select')

.toggleClass(className)

toggle方法用于切换，switch是个bool类型值

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