最近由于项目开发需要，学习一些jquery的东东，有一些小东西总结一下，也算是一个小笔记。
1）. 在js对象中灵活添加css样式有两种方式，一种在在css中写一个样式对象，然后在js的对象方法中通过addClass（..）的方式把这个样式添加进来，另一种方式是直接在js的function中调用函数 .css（..）的方式添加样式。
例如：
index.html文件：
... <div id="container"> <div id="header"> <h1>StarTrackr!</h1> </div> <div id="content"> <h2> Image Gallery </h2> <div id="ajaxInProgress"></div> <div id="gallery"> <img src="../../images/beau_200.jpg" alt="" /> <img src="../../images/fader_200.jpg" alt="" /> <img src="../../images/kellie_200.jpg" alt="" /> <img src="../../images/mofat_200.jpg" alt="" /> <img src="../../images/johnny_200.jpg" alt="" /> <img src="../../images/glenda_200.jpg" alt="" /> </div> </div> </div> ....
gallery.css文件：
#gallery { background-color:#94C5EB; border:1px solid #015287; height:103px; text-align:center; position: relative; overflow: hidden; margin-bottom: 10px; } #gallery img { width: 97px; height: 97px; float:left; border:1px solid #fff; padding:2px; } h2 { clear: both; } #ajaxInProgress{ width:610px; height:13px; margin-top:-5px; padding: 2px 0; } .progress { background: #fff url(progress.gif) no-repeat center right; }js文件：
$(document).ready(function(){ $('#ajaxInProgress') .ajaxStart(function() { $(this).addClass('progress'); }) .ajaxStop( function(){ $(this).removeClass('progress'); }); GALLERY.load(); }); var GALLERY = { container: '#gallery', url: 'getImages', delay: 5000, load: function() { var _gallery = this; $.ajax({ type:"get", url: this.url, beforeSend: function() { // fade out and remove the old images $(_gallery.container) .find('img') .fadeOut('slow', function() { $(this).remove(); }); }, success: function(data){ var images = data.split('|'); $.each(images, function() { _gallery.display(this); }); }, complete: function() { setTimeout(function() { _gallery.load(); }, _gallery.delay); } }); }, display: function(image_url) { $('<img></img>') .attr('src', '../../images/' + image_url) .hide() .load(function() { $(this).fadeIn(); }) .appendTo('#gallery'); } }注： 也可以直接通过调用js函数 .css(...);直接设置js对象的样式：
$(document).ready(function(){ $('#ajaxInProgress') .ajaxStart(function() { $(this).css( background: #fff url(progress.gif) no-repeat center right;); }) .ajaxStop( function(){ $(this).css( background: inherit;); }); GALLERY.load(); });
随时随地看视频
