Jquery使用小技巧汇总


Posted in Javascript onDecember 29, 2015

下面列出了一些Jquery使用技巧。比如有禁止右键点击、隐藏搜索文本框文字、在新窗口中打开链接、检测浏览器、预加载图片、页面样式切换、所有列等高、动态控制页面字体大小、获得鼠标指针的X值Y值、验证元素是否为空、替换元素、延迟加载、验证元素是否存在于Jquery集合中、使DIV可点击、克隆对象、使元素居中、计算元素个数、使用Google主机上的Jquery类库、禁用Jquery效果、解决Jquery类库与其他Javascript类库冲突问题。

1. 禁止右键点击

$(document).ready(function(){
  $(document).bind("contextmenu",function(e){
    return false;
  });
});

2. 隐藏搜索文本框文字
Hide when clicked in the search field, the value.(example can be found below in the comment fields)

$(document).ready(function() {
$("input.text1").val("Enter your search text here");
  textFill($('input.text1'));
});
 
  function textFill(input){ //input focus text function
  var originalvalue = input.val();
  input.focus( function(){
    if( $.trim(input.val()) == originalvalue ){ input.val(''); }
  });
  input.blur( function(){
    if( $.trim(input.val()) == '' ){ input.val(originalvalue); }
  });
}

3. 在新窗口中打开链接
XHTML 1.0 Strict doesn't allow this attribute in the code, so use this to keep the code valid.

$(document).ready(function() {
  //Example 1: Every link will open in a new window
  $('a[href^="http://"]').attr("target", "_blank");
 
  //Example 2: Links with the rel="external" attribute will only open in a new window
  $('a[@rel$='external']').click(function(){
   this.target = "_blank";
  });
});
// how to use
<A href="http://www.opensourcehunter.com" rel=external>open link</A>

4. 检测浏览器
注: 在版本jQuery 1.4中,$.support 替换掉了$.browser 变量

$(document).ready(function() {
// Target Firefox 2 and above
if ($.browser.mozilla && $.browser.version >= "1.8" ){
  // do something
}
 
// Target Safari
if( $.browser.safari ){
  // do something
}
 
// Target Chrome
if( $.browser.chrome){
  // do something
}
 
// Target Camino
if( $.browser.camino){
  // do something
}
 
// Target Opera
if( $.browser.opera){
  // do something
}
 
// Target IE6 and below
if ($.browser.msie && $.browser.version <= 6 ){
  // do something
}
 
// Target anything above IE6
if ($.browser.msie && $.browser.version > 6){
  // do something
}
});

5. 预加载图片
This piece of code will prevent the loading of all images, which can be useful if you have a site with lots of images.

$(document).ready(function() {
jQuery.preloadImages = function()
{
 for(var i = 0; i<ARGUMENTS.LENGTH; jQuery(?<img { i++)>").attr("src", arguments[i]);
 }
}
// how to use
$.preloadImages("image1.jpg");
});

6. 页面样式切换

$(document).ready(function() {
  $("a.Styleswitcher").click(function() {
    //swicth the LINK REL attribute with the value in A REL attribute
    $('link[rel=stylesheet]').attr('href' , $(this).attr('rel'));
  });
// how to use
// place this in your header
<LINK rel=stylesheet type=text/css href="default.css">
// the links
<A class="Styleswitcher" href="#" rel=default.css>Default Theme</A>
<A class="Styleswitcher" href="#" rel=red.css>Red Theme</A>
<A class="Styleswitcher" href="#" rel=blue.css>Blue Theme</A>
});

7. 列高度相同
如果使用了两个CSS列,使用此种方式可以是两列的高度相同。

$(document).ready(function() {
function equalHeight(group) {
  tallest = 0;
  group.each(function() {
    thisHeight = $(this).height();
    if(thisHeight > tallest) {
      tallest = thisHeight;
    }
  });
  group.height(tallest);
}
// how to use
$(document).ready(function() {
  equalHeight($(".left"));
  equalHeight($(".right"));
});
});

8. 动态控制页面字体大小
用户可以改变页面字体大小

$(document).ready(function() {
 // Reset the font size(back to default)
 var originalFontSize = $('html').css('font-size');
  $(".resetFont").click(function(){
  $('html').css('font-size', originalFontSize);
 });
 // Increase the font size(bigger font0
 $(".increaseFont").click(function(){
  var currentFontSize = $('html').css('font-size');
  var currentFontSizeNum = parseFloat(currentFontSize, 10);
  var newFontSize = currentFontSizeNum*1.2;
  $('html').css('font-size', newFontSize);
  return false;
 });
 // Decrease the font size(smaller font)
 $(".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;
 });
});

9. 返回页面顶部功能
For a smooth(animated) ride back to the top(or any location).

$(document).ready(function() {
$('a[href*=#]').click(function() {
 if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'')
 && location.hostname == this.hostname) {
  var $target = $(this.hash);
  $target = $target.length && $target
  || $('[name=' + this.hash.slice(1) +']');
  if ($target.length) {
 var targetOffset = $target.offset().top;
 $('html,body')
 .animate({scrollTop: targetOffset}, 900);
  return false;
  }
 }
 });
// how to use
// place this where you want to scroll to
<A name=top></A>
// the link
<A href="#top">go to top</A>
});

11. 获得鼠标指针XY值
Want to know where your mouse cursor is?

$(document).ready(function() {
  $().mousemove(function(e){
   //display the x and y axis values inside the div with the id XY
  $('#XY').html("X Axis : " + e.pageX + " | Y Axis " + e.pageY);
 });
// how to use
<DIV id=XY></DIV>
 
});

12. 验证元素是否为空
This will allow you to check if an element is empty.

$(document).ready(function() {
 if ($('#id').html()) {
  // do something
  }
});

13. 替换元素
Want to replace a div, or something else?

$(document).ready(function() {
  $('#id').replaceWith('
<DIV>I have been replaced</DIV>
 
');
});

14. jQuery延时加载功能
Want to delay something?

$(document).ready(function() {
  window.setTimeout(function() {
   // do something
  }, 1000);
});

15. 移除单词功能
Want to remove a certain word(s)?

$(document).ready(function() {
  var el = $('#id');
  el.html(el.html().replace(/word/ig, ""));
});

16. 验证元素是否存在于jquery对象集合中
Simply test with the .length property if the element exists.

$(document).ready(function() {
  if ($('#id').length) {
 // do something
 }
});

17. 使整个DIV可点击
Want to make the complete div clickable?

$(document).ready(function() {
  $("div").click(function(){
   //get the url from href attribute and launch the url
   window.location=$(this).find("a").attr("href"); return false;
  });
// how to use
<DIV><A href="index.html">home</A></DIV>
 
});

18. ID与Class之间转换.
当改变Window大小时,在ID与Class之间切换

$(document).ready(function() {
  function checkWindowSize() {
  if ( $(window).width() > 1200 ) {
    $('body').addClass('large');
  }
  else {
    $('body').removeClass('large');
  }
  }
$(window).resize(checkWindowSize);
});

19. 克隆对象
Clone a div or an other element.

$(document).ready(function() {
  var cloned = $('#id').clone();
// how to use
<DIV id=id></DIV>
 
});

20. 使元素居屏幕中间位置
Center an element in the center of your screen.

$(document).ready(function() {
 jQuery.fn.center = function () {
   this.css("position","absolute");
   this.css("top", ( $(window).height() - this.height() ) / 2+$(window).scrollTop() + "px");
   this.css("left", ( $(window).width() - this.width() ) / 2+$(window).scrollLeft() + "px");
   return this;
 }
 $("#id").center();
});

21. 写自己的选择器
Write your own selectors.

$(document).ready(function() {
  $.extend($.expr[':'], {
    moreThen1000px: function(a) {
      return $(a).width() > 1000;
   }
  });
 $('.box:moreThen1000px').click(function() {
   // creating a simple js alert box
   alert('The element that you have clicked is over 1000 pixels wide');
 });
});

22. 统计元素个数
Count an element.

$(document).ready(function() {
  $("p").size();
});

23. 使用自己的 Bullets
Want to use your own bullets instead of using the standard or images bullets?

$(document).ready(function() {
  $("ul").addClass("Replaced");
  $("ul > li").prepend("‒ ");
 // how to use
 ul.Replaced { list-style : none; }
});

24. 引用Google主机上的Jquery类库
Let Google host the jQuery script for you. This can be done in 2 ways.

[code]//Example 1
<SCRIPT src="http://www.google.com/jsapi"></SCRIPT>
<SCRIPT type=text/javascript>
google.load("jquery", "1.2.6");
google.setOnLoadCallback(function() {
    // do something
});
</SCRIPT><SCRIPT type=text/javascript src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></SCRIPT>
 
 // Example 2:(the best and fastest way)
<SCRIPT type=text/javascript src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></SCRIPT>[/code]

25. 禁用Jquery(动画)效果
Disable all jQuery effects

$(document).ready(function() {
  jQuery.fx.off = true;
});

26. 与其他Javascript类库冲突解决方案
To avoid conflict other libraries on your website, you can use this jQuery Method, and assign a different variable name instead of the dollar sign.

$(document).ready(function() {
  var $jq = jQuery.noConflict();
  $jq('#id').show();
});
Javascript 相关文章推荐
LazyForm jQuery plugin 定制您的CheckBox Radio和Select
Oct 24 Javascript
为jQuery增加join方法的实现代码
Nov 28 Javascript
20款效果非常棒的 jQuery 插件小结分享
Nov 18 Javascript
jQuery实现锚点scoll效果实例分析
Mar 10 Javascript
javascript HTML5文件上传FileReader API
Mar 27 Javascript
JS组件系列之MVVM组件 vue 30分钟搞定前端增删改查
Apr 28 Javascript
纯原生js实现贪吃蛇游戏
Apr 16 Javascript
在vue.js中抽出公共代码的方法示例
Jun 08 Javascript
使用AngularJS编写多选按钮选中时触发指定方法的指令代码详解
Jul 24 Javascript
浅谈vue项目如何打包扔向服务器
May 08 Javascript
微信小程序实现卡片层叠滑动效果
Jun 21 Javascript
vue模块移动组件的实现示例
May 20 Javascript
js为什么不能正确处理小数运算?
Dec 29 #Javascript
javascript从作用域链谈闭包
Jul 29 #Javascript
你有必要知道的25个JavaScript面试题
Dec 29 #Javascript
JavaScript仿支付宝密码输入框
Dec 29 #Javascript
js实现商城星星评分的效果
Dec 29 #Javascript
原生js配合cookie制作保存路径的拖拽
Dec 29 #Javascript
一种新的javascript对象创建方式Object.create()
Dec 28 #Javascript
You might like
十大催泪虐心动漫电影,有几部你还没看
2020/03/04 日漫
几种有用的变型 PHP中循环语句的用法介绍
2012/01/30 PHP
php基于openssl的rsa加密解密示例
2016/07/11 PHP
PHP简单实现数字分页功能示例
2016/08/24 PHP
php+redis消息队列实现抢购功能
2018/02/08 PHP
ThinkPHP5&amp;5.1实现验证码的生成、使用及点击刷新功能示例
2020/02/07 PHP
THINKPHP5分页数据对象处理过程解析
2020/10/28 PHP
JS获取网页属性包括宽、高等等
2014/04/03 Javascript
setInterval计时器不准的问题解决方法
2014/05/08 Javascript
JSON格式化输出
2014/11/10 Javascript
js控制网页前进和后退的方法
2015/06/08 Javascript
简介alert()与console.log()的不同
2015/08/26 Javascript
第六篇Bootstrap表格样式介绍
2016/06/21 Javascript
jQuery插件echarts设置折线图中折线线条颜色和折线点颜色的方法
2017/03/03 Javascript
vue货币过滤器的实现方法
2017/04/01 Javascript
js实现多张图片延迟加载效果
2017/07/17 Javascript
详解Node全局变量global模块
2017/09/28 Javascript
js实现unicode码字符串与utf8字节数据互转详解
2019/03/21 Javascript
nuxt踩坑之Vuex状态树的模块方式使用详解
2019/09/06 Javascript
Python中实现常量(Const)功能
2015/01/28 Python
使用IPython下的Net-SNMP来管理类UNIX系统的教程
2015/04/15 Python
Python实现类似jQuery使用中的链式调用的示例
2016/06/16 Python
python中计算一个列表中连续相同的元素个数方法
2018/06/29 Python
Django文件存储 自己定制存储系统解析
2019/08/02 Python
pytorch多GPU并行运算的实现
2019/09/27 Python
softmax及python实现过程解析
2019/09/30 Python
python实现FTP循环上传文件
2020/03/20 Python
利用python下载scihub成文献为PDF操作
2020/07/09 Python
雅高酒店中国:Accorhotels.com China
2018/03/26 全球购物
法国一家芭蕾舞鞋公司:Repetto
2018/11/12 全球购物
日语系毕业生推荐信
2013/11/11 职场文书
成都人事代理协议书
2014/10/25 职场文书
2015试用期转正工作总结
2014/12/12 职场文书
军训通讯稿范文
2015/07/18 职场文书
文艺有韵味的诗句(生命类、亲情类...)
2019/07/11 职场文书
2019年图书室自查报告范本
2019/10/12 职场文书