JQuery基础教程修改CSS样式.doc

《JQuery基础教程修改CSS样式.doc》由会员分享，可在线阅读，更多相关《JQuery基础教程修改CSS样式.doc（2页珍藏版）》请在三一办公上搜索。

1、修改元素的样式, 我们可以修改元素CSS类或者直接修改元素的样式.一个元素可以应用多个css类, 但是不幸的是在DOM属性中是用一个以空格分割的字符串存储的, 而不是数组. 所以如果在原始javascript时代我们想对元素添加或者删除多个属性时, 都要自己操作字符串.1.修改CSS类下表是修改CSS类相关的jQuery方法:名称说明实例addClass( classes )为每个匹配的元素添加指定的类名。为匹配的元素加上 selected 类:$(p).addClass(selected);hasClass( class )判断包装集中是否至少有一个元素应用了指定的CSS类$(p).hasC

2、lass(selected);removeClass( classes )从所有匹配的元素中删除全部或者指定的类。从匹配的元素中删除 selected 类:$(p).removeClass(selected);toggleClass( class )如果存在（不存在）就删除（添加）一个类。为匹配的元素切换 selected 类:$(p).toggleClass(selected);toggleClass( class, switch )当switch是true时添加类,当switch是false时删除类每三次点击切换高亮样式:var count = 0;$(p).click(function(

3、) $(this).toggleClass(highlight, count+ % 3 = 0););使用上面的方法, 我们可以将元素的CSS类像集合一样修改, 再也不必手工解析字符串.注意addClass( class )和removeClass( classes )的参数可以一次传入多个css类, 用空格分割,比如:待添加的隐藏文字内容2$(“#btnAdd”).bind(“click”, Function(event)$(“p”).addClass(“colorRed borderBlue”););removeClass方法的参数可选, 如果不传入参数则移除全部CSS类:$(“p”).r

4、emoveClass();2.修改CSS样式同样当我们想要修改元素的具体某一个CSS样式,即修改元素属性style时, jQuery也提供了相应的方法:名称说明实例css( name )访问第一个匹配元素的样式属性。取得第一个段落的color样式属性的值:$(p).css(color);css( properties )把一个“名/值对”对象设置为所有匹配元素的样式属性。这是一种在所有匹配的元素上设置大量样式属性的最佳方式。将所有段落的字体颜色设为红色并且背景为蓝色:$(p).css( color: #ff0011, background: blue );css( name, value )在所有匹配的元素中，设置一个样式属性的值。数字将自动转化为像素值将所有段落字体设为红色:$(p).css(color,red);