JQuery學(xué)習(xí)筆記整理：CSS和屬性

attr(name)、attr(name,value)、attr(map)、attr(name,function)  獲取或設(shè)置元素的屬性
removeAttr(name)、removeAttr(name[])  刪除元素的name屬性
prop(name)、prop(name,value)、prop(map)、prop(name,function)  獲取或設(shè)置元素的屬性
removeProp(name) 刪除元素的name屬性

<img class="first" />   
<label for=""><input type="radio" /> 單選框</label>    
<div class="box">   
  <img class="second" />
  <div class="item"></div>   
</div>

$('img').attr('src','example.png');   
$('input').prop('checked','true');   
$(".item").attr({'name':'item','style':'background-color:red'});  
$('img').attr('class');  //返回first

attr(name,funciton(index,oldVal){})

<div id="box" data-title="tg"></div>  //這里的id、data-title都是該元素文檔節(jié)點的attribute

var box = document.getElementById('box');
box[name] = 'tg'; //這里的name就是box這個HTMLElement對象的property

<input type="radio"  />

$('input').attr('checked') == undefined   // true
$('input').prop('checked') == false  // true

<input type="radio" checked/>

$('input').attr('checked') == 'checked'   //true
$('input').prop('checked') == true  //true

<img src="a.png" alt="我是圖片" class="images" />

$('img').removeAttr('alt');
$('img').removeAttr('src class');

// 結(jié)果 
// <img />

prop('checked',false)

addClass(name)、addClass(function)  為匹配元素添加某個class
hasClass(name)  判斷匹配元素是否有某個class
removeClass(name)、removeClass(function)  刪除匹配元素上某個class
toggleClass()、toggleClass(boolean)、toggleClass(name)、toggleClass(name,boolean)、toggleClass(funciton,boolean)  用于切換class

<div class="box"></div>

$('.box').addClass('large');

// 結(jié)果
// <div class="box large"></div>

$('.box').addClass('large item nav');

// 結(jié)果
//<div class="box large item nav"></div>

<div class="box"></div>
<div class="box"></div>

$('.box').addClass(function(index,currentClasses){
  return 'item' + index;
});

//結(jié)果
// <div class="box item-0"></div>
// <div class="box item-1"></div>

removeClass('class1 class2')

removeClass(function(index,currentClasses){})

<div class="box item"></div>

$('.box').hasClass('item')  // true
$('.box').hasClass('a')   //false

css(name)、css(names)、css(map)、css(name,value)、css(name,function)

<style>
  .box{font-size:15px;margin:10px;}
</style>
<div class="box" style="color:red"></div>

$('.box').css('font-size');
$('.box').css('fontSize');

var classes = ['marginTop','marginRight','marginBottom','marginLeft'];
var css = $('.box').css(classes);
css.marginTop;  //10px

• 設(shè)置單個屬性
  

$('.box').css('fontSize','16px');

// 結(jié)果
//<div class="box" style="color:red;font-size:16px"></div>

• 回調(diào)函數(shù)
  

css(name,function(index,currentStyle){});

• 以相對值設(shè)置
  

$('.box').css('fontSize','+=5');
// <div class="box" style="font-size:20px"></div>

$('.box').css('fontSize','-=5');
// <div class="box" style="font-size:15px"></div>

• 如果第二個參數(shù)為空字符串，那么相當(dāng)于刪除該屬性（若屬性存在的話），而且只會刪除內(nèi)聯(lián)樣式。
  
• css()方法會忽略 !important 聲明，當(dāng)需要使用該強調(diào)值時，可使用類（class）代替。

$('.box').css('color','green').css('backgroundColor','#000');

$('.box').css({'color':'green','backgroundColor':'#000'});

widht()、height()、width(value)、height(value)  獲取或設(shè)置匹配元素中的第一個元素的寬度和高度
innerHeight()、innerWidth()  獲取匹配元素中的第一個元素的內(nèi)部高度和寬度，即包括內(nèi)邊距（padding），但不包括邊界（border）和外邊距（margin）
offset()  獲取匹配元素的第一個元素相對于頁面左上角的坐標(biāo)
outerHeight(boolean)、outerWidth(boolean)  獲取匹配元素中的第一個元素的高度和寬度，包括內(nèi)邊距和邊框，參數(shù)的值決定是否包括外邊框
position()  獲取匹配元素的第一個元素相對于被定位的祖輩元素左上角的坐標(biāo)
scrollLeft()、scrollTop()、scrollLeft(value)、scrollTop(value)  獲取或設(shè)置匹配元素的第一個元素的橫向或豎向滾動條的位置
width(funciton)、height(function)  使用回調(diào)函數(shù)動態(tài)設(shè)置所有匹配元素的寬度和高度

<div class="box"></div>

$('.box').width('20');
$('.box').width();  // 20px

width(function(index,currentWidth){});

<div class="example" style="position:absolute;top:20px;">   
  <div class="box">   
    <div class="item" style="position:absolute;top:20px;"></div>   
  </div>   
</div>

$('.item').position().top  // 20

$('.item').offset().top  // 40

$('.item').offset({top:20,left:10});

offset(function(index,coords){})

scrollTop(20)

scrollLeft(20)

text()、text(value)  設(shè)置或獲取當(dāng)前jQuery對象所匹配DOM元素內(nèi)的text內(nèi)容
html()、html(value)  設(shè)置或獲取當(dāng)前jQuery對象所匹配的DOM元素內(nèi)的所有內(nèi)容
text(function)、html(function)

<div class="box">   
  文本
  <span>123</span>   
</div>

$('.box').text()
// 文本
// 123

text(function(index,oldText){})

<div class="box">   
  文本<span>123</span>   
</div>

$('.box').html()
// 文本<span>123</span>

val()、val(value)、val(function)  設(shè)置或獲取當(dāng)前jQuery對象所匹配的DOM元素的value值。

<input type="text" id="name" value="123" />

$('#name').val()  // 123

$('#name').val('321');
$('#name').val();  // 321  

val(function(index,currentValue){})

<select multiple>   
  <option value="1" selected>1</option>   
  <option value="2" selected>2</option>   
</select>

$("select").val();  // ["1","2"]