几个比较经典常用的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 相关文章推荐
Add Formatted Data to a Spreadsheet
Jun 12 Javascript
JS文本框追加多个下拉框的值的简单实例
Jul 12 Javascript
在JavaScript中判断整型的N种方法示例介绍
Jun 18 Javascript
JavaScript子窗口调用父窗口变量和函数的方法
Oct 09 Javascript
Node.js Addons翻译(C/C++扩展)
Jun 12 Javascript
JS实现的跨浏览器解析XML文件实例
Jun 21 Javascript
js无法获取到html标签的属性的解决方法
Jul 26 Javascript
微信小程序  网络请求API详解
Oct 25 Javascript
基于jquery trigger函数无法触发a标签的两种解决方法
Jan 06 jQuery
Element-UI Table组件上添加列拖拽效果实现方法
Apr 14 Javascript
Jquery $.map使用方法实例详解
Sep 01 jQuery
vue+swiper实现左右滑动的测试题功能
Oct 30 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(视频)Http下载
2006/12/12 PHP
php生成动态验证码gif图片
2015/10/19 PHP
php+flash+jQuery多图片上传源码分享
2020/07/27 PHP
php ActiveMQ的安装与使用方法图文教程
2020/02/23 PHP
基于PHP实现邮箱验证激活过程详解
2020/10/28 PHP
javascript 从if else 到 switch case 再到抽象
2010/07/17 Javascript
浅析offsetLeft,Left,clientLeft之间的区别
2013/11/30 Javascript
禁止按回车键提交表单的方法
2015/06/11 Javascript
原生js实现图片层叠轮播切换效果
2016/02/02 Javascript
模板视图和AngularJS之间冲突的解决方法
2016/11/22 Javascript
vue.js开发环境安装教程
2017/03/17 Javascript
Node.js编写CLI的实例详解
2017/05/17 Javascript
jQuery操作之效果详解
2017/05/19 jQuery
ES6入门教程之Array.from()方法
2019/03/23 Javascript
js 实现ajax发送步骤过程详解
2019/07/25 Javascript
vue 父组件通过$refs获取子组件的值和方法详解
2019/11/07 Javascript
uni-app使用微信小程序云函数的步骤示例
2020/05/22 Javascript
在Python的Django框架中实现Hacker News的一些功能
2015/04/17 Python
Python实现快速排序和插入排序算法及自定义排序的示例
2016/02/16 Python
python中类和实例如何绑定属性与方法示例详解
2017/08/18 Python
Python实现随机选择元素功能
2017/09/14 Python
django使用LDAP验证的方法示例
2018/12/10 Python
Pycharm设置utf-8自动显示方法
2019/01/17 Python
python按照多个条件排序的方法
2019/02/08 Python
python实现列表的排序方法分享
2019/07/01 Python
Python matplotlib实时画图案例
2020/04/23 Python
如何基于windows实现python定时爬虫
2020/05/01 Python
纯CSS3实现地球自转实现代码(图文教程附送源码)
2012/12/26 HTML / CSS
市场安全管理制度
2014/01/26 职场文书
临床护士自荐信
2014/01/31 职场文书
淘宝好评语大全
2014/05/05 职场文书
英文推荐信格式范文
2014/05/09 职场文书
优质服务口号
2014/06/11 职场文书
新员工入职欢迎词
2015/01/23 职场文书
欠条格式范本
2015/07/03 职场文书
使用JS实现简易计算器
2021/06/14 Javascript