> 唔，这个主题挂的时间也够长的了，也该换换了，到时候找找看有没有合胃口的主题。 > 话说，最近有点偏向 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() 函数： > 这个也是很不错的喔，很多地方都可以用上。 > 比如想在某些图片没有载入之前加个提示之类的。 > 或者对页面载入过程最后一个元素使用，则可以提供整页面的载入提示。 > 下面只是一个简单的例子，选择器选择的是 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 对 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 的元素，然后将其整个替换掉。 > 整个的意思，是包含了前后的标签的，所以替换函数内别忘记写标签喔。 复制代码 代码如下: <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>

　　推荐阅读

　　JavaScript类和继承 constructor属性

constructor属性始终指向创建当前对象的构造函数。比如下面例子：比如下面例子： 复制代码 代码如下: // 等价于 var foo = new Array(1, 56, 34, 12); var arr = [1, 56, 34, 12]; console.log(arr.constructor ==>>>详细阅读

本文标题：几个比较经典常用的jQuery小技巧

地址：http://www.17bianji.com/kaifa2/JS/26984.html

 1/2    1