jQuery技术

jQuery基础 (一) 样式篇(3)

字号+ 作者:H5之家 来源:H5之家 2017-08-18 12:01 我要评论( )

.addClass( className ) 方法 .addClass( className ) : 为每个匹配元素所要增加的一个或多个样式名 .addClass( function(index, currentClass) ) : 这个函数返回一个或更多用空格隔开的要增加的样式名 注意事项:

.addClass( className )方法

.addClass( className ) : 为每个匹配元素所要增加的一个或多个样式名 .addClass( function(index, currentClass) ) : 这个函数返回一个或更多用空格隔开的要增加的样式名

注意事项:

.addClass()方法不会替换一个样式类名。它只是简单的添加一个样式类名到元素上

简单的描述下:在

<p>

$("p").addClass("newClass")

那么

23.删除样式.removeClass()

jQueryremoveClass(),它的作用是从匹配的元素中删除全部或者指定的class

.removeClass( )方法

.removeClass( [className ] ):每个匹配元素移除的一个或多个用空格隔开的样式名 .removeClass( function(index, class) ) : 一个函数,返回一个或多个将要被移除的样式名

注意事项

如果一个样式类名作为一个参数,只有这样式类会被从匹配的元素集合中删除 。 如果没有样式名作为参数,那么所有的样式类将被移除

24.切换样式.toggleClass()

在做某些效果的时候,可能会针对同一节点的某一个样式不断的切换,也就是

jQuery

.toggleClass( )方法:在匹配的元素集合中的每个元素上添加或删除一个或多个样式类,取决于这个样式类是否存在或值切换属性。即:如果存在(不存在)就删除(添加)一个类

.toggleClass( className ):在匹配的元素集合中的每个元素上用来切换的一个或多个(用空格隔开)样式类名 .toggleClass( className, switch ):一个布尔值,用于判断样式是否应该被添加或移除 .toggleClass( [switch ] ):一个用来判断样式类添加还是移除的 布尔值 .toggleClass( function(index, class, switch) [, switch ] ):用来返回在匹配的元素集合中的每个元素上用来切换的样式类名的一个函数。接收元素的索引位置和元素旧的样式类作为参数

注意事项:

toggleClasstoggleClass25.样式操作.css()

通过

.css()

获取:

.css( propertyName ) :获取匹配元素集合中的第一个元素的样式属性的计算值 .css( propertyNames ):传递一组数组,返回一个对象结果

设置:

.css(propertyName, value ):设置CSS .css( propertyName, function ):可以传入一个回调函数,返回取到对应的值进行处理 .css( properties ):可以传一个对象,同时设置多个样式

注意事项:

浏览器属性获取方式不同,在获取某些值的时候都.css()方法支持驼峰写法与大小写混搭的写法,内部做了容错的处理 当一个数只被作为值(26. .css()与.addClass()设置样式的区别

对于样式的设置,我们学了

可维护性:

.addClass()

通过

灵活性:

通过

样式值:

.addClass()

样式的优先级:

css的样式是有优先级的,当外部样式、内部样式和内联样式同一样式规则同时应用于同一个元素的时候,优先级如下

外部样式 < 内部样式 < 内联样式

.addClass() 通过

通过

总结:

.addClass与.css方法各有利弊,一般是静态的结构,都确定了布局的规则,可以用addClass的方法,增加统一的类规则

如果是动态的HTML结构,在不确定规则,或者经常变化的情况下,一般多考虑.css()方式

27.元素的数据存储

html5 dataset

使用

jQuery提供的存储接口

jQuery.data( element, key, value ) //静态接口,存数据

jQuery.data( element, key ) //静态接口,取数据

.data( key, value )//实例接口,存数据.data( key ) //实例接口,存数据

2

我们把DOM可以看作一个对象,那么我们往对象上是可以存在基本类型,引用类型的数据的,但是这里会引发一个问题,可能会存在循环引用的内存泄漏风险

通过

同样的也提供

jQuery.removeData( element [, name ] )

.removeData( [name ] )

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • 标签:jQuery

    标签:jQuery

    2017-08-18 13:01

  • jQuery标签选项卡切换代码

    jQuery标签选项卡切换代码

    2017-08-18 12:00

  • jQuery学习笔记之attr()

    jQuery学习笔记之attr()

    2017-08-17 15:00

  • 使用 jquery 获取当前时间和当前时间戳的方法

    使用 jquery 获取当前时间和当前时间戳的方法

    2017-08-17 14:01

网友点评