highlight and some jQuery tips 2
Blogs20142014-06-14
1. highlight
There is no highlight function in jQuery. So I wrote a ’highlight’, it is pretty cool.
$.fn.extend({
highlight: function(bgColor, bgDelay) {
bgColor = bgColor || 'yellow';
bgDelay = parseInt(bgDelay) || 2000;
var $that = $(this);
$that.css( "backgroundColor", bgColor ).fadeIn();
setTimeout(function() {
$that.removeAttr('style')
}, bgDelay);
}
});
//Usage - for a id='notice' selector:
$('#notice').highlight();
$('#notice').highlight('pink', 1000);
$('#notice').highlight('blue');
$('#notice').highlight('', 4000);- Since there is no event trigger, so $.fn.animate, $.fn.fadeTo not suitable for this case
- Same as $.promise, $.when
- setTimeout() is perfect for this case
- Arguments could be object instead of string; or use just 1 parameter (string or integer) to auto distinguish the input parameter: typeof param==‘string’ or ‘number’? It is easy to extend.
Besides, here is some helpful links:
- CSS transition: http://jsfiddle.net/fvv5q/22/
- Bootstrap also adds Transition features: http://getbootstrap.com/javascript/#transitions
2. to locate input checkbox:
//1. return input checkbox:
$('#form_id input:checked')
//[<input type="checkbox" id="rememberme" name="rememberme">]
//2. same:
$('input, #form_id').filter(':checked')
//[<input type="checkbox" id="rememberme" name="rememberme">]
// Is checkbox checked?
$('input, #form_id').is(':checked')
//true3. a cool pseudo example
// target a 'a' elements without a child image:
$('a:not(:has(>img))')
//or:
$('a').filter(function() {
return !$(this).children('img').length;
});