`

(转)收集几条jquery实用技巧

 
阅读更多

 收集几条jquery的实用技巧如下:

1) 检查IE是否是版本6
  

Java代码 复制代码 收藏代码
  1. if ( (jQuery.browser.msie) && (parseInt(jQuery.browser.version) < 7) ) {   
  2.     $('body').prepend('<div class="warning">You are using an old version of Internet Explorer which is not supported.  Please upgrade your browser in order to view this website.</div>');   
  3. }  
if ( (jQuery.browser.msie) && (parseInt(jQuery.browser.version) < 7) ) {
	$('body').prepend('<div class="warning">You are using an old version of Internet Explorer which is not supported.  Please upgrade your browser in order to view this website.</div>');
}



2) 打开一个打印的窗口
 

Java代码 复制代码 收藏代码
  1. [url=#]Print this page[/url]   
  2. $('a.print').click(function(){   
  3.     window.print();   
  4.     return false;   
  5. });  
[url=#]Print this page[/url]
$('a.print').click(function(){
	window.print();
	return false;
});



3 禁止表单使用回车键
  

Java代码 复制代码 收藏代码
  1. $("#form").keypress(function(e) {   
  2.   if (e.which == 13) {   
  3.     return false;   
  4.   }   
  5. });  
$("#form").keypress(function(e) {
  if (e.which == 13) {
    return false;
  }
});



4 全选和反选checkbox
 

Java代码 复制代码 收藏代码
  1.  <div class="options">   
  2.     [list]   
  3.         [*][url=#]Select All[/url]   
  4.   
  5.         [*][url=#]Reset All[/url]   
  6.   
  7.     [/list]   
  8.   
  9.     <input type="checkbox" id="option1" /><label for="option1">Option 1</label>   
  10.     <input type="checkbox" id="option2" /><label for="option2">Option 2</label>   
  11.     <input type="checkbox" id="option3" /><label for="option3">Option 3</label>   
  12.     <input type="checkbox" id="option4" /><label for="option4">Option 4</label>   
  13. </div>   
  14. $('.select-all').live('click', function(){   
  15.     $(this).closest('.options').find('input[type=checkbox]').attr('checked'true);   
  16.     return false;   
  17. });   
  18.   
  19. $('.reset-all').live('click', function(){   
  20.     $(this).closest('.options').find('input[type=checkbox]').attr('checked'false);   
  21.     return false;   
  22. });  
 <div class="options">
	[list]
		[*][url=#]Select All[/url]

		[*][url=#]Reset All[/url]

	[/list]

	<input type="checkbox" id="option1" /><label for="option1">Option 1</label>
	<input type="checkbox" id="option2" /><label for="option2">Option 2</label>
	<input type="checkbox" id="option3" /><label for="option3">Option 3</label>
	<input type="checkbox" id="option4" /><label for="option4">Option 4</label>
</div>
$('.select-all').live('click', function(){
	$(this).closest('.options').find('input[type=checkbox]').attr('checked', true);
	return false;
});

$('.reset-all').live('click', function(){
	$(this).closest('.options').find('input[type=checkbox]').attr('checked', false);
	return false;
});



5 平均分各个列
  有的时候,需要在表格中让各个列等分,可以这样

Java代码 复制代码 收藏代码
  1. var max_height = 0;   
  2. $("div.col").each(function(){   
  3.     if ($(this).height() > max_height) { max_height = $(this).height(); }   
  4. });   
  5. $("div.col").height(max_height);  
var max_height = 0;
$("div.col").each(function(){
    if ($(this).height() > max_height) { max_height = $(this).height(); }
});
$("div.col").height(max_height);



6 将所有的连接用新建窗口打开
  

Java代码 复制代码 收藏代码
  1. $('a[@rel$='external']').click(function(){   
  2.      this.target = "_blank";   
  3. });   
  4.   
  5. /*  
  6.    Usage:  
  7.    [url=http://www.catswhocode.com]catswhocode.com[/url]  
  8. */  
分享到:
评论

相关推荐

    jQuery、jQueryUI及jQueryMobile技巧与示例

    资源名称:jQuery、jQuery UI及jQuery Mobile技巧与示例内容简介:《jQuery、jQuery UI及jQuery Mobile技巧与示例》包括jQuery、jQuery UI、jQuery Mobile以及jQuery插件四部分内容。第一部分介绍jQuery核心库,从...

    jquery实用教程

    这个“jQuery实用教程”将引导你深入理解jQuery的核心概念和实用技巧,帮助你提升网页开发效率。 首先,jQuery的核心理念是“Write Less, Do More”,它通过简化JavaScript的DOM操作、事件处理、动画效果和Ajax交互...

    jQuery应用技巧大全modified

    《jQuery应用技巧大全modified》是一份关于jQuery技术的详尽指南,主要涵盖了jQuery在实际开发中的各种实用技巧。本文将深入解析这些技巧,帮助开发者更好地理解和运用jQuery。 首先,jQuery的核心在于对页面元素的...

    jQuery常见开发技巧详细整理

    在jQuery的开发过程中,掌握一些常见技巧能显著提升开发效率和代码质量。下面是一些详细的jQuery开发...这些技巧在jQuery开发中非常实用,熟练掌握能有效提高代码质量和效率,让开发者编写出更加优雅的JavaScript代码。

    jQuery应用技巧大全

    jQuery 应用技巧大全 实用技巧 很多技巧值得学习

    jQuery实用Ajax loading spin旋转指示器插件

    spin.js是一款非常实用的jQuery Ajax loading spin旋转指示器插件。在页面进行ajax调用的时候,需要一个指示器来告诉用户当前正处于加载状态。该旋转指示器的作用就类似于一个无线循环的进度条。

    jQuery教程14个实用的jQuery技巧

    ### jQuery教程:14个实用的jQuery技巧详解 #### 技巧一:高效利用jQuery选择器 在网页开发中,选择器是与DOM元素交互的关键工具。jQuery通过强大的选择器功能,让开发者能够轻松地定位到页面中的任何元素。虽然...

    jqueryDIV滚动条

    jquery滚动条jquery滚动条jquery滚动条jquery滚动条jquery滚动条jquery滚动条jquery滚动条jquery滚动条jquery滚动条jquery滚动条jquery滚动条jquery滚动条jsDIV滚动条jsDIV滚动条jsDIV滚动条

    jQuery技巧,比较经典的几种用法总结。

    本篇文章将深入探讨一些jQuery的经典技巧和用法。 首先,jQuery 提供了一种简洁的方式来引用页面上的元素。你可以通过ID、类、元素名称或DOM层级关系,甚至XPath条件来选择元素。例如,`$("#msg")`会选取ID为'msg'...

    60个很实用的jQuery代码开发技巧收集

    主要介绍了60个很实用的jQuery代码开发技巧收集,使用jquery的朋友可以参考下核心代码的使用,需要的朋友可以参考下

    jquery技巧总结(转)

    这篇总结将探讨一些实用的 jQuery 技巧,帮助开发者提高效率和代码质量。 1. **选择器的高效使用** - `$(selector)`:基本的选择器,可以是ID、类、标签名等。 - `$(document).ready()`:确保DOM加载完成后执行...

    华丽滚动条滚动条Jquery

    在"华丽滚动条滚动条Jquery"中,我们主要会探讨以下几个知识点: 1. **Jquery选择器**:Jquery提供了丰富的选择器,如ID选择器、类选择器、属性选择器等,使我们能够精准地定位到页面上的滚动条元素,对其进行样式...

    超实用的jQuery代码段

    《超实用的jQuery代码段》精选近350个jQuery代码段,涵盖页面开发中绝大多数要点、技巧与方法,堪称史上最实用的jQuery代码参考书,可以视为网页设计与网站建设人员的好帮手。《超实用的jQuery代码段》的代码跨平台...

    jquery 实用书籍,实例

    《锋利的jQuery》(第二版)是一本深入讲解jQuery技术的实用书籍,它为开发者提供了丰富的知识和实例,帮助他们高效地利用jQuery进行网页开发。jQuery作为一个强大的JavaScript库,简化了HTML文档遍历、事件处理、动画...

    JQ技巧jquery学习技巧

    本篇文章将深入探讨jQuery的学习技巧,包括元素引用、DOM对象与jQuery对象的转换、集合操作、以及常用的属性和事件处理。 1. **元素引用** 在jQuery中,通过`$()`函数我们可以方便地引用页面中的元素。例如,通过...

Global site tag (gtag.js) - Google Analytics