玩转jquery属性与样式

引言：

jquery是一个js的框架，功能非常丰富，对于前端开发工程师来说不可能陌生，jquery封装了各种选择器，样式操作，Dom操作，各种事件和动画，功能非常强大，而且对于主流浏览器都兼容，我们来看看jquery中的属性与样式操作

---

参考：慕课网

---

attr():

attr(传入属性名)：获取属性的值（常用用法，举个例子）

<input type="text" value="helloworld" />


<script>
$(".hello").attr('value')//获取类名为hello的元素（jquery的选择器）的value属性的值，结果为helloworld
</script>

attr(属性名, 属性值)：设置属性的值（常用用法，例子）

<input type="text" value="helloworld" />


<script>
$(".hello").attr('value','i am a boy')//结果 修改value属性的值为i am a boy
</script>

attr(属性名,函数值)：设置属性的函数值
attr(attributes)：给指定元素设置多个属性值，即：{属性名一: “属性值一” , 属性名二: “属性值二” , … … }

attr其实是设置属性，讲一个bug，如果你是动态设置value，有时候获取的是默认的value，而不是你输入的值，动态获取或设置最好还是用下面的一个操作函数val()

---

val()：

val()获取元素的值
val(“va”)设置元素的值
val( function ) ，一个用来返回设置值的函数

html()：

html()是用来获取元素的html内容，包括html标签

    <div class="left first-div">
        <div class="div">
            <a>:first-child</a>
            <a>第二个元素</a>
            <a>:last-child</a>
        </div>  
        <div class="div">
            <a>:first-child</a>
            <a>第二个元素</a>
            <a>:last-child</a>
        </div>
    </div>

    $(".first-div").html()
    <!--结果 
    <div class="div"> <a>:first-child</a> <a>第二个元素</a> <a>:last-child</a> </div> <div class="div"> <a>:first-child</a> <a>第二个元素</a> <a>:last-child</a> </div> 
    -->

html( htmlString ) 设置元素的html内容
html( function(index, oldhtml) ) 用来返回设置HTML内容的一个函数

text():

text()是比较常用的一个函数，用于得到匹配元素集合中每个元素的合并文本，包括他们的后代，返回值是字符串，比如下面一个例子

    <div class="left first-div">
        <div class="div">
            <a>:first-child</a>
            <a>第二个元素</a>
            <a>:last-child</a>
        </div>  
        <div class="div">
            <a>:first-child</a>
            <a>第二个元素</a>
            <a>:last-child</a>
        </div>
    </div>

    $(".first-div").text()
    <-- 结果
    :first-child 第二个元素 :last-child :first-child 第二个元素 :last-child 
    -->

text( textString ) 用于设置匹配元素内容的文本

---

css（）:

这个方法很好用，可以获取元素的样式属性值，也可以设置

获取：

element.css(property)//获取property属性的值，如果property是数组，则返回一个对象结果

设置：

element.css(property,value)//设置property属性的值，也可将value换成函数，最厉害的是可以传一个对象，设置多个样式。

多个样式设置：

$('#abc').css({
    fontSize : '12px',
    webkitBorderRadius : '5px',
    color : '#c00'
})

补充：

css（）设置方法是内联样式，样式是有优先性的，外部文件的css叫外部样式，内部定义好，等需要时才设置内部样式，直接通过style属性设置的是内联样式，css就是属于内联样式，优先级是内联>内部>外部

---

toggleClass和addClass，removeClass

为元素添加class的方式改变样式，属于外联样式和内部样式（如果是外部文件定义的就是外部样式）

addClass( className ) :

为每个匹配元素所要增加的一个或多个样式名

removeClass( className )：

每个匹配元素移除的一个或多个用空格隔开的样式名，如果没有样式名，所有样式将被移除

toggleClass( className ，false)：

给元素切换的一个或多个（用空格隔开）样式类名，false是判断样式是否被添加或移除，可不加， toggleClass是一个互斥的逻辑，也就是通过判断对应的元素上是否存在指定的Class名，如果有就删除，如果没有就增加。toggleClass会保留原有的Class名后新增，通过空格隔开

---

就差不多到这了，有人看再更多个html5的dataset