当前位置: 代码迷 >> Web前端 >> (转)搜集几条jquery实用技巧
  详细解决方案

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

热度:203   发布时间:2012-09-15 19:09:28.0
(转)收集几条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. */??
  相关解决方案