8个超实用的jQuery功能代码分享


Posted in Javascript onJanuary 08, 2015

本文我们将为jQuery用户分享8个超实用的技巧攻略。jQuery是JavaScript最好的库之一,主要用于制作动画、事件处理,支持Ajax及HTML 脚本客户端。此外,jQuery还拥有各种插件,以帮助开发者在最短时间内快速创建网站/网页。

文中分享的这些实用代码,希望你会喜欢。

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 相关文章推荐
js获取input标签的输入值实现代码
Aug 05 Javascript
输入自动提示搜索提示功能的使用说明:sugggestion.txt
Sep 02 Javascript
深入理解JS中的变量及作用域、undefined与null
Mar 04 Javascript
js实现精确到毫秒的倒计时效果
Aug 05 Javascript
bootstrap laydate日期组件使用详解
Jan 04 Javascript
详解vue之页面缓存问题(基于2.0)
Jan 10 Javascript
微信小程序 devtool隐藏的秘密
Jan 21 Javascript
详解Vue学习笔记进阶篇之列表过渡及其他
Jul 17 Javascript
详解为Bootstrap Modal添加拖拽的方法
Jan 05 Javascript
浅谈实现vue2.0响应式的基本思路
Feb 13 Javascript
微信小程序连续签到7天积分获得功能的示例代码
Aug 20 Javascript
vue 把二维或多维数组转一维数组
Apr 24 Vue.js
jQuery中appendTo()方法用法实例
Jan 08 #Javascript
jQuery中append()方法用法实例
Jan 08 #Javascript
jQuery中end()方法用法实例
Jan 08 #Javascript
jQuery中contents()方法用法实例
Jan 08 #Javascript
jQuery中andSelf()方法用法实例
Jan 08 #Javascript
jQuery中add()方法用法实例
Jan 08 #Javascript
javascript 动态创建表格
Jan 08 #Javascript
You might like
html中select语句读取mysql表中内容
2006/10/09 PHP
PHP按行读取文件时删除换行符的3种方法
2014/05/04 PHP
JavaScript实现滚动栏效果的方法
2015/04/27 PHP
js 内存释放问题
2010/04/25 Javascript
JavaScript:Div层拖动效果实例代码
2013/08/06 Javascript
读取input:file的路径并显示本地图片的方法
2013/09/23 Javascript
分享20个提升网站界面体验的jQuery插件
2014/12/15 Javascript
JavaScript获取并更改input标签name属性的方法
2015/07/02 Javascript
javascript将DOM节点添加到文档的方法实例分析
2015/08/04 Javascript
vue一步步实现alert功能
2017/07/05 Javascript
Vue中用props给data赋初始值遇到的问题解决
2018/11/27 Javascript
基于Vue 实现一个中规中矩loading组件
2019/04/03 Javascript
详解js location.href和window.open的几种用法和区别
2019/12/02 Javascript
javascript将16进制的字符串转换为10进制整数hex
2020/03/05 Javascript
Javascript实现秒表计时游戏
2020/05/27 Javascript
js实现点击烟花特效
2020/10/14 Javascript
vue导入.md文件的步骤(markdown转HTML)
2020/12/31 Vue.js
[54:27]TNC vs Serenity 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
python写的一个文本编辑器
2014/01/23 Python
python定时器使用示例分享
2014/02/16 Python
Python对象的深拷贝和浅拷贝详解
2014/08/25 Python
详解如何使用Python编写vim插件
2017/11/28 Python
wx.CheckBox创建复选框控件并响应鼠标点击事件
2018/04/25 Python
Tensorflow卷积神经网络实例进阶
2018/05/24 Python
python 3.6.4 安装配置方法图文教程
2018/09/18 Python
使用pandas实现csv/excel sheet互相转换的方法
2018/12/10 Python
python能在浏览器能运行吗
2020/06/17 Python
HTML5 Plus 实现手机APP拍照或相册选择图片上传功能
2016/07/13 HTML / CSS
香港草莓网:Strawberrynet香港
2019/05/10 全球购物
总监职责范文
2013/11/09 职场文书
普宁寺导游词
2015/02/04 职场文书
python使用pywinauto驱动微信客户端实现公众号爬虫
2021/05/19 Python
2021年国产动漫公司排行前十名,玄机科技上榜,第二推出过铠甲勇士
2022/03/18 杂记
《总之就是很可爱》新作短篇动画《总之就是很可爱~制服~》将于2022年夏天播出
2022/04/07 日漫
python画条形图的具体代码
2022/04/20 Python
HTML页面点击按钮关闭页面的多种方式
2022/12/24 HTML / CSS