JQuery 技巧（转）

最新推荐文章于 2022-10-27 11:35:47 发布

此电脑

最新推荐文章于 2022-10-27 11:35:47 发布

阅读量1k

点赞数 1

分类专栏： JQuery 文章标签： jquery function autocomplete input behavior attributes

JQuery 专栏收录该内容

0 篇文章 0 订阅

订阅专栏

让子元素都是同样的高度

$.fn.equalHeights = function() { $(this).each(function(){ var currentTallest = 0; $(this).children().each(function(i){ if ($(this).height() > currentTallest) { currentTallest = $(this).height(); } }); // for ie6, set height since min-height isn't supported if ($.browser.msie &amp;amp;amp;amp;amp;amp;amp;amp;&amp;amp;amp;amp;amp;amp;amp;amp; $.browser.version == 6.0) { $(this).children().css({'height': currentTallest}); } $(this).children().css({'min-height': currentTallest}); }); return this; };

使用方法

$(function(){ $('#container').equalHeights(); })

via setting equal heights with jquery

避免css hack

通常我们为了兼容IE，会专门为它写一个CSS，如何通过jQuery来避免呢，可以尝试一下这段代码

$(document).ready(function(){ $('html').addClass($.browser); });

使用方法

.msie .example { background-color: red; } .mozilla .example { background-color: green; } .opera .example { background-color: cyan; } .safari .example { background-color: black; } .js .example { border: 10px solid black; } .example { width: 100px; height: 100px; background-color: yellow; }

可以指定默认样式，还可以针对各个浏览器单独指定样式
via avoiding css hacks using javascript

输入框提示文字，点击消失

jQuery.fn.hint = function (blurClass) { if (!blurClass) { blurClass = 'blur'; } return this.each(function () { // get jQuery version of 'this' var $input = jQuery(this), // capture the rest of the variable to allow for reuse title = $input.attr('title'), $form = jQuery(this.form), $win = jQuery(window); function remove() { if ($input.val() === title &amp;amp;amp;amp;amp;amp;amp;&amp;amp;amp;amp;amp;amp;amp; $input.hasClass(blurClass)) { $input.val('').removeClass(blurClass); } } // only apply logic if the element has the attribute if (title) { // on blur, set value to title attr if text is blank $input.blur(function () { if (this.value === '') { $input.val(title).addClass(blurClass); } }).focus(remove).blur(); // now change all inputs to title // clear the pre-defined text when form is submitted $form.submit(remove); $win.unload(remove); // handles Firefox's autocomplete } }); }; $(function(){ // find all the input elements with title attributes $('input[title!=""]').hint(); });

使用方法

<form action=""> <div><label for="search">Search:</label> <input type="text" name="seach" value="" id="search" title="Company name or ticker" /> <input type="submit" value="Go" /> </div> </form>

当前页弹出层

via Simple jQuery

$(document).ready(function() { //select all the a tag with name equal to modal $('a[name=modal]').click(function(e) { //Cancel the link behavior e.preventDefault(); //Get the A tag var id = $(this).attr('href'); //Get the screen height and width var maskHeight = $(document).height(); var maskWidth = $(window).width(); //Set heigth and width to mask to fill up the whole screen $('#mask').css({'width':maskWidth,'height':maskHeight}); //transition effect $('#mask').fadeIn(1000); $('#mask').fadeTo("slow",0.8); //Get the window height and width var winH = $(window).height(); var winW = $(window).width(); //Set the popup window to center $(id).css('top', winH/2-$(id).height()/2); $(id).css('left', winW/2-$(id).width()/2); //transition effect $(id).fadeIn(2000); }); //if close button is clicked $('.window .close').click(function (e) { //Cancel the link behavior e.preventDefault(); $('#mask, .window').hide(); }); //if mask is clicked $('#mask').click(function () { $(this).hide(); $('.window').hide(); }); });

使用方法

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <mce:script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" mce_src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></mce:script> <title>Sandbox</title> <meta http-equiv="Content-type" content="text/html; charset=utf-8" /> <mce:style type="text/css" media="screen"></mce:style><style type="text/css" media="screen" mce_bogus="1">body { background-color: #fff; font: 16px Helvetica, Arial; color: #fff; } #mask { left:0; top:0; position:absolute; z-index:9000; background-color:#000; display:none; } #boxes .window { position:fixed; width:440px; height:200px; display:none; z-index:9999; padding:20px; } /* Customize your modal window here, you can add background image too */ #boxes #dialog { width:375px; height:203px; }</style> </head> <body> <p><a href="#dialog" mce_href="#dialog" name="modal">Simple Window Modal</a></p> <div id="boxes">  <div id="dialog" class="window"> <b>Testing of Modal Window</b> |  <a href="#" mce_href="#" class="close">Close it</a> </div>  <div id="mask"></div> </div> </body> </html>

解决IE6″闪”的问题

$("a").click(function(event){ event.preventDefault(); // do something });

图片载入完毕时，触发函数

$(function() { $('img').load(function(){alert($(this).height())}); });

判断元素是否存在

if ($('#myDiv').length) { // your code }

给选择器指定一个容器(范围)

var selectedItem = $('#listItem' + i); var selectedItem = $('#listItem' + i, $('.myList'));

删除一条记录时，闪一下再消失

$(this).parents(".record").animate({ backgroundColor: "#fbc7c7" }, "fast") .animate({ opacity: "hide" }, "slow");

此电脑

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
JQuery 技巧（转）

让子元素都是同样的高度$.fn.equalHeights = function() { $(this).each(function(){ var currentTallest = 0; $(this).children().each(function(i){ if ($(this).height() > currentTallest) { currentT
复制链接

扫一扫

专栏目录