- 浏览: 486781 次
- 性别:
- 来自: 深圳
文章分类
最新评论
-
mrluo735:
明显不对,INOUT参数也可以有多个!
MyBatis 3 中使用存储过程 -
qitianhuoshen:
问一下 如果 配合 datatables的 searchval ...
MyBatis 3 中使用存储过程 -
zhanggang807:
”这就是累积,不会被清理“ 这个例子解决了我疑惑很久的问题
NIO - 使用选择器 -
lIO01:
你能不能别用自己照片当头像?
Spring MVC 中的基于注解的 Controller -
xuxiaoyinliu:
Spring MVC 中的 forward 和 redirect
The use of the jQuery library is growing and growing(just released jQuery 1.4), more and more people are using this useful javascript library. This means that more and more useful jQuery tips, tricks and solutions are coming available. That’s why i created a small list of 26 cool and useful jQuery tips, tricks and solutions.
jQuery has a lot of very useful plugins that can help you with almost anything, but there are a couple of plugins that aren’t that smart to use, why? Well sometimes 1 or 2 lines of jQuery code can do the same thing(or even better), so why use a big script if you can do the same trick with a small piece of code.
As many of you already know, jQuery can do a lot of things in more than just one way, so if you see a tip, trick or solution and think/know this can be done better, smarter or faster please let me know, post and share it in a comment below of just email me this, so that i can use this for part 2.
● Disable right-click(禁止右键点击)
Disable right-click contextual menu.
● Disappearing search field text(隐藏搜索文本框文字)
Hide when clicked in the search field, the value.(example can be found below in the comment fields)
● Opening links in a new window(在新窗口中打开链接)
XHTML 1.0 Strict doesn’t allow this attribute in the code, so use this to keep the code valid.
● Detect browser(检测浏览器)
Change/add something for a certain browser.
Notice: As of jQuery 1.4, the $.browser variable is replaced by $.support.
● Preloading images(预加载图片)
This piece of code will prevent the loading of all images, which can be useful if you have a site with lots of images.
● CSS Styleswitcher(页面样式切换)
Switch between different styles?
● Columns of equal height(列高度相同)
If you are using two CSS columns, use this to make them exactly the same height.
● Font resizing(动态控制页面字体大小)
Want to let the users change there font size?
● Smooth(animated) page scroll(返回页面顶部功能)
For a smooth(animated) ride back to the top(or any location).
● Get the mouse cursor x and y axis(获得鼠标指针 X/Y 值)
Want to know where your mouse cursor is?
● Verify if an Element is empty(验证元素是否为空)
This will allow you to check if an element is empty.
● Replace a element(替换元素)
Want to replace a div, or something else?
● jQuery timer callback functions(jQuery 延时加载功能)
Want to delay something?
● Remove a word(移除单词功能)
Want to remove a certain word(s)?
● Verify that an element exists in jQuery(验证元素是否存在)
Simply test with the .length property if the element exists.
● Make the entire DIV clickable(使整个 DIV 可点击)
Want to make the complete div clickable?
● Switch between classes or id’s when resizing the window(id 与 class 之间转换)
Want to switch between a class or id, when resizing the window?
● Clone a object(克隆对象)
Clone a div or an other element.
● Center an element on the screen(使元素居屏幕中间位置)
Center an element in the center of your screen.
● Write our own selector(写自己的选择器)
Write your own selectors.
● Count a element(统计元素个数)
Count an element.
● Use Your Own Bullets(使用自己的 Bullets)
Want to use your own bullets instead of using the standard or images bullets?
● Let Google host jQuery for you(引用 Google 主机上的 jQuery 类库)
Let Google host the jQuery script for you. This can be done in 2 ways.
● Disable jQuery animations(禁用 jQuery 动画效果)
Disable all jQuery effects.
● No conflict-mode(与其他 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.
jQuery has a lot of very useful plugins that can help you with almost anything, but there are a couple of plugins that aren’t that smart to use, why? Well sometimes 1 or 2 lines of jQuery code can do the same thing(or even better), so why use a big script if you can do the same trick with a small piece of code.
As many of you already know, jQuery can do a lot of things in more than just one way, so if you see a tip, trick or solution and think/know this can be done better, smarter or faster please let me know, post and share it in a comment below of just email me this, so that i can use this for part 2.
● Disable right-click(禁止右键点击)
Disable right-click contextual menu.
$(document).ready(function(){ $(document).bind("contextmenu", function(e) { return false; }); });
● Disappearing search field text(隐藏搜索文本框文字)
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')); }); // input focus text function function textFill(input) { var originalvalue = input.val(); input.focus(function() { if( $.trim(input.val()) == originalvalue ) { input.val(''); } }); input.blur( function() { if( $.trim(input.val()) == '' ) { input.val(originalvalue); } }); }
● Opening links in a new window(在新窗口中打开链接)
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>
● Detect browser(检测浏览器)
Change/add something for a certain browser.
Notice: As of jQuery 1.4, the $.browser variable is replaced by $.support.
$(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 } });
● Preloading images(预加载图片)
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; i++) { $("<img>").attr("src", arguments[i]); } } // how to use $.preloadImages("image1.jpg"); });
● CSS Styleswitcher(页面样式切换)
Switch between different styles?
$(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" href="default.css" type="text/css"> // the links <a href="#" class="Styleswitcher" rel="default.css">Default Theme</a> <a href="#" class="Styleswitcher" rel="red.css">Red Theme</a> <a href="#" class="Styleswitcher" rel="blue.css">Blue Theme</a>
● Columns of equal height(列高度相同)
If you are using two CSS columns, use this to make them exactly the same height.
$(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")); }); });
● Font resizing(动态控制页面字体大小)
Want to let the users change there font size?
$(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; }); });
● Smooth(animated) page scroll(返回页面顶部功能)
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>
● Get the mouse cursor x and y axis(获得鼠标指针 X/Y 值)
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>
● Verify if an Element is empty(验证元素是否为空)
This will allow you to check if an element is empty.
$(document).ready(function() { if ($('#id').html()) { // do something } });
● Replace a element(替换元素)
Want to replace a div, or something else?
$(document).ready(function() { $('#id').replaceWith('<div>I have been replaced</div>'); });
● jQuery timer callback functions(jQuery 延时加载功能)
Want to delay something?
$(document).ready(function() { window.setTimeout(function() { // do something }, 1000); });
● Remove a word(移除单词功能)
Want to remove a certain word(s)?
$(document).ready(function() { var el = $('#id'); el.html(el.html().replace(/word/ig, "")); });
● Verify that an element exists in jQuery(验证元素是否存在)
Simply test with the .length property if the element exists.
$(document).ready(function() { if ($('#id').length) { // do something } });
● Make the entire DIV clickable(使整个 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>
● Switch between classes or id’s when resizing the window(id 与 class 之间转换)
Want to switch between a class or id, when resizing the window?
$(document).ready(function() { function checkWindowSize() { if ( $(window).width() > 1200 ) { $('body').addClass('large'); } else { $('body').removeClass('large'); } } $(window).resize(checkWindowSize); });
● Clone a object(克隆对象)
Clone a div or an other element.
$(document).ready(function() { var cloned = $('#id').clone(); }); // how to use <div id="id"></div>
● Center an element on the screen(使元素居屏幕中间位置)
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(); });
● Write our own selector(写自己的选择器)
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'); }); });
● Count a element(统计元素个数)
Count an element.
$(document).ready(function() { $("p").size(); });
● Use Your Own Bullets(使用自己的 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; }
● Let Google host jQuery for you(引用 Google 主机上的 jQuery 类库)
Let Google host the jQuery script for you. This can be done in 2 ways.
// 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> // 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>
● Disable jQuery animations(禁用 jQuery 动画效果)
Disable all jQuery effects.
$(document).ready(function() { jQuery.fx.off = true; });
● No conflict-mode(与其他 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(); });
发表评论
-
Node 的安装
2012-12-28 20:51 1478该篇文章讨论到是 linux 版的 node ... -
Web 前端经常用到的 JSON 对象,JSON 字符串,QueryString 之间的转换
2011-12-17 14:17 0在做 Web 前端时,经常要在 JSON 对象 ... -
jQuery 的原型关系图,让你快速对 jQuery 有个整体的把握
2010-07-12 20:07 4374若干个月前,在博客园中看到一篇文章,内容很简单 ... -
A Plugin Development Pattern For jQuery
2009-12-31 17:04 1299This article comes from http:// ... -
javascript 动态创建 <script> 节点所想到的其它问题
2009-12-12 22:12 5031最近公司的项目中,有一个模块需要调用集团提供的 ... -
JavaScript 面向对象程序设计
2009-09-05 14:18 1175近期在网上 ... -
jQuery 学习十四(工具函数)
2009-05-03 23:17 2327● jQuery.boxModel ... -
jQuery 学习十三(效果)
2009-05-02 11:02 2284● hide() /** * 隐藏显示的元素 ... -
jQuery 学习十二(事件)
2009-05-01 16:42 4544● ready(fn) /** ... -
jQuery 学习十一(CSS)
2009-05-01 13:49 1617● css(name) /** * 访问第一 ... -
jQuery 学习十(文档处理)
2009-04-27 20:28 1864● append(content) /** ... -
jQuery 学习九(筛选)
2009-04-21 18:46 2088● eq(index) /** * 获取第 ... -
jQuery 学习八(属性)
2009-04-14 20:11 3713● attr(name) /** * 取得第 ... -
jQuery 学习七(选择器)
2009-04-11 17:36 2475● 在指定的上下文搜索 /** * 在指定的 ... -
jQuery 学习六(多库共存)
2009-04-11 14:00 2238● jQuery.noConflict( ... -
jQuery 学习五(插件机制)
2009-04-11 10:41 1746● jQuery.extend(object) ... -
jQuery 学习四(数据缓存)
2009-04-10 19:59 2155● data(name) /** * 返回元 ... -
jQuery 学习三(对象访问)
2009-04-10 19:08 1719● get() /** * 通过 CSS 选 ... -
jQuery 学习二(核心函数)
2009-04-09 18:42 1960● jQuery(expression, ... -
jQuery 学习一(基础知识)
2009-03-30 16:45 1540● The jQuery wrapper ...
相关推荐
这些技巧覆盖了JQuery在客户端脚本中的广泛使用,对于前端开发者来说,这些技巧能够提升用户体验、优化页面性能和简化交互逻辑。随着JQuery的不断发展,这些技巧也是不断更新和进化的,开发者需要及时关注和学习新的...
The CSS Anthology: 101 Essential Tips, Tricks & Hacks is a compilation of best practice solutions to the most challenging CSS problems. The third edition of this best-selling book, published in full ...
### CSS Anthology: 101 Essential Tips, Tricks & Hacks (2009) — 知识点解析 #### 一、概述 《CSS Anthology: 101 Essential Tips, Tricks & Hacks》是一本由SitePoint Pty Ltd于2009年出版的专业CSS书籍,作者...
《S7_200中文实例Tips&tricks》是一个针对西门子S7-200系列PLC(可编程逻辑控制器)的实用技巧和经验分享集合。S7-200是西门子公司推出的一款小型PLC,广泛应用于自动化控制领域,尤其在中小型制造业中,因其小巧、...
《JavaScript Anthology: 101 Essential Tips, Tricks & Hacks》是一本专注于JavaScript编程实践的书籍,旨在帮助开发者提升JavaScript技能,掌握一系列实用的技巧、窍门和黑客技术。这本书的内容涵盖了AJAX、CSS、...
S7_200中文实例Tips&tricks.zip西门子PLC编程实例程序源码下载S7_200中文实例Tips&tricks.zip西门子PLC编程实例程序源码下载S7_200中文实例Tips&tricks.zip西门子PLC编程实例程序源码下载S7_200中文实例Tips&tricks....
比如有禁止右键点击、隐藏搜索文本框文字、在新窗口中打开链接、检测浏览器、预加载图片、页面样式切换、所有列...个数、使用Google主机上的Jquery类库、禁用Jquery效果、解决Jquery类库与其他Javascript类库冲突问题...
《S7-200使用技巧:掌握西门子小型PLC的核心技能》 S7-200系列是西门子推出的一款小型可编程逻辑控制器(PLC),广泛应用于工业自动化领域。这款控制器以其紧凑的体积、强大的功能和易用性著称。本文将深入探讨S7-...
《S7_200中文实例Tips&tricks》是一个针对西门子S7-200系列PLC编程的实用资源集合。S7-200是西门子推出的一种小型可编程逻辑控制器,广泛应用于工业自动化领域,尤其适合中小型控制系统。这个压缩包中的内容可能是由...
《软件工程师-经典收藏50个jQueryMobile开发技巧集萃》文档汇集了众多关于jQuery Mobile的实用技巧,这些技巧对于软件工程师来说是构建高效、跨平台的移动网站和应用的宝贵资源。jQuery Mobile是一个强大的框架,它...
Shiny_tips_&_tricks_for_improving_your_apps_and_so_advanced-shiny
### DirectX 9 Tips and Tricks详解 #### 一、概述 《ShaderX2:Shader Programming Tips & Tricks with DirectX 9》是一本由Wolfgang F. Engel编辑的专业书籍,由Wordware Publishing出版。本书主要介绍了使用...
描述中同样提到的是“工业机器人-S7_200中文实例Tips&tricks.7z”,进一步证实了这是一份关于S7-200 PLC在工业机器人控制中的实践教程或案例集,包含了一些实用的技巧和小贴士。通常这样的资源会包括编程示例、故障...
西门子PLC例程源码S7_200中文实例Tips&tricks本资源系百度网盘分享地址
Best practice and tips & tricks to write scientific papers in LaTeX, with figures generated in Python or Matlab.zip
使用Keras的编程技巧 Keras-Tips-Tricks-and-Techniques-master.zip
《Wordware Publishing - LightWave 3D 8.1001 Tips & Tricks》是一部针对LightWave 3D 8版本的专业指南,旨在帮助用户掌握并优化这款强大的三维动画和建模软件的使用技巧。LightWave 3D是由NewTek公司开发的一款...