- 浏览: 132431 次
- 性别:
- 来自: 武汉
文章分类
最新评论
-
gezi2213:
...
HttpClient及有关jar包详解 -
sailor119:
学习一下!
〖ExtJS〗之ToolBar
The
use of thejQuery library
is growing and growing(just releasedjQuery 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 usefulplugins
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("Enteryoursearchtexthere" );
- textFill($('input.text1' ));
- });
- //inputfocustextfunction
- 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 (){
- //Example1:Everylinkwillopeninanewwindow
- $('a[href^="http://"]' ).attr("target" ,"_blank" );
- //Example2:Linkswiththerel="external"attributewillonlyopeninanewwindow
- $('a[@rel$=' external']' ).click(function (){
- this .target="_blank" ;
- });
- });
- //howtouse
- <ahref="http://www.opensourcehunter.com" rel="external" >openlink</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 (){
- //TargetFirefox2andabove
- if ($.browser.mozilla&&$.browser.version>="1.8" ){
- //dosomething
- }
- //TargetSafari
- if ($.browser.safari){
- //dosomething
- }
- //TargetChrome
- if ($.browser.chrome){
- //dosomething
- }
- //TargetCamino
- if ($.browser.camino){
- //dosomething
- }
- //TargetOpera
- if ($.browser.opera){
- //dosomething
- }
- //TargetIE6andbelow
- if ($.browser.msie&&$.browser.version<=6){
- //dosomething
- }
- //TargetanythingaboveIE6
- if ($.browser.msie&&$.browser.version>6){
- //dosomething
- }
- });
● 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]);
- }
- }
- //howtouse
- $.preloadImages("image1.jpg" );
- });
● CSS Styleswitcher(页面样式切换)
Switch between different styles?
- $(document).ready(function (){
- $("a.Styleswitcher" ).click(function (){
- //swicththeLINKRELattributewiththevalueinARELattribute
- $('link[rel=stylesheet]' ).attr('href' ,$(this ).attr('rel' ));
- });
- });
- //howtouse
- //placethisinyourheader
- <linkrel="stylesheet" href="default.css" type="text/css" >
- //thelinks
- <ahref="#" class ="Styleswitcher" rel="default.css" >DefaultTheme</a>
- <ahref="#" class ="Styleswitcher" rel="red.css" >RedTheme</a>
- <ahref="#" class ="Styleswitcher" rel="blue.css" >BlueTheme</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);
- }
- //howtouse
- $(document).ready(function (){
- equalHeight($(".left" ));
- equalHeight($(".right" ));
- });
- });
● Font resizing(动态控制页面字体大小)
Want to let the users change there font size?
- $(document).ready(function (){
- //Resetthefontsize(backtodefault)
- var originalFontSize=$('html' ).css('font-size' );
- $(".resetFont" ).click(function (){
- $('html' ).css('font-size' ,originalFontSize);
- });
- //Increasethefontsize(biggerfont0
- $(".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 ;
- });
- //Decreasethefontsize(smallerfont)
- $(".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 ;
- }
- }
- });
- });
- //howtouse
- //placethiswhereyouwanttoscrollto
- <aname="top" ></a>
- //thelink
- <ahref="#top" >gototop</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){
- //displaythexandyaxisvaluesinsidethedivwiththeidXY
- $('#XY' ).html("XAxis:" +e.pageX+"|YAxis" +e.pageY);
- });
- });
- //howtouse
- <divid="XY" ></div>
● 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?
- $(document).ready(function (){
- $('#id' ).replaceWith('<div>Ihavebeenreplaced</div>' );
- });
● jQuery timer callback functions(jQuery 延时加载功能)
Want to delay something?
- $(document).ready(function (){
- window.setTimeout(function (){
- //dosomething
- },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.
● Make the entire DIV clickable(使整个 DIV 可点击)
Want to make the complete div clickable?
- $(document).ready(function (){
- $("div" ).click(function (){
- //gettheurlfromhrefattributeandlaunchtheurl
- window.location=$(this ).find("a" ).attr("href" );
- return false ;
- });
- });
- //howtouse
- <div><ahref="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();
- });
- //howtouse
- <divid="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 (){
- //creatingasimplejsalertbox
- alert('Theelementthatyouhaveclickedisover1000pixelswide' );
- });
- });
● 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?
- $(document).ready(function (){
- $("ul" ).addClass("Replaced" );
- $("ul>li" ).prepend("-" );
- });
- //howtouse
- 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.
- //Example1
- <scriptsrc="http://www.google.com/jsapi" ></script>
- <scripttype="text/javascript" >
- google.load("jquery" ,"1.2.6" );
- google.setOnLoadCallback(function (){
- //dosomething
- });
- </script>
- //Example2:(thebestandfastestway)
- <scripttype="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.
● 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表单取值赋值
2012-11-26 09:24 475先留几个使用中感觉 ... -
jQuery TAB插件
2012-11-22 16:48 756最近的项目用到TAB效果的地方较多,于是自己稍微封装了下,写成 ... -
漂亮的自定义jQueryUI主题
2012-11-21 11:35 982之前的项目中,使用的是jqueryUI的UI组件,jquery ... -
A better Tooltip with jQuery
2012-11-08 09:50 837在国外的一个网站上看到了一份不错的jQuery 插件,主要是样 ... -
Jquery 经典插件收集
2012-11-05 10:29 6601.Floater 这个插件可以帮助你构建可以重新排 ... -
jQuery学习之:jqGrid表格插件——从Struts2获得数据
2012-09-25 16:16 965之前谈到了jqGrid与Serlvet/JSP集成,实际上就是 ...
相关推荐
S7-200使用技巧(tips&tricks;)rar,S7-200使用技巧(tips&tricks;)
前段时间发布了Jquery类库1.4版本,使用者也越来越多,为了方便大家对Jquery的使用,下面列出了一些Jquery使用技巧。
(英文)The CSS Anthology: 101 Essential Tips, Tricks & Hacks 2009。SitePoint Pty Ltd出版。pdf格式。
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 ...
The use of the jQuery library is growing and growing(just released jQuery 1.4), more and more people are ... That’s why i created a small list of 26 cool and useful jQuery tips, tricks and solutions.
S7_200中文实例Tips&tricks
ShaderX2 Programming Tips & Tricks with DirectX 9 英文无水印pdf pdf所有页面使用FoxitReader和PDF-XChangeViewer测试都可以打开 本资源转载自网络,如有侵权,请联系上传者或csdn删除 本资源转载自网络,...
Fedora Ubuntu LinuxMint 等Linux系统的各种使用技巧各提示,图文并茂,解说详细。
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类库冲突问题...
此书属网上搜集,供鉴赏之用,请勿保存,如触及到法律,本人概不负责,如喜欢请购买正版。 目录: Preface .......................................................................................................
The.JavaScript.Anthology.101.Essential.Tips.Tricks.Hacks
52 Tips & Tricks to Boost .NET Performance
plc编程的一些实用的小程序,人人为我,我为人人
wordware publishing - lightwave 3d 8. 1001 tips & tricks.zip
From taming the Ribbon bar to testing and tables, creating custom functions, and overcoming "impossible" charts, mixing nesting limits, and more, 101 Excel 2013 Tips, Tricks, & Timesavers will save ...
西门子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
西门子PLC例程-S7_200中文实例Tips&tricks