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 相关文章推荐
javascript开发中因空格引发的错误
Nov 08 Javascript
js加载之使用DOM方法动态加载Javascript文件
Nov 08 Javascript
js实现prototype扩展的方法(字符串,日期,数组扩展)
Jan 14 Javascript
jQuery Mobile操作HTML5的常用函数总结
May 17 Javascript
JS访问DOM节点方法详解
Nov 29 Javascript
js使用原型对象(prototype)需要注意的地方
Aug 28 Javascript
Vue render深入开发讲解
Apr 13 Javascript
create-react-app修改为多页面支持的方法
May 17 Javascript
微信小程序停止其他视频播放当前视频的实例代码
Dec 25 Javascript
JS中间件设计模式的深入探讨与实例分析
Apr 11 Javascript
javascript设计模式 ? 外观模式原理与用法实例分析
Apr 15 Javascript
微信小程序文章详情功能完整实例
Jun 03 Javascript
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
咖啡因含量是由谁决定的?低因咖啡怎么来?低因咖啡适合什么人喝
2021/03/06 新手入门
一棵php的类树(支持无限分类)
2006/10/09 PHP
PHP+AJAX实现无刷新注册(带用户名实时检测)
2006/12/02 PHP
php环境配置 php5 MySQL5 apache2 phpmyadmin安装与配置图文教程
2007/03/16 PHP
php中$_SERVER[PHP_SELF] 和 $_SERVER[SCRIPT_NAME]之间的区别
2009/09/05 PHP
PHP常用处理静态操作类
2015/04/03 PHP
PHP面向对象程序设计__tostring()和__invoke()用法分析
2019/06/12 PHP
JS分割字符串并放入数组的函数
2011/07/04 Javascript
js函数获取html中className所在的内容并去除标签
2013/09/08 Javascript
jQuery filter函数使用方法
2014/05/19 Javascript
基于豆瓣API+Angular开发的web App
2015/01/02 Javascript
详解Bootstrap创建表单的三种格式(一)
2016/01/04 Javascript
Bootstrap模仿起筷首页效果
2016/05/09 Javascript
解决Vue2.0中使用less给元素添加背景图片出现的问题
2018/09/03 Javascript
深入浅出了解Node.js Streams
2019/05/27 Javascript
layui数据表格跨行自动合并的例子
2019/09/02 Javascript
微信小程序云开发获取文件夹下所有文件(推荐)
2019/11/14 Javascript
微信小程序中data-key属性之数据传输(经验总结)
2020/08/22 Javascript
python获取当前日期和时间的方法
2015/04/30 Python
举例讲解Python中的死锁、可重入锁和互斥锁
2015/11/05 Python
Python实现利用最大公约数求三个正整数的最小公倍数示例
2017/09/30 Python
python进行文件对比的方法
2018/12/24 Python
python地震数据可视化详解
2019/06/18 Python
python多线程同步之文件读写控制
2021/02/25 Python
numpy 声明空数组详解
2019/12/05 Python
处理textarea中的换行和空格
2019/12/12 HTML / CSS
意大利和国际奢侈品牌购物网站:Suitnegozi.com
2021/01/15 全球购物
.net笔试题
2014/03/03 面试题
网络安全方面的面试题
2016/01/07 面试题
美术专业个人自我评价
2014/01/18 职场文书
三个儿子教学反思
2014/02/03 职场文书
看上去很美观后感
2015/06/10 职场文书
消防宣传语大全
2015/07/13 职场文书
2015重阳节敬老活动总结
2015/07/29 职场文书
jQuery实现影院选座订座效果
2021/04/13 jQuery
MySQL数据库10秒内插入百万条数据的实现
2021/11/01 MySQL