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 相关文章推荐
javascript 最常用的10个自定义函数[推荐]
Dec 26 Javascript
Span元素的width属性无效果原因及解决方案
Jan 15 Javascript
Javascript常考语句107条收集
Mar 09 Javascript
jQuery Study Notes学习笔记 (二)
Aug 04 Javascript
简约JS日历控件 实例代码
Jul 12 Javascript
使用JQuery快速实现Tab的AJAX动态载入(实例讲解)
Dec 11 Javascript
js隐式全局变量造成的bug示例代码
Apr 22 Javascript
easyui validatebox验证
Apr 29 Javascript
JS简单实现动态添加HTML标记的方法示例
Apr 08 Javascript
JavaScript实现的联动菜单特效示例
Jul 08 Javascript
详解Vue的watch中的immediate与watch是什么意思
Dec 30 Javascript
详解node.js 事件循环
Jul 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把数据表导出为Excel表的最简单、最快的方法(不用插件)
2014/05/10 PHP
php实现singleton()单例模式实例
2014/11/06 PHP
php+xml实现在线英文词典查询的方法
2015/01/23 PHP
windows平台中配置nginx+php环境
2015/12/06 PHP
Netbeans 8.2与PHP相关的新特性介绍
2016/10/08 PHP
什么是PHP7中的孤儿进程与僵尸进程
2019/04/14 PHP
Javascript中正则表达式的全局匹配模式分析
2011/04/26 Javascript
jQuery实现切换页面布局使用介绍
2011/10/09 Javascript
JS运动框架之分享侧边栏动画实例
2015/03/03 Javascript
JavaScript中的anchor()方法使用详解
2015/06/08 Javascript
简单了解Backbone.js的Model模型以及View视图的源码
2016/02/14 Javascript
基于javascript实现最简单的选项卡切换效果
2016/05/16 Javascript
AngularJS基础 ng-paste 指令简单示例
2016/08/02 Javascript
Javascript this 函数深入详解
2016/12/13 Javascript
解决JQuery全选/反选第二次失效的问题
2017/10/11 jQuery
在vue项目中使用Nprogress.js进度条的方法
2018/01/31 Javascript
axios简单实现小程序延时loading指示
2018/07/30 Javascript
Vue2.0实现组件之间数据交互和通信操作示例
2019/05/16 Javascript
layui table 多行删除(id获取)的方法
2019/09/12 Javascript
微信小程序select下拉框实现源码
2019/11/08 Javascript
vue-amap根据地址回显地图并mark的操作
2020/11/03 Javascript
[40:55]Liquid vs LGD 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
Python使用MD5加密字符串示例
2014/08/22 Python
Python实现线程池代码分享
2015/06/21 Python
有关Python的22个编程技巧
2018/08/29 Python
matplotlib实现区域颜色填充
2019/03/18 Python
Django项目之Elasticsearch搜索引擎的实例
2019/08/21 Python
Python面向对象之私有属性和私有方法应用案例分析
2019/12/31 Python
python由已知数组快速生成新数组的方法
2020/04/08 Python
一个非常简单好用的Python图形界面库(PysimpleGUI)
2020/12/28 Python
财务人员个人自荐信范文
2013/09/26 职场文书
顶岗实习接收函
2014/01/09 职场文书
安全教育实施方案
2014/03/02 职场文书
会计求职信范文
2014/05/24 职场文书
励志演讲稿3分钟
2014/08/21 职场文书
导游词之天下银坑景区
2019/11/21 职场文书