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 变量作用域 代码分析
Jun 26 Javascript
js获取select标签的值且兼容IE与firefox
Dec 30 Javascript
window.showModalDialog()返回值的学习心得总结
Jan 07 Javascript
鼠标移到图片上变大显示而不是放大镜效果
Jun 15 Javascript
深入浅析Extjs中store分组功能的使用方法
Apr 20 Javascript
jquery.validate表单验证插件使用方法解析
Nov 07 Javascript
JavaScript实现离开页面前提示功能【附jQuery实现方法】
Sep 26 jQuery
Vue.use源码学习小结
Jun 20 Javascript
vuex actions传递多参数的处理方法
Sep 18 Javascript
webpack+vue+express(hot)热启动调试简单配置方法
Sep 19 Javascript
Vue实现一个无限加载列表功能
Nov 13 Javascript
JavaScript原型对象原理与应用分析
Dec 27 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
PHP 长文章分页函数 带使用方法,不会分割段落,翻页在底部
2009/10/22 PHP
PHP中if和or运行效率对比
2014/12/12 PHP
几个优化WordPress中JavaScript加载体验的插件介绍
2015/12/17 PHP
PHP微信PC二维码登陆的实现思路
2017/07/13 PHP
Js组件的一些写法
2010/09/10 Javascript
JS调用CS里的带参方法实例
2013/08/01 Javascript
javascript中typeof的使用示例
2013/12/19 Javascript
js中的事件捕捉模型与冒泡模型实例分析
2015/01/10 Javascript
jQuery自定义添加&quot;$&quot;与解决&quot;$&quot;冲突的方法
2015/01/19 Javascript
JavaScript中的slice()方法使用详解
2015/06/06 Javascript
Vue.js开发环境快速搭建教程
2017/03/17 Javascript
angularjs实现搜索的关键字在正文中高亮出来
2017/06/13 Javascript
vue项目中使用百度地图的方法
2018/06/08 Javascript
Vue实现按钮旋转和移动位置的实例代码
2018/08/09 Javascript
JS数组实现分类统计实例代码
2018/09/30 Javascript
Vue Echarts实现可视化世界地图代码实例
2019/05/07 Javascript
Vue实现点击按钮复制文本内容的例子
2019/11/09 Javascript
vue项目开启Gzip压缩和性能优化操作
2020/10/26 Javascript
Python实现的概率分布运算操作示例
2017/08/14 Python
Python 判断 有向图 是否有环的实例讲解
2018/02/01 Python
pyQt4实现俄罗斯方块游戏
2018/06/26 Python
python3编写ThinkPHP命令执行Getshell的方法
2019/02/26 Python
Python GUI编程学习笔记之tkinter事件绑定操作详解
2020/03/30 Python
浅谈keras通过model.fit_generator训练模型(节省内存)
2020/06/17 Python
出门问问全球官方商城:Tichome音箱和TicWatch智能手表
2017/12/02 全球购物
亚马逊墨西哥站:Amazon.com.mx
2018/08/26 全球购物
远东集团网络工程师面试题
2014/10/20 面试题
机电一体化职业规划书
2014/01/07 职场文书
初中化学教学反思
2014/01/23 职场文书
《这儿真好》教学反思
2014/02/22 职场文书
节约粮食标语
2014/06/18 职场文书
小学生运动会报道稿
2014/09/12 职场文书
公司员工离职感言
2015/08/03 职场文书
2015年教师个人业务工作总结
2015/10/23 职场文书
TV动画《八十龟酱观察日记》第四季宣传PV公布
2022/04/06 日漫
Win10服务主机占用内存怎么办?Win10服务主机进程占用大量内存解决方法
2022/09/23 数码科技