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

2020-05-17 06:20:33易采站长站整理

    $(‘.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>