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 相关文章推荐
parseInt parseFloat js字符串转换数字
Aug 01 Javascript
40个新鲜出炉的jQuery 插件和免费教程[上]
Jul 24 Javascript
js面向对象之公有、私有、静态属性和方法详解
Apr 17 Javascript
js实现的倒计时按钮实例
Jun 24 Javascript
jquery ajax 如何向jsp提交表单数据
Aug 23 Javascript
jQuery中的each()详细介绍(推荐)
May 25 Javascript
JavaScript地理位置信息API
Jun 11 Javascript
前端页面文件拖拽上传模块js代码示例
May 19 Javascript
jQuery实现左右滑动的toggle方法
Mar 03 jQuery
vue.draggable实现表格拖拽排序效果
Dec 01 Javascript
利用vue-i18n实现多语言切换效果的方法
Jun 19 Javascript
40行代码把Vue3的响应式集成进React做状态管理
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
php导出csv数据在浏览器中输出提供下载或保存到文件的示例
2014/04/24 PHP
php模拟post上传图片实现代码
2016/06/24 PHP
php使用curl详细解析及问题汇总
2016/08/11 PHP
PHP实现的AES加密、解密封装类与用法示例
2018/08/02 PHP
基于prototype的validation.js发布2.3.4新版本,让你彻底脱离表单验证的烦恼
2006/12/06 Javascript
JS 拼图游戏 面向对象,注释完整。
2009/06/18 Javascript
MultiSelect左右选择控件的设计与实现介绍
2013/06/08 Javascript
JAVASCRIPT模式窗口中下载文件无法接收iframe的流
2013/10/11 Javascript
Bootstrap在线电子商务网站实战项目5
2016/10/14 Javascript
JS实用的带停顿的逐行文本循环滚动效果实例
2016/11/23 Javascript
微信小程序 列表的上拉加载和下拉刷新的实现
2017/04/01 Javascript
canvas实现弧形可拖动进度条效果
2017/05/11 Javascript
node.js中fs文件系统目录操作与文件信息操作
2018/02/24 Javascript
Angular数据绑定机制原理
2018/04/17 Javascript
OpenLayers3加载常用控件使用方法详解
2020/09/25 Javascript
[41:12]Liquid vs Secret 2019国际邀请赛淘汰赛 败者组 BO3 第一场 8.24
2019/09/10 DOTA
用python实现的可以拷贝或剪切一个文件列表中的所有文件
2009/04/30 Python
python自动化工具日志查询分析脚本代码实现
2013/11/26 Python
Python实现自动发送邮件功能
2021/03/02 Python
python如何让类支持比较运算
2018/03/20 Python
Python实现的端口扫描功能示例
2018/04/08 Python
在ubuntu16.04中将python3设置为默认的命令写法
2018/10/31 Python
Python实现将HTML转成PDF的方法分析
2019/05/04 Python
python 判断txt每行内容中是否包含子串并重新写入保存的实例
2020/03/12 Python
Python爬虫使用bs4方法实现数据解析
2020/08/25 Python
详解CSS3中字体平滑处理和抗锯齿渲染
2017/03/29 HTML / CSS
服装公司总经理岗位职责
2013/11/30 职场文书
工程建设实施方案
2014/03/14 职场文书
安全例会汇报材料
2014/08/23 职场文书
导游词之西江千户苗寨
2019/12/24 职场文书
Java使用httpRequest+Jsoup爬取红蓝球号码
2021/07/02 Java/Android
python识别围棋定位棋盘位置
2021/07/26 Python
SSM VUE Axios详解
2021/10/05 Vue.js
Java Spring 控制反转(IOC)容器详解
2021/10/05 Java/Android
MyBatis XPathParser解析器使用范例详解
2022/07/15 Java/Android
win11电脑关机鼠标灯还亮怎么解决? win11关机后鼠标灯还亮解决方法
2023/01/09 数码科技