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 相关文章推荐
bcastr2.0 通用的图片浏览器
Nov 22 Javascript
再说AutoComplete自动补全之实现原理
Nov 05 Javascript
jQuery实现级联菜单效果(仿淘宝首页菜单动画)
Apr 10 Javascript
javascript处理a标签超链接默认事件的方法
Jun 29 Javascript
JavaScript脚本库编写的方法
Dec 09 Javascript
纯JavaScript基于notie.js插件实现消息提示特效
Jan 18 Javascript
基于JS实现二维码图片固定在右下角某处并跟随滚动条滚动
Feb 08 Javascript
随机生成10个不重复的0-100的数字(实例讲解)
Aug 16 Javascript
如何让你的JS代码更好看易读
Dec 01 Javascript
jquery实现动态创建form并提交的方法示例
May 27 jQuery
在vue中把含有html标签转为html渲染页面的实例
Oct 28 Javascript
angula中使用iframe点击后不执行变更检测的问题
May 10 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实现背景图上添加圆形logo图标的方法
2016/11/17 PHP
PHP构造二叉树算法示例
2017/06/21 PHP
Lumen timezone 时区设置方法(慢了8个小时)
2018/01/20 PHP
php获取用户真实IP和防刷机制的实例代码
2018/11/28 PHP
Google Suggest ;-) 基于js的动态下拉菜单
2006/10/11 Javascript
用JS实现一个TreeMenu效果分享
2011/08/28 Javascript
使用js修改客户端注册表的方法
2013/08/09 Javascript
jQuery实现提示密码强度的代码
2015/07/15 Javascript
JavaScript获取浏览器信息的方法
2015/11/20 Javascript
jQuery Easyui学习之datagrid 动态添加、移除editor
2016/01/27 Javascript
canvas实现简易的圆环进度条效果
2017/02/28 Javascript
微信小程序 地图map实例详解
2017/06/07 Javascript
微信小程序与php 实现微信支付的简单实例
2017/06/23 Javascript
nodejs body-parser 解析post数据实例
2017/07/26 NodeJs
vue 里面使用axios 和封装的示例代码
2017/09/01 Javascript
关于vue项目中搜索节流的实现代码
2019/09/17 Javascript
jquery 时间戳转日期过程详解
2019/10/12 jQuery
vuex管理状态仓库使用详解
2020/07/29 Javascript
Python多线程编程(五):死锁的形成
2015/04/05 Python
matplotlib savefig 保存图片大小的实例
2018/05/24 Python
对json字符串与python字符串的不同之处详解
2018/12/19 Python
python性能测量工具cProfile使用解析
2019/09/26 Python
Pytorch maxpool的ceil_mode用法
2020/02/18 Python
Python matplotlib模块及柱状图用法解析
2020/08/10 Python
Numpy数组的广播机制的实现
2020/11/03 Python
Python与C/C++的相互调用案例
2021/03/04 Python
Cecil Mode法国在线商店:女性时尚
2021/01/08 全球购物
最新的咖啡店创业计划书
2013/12/30 职场文书
项目申报专员岗位职责
2014/07/09 职场文书
升学宴家长致辞
2015/07/27 职场文书
《迟到》教学反思
2016/02/24 职场文书
优秀党员先进事迹材料2016
2016/02/29 职场文书
读完《骆驼祥子》的观后感!
2019/07/05 职场文书
python 统计代码耗时的几种方法分享
2021/04/02 Python
python在package下继续嵌套一个package
2022/04/14 Python
苹果的回收机器人可以通过拆解iPhone获取大量的金和铜并外公布了环境保护最新进展
2022/04/21 数码科技