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 相关文章推荐
JQUBar 基于JQUERY的柱状图插件
Nov 23 Javascript
JS实现判断滚动条滚到页面底部并执行事件的方法
Dec 18 Javascript
javascript实现拖放效果
Dec 16 Javascript
不同js异步函数同步的实现方法
May 28 Javascript
BootStrap智能表单demo示例详解
Jun 13 Javascript
canvas绘制七巧板
Feb 03 Javascript
js浏览器滚动条卷去的高度scrolltop(实例讲解)
Jul 07 Javascript
webpack写jquery插件的环境配置
Dec 21 jQuery
vue页面跳转后返回原页面初始位置方法
Feb 11 Javascript
详解如何在你的Vue项目配置vux
Jun 04 Javascript
angular多语言配置详解
May 16 Javascript
Jquery+javascript实现支付网页数字键盘
Dec 21 jQuery
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
PHP的FTP学习(三)
2006/10/09 PHP
PHP往XML中添加节点的方法
2015/03/12 PHP
php从文件夹随机读取文件的方法
2015/06/01 PHP
thinkphp autoload 命名空间自定义 namespace
2015/07/17 PHP
详解json在php中的应用
2018/09/30 PHP
event对象的方法 兼容多浏览器
2009/06/27 Javascript
Javascript remove 自定义数组删除方法
2009/10/20 Javascript
WEB页子窗口(showModalDialog和showModelessDialog)使用说明
2009/10/25 Javascript
jquery.artwl.thickbox.js  一个非常简单好用的jQuery弹出层插件
2012/03/01 Javascript
js隐藏与显示回到顶部按钮及window.onscroll事件应用
2013/01/25 Javascript
js实现表格字段排序
2014/02/19 Javascript
jquery实现类似淘宝星星评分功能实例
2014/09/12 Javascript
js+cookies实现悬浮购物车的方法
2015/05/25 Javascript
js编写贪吃蛇的小游戏
2020/08/24 Javascript
jquery实现无刷新验证码的简单实例
2016/05/19 Javascript
基于jQuery实现照片墙自动播放特效
2017/01/12 Javascript
如何使node也支持从url加载一个module详解
2018/06/05 Javascript
在vue中使用el-tab-pane v-show/v-if无效的解决
2020/08/03 Javascript
在Vue中使用Echarts可视化库的完整步骤记录
2020/11/18 Vue.js
python读取json文件并将数据插入到mongodb的方法
2015/03/23 Python
python简单分割文件的方法
2015/07/30 Python
Python实现破解12306图片验证码的方法分析
2017/12/29 Python
Python 在字符串中加入变量的实例讲解
2018/05/02 Python
Python中的Django基本命令实例详解
2018/07/15 Python
Python利用sqlacodegen自动生成ORM实体类示例
2019/06/04 Python
python实现差分隐私Laplace机制详解
2019/11/25 Python
Python类如何定义私有变量
2020/02/03 Python
python如何更新包
2020/06/11 Python
纯css3实现思维导图样式示例
2018/11/01 HTML / CSS
HTML5中外部浏览器唤起微信分享
2020/01/02 HTML / CSS
Expedia意大利旅游网站:酒店、机票和租车预订
2017/10/30 全球购物
什么是smarty? Smarty的优点是什么?
2013/08/11 面试题
安全标准化实施方案
2014/02/20 职场文书
工地例会施工汇报材料
2014/08/22 职场文书
党的群众路线调研报告
2014/11/03 职场文书
Go 通过结构struct实现接口interface的问题
2021/10/05 Golang