几个比较经典常用的jQuery小技巧_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() 函数:

> 这个也是很不错的喔,很多地方都可以用上。
> 比如想在某些图片没有载入之前加个提示之类的。
> 或者对页面载入过程最后一个元素使用,则可以提供整页面的载入提示。
> 下面只是一个简单的例子,选择器选择的是 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 对 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 的元素,然后将其整个替换掉。
> 整个的意思,是包含了前后的标签的,所以替换函数内别忘记写标签喔。

 
复制代码 代码如下:

<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>

时间: 2024-08-03 18:42:42

几个比较经典常用的jQuery小技巧_jquery的相关文章

分享15个大家都熟知的jquery小技巧_jquery

帮助提高你jQuery应用的15个大家都熟知的jquery小技巧,分享给大家 回到顶部按钮 图片预加载 判断图片是否加载完 自动修补破损图像 Hover切换class类 禁用输入 停止正在加载的链接 toggle fade/slide 简单的手风琴 使两个DIV同等高度 在浏览器标签/新窗口打开外部链接 根据文本获取元素 可见变化的触发 Ajax调用错误处理 链式操作 1.回到顶部按钮 利用jQuery里的animate和scrollTop方法,你便不需要使用插件创建简单的滚动到顶部动画. //

七个不允许错过的jQuery小技巧_jquery

jQuery是一款轻量级的JavaScript库,是最流行的客户端HTML脚本之一,它在WEB设计师和开发者中非常的有名,并且有非常多有用的插件和技术. 本文我们将为大家分享一些jQuery小技巧: 一.在新窗口打开链接 用下面的代码,你点击链接即可在新窗口打开: $(document).ready(function() { //select all anchor tags that have http in the href //and apply the target=_blank $("a

分享五个有用的jquery小技巧_jquery

1.禁用鼠标右键 $(document).ready(function() { $(document).bind("contextmenu", function(e) { return false; }); }); 当然jquery1.7版本以后bind()函数推荐用on()来代替. 2.让内容闪烁起来 $.fn.flash = function(color, duration) { var current = this.css('color'); this.animate( {col

开发中可能会用到的jQuery小技巧_jquery

1) 禁止右键 在开发 Web 应用的时候,有些情况需要禁用右键单击功能.使用此代码,jQuery 开发人员可以在网页上禁用鼠标右键点击.代码如下: 复制代码 代码如下: $(document).ready(function() { //catch the right-click context menu $(document).bind("contextmenu",function(e) { //warning prompt - optional alert("No rig

JavaScript常用表单验证&amp;amp;收集的35个 jQuery 小技巧

目录: 1:js 字符串长度限制.判断字符长度 .js限制输入.限制不能输入.textarea 长度限制  2.:js判断汉字.判断是否汉字 .只能输入汉字 3:js判断是否输入英文.只能输入英文 4:js只能输入数字,判断数字.验证数字.检测数字.判断是否为数字.只能输入数字 5:只能输入英文字符和数字 6: js email验证 .js 判断email .信箱/邮箱格式验证 7:js字符过滤,屏蔽关键字 8:js密码验证.判断密码  2.1: js 不为空.为空或不是对象 .判断为空 .判断

web开发常用js功能性小技巧

js|web|技巧 web开发常用js功能性小技巧 -------------------------------------------------------------------------------- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">; <HTML>; <HEAD>; <TITLE>; New Document </TITLE&g

六个常用的Excel小技巧分享

  六个常用的Excel小技巧分享          1.自动标出不及格分数 假定需用红色字体显示60以下分数,蓝色字体显示60以上分数. Ctrl+1,设置单元格格式→自定义,类型输入框中输入: [蓝色][>=60];[红色][<60] 2.快速输入产品编号 如某类产品型号为"ABC-1245",产品型号均有固定前缀"ABC-",大量录入时,可设置单元格免去固定前缀输入. 按Ctrl+1,设置单元格格式→自定义,类型输入框中输入: "ABC-

WEB前端开发都应知道的jquery小技巧及jquery三个简写_jquery

一个简单技巧的集合,帮你提升 jQuery 技能.目前小编给大家整理了14个jquery小技巧. 目录结构 1回到顶部按钮 2预加载图片 3检查图片是否加载完毕 4自动修复损坏的图片 5Hover 上的 Class 开关 6禁用 input 字段 7停止链接加载 8淡入淡出/滑动开关 9简单的折叠效果 10将两个 Div 设为相同高度 11在新窗口打开外部链接 12找到文本元素 13切换可视与隐藏的触发器 下面给大家介绍每个小技巧的具体含义. 1.回到顶部按钮 通过使用 jQuery 中的 an

jQuery前端开发35个小技巧_jquery

废话不说 直接代码,有问题可以一起交流 1. 禁止右键点击 $(document).ready(function(){ $(document).bind("contextmenu",function(e){ return false; }); }); 2. 隐藏搜索文本框文字 Hide when clicked in the search field, the value.(example can be found below in the comment fields) $(docu