- 浏览: 898731 次
- 性别:
- 来自: 北京
文章分类
- 全部博客 (498)
- J2EE (52)
- 数据库 (17)
- java基础 (43)
- web技术 (19)
- 程序设计 (6)
- 操作系统 (18)
- IT资讯 (7)
- 我的IT生活 (12)
- 学习笔记 (9)
- Jquery (25)
- JavaScript (18)
- spring (40)
- Hibernate (12)
- Struts (10)
- YUI (2)
- Extjs (22)
- .net (0)
- Eclipse (10)
- 社会主义 (2)
- 服务器 (9)
- CSS (8)
- 网络安全 (16)
- 版本控制 (9)
- PHP (2)
- Oracle (42)
- SQL server (1)
- Mysql (11)
- 项目管理 (3)
- 开发工具使用 (10)
- SQL语句 (7)
- Perl (0)
- Shell (6)
- 漏洞 (4)
- ibatis (5)
- hacker (2)
- SQL注入 (6)
- Hacker工具 (2)
- 入侵和渗透 (7)
- 插件/组件 (2)
- 最爱开源 (5)
- 常用软件 (2)
- DOS (1)
- HTML (2)
- Android (9)
- CMS (1)
- portal (8)
- Linux (7)
- OSGI (1)
- Mina (5)
- maven (2)
- hadoop (7)
- twitter storm (2)
- sap hana (0)
- OAuth (0)
- RESTful (1)
- Nginx (4)
- flex (1)
- Dubbo (1)
- redis (1)
- springMVC (1)
- node.js (1)
- solr (2)
- Flume (1)
- MongoDB (2)
- ElasticSearch (1)
最新评论
-
M_drm:
请问要怎么设置浏览器才不报没权限呢?
用JS在页面调用本地可执行文件的方法(ACTIVEX) -
Alexniver:
官方文档。When importing data into I ...
mysql导入数据过慢 解决方法 -
camelwoo:
我记得 Criteria 可以做连接查询与子查询,也可以做分页 ...
Hibernate总结篇二 -
zhenglongfei:
楼主如果SubKeyName 这个节点不存在,怎么办??怎么用 ...
Java操作注册表 -
yxx676229549:
用log4j 2 了
logback
[url]http://blog.csdn.net/sunboy_2050/article/details/8179162/url]
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.
1. 禁用右键点击(Disable right-click)
2. 禁用搜索文本框(Disappearing search field text)
3. 新窗口打开链接(Opening links in a new window)
4. 检测浏览器(Detect browser)
5. 预加载图片(Preloading images)
6. 样式筛选(CSS Style switcher)
7. 列高度相同(Columns of equal height)
8. 字体大小调整(Font resizing)
9. 返回页面顶部(Smooth(animated) page scroll)
11. 获取鼠标的xy坐标(Get the mouse cursor x and y axis)
12. 验证元素是否为空(Verify if an Element is empty)
13. 替换元素(Replace a element)
14. 延迟加载(jQuery timer callback functions)
15. 移除单词(Remove a word)
16. 验证元素是否存在(Verify that an element exists in jQuery)
17. 使整个DIV可点击(Make the entire DIV clickable)
18. id和class切换(Switch between classes or id’s when resizing the window)
19. 克隆对象(Clone a object)
20. 使元素居中屏幕(Center an element on the screen)
21. 自定义选择器(Write our own selector)
22. 统计元素个数(Count a element)
23. 自定义Bullets(Use Your Own Bullets)
24. 引用google分发的jQuery(Let Google host jQuery for you)
25. 禁用jQuery动画(Disable jQuery animations)
26. 防止不兼容冲突(No conflict-mode)
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.
1. 禁用右键点击(Disable right-click)
$(document).ready(function(){ $(document).bind("contextmenu",function(e){ return false; }); });
2. 禁用搜索文本框(Disappearing search field text)
$(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. 新窗口打开链接(Opening links in a new window)
$(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. 检测浏览器(Detect 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. 预加载图片(Preloading images)
$(document).ready(function() { jQuery.preloadImages = function() { for(var i = 0; i<arguments.length; i++)="" {="" jquery("<img="">").attr("src", arguments[i]); } } // how to use $.preloadImages("image1.jpg"); }); </arguments.length;>
6. 样式筛选(CSS Style switcher)
$(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> });
7. 列高度相同(Columns of equal 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")); }); });
8. 字体大小调整(Font resizing)
$(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. 返回页面顶部(Smooth(animated) page scroll)
$(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坐标(Get the mouse cursor x and y axis)
$(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. 验证元素是否为空(Verify if an Element is empty)
$(document).ready(function() { if ($('#id').html()) { // do something } });
13. 替换元素(Replace a element)
$(document).ready(function() { $('#id').replaceWith(' <div>I have been replaced</div> '); });
14. 延迟加载(jQuery timer callback functions)
$(document).ready(function() { window.setTimeout(function() { // do something }, 1000); });
15. 移除单词(Remove a word)
$(document).ready(function() { var el = $('#id'); el.html(el.html().replace(/word/ig, "")); });
16. 验证元素是否存在(Verify that an element exists in jQuery)
$(document).ready(function() { if ($('#id').length) { // do something } });
17. 使整个DIV可点击(Make the entire 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切换(Switch between classes or id’s when resizing the window)
$(document).ready(function() { function checkWindowSize() { if ( $(window).width() > 1200 ) { $('body').addClass('large'); } else { $('body').removeClass('large'); } } $(window).resize(checkWindowSize); });
19. 克隆对象(Clone a object)
$(document).ready(function() { var cloned = $('#id').clone(); // how to use <div id="id"></div> });
20. 使元素居中屏幕(Center an element on the 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 our own selector)
$(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 a element)
$(document).ready(function() { $("p").size(); });
23. 自定义Bullets(Use Your Own Bullets)
$(document).ready(function() { $("ul").addClass("Replaced"); $("ul > li").prepend("‒ "); // how to use ul.Replaced { list-style : none; } });
24. 引用google分发的jQuery(Let Google host jQuery for you)
//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 src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js" type="text/javascript"></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>
25. 禁用jQuery动画(Disable jQuery animations)
$(document).ready(function() { jQuery.fx.off = true; });
26. 防止不兼容冲突(No conflict-mode)
$(document).ready(function() { var $jq = jQuery.noConflict(); $jq('#id').show(); });
发表评论
-
jQuery无刷新无分页完美瀑布流
2013-08-11 19:33 1434这个是个非常棒的应用 ... -
UI组件:ext、JqueryEasyUI、miniui、dhtmlx及自定义页面
2013-05-16 13:43 3924UI组件:ext、JqueryEasyUI、miniui、dh ... -
jquery easy ui
2013-04-26 16:59 793http://bbs.btboys.com/forum.php ... -
js 函数function用法
2013-01-24 09:23 1009http://blog.csdn.net/sunboy_205 ... -
js 数组Array用法
2013-01-24 09:22 933http://blog.csdn.net/sunboy_20 ... -
10 个实用的 jQuery 表单操作代码片段
2012-11-28 09:52 1089转 http://www.iteye.com/news/266 ... -
JQuery Ajax提交表单数据时的问题
2012-09-04 17:37 2457function toSaveOutList(){ ... -
jquery 花瓣网方砖布局
2012-08-22 13:11 1169花瓣网方砖布局 图片内容无限加载 用户体验才是王道 http ... -
Ajax动态加载目录树(jquery-treeview)
2012-08-08 18:05 0原文:http://blog.csdn.net/bob007a ... -
JQuery上传插件Uploadify详解及其中文按钮解决方案
2012-08-08 18:02 0官网: http://www.uploadify.com/do ... -
一个简单的动态关闭DIV框的效果,带关闭按钮
2012-07-14 12:34 1452jquery设置获取div位置 var top=obj. ... -
jquery判断对象是否存在
2012-07-14 12:33 935用jquery判断一个对象是否存在不能用 if($ (& ... -
jquery 取值
2012-07-12 14:28 996jquery radio取值,checkbox取值,selec ... -
Jquery获取select,dropdownlist,checkbox下拉列表框的值
2012-07-10 17:45 1094jQuery获取 Select选择的Tex ... -
IE浏览器上传文件时本地路径变成”C:\fakepath\”的问题
2011-12-27 16:30 2876在使用<input id="file_upl& ... -
jquery插件制作
2010-06-29 11:27 1338jquery插件丰富,很多都是很好用的,最近学习了一下如何制作 ... -
jQuery无刷新上传文件的插件推荐jform
2010-06-29 11:14 2381http://jquery.malsup.com/form/ -
【jQuery插件】冒泡效果
2010-05-31 15:53 1225基本的使用方法: view sourceprint?01 $ ... -
操作元素的CSS样式
2010-05-28 10:33 1332添加或去除元素集合的class name 1. 使用add ... -
jquery选择器(转载)
2010-05-27 09:38 1203基本选择器: $("#myELement" ...
相关推荐
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.
NULL 博文链接:https://polokang.iteye.com/blog/563336
非常有用的Jquery使用小技巧,经验总结。
jQuery使用技巧jQuery使用技巧jQuery使用技巧jQuery使用技巧jQuery使用技巧
资源名称:jQuery、jQuery UI及jQuery Mobile技巧与示例内容简介:《jQuery、jQuery UI及jQuery Mobile技巧与示例》包括jQuery、jQuery UI、jQuery Mobile以及jQuery插件四部分内容。第一部分介绍jQuery核心库,从...
jQuery技巧总结.pdf jQuery jQuery技巧
jquery 心得 技巧,希望对使用jquery框架者有用
jQuery应用技巧大全modified 猜想表白
jQuery应用技巧大全jQuery应用技巧大全
jQuery技巧,比较经典的几种用法总结。
jQuery 技巧大放送 jQuery 技巧大放送jQuery 技巧大放送 jQuery 技巧大放送jQuery 技巧大放送 jQuery 技巧大放送jQuery 技巧大放送 jQuery 技巧大放送jQuery 技巧大放送 jQuery 技巧大放送
jquery 元素选择器使用方法技巧 jquery 元素选择器使用方法技巧 jquery 元素选择器使用方法技巧
jquery使用手册与技巧,还包括简单体验实例,轻松学习。
软件工程师-经典收藏50个jQueryMobile开发技巧集萃.docx
jQuery教程14个实用的jQuery技巧
jQuery 1.4给开发者带来了很多值得兴奋的新特性,同时使用jQuery的人也越来越多,为了方便大家对jQuery的使用,下面列出了一些jQuery使用技巧
jQuery、jQuery UI及jQuery Mobile技巧与示例