继续浏览精彩内容
慕课网APP
程序员的梦工厂
打开
继续
感谢您的支持,我会继续努力的
赞赏金额会直接到老师账户
将二维码发送给自己后长按识别
微信支付
支付宝支付

jquery和css的一些学习心得

android开发学习视频
关注TA
已关注
手记 304
粉丝 52
获赞 322

 最近由于项目开发需要,学习一些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(); });

 

打开App,阅读手记
0人推荐
发表评论
随时随地看视频慕课网APP