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


Posted in Javascript onMarch 01, 2010

几个比较经典常用的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小技巧

Javascript 相关文章推荐
Jqyery中同等与js中windows.onload的应用
May 10 Javascript
img onload事件绑定各浏览器均可执行
Dec 19 Javascript
谈谈JavaScript中的函数与闭包
Apr 14 Javascript
jQuery的显示和隐藏方法与css隐藏的样式对比
Oct 18 Javascript
深入探讨JavaScript、JQuery屏蔽网页鼠标右键菜单及禁止选择复制
Jun 10 Javascript
javascript实现数组中的内容随机输出
Aug 11 Javascript
JS实现DIV容器赋值的方法
Dec 14 Javascript
JavaScript的字符串方法汇总
Jul 31 Javascript
微信小程序 Video API实例详解
Oct 02 Javascript
高效的jQuery代码编写技巧总结
Feb 22 Javascript
self.attachevent is not a function的解决方法
Apr 04 Javascript
详解使用Nuxt.js快速搭建服务端渲染(SSR)应用
Mar 13 Javascript
基于JQuery的密码强度验证代码
Mar 01 #Javascript
Jquery下的26个实用小技巧(jQuery tips, tricks &amp; solutions)
Mar 01 #Javascript
基于jquery.Jcrop的头像编辑器
Mar 01 #Javascript
IE event.srcElement和FF event.target 功能比较
Mar 01 #Javascript
Javascript 判断客户端浏览器类型代码
Mar 01 #Javascript
在chrome中window.onload事件的一些问题
Mar 01 #Javascript
仅用[]()+!等符号就足以实现几乎任意Javascript代码
Mar 01 #Javascript
You might like
php发送邮件的问题详解
2015/06/22 PHP
php实现微信发红包
2015/12/05 PHP
JavaScript NaN和Infinity特殊值 [译]
2012/09/20 Javascript
获取元素距离浏览器周边的位置的方法getBoundingClientRect
2013/04/17 Javascript
JS实现QQ图片一闪一闪的效果小例子
2013/07/31 Javascript
jQuery动画效果-fadeIn fadeOut淡入浅出示例代码
2013/08/28 Javascript
JavaScript中判断页面关闭、页面刷新的实现代码
2014/08/27 Javascript
Jquery修改页面标题title其它JS失效的解决方法
2014/10/31 Javascript
30个经典的jQuery代码开发技巧
2014/12/15 Javascript
jQuery实现鼠标滚轮动态改变样式或效果
2015/01/05 Javascript
jQuery中animate用法实例分析
2015/03/09 Javascript
jQuery实现动态添加和删除一个div
2015/08/12 Javascript
jQuery采用连缀写法实现的折叠菜单效果
2015/09/18 Javascript
Bootstrap table分页问题汇总
2016/05/30 Javascript
JavaScript栈和队列相关操作与实现方法详解
2018/12/07 Javascript
详解小程序开发经验:多页面数据同步
2019/05/18 Javascript
JavaScript实现音乐导航效果
2020/11/19 Javascript
Python内置函数Type()函数一个有趣的用法
2015/02/18 Python
PyQt5实现五子棋游戏(人机对弈)
2020/03/24 Python
使用Python实现画一个中国地图
2019/11/23 Python
python实现引用其他路径包里面的模块
2020/03/09 Python
HTML5通过调用canvas对象的getContext()方法来获取绘图环境
2014/06/23 HTML / CSS
娇韵诗加拿大官网:Clarins加拿大
2017/11/20 全球购物
TripAdvisor德国:全球领先的旅游网站
2017/12/07 全球购物
NFL欧洲商店(德国):NFL Europe Shop DE
2018/11/03 全球购物
Boolean b = new Boolean(“abcde”); 会编译错误码
2013/11/27 面试题
个人简历中的自我评价范例
2013/10/29 职场文书
初中生三年学习生活的自我评价
2013/11/03 职场文书
文明村创建实施方案
2014/03/27 职场文书
2014收银员工作总结范文
2014/12/16 职场文书
因工资原因离职的辞职信范文
2015/05/12 职场文书
河童之夏观后感
2015/06/11 职场文书
2015年学校办公室主任工作总结
2015/07/20 职场文书
2019中小学生安全过暑期倡议书
2019/06/24 职场文书
Python异常类型以及处理方法汇总
2021/06/05 Python
Python实现查询剪贴板自动匹配信息的思路详解
2021/07/09 Python