8个实用的jQuery技巧


Posted in Javascript onMarch 04, 2014

1)禁用右键单击功能
如果你想为用户保护网站信息,那么开发者可以使用这段代码——禁用右键单击功能。

$(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)使用jQuery设定文本大小
使用这段代码,用户可根据需求重新设定文本尺寸(增加或减少)。
$(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)在新窗口打开链接
使用这段代码会帮助用户在新窗口打开链接,为用户带来更好的用户体验。
$(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轴
$().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)检测当前鼠标坐标
使用这个脚本,你可以在任何网络浏览器获取鼠标坐标。
$(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]);
     }
}
To use the above method, you can use the following piece of code:
$.preloadImages("image1.gif", "image2.gif", "image3.gif");
To check whether an image has been loaded, you can use the following piece of code:
$('#imageObject').attr('src', 'image1.gif').load(function() {
    alert('The image has been loaded…');
});
Javascript 相关文章推荐
Jquery 插件开发笔记整理
Jan 17 Javascript
基于jQuery选择器的整理集合
Apr 26 Javascript
javascript实现rgb颜色转换成16进制格式
Jul 10 Javascript
jQuery实现图片上传和裁剪插件Croppie
Nov 29 Javascript
谈谈JavaScript中浏览器兼容问题的写法小议
Dec 17 Javascript
Vuejs 用$emit与$on来进行兄弟组件之间的数据传输通信
Feb 23 Javascript
javascript实现table单元格点击展开隐藏效果(实例代码)
Apr 10 Javascript
jQuery制作input提示内容(兼容IE8以上)
Jul 05 jQuery
浅谈react-router HashRouter和BrowserRouter的使用
Dec 29 Javascript
iview Upload组件多个文件上传的示例代码
Sep 30 Javascript
JS阻止事件冒泡的方法详解
Aug 26 Javascript
微信小程序实现拼图小游戏
Oct 22 Javascript
js中top的作用深入剖析
Mar 04 #Javascript
父页面显示遮罩层弹出半透明状态的dialog
Mar 04 #Javascript
深入理解JS中的变量及作用域、undefined与null
Mar 04 #Javascript
css+js实现部分区域高亮可编辑遮罩层
Mar 04 #Javascript
JavaScript程序员应该知道的45个实用技巧
Mar 04 #Javascript
js判断url是否有效的两种方法
Mar 04 #Javascript
js 判断js函数、变量是否存在的简单示例代码
Mar 04 #Javascript
You might like
PHP 使用pcntl和libevent 实现Timer功能
2013/10/27 PHP
PHPThumb图片处理实例
2014/05/03 PHP
php 伪静态之IIS篇
2014/06/02 PHP
PHP 文件锁与进程锁的使用示例
2017/08/07 PHP
php用wangeditor3实现图片上传功能
2019/08/22 PHP
jQuery验证Checkbox是否选中的代码 推荐
2011/09/04 Javascript
jQuery 绑定事件到动态创建的元素上的方法实例
2013/08/18 Javascript
JavaScript简单获取页面图片原始尺寸的方法
2016/06/21 Javascript
Node.js连接postgreSQL并进行数据操作
2016/12/18 Javascript
javascript解析ajax返回的xml和json格式数据实例详解
2017/01/05 Javascript
基于JavaScript中字符串的match与replace方法(详解)
2017/12/04 Javascript
JS中Map和ForEach的区别
2018/02/05 Javascript
在Vue中获取组件声明时的name属性方法
2018/09/12 Javascript
微信小程序实现获取小程序码和二维码java接口开发
2019/03/29 Javascript
微信小程序实现跳转的几种方式总结(推荐)
2019/04/24 Javascript
vue如何截取字符串
2019/05/06 Javascript
vue 判断页面是首次进入还是再次刷新的实例
2020/11/05 Javascript
Python中基本的日期时间处理的学习教程
2015/10/16 Python
一步步教你用Python实现2048小游戏
2017/01/19 Python
浅谈Python中带_的变量或函数命名
2017/12/04 Python
Python3.5.3下配置opencv3.2.0的操作方法
2018/04/02 Python
详解python3中的真值测试
2018/08/13 Python
Python运行DLL文件的方法
2020/01/17 Python
实例教程 一款纯css3实现的数字统计游戏
2014/11/10 HTML / CSS
HTML5中判断横屏竖屏的方法(移动端)
2016/08/04 HTML / CSS
新西兰最大的在线设计师眼镜店:SmartBuyGlasses新西兰
2017/10/20 全球购物
法国最大电子商务平台:Cdiscount
2018/03/13 全球购物
在线购买世界上最好的酒:BoozeBud
2018/06/07 全球购物
优质飞蝇钓和渔具:RiverBum
2020/05/10 全球购物
计算机工程学院个人求职信
2013/10/05 职场文书
土建施工员岗位职责
2014/07/16 职场文书
大学毕业生管理学求职信
2014/09/01 职场文书
小浪底导游词
2015/02/12 职场文书
个人的事迹材料怎么写
2019/04/24 职场文书
奖学金发言稿(范文)
2019/08/21 职场文书
《分一些蚊子进来》读后感3篇
2020/01/09 职场文书