几个比较经典常用的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 相关文章推荐
js实现每日自动换一张图片的方法
May 04 Javascript
深入浅析jQuery对象$.html
Aug 22 Javascript
Bootstrap 下拉多选框插件Bootstrap Multiselect
Jan 22 Javascript
解决OneThink中无法异步提交kindeditor文本框中修改后的内容方法
May 05 Javascript
js如何编写简单的ajax方法库
Aug 02 Javascript
Extjs 中的 Treepanel 实现菜单级联选中效果及实例代码
Aug 22 Javascript
微信小程序获取手机号授权用户登录功能
Nov 09 Javascript
封装微信小程序http拦截器过程解析
Aug 13 Javascript
原生javascript中this几种常见用法总结
Feb 24 Javascript
JS如何生成随机验证码
Mar 02 Javascript
javascript开发实现贪吃蛇游戏
Jul 31 Javascript
JS PHP字符串截取函数实现原理解析
Aug 29 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同时连接多个mysql数据库示例代码
2014/03/17 PHP
CI框架实现cookie登陆的方法详解
2016/05/18 PHP
php版微信公众平台接口开发之智能回复开发教程
2016/09/22 PHP
php实现基于pdo的事务处理方法示例
2017/07/21 PHP
WordPress免插件实现面包屑导航的示例代码
2020/08/20 PHP
js String对象中常用方法小结(字符串操作)
2012/01/27 Javascript
js showModalDialog 弹出对话框的简单实例(子窗体)
2014/01/07 Javascript
浅谈EasyUI中编辑treegrid的方法
2015/03/01 Javascript
JavaScript中的闭包
2016/02/24 Javascript
深入理解Angular2 模板语法
2016/08/07 Javascript
AngularJS 将再发布一个重要版本 然后进入长期支持阶段
2018/01/31 Javascript
React Native使用fetch实现图片上传的示例代码
2018/03/07 Javascript
react中实现搜索结果中关键词高亮显示
2018/07/31 Javascript
详解如何制作并发布一个vue的组件的npm包
2018/11/10 Javascript
Vue项目中如何使用Axios封装http请求详解
2019/10/23 Javascript
JavaScript享元模式原理与用法实例详解
2020/03/09 Javascript
Python3 queue队列模块详细介绍
2018/01/05 Python
Python列表推导式、字典推导式与集合推导式用法实例分析
2018/02/07 Python
python opencv 批量改变图片的尺寸大小的方法
2019/06/28 Python
Python爬虫动态ip代理防止被封的方法
2019/07/07 Python
PyCharm2019安装教程及其使用(图文教程)
2019/09/29 Python
使用python计算三角形的斜边例子
2020/04/15 Python
解决Jupyter notebook更换主题工具栏被隐藏及添加目录生成插件问题
2020/04/20 Python
python之语音识别speech模块
2020/09/09 Python
python实现定时发送邮件
2020/12/23 Python
HTML5 canvas基本绘图之绘制五角星
2016/06/27 HTML / CSS
联想瑞士官方网站:Lenovo Switzerland
2017/11/19 全球购物
NICKIS.com荷兰:设计师儿童时装
2020/01/08 全球购物
工作室成员个人发展规划范文
2014/01/24 职场文书
一分钟演讲稿
2014/04/30 职场文书
村党支部书记四风问题个人对照检查材料思想汇报
2014/10/06 职场文书
党的群众路线教育实践活动教师自我剖析材料
2014/10/09 职场文书
教师岗位职责范本
2015/04/02 职场文书
2015年初一班主任工作总结
2015/05/13 职场文书
孕妇病假条怎么写
2015/08/17 职场文书
简历自我评价:教师师德表现自我评价
2019/04/24 职场文书