几个比较经典常用的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 相关文章推荐
JavaScript的eval JSON object问题
Nov 15 Javascript
jquery 防止表单重复提交代码
Jan 21 Javascript
JSP中使用JavaScript动态插入删除输入框实现代码
Jun 13 Javascript
jQuery中document与window以及load与ready 区别详解
Dec 29 Javascript
jquery SweetAlert插件实现响应式提示框
Aug 18 Javascript
原生js模拟淘宝购物车项目实战
Nov 18 Javascript
原生javascript实现匀速运动动画效果
Feb 26 Javascript
微信小程序局部刷新触发整页刷新效果的实现代码
Nov 21 Javascript
vue实现密码显示与隐藏按钮的自定义组件功能
Apr 23 Javascript
JS拖动选择table里的单元格完整实例【基于jQuery】
May 28 jQuery
微信小程序如何刷新当前界面的实现方法
Jun 07 Javascript
jQuery 图片查看器插件 Viewer.js用法简单示例
Apr 04 jQuery
基于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
虹吸式咖啡壶操作
2021/03/03 冲泡冲煮
php中文本数据翻页(留言本翻页)
2006/10/09 PHP
php检测iis环境是否支持htaccess的方法
2014/02/18 PHP
PHP中调用SVN命令更新网站方法
2015/01/07 PHP
PHP程序员的技术成长规划
2016/03/25 PHP
WordPress中的shortcode短代码功能使用详解
2016/05/17 PHP
Yii2使用$this-&gt;context获取当前的Module、Controller(控制器)、Action等
2017/03/29 PHP
PHP封装的XML简单操作类完整实例
2017/11/13 PHP
ExtJs3.0中Store添加 baseParams 的Bug
2010/03/10 Javascript
CodeMirror2 IE7/IE8 下面未知运行时错误的解决方法
2012/03/29 Javascript
javascript 中的 delete及delete运算符
2015/11/15 Javascript
vue项目中做编辑功能传递数据时遇到问题的解决方法
2016/12/19 Javascript
js定时器+简单的动画效果实例
2017/11/10 Javascript
纯js封装的ajax功能函数与用法示例
2018/05/14 Javascript
webstrom Debug 调试vue项目的方法步骤
2018/07/17 Javascript
深入理解Vue 的钩子函数
2018/09/05 Javascript
vue中的watch监听数据变化及watch中各属性的详解
2018/09/11 Javascript
详解vue中v-bind:style效果的自定义指令
2020/01/21 Javascript
[14:56]教你分分钟做大人:巫医
2014/10/30 DOTA
python通过装饰器检查函数参数数据类型的方法
2015/03/13 Python
老生常谈python的私有公有属性(必看篇)
2017/06/09 Python
配置 Pycharm 默认 Test runner 的图文教程
2018/11/30 Python
使用Python开发SQLite代理服务器的方法
2018/12/07 Python
python代码 输入数字使其反向输出的方法
2018/12/22 Python
Python对接 xray 和微信实现自动告警
2019/09/17 Python
Pytorch转onnx、torchscript方式
2020/05/25 Python
html5桌面通知(Web Notifications)实例解析
2014/07/07 HTML / CSS
大家检讨书5000字
2014/02/03 职场文书
连锁超市项目计划书
2014/09/15 职场文书
个人四风问题对照检查材料
2014/09/26 职场文书
2014年班组长工作总结
2014/11/20 职场文书
简爱读书笔记
2015/06/26 职场文书
教师年度考核自我评鉴
2015/08/11 职场文书
2016年9月份红领巾广播稿
2015/12/21 职场文书
PHP使用非对称加密算法RSA
2021/04/21 PHP
《游戏王:大师决斗》将推出新卡牌包4月4日上线
2022/03/31 其他游戏