几个比较经典常用的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 相关文章推荐
两个select之间option的互相添加操作(jquery实现)
Nov 12 Javascript
15款优秀的jQuery导航菜单插件分享
Jul 19 Javascript
asp.net中System.Timers.Timer的使用方法
Mar 20 Javascript
Jquery获取复选框被选中值的简单方法
Jul 04 Javascript
jquery foreach使用示例
Sep 12 Javascript
Echarts基本用法_动力节点Java学院整理
Aug 11 Javascript
vue项目开发中setTimeout等定时器的管理问题
Sep 13 Javascript
Vue页面跳转动画效果的实现方法
Sep 23 Javascript
深入解析ES6中的promise
Nov 08 Javascript
jquery获取img的src值实例介绍
Jan 16 jQuery
jQuery each和js forEach用法比较
Feb 27 jQuery
JS localStorage存储对象,sessionStorage存储数组对象操作示例
Feb 15 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下利用curl判断远程文件是否存在的实现代码
2011/10/08 PHP
PHP文件与目录操作示例
2016/12/24 PHP
thinkPHP5 ACL用户权限模块用法详解
2017/05/10 PHP
PHPExcel中文帮助手册|PHPExcel使用方法(分享)
2017/06/09 PHP
PHP实现的最大正向匹配算法示例
2017/12/19 PHP
PHP钩子实现方法解析
2019/05/21 PHP
jQuery TextBox自动完成条
2009/07/22 Javascript
jquery 锁定弹出层实现代码
2010/02/23 Javascript
JavaScript随机排序(随即出牌)
2010/09/17 Javascript
Fastest way to build an HTML string(拼装html字符串的最快方法)
2011/08/20 Javascript
详解JavaScript基于面向对象之创建对象(2)
2015/12/10 Javascript
jQuery实现二级下拉菜单效果
2016/01/05 Javascript
Nodejs中的this详解
2016/03/26 NodeJs
easyui datagrid 大数据加载效率慢,优化解决方法(推荐)
2016/11/09 Javascript
ES6学习之变量的解构赋值
2017/02/12 Javascript
jQuery源码解读之extend()与工具方法、实例方法详解
2017/03/30 jQuery
Vue实现点击时间获取时间段查询功能
2020/08/21 Javascript
webpack4 入门最简单的例子介绍
2018/09/05 Javascript
微信小程序实现日历签到
2020/09/21 Javascript
windows下python模拟鼠标点击和键盘输示例
2014/02/28 Python
关于 Python opencv 使用中的 ValueError: too many values to unpack
2019/06/28 Python
python中时间、日期、时间戳的转换的实现方法
2019/07/06 Python
python快速排序的实现及运行时间比较
2019/11/22 Python
移动端rem布局的两种实现方法
2018/01/03 HTML / CSS
CSS3 Columns分列式布局方法简介
2014/05/03 HTML / CSS
三星印度官网:Samsung印度
2019/08/03 全球购物
生产管理的三大手法
2013/11/11 职场文书
幼儿园门卫岗位职责
2014/02/14 职场文书
优秀学生获奖感言
2014/02/15 职场文书
市场营销策划方案
2014/06/11 职场文书
学习党的群众路线教育实践活动剖析材料
2014/10/13 职场文书
2014年学校食堂工作总结
2014/11/25 职场文书
自信主题班会
2015/08/14 职场文书
Python办公自动化PPT批量转换操作
2021/09/15 Python
Python实现打乒乓小游戏
2021/09/25 Python
Python自动化工具之实现Excel转Markdown表格
2022/04/08 Python