设为首页 - 加入收藏 焦点技术网
热搜:java
当前位置:首页 >

8个超实用的jQuery技巧攻略

2014-03-04 11:43:00.0 css/html jquery javascript ajax  
导读:本文我们将为jQuery用户分享8个超实用的技巧攻略。jQuery是JavaScript最好的库之一,主要用于制作动画、事件处理,支持Ajax及HTML 脚本客户端。此外,jQuery还拥有各种插件,以帮助开发者在最短时间内快速创建网站/网页。 文中分享的这些实用代码,希望你会喜欢。1)禁用右键单击功能 如果你想为用户节省网站信息,那么开发者可以使用这段代码——禁用右键单击功能。$(documen...。。。

本文我们将为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 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
转载路径:http://www.csdn.net/article/2014-03-03/2818592-8-useful-jquery-tips-and-tricks-for-programmers

(编辑: mao1059568684)

网友评论
相关文章