JQuery学习笔记整理：CSS和属性

attr(name)、attr(name,value)、attr(map)、attr(name,function)  获取或设置元素的属性
removeAttr(name)、removeAttr(name[])  删除元素的name属性
prop(name)、prop(name,value)、prop(map)、prop(name,function)  获取或设置元素的属性
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都是该元素文档节点的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');

// 结果 
// <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');

// 结果
// <div class="box large"></div>

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

// 结果
//<div class="box large item nav"></div>

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

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

//结果
// <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

• 设置单个属性
  

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

// 结果
//<div class="box" style="color:red;font-size:16px"></div>

• 回调函数
  

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

• 以相对值设置
  

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

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

• 如果第二个参数为空字符串，那么相当于删除该属性（若属性存在的话），而且只会删除内联样式。
  
• css()方法会忽略 !important 声明，当需要使用该强调值时，可使用类（class）代替。

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

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

widht()、height()、width(value)、height(value)  获取或设置匹配元素中的第一个元素的宽度和高度
innerHeight()、innerWidth()  获取匹配元素中的第一个元素的内部高度和宽度，即包括内边距（padding），但不包括边界（border）和外边距（margin）
offset()  获取匹配元素的第一个元素相对于页面左上角的坐标
outerHeight(boolean)、outerWidth(boolean)  获取匹配元素中的第一个元素的高度和宽度，包括内边距和边框，参数的值决定是否包括外边框
position()  获取匹配元素的第一个元素相对于被定位的祖辈元素左上角的坐标
scrollLeft()、scrollTop()、scrollLeft(value)、scrollTop(value)  获取或设置匹配元素的第一个元素的横向或竖向滚动条的位置
width(funciton)、height(function)  使用回调函数动态设置所有匹配元素的宽度和高度

<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)  设置或获取当前jQuery对象所匹配DOM元素内的text内容
html()、html(value)  设置或获取当前jQuery对象所匹配的DOM元素内的所有内容
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)  设置或获取当前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"]