jQuery基础——样式篇 （属性与样式）

.attr() 与 .removeAttr()

//找到第一个input，通过attr设置属性value的值
        $('input:first').attr('value','.attr( attributeName, value )')
//找到第二个input，通过attr获取属性value的值
        $("input:eq(1)").attr('value')
//找到第三个input，通过使用一个函数来设置属性
        //可以根据该元素上的其它属性值返回最终所需的属性值
        //例如，我们可以把新的值与现有的值联系在一起：
        $("input:eq(2)").attr('value',function(i, val){
            return '通过function设置' + val
        })
//找到第四个input，通过使用removeAttr删除属性
        $("input:eq(3)").removeAttr('value')

.html() 与 .text()

//通过.text()方法替换文本内容
        $(".left a:first").text('替换第一个a元素的内容')
 //通过.html()方法替换html结构
        $(".left div:first").html('整个div的子节点都被替换了')

.val()

//单个select，返回第一个
        $("p").text( $("#single").val() )

注意：

.html(),.text(),.val()三种方法都是用来读取选定元素的内容；只不过.html()是用来读取元素的html内容（包括html标签），.text()用来读取元素的纯文本内容，包括其后代元素，.val()是用来读取表单元素的"value"值。

增加样式.addClass()
删除样式.removeClass()
切换样式.toggleClass()

样式操作.css()

总结：
1、通过.css方法设置的样式属性优先级要高于.addClass方法
2、 .addClass与.css方法各有利弊，一般是静态的结构，都确定了布局的规则，可以用addClass的方法，增加统一的类规则
如果是动态的HTML结构，在不确定规则，或者经常变化的情况下，一般多考虑.css()方式

元素的数据存储
.data( key, value ) //实例接口,存数据
.data( key ) //实例接口,取数据
.removeData( [name ] ) //删除接口

$('.right').click(function() {
        var ele = $(this);
        //通过.data方式设置数据
        ele.data("a", "data test")
        ele.data("b", {
            name: "慕课网"
        })
        //通过.data方式取出数据
        var reset = ele.data("a") + "</br>" + ele.data("b").name
        ele.find('span').append(reset)
    })