jquery和css的一些学习心得

 最近由于项目开发需要，学习一些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 class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="../../images/beau_200.jpg" alt="" />         <img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="../../images/fader_200.jpg" alt="" />         <img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="../../images/kellie_200.jpg" alt="" />         <img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="../../images/mofat_200.jpg" alt="" />         <img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="../../images/johnny_200.jpg" alt="" />         <img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="../../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(); });