引言:
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