jQuery学习教程,六:属性操作与CSS操作
一、属性操作
1、获取属性和设置属性
$(selector).attr(attribute);
$(selector).attr(attribute,value)
例,<a href="http://www.51obj.cn/" title="_blank"></a>使用$("a").attr("href")来获取其 href属性。这种方式十分的“优雅”,即使用不带参数(或一个参数)的函数表示获取,带多个参数的函数来设置相关值。
2、删除属性
$(selector).removeAttr(attribute)
二、StyleSheet操作
1、获取样式及设置样式,使用$(selector).attr(css-selecotr)可获取相应css取值,使用$(selector).attr(css-selector,value)可设置其 值。
$(selector).addClass(css-class);//添加class
相信CSSer还记得class可以使用叠加方式,如<div class="page centerTd"></div>,这样可对div设置多种样式(而且居然ie6也支持!)。使用attr("class",value) 方式较繁琐且添加效果是“覆盖”而addClass是“追加”
2、移除样式
$(selector).removeClass(css-class)
另jQuery还提供了一个切换两个元素css类的函数toggleClass(),使用方法$(selector1).toggleClass(selector2)
判断是否含有某个样式
$(selector).hasClass(css-class)
示例
<style type="text/css"> .err{ border:solid 1px #d00; background:#fcc; font-size:12px; padding:10px;} </style> <script type="text/javascript"> $(function(){ $('#btnAddClass').click(function(){ $('p').addClass('err'); }); $('#btnRemoveClass').click(function(){ $('p').removeClass('err'); }); $('#btnSetStyle').click(function(){ alert("设置前:\ncolor:" + $('p').css('color')); $('p').css('color','#f00'); alert("设置后:\ncolor:" + $('p').css('color')); }); }); </script>