收藏私塾在线
 

欢迎您来到私塾在线网!   

请登录! 

免费注册 

交流首页 » Web前端技术 »8 个很有用的 jQuery 技巧  XML
发表人 内容
amandaga
[头像]

交流经验:
总积分:90
级别:普通会员
注册时间: 2013-11-13
文章: 8
离线

8 个很有用的 jQuery 技巧

1) 禁用鼠标右键点击

If you want to save your sites information from users, developers should use this code for disable Right clicking functionality. Using this code, jquery programmers can deactivate right clicking on web pages. Here are the code below: -

$(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) 更改文本字体大小

Using this code, users can re-size(increase and decrease) the text of websites. Users can increase and decrease fonts according to their requirement. Code is here: -

$(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) 在新窗口打开链接

Try this code and increase your site impressions because using this jquery code users will go on new window after clicking on any link of your site. Code is below: -

$(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) CSS 样式切换

Swap style sheets using this code and the “Style sheets swap” script  is below: -

$(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) 返回页面顶部的链接

That is very common function you can see on eve site nowadays is ” Back to Top”. This functionality is very useful for long pages for make short in a single click. Visit this code below: -

$(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) 获取鼠标指针当前的坐标

You can find the values of X and Y coordinator of mouse pointer. Code is blow : -

$().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) 检测当前鼠标的坐标

Using this script, you can find the current mouse coordinates in the any web browser supported jquery. Code is below: -

$(document).ready(function() 
$().mousemove(function(e)

$('# MouseCoordinates ').html("X Axis Position = " + e.pageX + " and Y Axis Position = " + e.pageY);
);

);

8) 预加载图片

this image preloading script helps to load image or web page very quickly. You not need wait to image load. The code is below:

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…');
);
via designzum

推广链接
精品视频课程推荐

Spring3开发实战-独家视频教程
从零到精通Spring3的开发知识;IoC/DI的思想、IoC/DI的运行流程、IoC/DI的开发指导、AOP的思想、AOP的运行流程、AOP应用的设计、Spring对JDBC和Hibernate的支持、Spring的事务、SSH的集成应用

Java Web开发-项目部分(中国移动科技综合管理系统)视频教程
中国移动科技综合管理系统,对JDBC实现CRUD的抽象化和复用化;UUID自动生成;分层开发、综合示范Jsp+Servlet+JavaBean+TagLib+JSTL+JDBC的实现;Web分页、Web树、日期控件、真实值和表现值转换;众多杂项技术的实现,比如:tab、左右选择等等

深入浅出学Shrio视频教程
内容概述:Shiro是目前最热门、最易用、功能超强大的Java权限管理框架,强烈推荐,每个项目都必备的权限管理技术!通过本课程,你将从零开始直到彻底掌握Shiro的相关开发知识,达到可以进行实际项目开发的能力。包括:权限管理基础、Shiro入门、配置、身份认证、授权、Realms、Session管理、和Spring的集成、Web、Cache等众多开发细节技术 技术要点:源码级分析Shiro的授权过程、自定义开发Realm、多个Realms的开发配置、自定义开发AuthenticationStrategy、自定义开发自定义SessionDAO、和Struts2+Spring3的集成(包括修正struts2的bug)、Shiro和SpringMVC+Spring3的集成、包装使用其他的Cache框架、缓存数据同步更新的解决方案等等实际开发中常用的内容

ant基础实战视频教程
学习项目构建工具ant的使用,彻底掌握在实际的开发中应用ant进行项目构建

jquery使用基础-独家视频教程
独立使用jQuery简化js开发

 
交流首页 » Web前端技术
前往:   

关于我们 | 联系我们 | 用户协议 | 私塾在线服务协议 | 版权声明 | 隐私保护

版权所有 Copyright(C)2009-2012 私塾在线学习网