Welcome to Scribd, the world's digital library. Read, publish, and share books and documents. See more
Download
Standard view
Full view
of .
Look up keyword
Like this
1Activity
0 of .
Results for:
No results containing your search query
P. 1
Jquery Thinking and Tips

Jquery Thinking and Tips

Ratings: (0)|Views: 13 |Likes:
tips and tricks
tips and tricks

More info:

Published by: Mohamed Naser El Yazji on Feb 10, 2011
Copyright:Attribution Non-commercial

Availability:

Read on Scribd mobile: iPhone, iPad and Android.
download as DOCX, PDF, TXT or read online from Scribd
See more
See less

02/10/2011

pdf

text

original

 
Jquery Thinking and tips
 
y
Did you know that using jQuery¶s .live() function ismore optimal for adding click functions than using.click()? It even handles dynamic content well.
view plaincopy to clipboardprint? 1.
 
$('.clickme').live('click', function() {2.
 
// Live handler called.3.
 
});
y
Attributes in jQuery ± jQuery supports passingattributes for an object as the second argument to the jQuery function itself. This creates a new link on thepage:
view plaincopy to clipboardprint? 1.
 
$('', {2.
 
text: 'jQuery is awesome!',3.
 
href: 'http://www.jquery.com',4.
 
id: 'someAwesomeID',5.
 
rel: 'external',6.
 
title: 'This is a title'7.
 
}).appendTo('body');
y
Function Grouping ± jQuery supports bindingfunctions so that they can all be defined within thesame group. This can be useful for keeping your codytidy among other things!
view plaincopy to clipboardprint? 1.
 
 jQuery('#foo').bind({2.
 
click: function() {3.
 
// do something4.
 
},5.
 
mouseover: function() {6.
 
// do something7.
 
},8.
 
mouseout: function() {9.
 
// do something10.
 
}
 
11.
 
})
y
Have you ever wanted to convert your JSON stringinto a JavaScript Object? Rather than having tocustom code your own function to do it, just use jQuery¶s built in .parseJSON function to achieve thiseasily (jQuery 1.4.1 and above):
view plaincopy to clipboardprint? 1.
 
var obj = jQuery.parseJSON('2.
 
{"name":"Larry King",3.
 
"age": "5000"4.
 
}');5.
 
alert( obj.name === "Larry King" ); //true6.
 
alert (obj.age === "50");//false7.
 
alert (obj.age === "5000"); //true
y
Ever since jQuery 1.4 you¶ve been able to use a jQuery feature equivalent to PHP¶s sleep() calleddelay. If you would like to delay and animated effectall you need to do is use delay as follows:
view plaincopy to clipboardprint? 1.
 
$('#myJaw').slideUp(300).delay(800).fadeIn(400);2.
 
y
When styling a large number of elements, insteadof using css() it is more efficient to append a style tagto the DOM as follows:
view plaincopy to clipboardprint? 1.
 
$('2.
 
<style type="text/css"> div.class { color: red; } </style>3.
 
4.
 
')5.
 
.appendTo('head');
y
Here¶s how you can remove the parent elements of any object using jQuery¶s .unwrap() function
 
view plaincopy to clipboardprint? 1.
 
/* here we locate any paragraph elements and then2.
 
'unwrap' the parent elements around them. These3.
 
could be other divs, spans or anything really */4.
 
5.
 
 jQuery('p').unwrap();
y
Would you like to perform an action when anelement or its contents gain focus? Here¶s how to doit:
view plaincopy to clipboardprint? 1.
 
 jQuery('form')2.
 
.focusin(function(){3.
 
 jQuery(this).addClass('focused');4.
 
});5.
 
.focusout(function(){6.
 
 jQuery(this).removeClass('focused');7.
 
});8.
 
9.
 
//However, the preferred way to do this is using10.
 
// .focus() and .blur()11.
 
12.
 
//For when an element loses it's focus use .blur()13.
 
$('#target').blur(function() {14.
 
alert('Handler for .blur() called.');15.
 
});16.
 
17.
 
//For when an element gains focus use .focus()18.
 
$('#target').focus(function() {19.
 
alert('Handler for .focus() called.');20.
 
});
y
Each traversal method in jQuery creates a new setwhich builds a stack. You can use .end() to reach theprevious set.
view plaincopy to clipboardprint? 1.
 
$("2.
 
<ul>3.
 
<li> </li>4.
 
</ul>5.
 
6.
 
") // li

You're Reading a Free Preview

Download
scribd
/*********** DO NOT ALTER ANYTHING BELOW THIS LINE ! ************/ var s_code=s.t();if(s_code)document.write(s_code)//-->