几个比较经典常用的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 当前日期加(天、周、月、年)
Aug 09 Javascript
JavaScript高级程序设计(第3版)学习笔记2 js基础语法
Oct 11 Javascript
多个表单中如何获得这个文件上传的网址实现js代码
Mar 25 Javascript
简单谈谈javascript中this的隐式绑定
Feb 22 Javascript
深入理解关于javascript中apply()和call()方法的区别
Apr 12 Javascript
微信小程序 实战实例开发流程详细介绍
Jan 05 Javascript
jQuery 实现双击编辑表格功能
Jun 19 jQuery
vue实现商城上货组件简易版
Nov 27 Javascript
利用JS测试目标网站的打开响应速度
Dec 01 Javascript
npm scripts 使用指南详解
Oct 08 Javascript
Jquery cookie插件实现原理代码解析
Aug 04 jQuery
js Proxy的原理详解
May 25 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 开发环境配置(Zend Server安装)
2010/04/28 PHP
PHP将整个网站生成HTML纯静态网页的方法总结
2012/02/05 PHP
php图片处理函数获取类型及扩展名实例
2014/11/19 PHP
php显示指定目录下子目录的方法
2015/03/20 PHP
PHP实现的增强性mhash函数
2015/05/27 PHP
PHP中的session安全吗?
2016/01/22 PHP
PHP实现根据数组的值进行分组的方法
2017/04/20 PHP
PHP-FPM和Nginx的通信机制详解
2019/02/01 PHP
JQuery 返回布尔值Is()条件判断方法代码
2012/05/14 Javascript
关于extjs treepanel复选框选中父节点与子节点的问题
2013/04/02 Javascript
Python脚本后台运行的几种方式
2015/03/09 Javascript
JavaScript中的依赖注入详解
2015/03/18 Javascript
javascript中this的四种用法
2015/05/11 Javascript
jquery实现移动端点击图片查看大图特效
2020/09/11 Javascript
JavaScript Date对象详解
2016/03/01 Javascript
基于Jquery插件实现跨域异步上传文件功能
2016/04/26 Javascript
bootstrap网格系统使用方法解析
2017/01/13 Javascript
小程序开发之模态框组件封装
2020/04/23 Javascript
python中的闭包用法实例详解
2015/05/05 Python
python3新特性函数注释Function Annotations用法分析
2016/07/28 Python
Python使用itertools模块实现排列组合功能示例
2018/07/02 Python
python使用tcp实现局域网内文件传输
2020/03/20 Python
Mac安装python3的方法步骤
2019/08/09 Python
python实现ftp文件传输功能
2020/03/20 Python
Python爬虫实现HTTP网络请求多种实现方式
2020/06/19 Python
Levi’s西班牙官方网站:李维斯,著名的牛仔裤品牌
2020/08/20 全球购物
职高毕业生自我鉴定
2013/10/21 职场文书
拉丁舞学习者的自我评价
2013/10/27 职场文书
高一自我鉴定
2013/12/17 职场文书
学校安全教育制度
2014/01/31 职场文书
销售员岗位职责范本
2014/02/03 职场文书
周年庆典主持词
2014/04/02 职场文书
药店促销活动总结
2014/07/10 职场文书
2015年党务公开工作总结
2015/05/19 职场文书
读《方与圆》有感:交友方圆有度
2020/01/14 职场文书
Python实现DBSCAN聚类算法并样例测试
2021/06/22 Python