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 相关文章推荐
jquery 模式对话框终极版实现代码
Sep 28 Javascript
js实现翻页后保持checkbox选中状态的实现方法
Nov 03 Javascript
jquery在IE、FF浏览器的差别详细探讨
Apr 28 Javascript
jquery的选择器的使用技巧之如何选择input框
Sep 22 Javascript
基于jquery编写分页插件
Mar 07 Javascript
Angular5.1新功能分享
Dec 21 Javascript
完美解决axios跨域请求出错的问题
Feb 05 Javascript
JavaScript自动生成 年月范围 选择功能完整示例【基于jQuery插件】
Sep 03 jQuery
vue实现将一个数组内的相同数据进行合并
Nov 07 Javascript
浅析Vue下的components模板使用及应用
Nov 27 Javascript
vue学习之Vue-Router用法实例分析
Jan 06 Javascript
vue实现日历表格(element-ui)
Sep 24 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
PHP解压tar.gz格式文件的方法
2016/02/14 PHP
PHP常见的几种攻击方式实例小结
2019/04/29 PHP
js的逻辑运算符 ||
2010/05/31 Javascript
js querySelector和getElementById通过id获取元素的区别
2012/04/20 Javascript
基于JQuery 滑动与动画的说明介绍
2013/04/18 Javascript
JavaScript中把数字转换为字符串的程序代码
2013/06/19 Javascript
Extjs4实现两个GridPanel之间数据拖拽功能具体方法
2013/11/21 Javascript
在JS中如何调用JSP中的变量
2014/01/22 Javascript
jQuery打印指定区域Html页面并自动分页
2014/07/04 Javascript
js实现内容显示并使用json传输数据
2016/03/16 Javascript
javascript之Array 数组对象详解
2016/06/07 Javascript
AngularJS实现一次监听多个值发生的变化
2016/08/31 Javascript
iOS + node.js使用Socket.IO框架进行实时通信示例
2017/04/14 Javascript
微信小程序 数据绑定及运算的简单实例
2017/09/20 Javascript
mui back 返回刷新页面的实例
2017/12/06 Javascript
原生JS实现DOM加载完成马上执行JS代码的方法
2018/09/07 Javascript
vue通过cookie获取用户登录信息的思路详解
2018/10/30 Javascript
微信小程序判断页面是否从其他页面返回的实例代码
2019/07/03 Javascript
JS模拟浏览器实现全局搜索功能
2019/09/11 Javascript
详解Vue 单文件组件的三种写法
2020/02/19 Javascript
koa2的中间件功能及应用示例
2020/03/05 Javascript
nodejs中内置模块fs,path常见的用法说明
2020/11/07 NodeJs
[52:29]DOTA2上海特级锦标赛主赛事日 - 2 胜者组第一轮#3Secret VS OG第三局
2016/03/03 DOTA
深入理解Python中的内置常量
2017/05/20 Python
Python爬虫中urllib库的进阶学习
2018/01/05 Python
Python类的继承、多态及获取对象信息操作详解
2019/02/28 Python
python多线程+代理池爬取天天基金网、股票数据过程解析
2019/08/13 Python
opencv调整图像亮度对比度的示例代码
2019/09/27 Python
numpy 矩阵形状调整:拉伸、变成一位数组的实例
2020/06/18 Python
13个Pandas实用技巧,助你提高开发效率
2020/08/19 Python
python用Configobj模块读取配置文件
2020/09/26 Python
荷兰鞋子在线:Nelson Schoenen
2017/12/25 全球购物
Fenty Beauty官网:蕾哈娜创立的美妆品牌
2021/01/07 全球购物
企业内部培训方案
2014/02/04 职场文书
关于销售人员的年终工作总结要点
2019/08/15 职场文书
python基础入门之字典和集合
2021/06/13 Python