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插件的基本知识
Nov 25 Javascript
JS匀速运动演示示例代码
Nov 26 Javascript
JQuery插件Quicksand实现超炫的动画洗牌效果
May 03 Javascript
JavaScript图片轮播代码分享
Jul 31 Javascript
JS实现不规则TAB选项卡效果代码
Sep 16 Javascript
Bootstrap编写一个兼容主流浏览器的受众门户式风格页面
Jul 01 Javascript
微信小程序 列表的上拉加载和下拉刷新的实现
Apr 01 Javascript
BootStrap 导航条实例代码
May 18 Javascript
js实现从左向右滑动式轮播图效果
Jul 07 Javascript
详解@angular/cli 改变默认启动端口两种方式
Nov 29 Javascript
vue实现购物车小案例
Sep 27 Javascript
vue 解决mintui弹窗弹起来,底部页面滚动bug问题
Nov 12 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获取网站百度快照日期的方法
2015/07/29 PHP
ThinkPHP中session函数详解
2016/09/14 PHP
ThinkPHP实现简单登陆功能
2017/04/28 PHP
thinkPHP框架动态配置用法实例分析
2018/06/14 PHP
远离JS灾难css灾难之 js私有函数和css选择器作为容器
2011/12/11 Javascript
多种方式实现JS调用后台方法进行数据交互
2013/08/20 Javascript
Knockout text绑定DOM的使用方法
2013/11/15 Javascript
js实现正方形颜色从下往上升的效果
2014/08/04 Javascript
JQuery中DOM事件绑定用法详解
2015/06/13 Javascript
jQuery中$.ajax()和$.getJson()同步处理详解
2015/08/12 Javascript
AngularJS实现按钮提示与点击变色效果
2016/09/07 Javascript
jQuery中值得注意的trigger方法浅析
2016/12/12 Javascript
详解vue表单验证组件 v-verify-plugin
2017/04/19 Javascript
ECMAScript6变量的解构赋值实例详解
2017/09/19 Javascript
微信小程序实现搜索历史功能
2020/03/26 Javascript
jQuery中使用validate插件校验表单功能
2019/05/24 jQuery
微信小程序实现弹出菜单动画
2019/06/21 Javascript
JS 遍历 json 和 JQuery 遍历json操作完整示例
2019/11/11 jQuery
jQuery实现简单三级联动效果
2020/09/05 jQuery
[43:03]LGD vs Newbee 2019国际邀请赛小组赛 BO2 第一场 8.16
2019/08/19 DOTA
Python enumerate遍历数组示例应用
2008/09/06 Python
读写json中文ASCII乱码问题的解决方法
2016/11/05 Python
Python实现正则表达式匹配任意的邮箱方法
2018/12/20 Python
使用Python实现跳一跳自动跳跃功能
2019/07/10 Python
10行Python代码实现Web自动化管控的示例代码
2020/08/14 Python
Python+OpenCV图像处理—— 色彩空间转换
2020/10/22 Python
python实现经纬度采样的示例代码
2020/12/10 Python
pycharm 使用anaconda为默认环境的操作
2021/02/05 Python
ghd官网:英国ghd直发器品牌
2018/05/04 全球购物
HelloFresh奥地利:立即订购烹饪盒
2019/02/22 全球购物
智乐游戏测试笔试题
2014/05/21 面试题
社区党建工作汇报材料
2014/10/27 职场文书
四风问题自查自纠工作情况报告
2014/10/28 职场文书
人民调解协议书
2016/03/21 职场文书
MySQL图形化管理工具Navicat安装步骤
2021/12/04 MySQL
OpenStack虚拟机快照和增量备份实现方法
2022/04/04 Servers