jquery梳理之属性操做

attr与removeAttr - 元素属性

JS原生对于元素的属性有三种方法来操做

dom.setAttribute(name , value) //为元素添加属性名 和 属性值
dom.getAttribute(name) //获取元素属性值
dom.removeAttribute(name) //删除元素属性

而JQuery则将以上三个操做简化为: attr 和 removeAttr

attr(name , value) //对应 dom.setAttribute(name , value)
attr(name) //对应dom.getAttribute(name)
removeAttr(name) //对应dom.removeAttribute(name)

* 上述的name 为属性名，value为属性值
对于须要设置多个属性时，采用的方式是在 attr方法传入属性配置对象

dom.attr({
    'class' : 'xxxx'
    'data-name' : 'xxxxx'
});

html() 、text()、val() - 元素值属性

三个方法都是为匹配的元素设置或者获取内容
不一样之处：
html设置的内容能够包含元素；
text设置的内容为纯文本；
val 设置input(文本框的值)或select选中值

用法:
一、获取内容

$(dom).html()
$(dom).text()
$(dom).val(); //*当dom为select,且能够多选，则返回值为数组

二、设置内容

$(dom).html(string)
$(dom).text(string)
$(dom).val(string)

对于获取或者设置输入框的值，还能够采用attr方法

$(dom).attr('value' , data);  ---> $(dom).val(data);
$(dom).attr('value');             ---> $(dom).val();

addClass，removeClass, toggleClass ,css -- 操做样式属性

addClass方法：添加样式

$(dom).addClass(classname);
$(dom).addClass(function(index,classname) {
    //遍历匹配的元素，并作相关添加样式操做
    //index 遍历元素的下标, name 当前元素的class属性值
});

removeClass方法：删除样式

$(dom).removeClass(classname);
$(dom).removeClass(function(index,classname) {
    //遍历匹配的元素，并作相关删除样式操做
    //index 遍历元素的下标, name 当前元素的class属性值
    return '删除的样式名称'; //必须返回
});

toggleClass方法：切换样式

$(dom).toggleClass(classname); 
//切换样式，若是元素存在classname这个样式，则删除，若是没有则添加

$(dom).toggleClass(classname , flag)
//flag为布尔值，true表示添加样式，false表示删除样式

css方法：设置样式值

$(dom).css(name);
//获取匹配元素中，第一个元素的样式属性值
$('p').css('width'); //获取第一个p标签的width样式值
$(dom).css(name , value)
$(dom).css(name , callback)
$(dom).css(properties)
//设置匹配元素的样式属性
//当第二个参数为函数时，函数必须返回属性值
//当第一个参数为一个键值对的对象（properties）时，表示为元素设置多个属性值

**注意：css方法中的name是指具体的样式属性名称，如 width、height、positionaddClass方法中的classname 是指定义于.css文件中或者style标签内的类选择器的名称例如 .add { color:red; }$(dom).addClass('add');**