Heim > Web-Frontend > js-Tutorial > 几个比较经典常用的jQuery小技巧_jquery

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

WBOY
Freigeben: 2016-05-16 18:33:42
Original
1166 Leute haben es durchsucht
几个比较经典常用的jQuery小技巧_jquery
> 唔,这个主题挂的时间也够长的了,也该换换了,到时候找找看有没有合胃口的主题。
> 话说,最近有点偏向 PHP 去了,我发现贪多嚼不烂,所以就又回到主题咯,(*^__^*) 嘻嘻。

1. Jquery 库的调用:

> 呵呵,相信很多童鞋早就会了,不过还是得提一下,忘记就杯具咯。
> 第一个是常用的 Google 托管处的 jQuery 库地址。
> 而第二个则是 jQuery 官方网站的库地址,随时获取最新版,嘿嘿。

复制代码 代码如下:





2. Load() 函数:

> 这个也是很不错的喔,很多地方都可以用上。
> 比如想在某些图片没有载入之前加个提示之类的。
> 或者对页面载入过程最后一个元素使用,则可以提供整页面的载入提示。 几个比较经典常用的jQuery小技巧_jquery
> 下面只是一个简单的例子,选择器选择的是 Img 标签。
> 然后搜索属性,只是属性类型为 Src 即图片地址,后面则是图片地址的内容。
> 在图片载入完成之后则会弹出一个提示框表示图片已经载好。
> 注意!!请一定要填入与目标元素内填的完全相同的 Src,否则会杯具的。
复制代码 代码如下:

<script> <BR>jQuery(document).ready(function($){ <BR>$('img').attr('src', '/global/tool/picroom/save/beauty/00001.jpg') <BR> .load(function() { <BR>alert('Image Loaded'); <BR>}); <BR>}); <BR></script>

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

3. 简单的垂直居中:

> 这里使用的是 Height() 函数,选择器里的 document 表示整个页面。
> 下面查找的是 Class 为 Move 的元素,It_height 定义为元素高度。
> 然后将变量 Global_height 定义为整个页面的高度,即页顶至页底的距离。
> 然后将此元素的至顶部的距离调整为整个页面的高度的一半即可。
几个比较经典常用的jQuery小技巧_jquery
> 呵呵,相信有兴趣的童鞋已经可以举一反三咯。
> jQuery 对 CSS 进行调整的能力是灰常强大的 O(∩_∩)O。
复制代码 代码如下:

<script> <BR>jQuery(document).ready(function($){ <BR> var global_height = $(document).height(); <BR> var it_height = $('.move').height(); <BR> $('.move').css({'position' : 'absolute' , 'top' : <BR> global_height/2 - it_height/2}); <BR>}); <br><br></script>

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

4. jQuery 与 Onclick 事件结合:
复制代码 代码如下:

Move It !


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

5. ReplaceWith 函数:

> 下面的代码是寻找 Class 为 Demo 的元素,然后将其整个替换掉。
> 整个的意思,是包含了前后的标签的,所以替换函数内别忘记写标签喔。
几个比较经典常用的jQuery小技巧_jquery
 
复制代码 代码如下:

<script> <BR>jQuery(document).ready(function($){ <BR> $('.demo').replaceWith('<div style="padding-top:30px">Replaced !</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> <BR>jQuery(document).ready(function($){ <BR>$('img').load(function(){ <BR> $('#loading').css("display","none"); <BR>}); <BR>}); <BR></script>

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

Loading ...

几个比较经典常用的jQuery小技巧_jquery
Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage