上一篇: jQuery源码解读[9] -- DOM操作方法应用

jQuery源码解读[10] -- CSS样式应用

  标签   $ 、 jQuery 、 源码 、 CSS 、 样式          分类: jQuery

一、CSS样式

首先，看一下jQuery中提供的修改CSS样式的方法：(1).css( key )；(2).css( key, value )；(3).css( obj )，都是用来修改html的样式的。

css( key )

取得css属性key的值，

.css('background-color');

取得匹配元素的background-color元素的值。

.css(['background-color', 'font-size']);

取得匹配元素的background-color和font-size属性的值。

css( key, value )

设置css属性key的只为传入的value，

.css( 'background-color', '#0000ff' );

将匹配元素的background-color背景颜色设置为#0000ff蓝色。

css( obj )

根据传入的key-value参数设置css属性值，

.css({
	background-color: '#0000ff',
	font-size: 15px,
	float: left;
});

闯入参数为一个属性 - 值一一对应的css属性对象，jQuery会为其一一对应的设置对应的css值。

利用两个按钮，调整某段落文字的大小：

// html
<p class='p1'>段落一，测试文字！！修改CSS样式！</p>
<p class='p2'>段落二，测试文字！！修改CSS样式！</p>
<button id='bigger'>变大</button>
<button id='smaller'>变小</button>

// script
var $p = $('p');
$('button').on('click', functiono(){
    var num = parseFloat($p.css('font-size'));
    var tmp = this.id == 'bigger' ? num * 1.1 : num / 1.1; 
    $p.css('font-size',num);
});

这段代码很简单，不难，此处不再说明。

二、效果方法

1、预定义效果

显示和隐藏元素

基本的.hide()和.show()不带任何参数，跟使用.css('display', 'none')或.css('display', 'block等其它')类似，用于显示和隐藏匹配元素，

// html
<p class='p1'>段落一，测试文字！！修改CSS样式！</p>
<p class='p2' style='display: none;'>段落二，测试文字！！修改CSS样式！</p>
<p class='p3'>段落三，测试文字！！修改CSS样式！</p>

// script
$('.p1').hide();	// 隐藏段落一

上面的script代码，运行后会隐藏段落一，

$('.p1').show();	// 显示段落二

在段落二的html代码中，通过style属性为其指定了一个内联的CSS属性display，并将其设置为none，那么默认情况下，段落二将不会显示出来（默认是隐藏状态），在调用了上面的代码之后，段落二将会显示到界面上。

当为.show()和.hide()传递参数时，就会产生像动画一样的，持续性效果。对于jQuery提供的任何效果方法，都可以为其指定两种预设的速度参数：slow和fast。

使用.show('slow')会在600毫秒(0.6秒)内完成显示隐藏元素的效果，而传递参数为'fast'时的时间为200毫秒(0.2秒)，而如果不显示的指定速度的参数，jQuery会默认在400毫秒(0.4秒)内完成执行的效果。

而如果想要指定自己需要的运行速度参数，直接传递一个数值参数即可：.hide(999)。

当然jQuery在隐藏显示元素中，不仅仅只为我们提供了这两个方法，还有一个toggle()方法，这个方法会显示或隐藏匹配的元素：当隐藏的元素调用此方法后会显示出来，而显示的元素调用此方法后会被隐藏。

$('<button>toggle</button>')
	.appendTo('body')
	.click(function(){
		$('p').toggle('fast');
	});

上面代码在<body>元素后面添加一个按钮，绑定一个单击事件，点击显示或隐藏所有段落。

而上面介绍的3个方法在接受一个数值作为显示、隐藏元素速度的同时，还可以传递第二个参数，作为一个回调函数，即当完成了显示、隐藏的任务后，调用该回调函数，原型入下所示：

.show('fast', function(){...});
.hide('slow', function(){...});
.toggle(1000, function(){...});

淡入、淡出

jQuery除了提供简单的隐藏显示的方法之外，还提供了另一些不同持续效果的隐藏显示方法，这里要将的是淡入和淡出。

跟前面的隐藏显示元素一样，提供了三个方法，都能接收数值作为速度参数，同样也可以接收一个函数作为回调函数，原型如下所示：

.fadeIn([speed], [callback])
.fadeOut([speed], [callback])
.fadeToggle([speed], [callback])

其使用方法跟前面一样，不再详细给出。

其中还涉及到一个.fadeTo(speed, opacity, [callback])，这个方法可以调整匹配元素的不透明度，感兴趣的可以尝试一下。

$('<button>fadeTo</button>')
	.appendTo('body')
	.click(function(){
		$('p').fadeTo(1000, 0.2);
	});

上面的代码，通过想html中添加一个带事件click处理程序的按钮，在其单击事件中，通过.fadeTo改变所有段落的不透明度(在1秒内，将不透明度由1 -> 0.2)

滑入、滑出

滑入和滑出是jQuery提供的另一种显示、隐藏元素的方法，接收的参数跟前面两种方法完全一样，只是其持续效果不同，原型如下所示：

.slideDown([speed], [callback])
.slideUp([speed], [callback])
.slideToggle([speed], [callback])

使用方法不在给出！

</br>

===

未完待续。。。

上一篇: jQuery源码解读[9] -- DOM操作方法应用