- 浏览: 872956 次
文章分类
最新评论
-
angel6709:
怎么下载啊
Android 蓝牙开发实例--蓝牙聊天程序的设计和实现 -
再_见孙悟空:
能识别中文不?
借@阿里巴巴 耍了个帅——HTML5 JavaScript实现图片文字识别与提取 -
在下个路口:
连接时总是报Unable to start Service D ...
Android 蓝牙开发实例--蓝牙聊天程序的设计和实现 -
mike.liu:
如果在社会上,站在政府的立场思考问题,是会被人说5毛的。但是在 ...
项目预估激发的矛盾 -
kjmmlzq19851226:
我的意思是说,公司采取两种策略:
1. 每月4k的基本工资,另 ...
项目预估激发的矛盾
【jQuery】26 个 jQuery使用技巧
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;
- });
- });
$(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); }
- });
- }
$(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>
$(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
- }
- });
$(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;>
$(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>
- });
$(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"));
- });
- });
$(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;
- });
- });
$(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>
- });
$(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>
- });
$(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
- }
- });
$(document).ready(function() { if ($('#id').html()) { // do something } });
13. 替换元素(Replace a element)
- $(document).ready(function() {
- $('#id').replaceWith('
- <div>I have been replaced</div>
- ');
- });
$(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);
- });
$(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, ""));
- });
$(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
- }
- });
$(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>
- });
$(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);
- });
$(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>
- });
$(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();
- });
$(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');
- });
- });
$(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();
- });
$(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; }
- });
$(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>
//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;
- });
$(document).ready(function() { jQuery.fx.off = true; });
26. 防止不兼容冲突(No conflict-mode)
- $(document).ready(function() {
- var $jq = jQuery.noConflict();
- $jq('#id').show();
- });
$(document).ready(function() { var $jq = jQuery.noConflict(); $jq('#id').show(); });
jquery 速查表:
相关推荐
资源名称:jQuery、jQuery UI及jQuery Mobile技巧与示例内容简介:《jQuery、jQuery UI及jQuery Mobile技巧与示例》包括jQuery、jQuery UI、jQuery Mobile以及jQuery插件四部分内容。第一部分介绍jQuery核心库,从...
jQuery技巧总结.pdf jQuery jQuery技巧
NULL 博文链接:https://polokang.iteye.com/blog/563336
jquery 元素选择器使用方法技巧 jquery 元素选择器使用方法技巧 jquery 元素选择器使用方法技巧
jQuery使用技巧jQuery使用技巧jQuery使用技巧jQuery使用技巧jQuery使用技巧
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.
非常有用的Jquery使用小技巧,经验总结。
jQuery 技巧大放送 jQuery 技巧大放送jQuery 技巧大放送 jQuery 技巧大放送jQuery 技巧大放送 jQuery 技巧大放送jQuery 技巧大放送 jQuery 技巧大放送jQuery 技巧大放送 jQuery 技巧大放送
jQuery技巧,比较经典的几种用法总结。
jQuery教程14个实用的jQuery技巧
jquery 心得 技巧,希望对使用jquery框架者有用
jquery技巧总结
jQuery 技巧总结 jQuery 技巧总结 jQuery 技巧总结 jQuery 技巧总结 jQuery 技巧总结
jQuery应用技巧大全modified 猜想表白
jQuery Mobile 十大常用技巧
原书名:jQuery, jQuery UI, and jQuery Mobile: Recipes and Examples 原出版社: Addison-Wesley Professional 作者: (荷)Adriaan de Jonge (美)Phil Dutson 译者: 包勇明 程学彬 出版社:人民邮电出版社 ...