jQuery样式操作
获取样式和设置样式
<p class='myClass' title='this is p'>this is p</p>
样式其实就是class属性所以设置和获取样式都能用attr()方法来完成,attr()方法用法:http://www.cnblogs.com/kuangxin/p/4243991.html
追加样式
实例:
<style>
.high{
font-weight:bold;//字体加粗
color:red;//字体颜色设置为红色
}
.another{
font-style:italic;//斜体
color:blue;//字体设置为蓝色
}
</style>
<p class="high" title="this is p">this is p</p>
jQuery代码:
$(p).addClass('another');
结果:
<p class="hight another" title="this is p">this is p</p>
此时在<p>元素中同时拥有俩个class值,即‘hight’和‘another’。在css中有以下俩条规定:
(1)如果给一个元素添加了多个class值,那么就相当于合并了他们的样式。
(2)如果不同的class设定了同一样式属性,则后者覆盖前者。
在上例中相当于给<p>元素添加了如下样式:
font-weight:bold;//字体加粗
color:red;//字体颜色设置为红色
font-style:italic;//斜体
color:blue;//字体设置为蓝色
在以上样式中,存在两个‘color’属性,而后面的‘color’属性会覆盖前面的‘color’属性,因此最终的’color‘属性的值为’blue‘,而不是’red‘,样式最终呈现为:
font-weight:bold;//字体加粗
font-style:italic;//斜体
color:blue;//字体设置为蓝色
attr和addClass()的区别:
<p>this is p<p>
$('p').addClass('high');//结果<p class='high'>this is p</p>
$('p').attr('class','high');//结果<p class='high'>this is p<p>
再次使用
$('p').addClass('another');//结果<p class='high another'>this is p</p>
$('p').attr('class','another');//结果<p class='another'>this is p<p>
移除样式
实例:
HTML:
<p class='high another'>this is p</p>
jQuery代码:
$('p').removeClass('high');//移除high样式
$('p').removeClass('another');//移除another样式
等价于
$('p').removeClass('high anothe');//移除high another样式
等价于
$('p').removeClass();//清空样式
结果:
<p>this is p</p>
切换样式
HTML:
<p class='myClass'>this is p</p>
jQuery代码:
$('p').toggleClass('another');//切换为another样式
注意! toggleClass()方法会不停的在俩种样式之间切换,当class为myClass时,运行代码则切换为another,当class为another时,运行代码则切换为myClass
判断是否包含某个样式
jQuery代码:
var bool= $('p').hasClass('myClass');//判断p标记是否包含样式myClass,包含返回true,否则返回false
注意! 这个方法是为了增强代码可读性而产生的,在jQuery内部实际上是调用了is()方法来完成这个功能的,上述代码等价于var bool=$('p').is('.myClass')