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

1) 禁止右键
在开发 Web 应用的时候，有些情况需要禁用右键单击功能。使用此代码，jQuery 开发人员可以在网页上禁用鼠标右键点击。代码如下：


代码如下:

$(document).ready(function() {
//catch the right-click context menu
$(document).bind("contextmenu",function(e) {
//warning prompt - optional
alert("No right-clicking!");

//delete the default context menu
return false;
});
});

2) 文本缩放
使用下面的代码，用户可以更具需要增大或者缩放网页中的字体大小，代码如下：


代码如下:

$(document).ready(function() {
//find the current font size
var originalFontSize = $('html').css('font-size');

//Increase the text size
$(".increaseFont").click(function() {
var currentFontSize = $('html').css('font-size');
var currentFontSizeNumber = parseFloat(currentFontSize, 10);

var newFontSize = currentFontSizeNumber*1.2;
$('html').css('font-size', newFontSize);
return false;
});

//Decrease the Text 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;
});

// Reset Font Size
$(".resetFont").click(function(){
$('html').css('font-size', originalFontSize);
});
});

3) 在新窗口打开链接
使用这个 jQuery 代码，用户会点击你的网站的任何链接都会在新的窗口中打开。如下：


代码如下:

$(document).ready(function() {
//select all anchor tags that have http in the href
//and apply the target=_blank
$("a[href^='http']").attr('target','_blank');
});

4) 样式表切换
你知道网站换肤是怎么做的吗？下面的代码可以帮助你实现样式表切换功能，如下：


代码如下:

$(document).ready(function() {
$("a.cssSwap").click(function() {
//swap the link rel attribute with the value in the rel
$('link[rel=stylesheet]').attr('href' , $(this).attr('rel'));
});
});

5) 回到顶部
这是现在网站中很常用的回到顶部功能，特别适合页面很长的情况。代码很简单，如下：


代码如下:

$(document).ready(function() {
//when the id="top" link is clicked
$('#top').click(function() {
//scoll the page back to the top
$(document).scrollTo(0,500);
}
});

6) 获取鼠标的 X、Y 坐标
下面的代码可以获取鼠标的 X,Y 坐标，代码如下：


代码如下:

$().mousemove(function(e){
//display the x and y axis values inside the P element
$('p').html("X Axis : " + e.pageX + " | Y Axis " + e.pageY);
});

7) 检测当前鼠标的坐标
使用下面的代码，能够在任何支持 jQuery 的地方获取当前鼠标的坐标，如下：


代码如下:

$(document).ready(function() {
$().mousemove(function(e){
$('# MouseCoordinates ').html("X Axis Position = " + e.pageX + " and Y Axis Position = " + e.pageY);
});

8) 预加载图片
这个图片预加载片段让你能够快速的预先载入图片，不需要等待。代码如下：


代码如下:

jQuery.preloadImagesInWebPage = function() {
for(var ctr = 0; ctr<arguments.length; ctr++){
jQuery("").attr("src", arguments[ctr]);
}
}

调用方法：


代码如下:

$.preloadImages("image1.gif", "image2.gif", "image3.gif");
判断图片是否已加载：
$('#imageObject').attr('src', 'image1.gif').load(function() {
alert('The image has been loaded…');
});

赞 (0)

相关推荐

  • jQuery开发者都需要知道的5个小技巧

    1.禁用右键菜单 复制代码 代码如下: $(document).ready(function(){ $(document).bind("contextmenu",function(e){ return false; }); }); 2.让字体闪烁 复制代码 代码如下: jQuery.fn.flash = function( color, duration ) { var current = this.css( 'color' ); this.animate( { color: 'rgb

  • jQuery 常见开发使用技巧总结

    1.关于页面元素的引用 通过jquery的$()引用元素包括通过id.class.元素名以及元素的层级关系及dom或者xpath条件等方法,且返回的对象为jquery对象(集合对象),不能直接调用dom定义的方法. 2.jQuery对象与dom对象的转换 只有jquery对象才能使用jquery定义的方法.注意dom对象和jquery对象是有区别的,调用方法时要注意操作的是dom对象还是jquery对象. 普通的dom对象一般可以通过$()转换成jquery对象. 如:$(document.ge

  • jQuery常见开发技巧详细整理

    1.关于页面元素的引用 通过jquery的$()引用元素包括通过id.class.元素名以及元素的层级关系及dom或者xpath条件等方法,且返回的对象为jquery对象(集合对象),不能直接调用dom定义的方法. 2.jQuery对象与dom对象的转换 只有jquery对象才能使用jquery定义的方法.注意dom对象和jquery对象是有区别的,调用方法时要注意操作的是dom对象还是jquery对象. 普通的dom对象一般可以通过$()转换成jquery对象. 如:$(document.ge

  • WEB前端开发都应知道的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常见开发技巧手册

    本文为大家整理一篇很详尽的jQuery常见开发技巧文章,供大家参考,具体内容如下 1.关于页面元素的引用 通过jquery的$()引用元素包括通过id.class.元素名以及元素的层级关系及dom或者xpath条件等方法,且返回的对象为jquery对象(集合对象),不能直接调用dom定义的方法. 2.jQuery对象与dom对象的转换 只有jquery对象才能使用jquery定义的方法.注意dom对象和jquery对象是有区别的,调用方法时要注意操作的是dom对象还是jquery对象. 普通的d

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

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

  • 60个很实用的jQuery代码开发技巧收集

    60个很实用的jQuery代码开发技巧收集

    由于内容比较多建议用CTRL+F搜索 偶然在网上看到这些不错的jQuery代码开发技巧.原文收集了30个,另外查找的时候发现了还有20个.加上另外十个实用的jQuery代码片段,共60个代码技巧,收集在一起分享给大家. 1. 创建一个嵌套的过滤器 .filter(":not(:has(.selected))") //去掉所有不包含class为.selected的元素 2. 重用你的元素查询 var allItems = $("div.item"); var keep

  • 30个经典的jQuery代码开发技巧

    本文实例总结了30个经典的jQuery代码开发技巧.分享给大家供大家参考.具体如下: 1. 创建一个嵌套的过滤器 复制代码 代码如下: .filter(":not(:has(.selected))") //去掉所有不包含class为.selected的元素 2. 重用你的元素查询 复制代码 代码如下: var allItems = $("div.item"); var keepList = $("div#container1 div.item")

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

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

  • 前端开发必知的15个jQuery小技巧

    下面这些简单的小技巧能够帮助你玩转jQuery. 1.返回顶部按钮 通过使用jQuery中的animate 和scrollTop 方法,不用插件就可以创建一个滚动到顶部的简单动画: // Back to top $('.top').click(function (e) { e.preventDefault(); $('html, body').animate({scrollTop: 0}, 800); }); <!-- Create an anchor tag --> <a class=

  • iOS开发中简单实用的几个小技巧

    iOS开发中简单实用的几个小技巧

    前言 本文记录了在iOS开发过程中所遇到的小知识点,以及一些技巧,下面话不多说,来看看详细的介绍. 技巧1:UIButton图片与文字默认是左右排列,如何实现右左排列? 解决技巧: button.transform = CGAffineTransformMakeScale(-1.0, 1.0); button.titleLabel.transform = CGAffineTransformMakeScale(-1.0, 1.0); button.imageView.transform = CGA

  • 七个不允许错过的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

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

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

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

    下文里技巧实现的效果虽然并不新鲜,但通过jQuery的封装,HTML实现了很大的清洁.清爽简洁又高效的代码任何时候都是开发者所醉心追求的终极目标,也许它简单,但是它能量巨大.一起来看看我们小编推荐给大家的五个非常实用的jQuery技巧. 1.禁用鼠标右键 $(document).ready(function() { $(document).bind("contextmenu", function(e) { return false; }); }); 当然jquery1.7版本以后bin

  • 11个教程中不常被提及的JavaScript小技巧（推荐）

    1.过滤唯一值 Set类型是在ES6中新增的,它类似于数组,但是成员的值都是唯一的,没有重复的值.结合扩展运算符(...)我们可以创建一个新的数组,达到过滤原数组重复值的功能. const array = [1, 2, 3, 3, 5, 5, 1]; const uniqueArray = [...new Set(array)]; console.log(uniqueArray); // [1, 2, 3, 5] 在ES6之前,我们如果想要实现这个功能的话,需要的处理代码要多很多. 这个技巧的适

  • vue开发中后台系统复杂表单优化技巧

    目录 引言 表单校验 使用computed进行表单校验优化 表单拆分 表单兄弟组件的数据通信问题 引言 在中后台系统的日常开发中,表单必不可少,当表单内容比较多,例如有上百个字段(这一点都不夸张,血淋淋的现实)时,代码往往也变得复杂且难以维护,加上各种动态联动的表单校验,无疑让我们的页面开发过程雪上加霜,本文将结合自己平时的开发习惯,分享一下在大表单开发中如何处理复杂的表单校验,以及如何对表单进行拆分,减少单个文件堆积过多的代码内容. 表单校验 <template> <el-form r

  • 分享Python中四个不常见的小技巧

    目录 1. 引言 2. 获取 n 个最大数字 3. 获取 n 个最小数字 4. 删除字符串的特定部分 5. 从列表中删除重复元素 6. 总结 1. 引言 在编程界,每个人都希望自己可以写出世界上最好的代码,其实最好的代码往往需要具备最好的代码质量.勤能补拙,善于总结往往可以快速提升大家的编程技巧. 本文重点对日常中不常使用的四个Python技巧进行简明阐述,希望可以提升大家编码时的工作效率. 闲话少说,我们直接开始吧! 2. 获取 n 个最大数字 我们知道,要获得列表中的最大数字,我们往往使用​

随机推荐