几个比较经典常用的jQuery小技巧

几个比较经典常用的jQuery小技巧

  > 唔,这个主题挂的时间也够长的了,也该换换了,到时候找找看有没有合胃口的主题。

  > 话说,最近有点偏向 PHP 去了,我发现贪多嚼不烂,所以就又回到主题咯,(*^__^*) 嘻嘻。

  1. Jquery 库的调用:

  > 呵呵,相信很多童鞋早就会了,不过还是得提一下,忘记就杯具咯。

  > 第一个是常用的 Google 托管处的 jQuery 库地址。

  > 而第二个则是 jQuery 官方网站的库地址,随时获取最新版,嘿嘿。

  

复制代码 代码如下:

  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"

  type="text/javascript"></script>

  <script src="http://code.jquery.com/jquery-latest.js"></script>

  2. Load() 函数:

  > 这个也是很不错的喔,很多地方都可以用上。

  > 比如想在某些图片没有载入之前加个提示之类的。

  > 或者对页面载入过程最后一个元素使用,则可以提供整页面的载入提示。

几个比较经典常用的jQuery小技巧

  > 下面只是一个简单的例子,选择器选择的是 Img 标签。

  > 然后搜索属性,只是属性类型为 Src 即图片地址,后面则是图片地址的内容。

  > 在图片载入完成之后则会弹出一个提示框表示图片已经载好。

  > 注意!!请一定要填入与目标元素内填的完全相同的 Src,否则会杯具的。

  

复制代码 代码如下:

  <script>

  jQuery(document).ready(function($){

  $('img').attr('src', '/global/tool/picroom/save/beauty/00001.jpg')

  .load(function() {

  alert('Image Loaded');

  });

  });

  </script>

  > 演示页面传送门:http://www.evlos.org/global/demo/jquery_load

  3. 简单的垂直居中:

  > 这里使用的是 Height() 函数,选择器里的 document 表示整个页面。

  > 下面查找的是 Class 为 Move 的元素,It_height 定义为元素高度。

  > 然后将变量 Global_height 定义为整个页面的高度,即页顶至页底的距离。

  > 然后将此元素的至顶部的距离调整为整个页面的高度的一半即可。

几个比较经典常用的jQuery小技巧

  > 呵呵,相信有兴趣的童鞋已经可以举一反三咯。

  > jQuery 对 CSS 进行调整的能力是灰常强大的 O(∩_∩)O。

  

复制代码 代码如下:

  <script>

  jQuery(document).ready(function($){

  var global_height = $(document).height();

  var it_height = $('.move').height();

  $('.move').css({'position' : 'absolute' , 'top' :

  global_height/2 - it_height/2});

  });

  > 演示页面传送门:http://www.evlos.org/global/demo/jquery_height

  4. jQuery 与 Onclick 事件结合:

  

复制代码 代码如下:

  <div onclick="var global_height = $(document).height();

  var it_height = $('.move').height();

  $('.move').css({'position' : 'absolute' , 'top' :

  global_height/2 - it_height/2});">Move It !</div>

  > 把上面的代码放到这里来,则鼠标点击此 DIV 之后执行代码。

  5. ReplaceWith 函数:

  > 下面的代码是寻找 Class 为 Demo 的元素,然后将其整个替换掉。

  > 整个的意思,是包含了前后的标签的,所以替换函数内别忘记写标签喔。

几个比较经典常用的jQuery小技巧

  

复制代码 代码如下:

  <script>

  jQuery(document).ready(function($){

  $('.demo').replaceWith('<div style="padding-top:30px">Replaced !</div>');

  });

  </script>

  > 演示页面传送门:http://www.evlos.org/global/demo/jquery_replace

  6. Load() 函数的运用(页面载入提示):

  > 首先写好 CSS,绝对定位到页面右上角。

  

复制代码 代码如下:

  #loading {

  position:absolute;    z-index:900;text-align:center;

  background-color:#eef2fa;border:1px solid #d8e3e8;

  color:#000;font-size:12px;padding:3px;width:80px;

  right:0;top:0;

  }

  > 然后用 jQuery 然后在所有图片载入完成之后,隐藏 Loading DIV。

  > 别忘记载入 jQuery 库哈,刚才测试代码的时候地址写错了,差点疯掉。

  

复制代码 代码如下:

  <script>

  jQuery(document).ready(function($){

  $('img').load(function(){

  $('#loading').css("display","none");

  });

  });

  </script>

  > 随便某处插入一个 DIV 即可,O(∩_∩)O 哈哈。

  <div id="loading">Loading ...</div>

几个比较经典常用的jQuery小技巧