JQuery 技巧和窍门整理(8个)_jquery

1. 新窗口打开链接
XHTML 1.0 Strict 版本不支持 target="_blank" 属性,而使用 JQuery 能很好地解决这个问题,实现新窗口打开网页:

复制代码 代码如下:

$('a[@rel$='external']').click(function(){
this.target = "_blank";
});

/*
Usage:
<a href="http://www.mangguo.org/" rel="external">mangguo.org</a>
*/

2. 获得匹配元素的总数
以下代码将返回匹配元素的数目:

$('element').size();

3. 预加载图像
当使用 Javascript 处理图像载入时,可以使用图像实现预加载:

复制代码 代码如下:

jQuery.preloadImages = function()
{
for(var i = 0; i").attr("src", arguments[i]);
}
};

// Usage
$.preloadImages("image1.gif", "/path/to/image2.png", "some/image3.jpg");

4. 检测浏览器
根据不同浏览器加载不同 CSS 能防止因浏览器差异造成的样式表渲染差异,使用 JQuery 可以轻松实现:

复制代码 代码如下:

//A. Target Safari
if( $.browser.safari ) $("#menu li a").css("padding", "1em 1.2em" );

//B. Target anything above IE6
if ($.browser.msie && $.browser.version > 6 ) $("#menu li a").css("padding", "1em 1.8em" );

//C. Target IE6 and below
if ($.browser.msie && $.browser.version <= 6 ) $("#menu li a").css("padding", "1em 1.8em" );

//D. Target Firefox 2 and above
if ($.browser.mozilla && $.browser.version >= "1.8" ) $("#menu li a").css("padding", "1em 1.8em" );

5. 字符串替换
用 JQuery 能对文本内容中的特定字符串进行替换操作:

复制代码 代码如下:

var el = $('#id');
el.html(el.html().replace(/word/ig, ""));

6. 列高度相等
用 CSS 实现两列高度相等并不容易,JQuery 能帮你解决:

复制代码 代码如下:

function equalHeight(group) {
tallest = 0;
group.each(function() {
thisHeight = $(this).height();
if(thisHeight > tallest) {
tallest = thisHeight;
}
});
group.height(tallest);
}

/*
Usage:
$(document).ready(function() {
equalHeight($(".recent-article"));
equalHeight($(".footer-col"));
});
*/

7. 字体大小重设
字体大小重设是一个非常常用的功能:

复制代码 代码如下:

$(document).ready(function(){
// Reset Font Size
var originalFontSize = $('html').css('font-size');
$(".resetFont").click(function(){
$('html').css('font-size', originalFontSize);
});
// Increase Font Size
$(".increaseFont").click(function(){
var currentFontSize = $('html').css('font-size');
var currentFontSizeNum = parseFloat(currentFontSize, 10);
var newFontSize = currentFontSizeNum*1.2;
$('html').css('font-size', newFontSize);
return false;
});
// Decrease Font Size
$(".decreaseFont").click(function(){
var currentFontSize = $('html').css('font-size');
var currentFontSizeNum = parseFloat(currentFontSize, 10);
var newFontSize = currentFontSizeNum*0.8;
$('html').css('font-size', newFontSize);
return false;
});
});

8. 禁用右键菜单
有许多 JavaScript 代码段可禁用右键菜单,但 JQuery 使操作变得更容易:

复制代码 代码如下:

$(document).ready(function(){
$(document).bind("contextmenu",function(e){
return false;
});
});

时间: 2024-10-21 15:31:06

JQuery 技巧和窍门整理(8个)_jquery的相关文章

日常收藏的jquery技巧_jquery

概述 随着WEB2.0及 ajax思想在互联网上的快速发展传播,陆续出现了一些优秀的Js框架,其中比较著名的有Prototype.YUI.jQuery.mootools. Bindows以及国内的JSVM框架等,通过将这些JS框架应用到我们的项目中能够使程序员从设计和书写繁杂的JS应用中解脱出来,将关注点转向功能需 求而非实现细节上,从而提高项目的开发速度. jQuery是继prototype 之后的又一个优秀的Javascript框架.它是由 John Resig 于 2006 年初创建的,它

jQuery技巧之让任何组件都支持类似DOM的事件管理_jquery

本文介绍一个jquery的小技巧,能让任意组件对象都能支持类似DOM的事件管理,也就是说除了派发事件,添加或删除事件监听器,还能支持事件冒泡,阻止事件默认行为等等.在jquery的帮助下,使用这个方法来管理普通对象的事件就跟管理DOM对象的事件一模一样,虽然在最后当你看到这个小技巧的具体内容时,你可能会觉得原来如此或者不过如此,但是我觉得如果能把普通的发布-订阅模式的实现改成DOM类似的事件机制,那开发出来的组件一定会有更大的灵活性和扩展性,而且我也是第一次使用这种方法(见识太浅的原因),觉得它

关注jquery技巧提高jquery技能(前端开发必学)_jquery

一个简单技巧的集合,帮你提升 jQuery 技能. Matt Smith 发起的一个小项目,目前已有 14 个 小技巧.伯乐在线会持续跟进更新. 回到顶部按钮 预加载图片 检查图片是否加载完毕 自动修复损坏的图片 Hover 上的 Class 开关 禁用 input 字段 停止链接加载 淡入淡出/滑动开关 简单的折叠效果 将两个 Div 设为相同高度 在新窗口打开外部链接 找到文本元素 切换可视与隐藏的触发器 回到顶部按钮 通过使用 jQuery 中的 animate 和 scrollTop 方

人人须知的 jQuery 技巧

本文讲的是人人须知的 jQuery 技巧, 这里收集了一些简单的窍门,助你玩转 jQuery. 检查 jQuery 是否加载 返回顶部按钮 预加载图片 判断图片是否加载完成 自动修复失效图片 鼠标悬停切换 class 禁用输入字段 阻止链接加载 缓存 jQuery 选择器 切换淡出 / 滑动 简单的手风琴效果 使两个 div 等高 在新标签页 / 新窗口打开外部链接 通过文本查找元素 在 visibility 属性变化时触发 Ajax 调用错误处理 链式插件调用 检查 jQuery 是否加载 在

jQuery教程:14个实用的jQuery技巧

jQuery之所以如此流行并被从大公司到个人博客的几乎每个人都广泛使用,是因为它上手和使用相当简单,而且为我们提供了一些人都不知道的相当棒的特性.我认为jQuery的大多数用户更趋向于使用jQuery插件来解决面临的难题,这通常是明智的选择.但是当插件相对于你的需求有一定缺陷的时候,你也许更应该想办法自己来解决,下面来看看这些实用的jQuery技巧,他们肯定会能够派上用场的! 1.测试并提升你的jQuery选择器水平 这个 jQuery选择器实验室 非常酷,它能在线免费使用,当然你也能下来到本地

在竞争中保持领先的实用的技巧和窍门

不管是写博客还是经营企业,都会遇到新意不足的困惑.新点子可以带来新商机,因此要想在竞争中保持领先,就必须集思广益想点子.下面是我讲一些实用的技巧和窍门,适用于新产品.新服务抑或是博客.这可以看做是一种心理历练,做的越多,收获越大! 1.雷厉风行!紧跟困扰着你的事情不放,以此为开端,可以迅速找到问题所在,并及时解决. 2.倾听客户.顾客和读者的投诉.投诉便于我们及时发现需要解决的问题,因此,要设法了解并及时解决顾客碰上的问题. 3.像孩童般思考.孩童对世界的看法相对单纯,处理问题也多带好奇.简洁明

Windows7下70个技巧和窍门

我们把其中的一些最重要的技巧和窍门创建成一个列表并且一步一步的向大家进行介绍.  1.PCSafeguard电脑守卫 我很少让其他人使用我的电脑,因为我怕他们会把它弄的乱七八糟的,但是看起来,微软已经替我考虑到这一点并且顺便解决了这个问题.PCSafeguard不会让任何人把用户电脑的设置弄乱,因为当他们注销的时候,所有的设定都会恢复到正常.当然了,他不会恢复用户自己的设定,但是用户唯一需要做的就是定义好其他用户的权限. 要使用PCSafeguard,首先控制面板--用户帐户接下来创建一个新的帐

8个实用的jQuery技巧

 这篇文章主要介绍了8个超实用的jQuery技巧攻略,如禁用右键.返回顶部.图片预加载等,需要的朋友可以参考下 1)禁用右键单击功能 如果你想为用户保护网站信息,那么开发者可以使用这段代码--禁用右键单击功能.    代码如下: $(document).ready(function() {  //catch the right-click context menu  $(document).bind("contextmenu",function(e) {        //warnin

jQuery滚动加载图片实现原理_jquery

本文主要通过以下几方面来说明懒加载技术的原理,个人前端小菜,有错误请多多指出 一.什么是图片滚动加载? 通俗的讲就是:当访问一个页面的时候,先把img元素或是其他元素的背景图片路径替换成一张大小为1*1px图片的路径(这样就只需请求一次),只有当图片出现在浏览器的可视区域内时,才设置图片正真的路径,让图片显示出来.这就是图片懒加载. 二.为什要使用这个技术? 比如一个页面中有很多图片,如淘宝.京东首页等等,如果一上来就发送这么多请求,页面加载就会很漫长,如果js文件都放在了文档的底部,恰巧页面的