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 相关文章推荐
jquery json 实例代码
Dec 02 Javascript
jquery 提交值不为空的元素示例代码
May 10 Javascript
js拼接html注意问题示例探讨
Jul 14 Javascript
js中window.open打开一个新的页面
Aug 10 Javascript
jQuery的实例及必知重要的jQuery选择器详解
May 20 Javascript
js仿微信公众平台打标签功能
Apr 08 Javascript
vue项目中应用ueditor自定义上传按钮功能
Apr 27 Javascript
vue项目中公用footer组件底部位置的适配问题
May 10 Javascript
vue自动路由-单页面项目(非build时构建)
Apr 30 Javascript
手把手教你使用TypeScript开发Node.js应用
May 06 Javascript
关于微信小程序获取小程序码并接受buffer流保存为图片的方法
Jun 07 Javascript
jQuery与原生JavaScript选择HTML元素集合用法对比分析
Nov 26 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常用文件操作函数和简单实例分析
2016/06/03 PHP
php函数传值的引用传递注意事项分析
2016/06/25 PHP
idTabs基于JQuery的根据URL参数选择Tab插件
2012/04/11 Javascript
解决Extjs4中form表单提交后无法进入success函数问题
2013/11/26 Javascript
jquery ztree实现下拉树形框使用到了json数据
2014/05/14 Javascript
WebSocket+node.js创建即时通信的Web聊天服务器
2016/08/08 Javascript
input框中的name和id的区别
2016/11/16 Javascript
js自制图片放大镜功能
2017/01/24 Javascript
JavaScript实现瀑布流以及加载效果
2017/02/11 Javascript
详解tween.js的使用教程
2017/09/14 Javascript
javaScript手机号码校验工具类PhoneUtils详解
2017/12/08 Javascript
vue的diff算法知识点总结
2018/03/29 Javascript
JS实现二维数组横纵列转置的方法
2018/04/17 Javascript
JavaScript检查数据中是否存在相同的元素(两种方法)
2018/10/07 Javascript
使用pm2部署node生产环境的方法步骤
2019/03/09 Javascript
[02:05]2014DOTA2西雅图国际邀请赛 BBC第二天小组赛总结
2014/07/11 DOTA
[02:32]DOTA2亚洲邀请赛 C9战队出场宣传片
2015/02/07 DOTA
python两种遍历字典(dict)的方法比较
2014/05/29 Python
python socket 超时设置 errno 10054
2014/07/01 Python
python中ConfigParse模块的用法
2014/09/29 Python
Python装饰器使用示例及实际应用例子
2015/03/06 Python
python如何在终端里面显示一张图片
2016/08/17 Python
python 编写简单网页服务器的实例
2018/06/01 Python
Pandas删除数据的几种情况(小结)
2019/06/21 Python
基于django ManyToMany 使用的注意事项详解
2019/08/09 Python
python第三方库学习笔记
2020/02/07 Python
python实现图像全景拼接
2020/03/27 Python
python可视化 matplotlib画图使用colorbar工具自定义颜色
2020/12/07 Python
Html5实现首页动态视频背景的示例代码
2019/09/25 HTML / CSS
西式婚礼证婚词
2014/01/12 职场文书
机关办公室岗位职责
2014/04/16 职场文书
2014年社区工会工作总结
2014/12/18 职场文书
电影雷锋观后感
2015/06/10 职场文书
小马王观后感
2015/06/11 职场文书
初中政治教学反思
2016/02/23 职场文书
python爬取企查查企业信息之selenium自动模拟登录企查查
2021/04/08 Python