jQuery('div.panel') :- All divs with class=“panel”
jQuery('p#intro'):- The paragraph with id=“intro”
jQuery('div#content a:visible'):- All visible links inside the div with id=“content”
jQuery('input[@name=email]'):- All input fields with name=“email”
jQuery('table.orders tr:odd'):- “odd” numbered rows in a table with class “orders”
jQuery('a[@href^="http://"]'):- All external links (links that start with http://)
jQuery('p[a]'):- All paragraphs that contain one or more links
------------------------------------------------------------------------------------------------------------
jQuery('div#primary').width(300);
Set the width of div id=“primary” to 300 px.
jQuery('p').css('line-height', '1.8em');
Apply a line-height of 1.8em to all paragraphs.
jQuery('li:odd').css({color: 'white', backgroundColor: 'black'});
Apply two CSS rules to every other list item; note that the css() function can take an object instead of two strings.
jQuery('a[@href^="http://"]').addClass('external').attr('target', '_blank');
Add a class of “external” to all external links (those beginning with http://), then add target=“_blank” for good measure. This makes use of chaining, described below.
jQuery('blockquote').each(function(el) { alert(jQuery(this).text()) });
Iterate over every blockquote on the page, and alert its textual content (excluding HTML tags).
jQuery('a').html('Click here!');
Replace all link text on the page with the insidious “Click here!”.
Here are some examples of methods that read values from the first matched element:
var width = jQuery('div').width();
How wide is the first div on the page?
var src = jQuery('img').attr('src');
What’s the src attribute of the first image on the page?
var color = jQuery('h1').css('color');
What colour is the first h1?
------------------------------------------------------------------------------------------------------------
jQuery('div').not('[@id]')
Returns divs that do not have an id attribute.
jQuery('h2').parent()
Returns all elements that are direct parents of an h2.
jQuery('blockquote').children()
Returns all elements that are children of a blockquote.
jQuery('p').eq(4).next()
Find the fifth paragraph on the page, then find the next element (its direct sibling to the right).
jQuery('input:text:first').parents('form')
Find the form parent of the first input type=“text” field on the page. The optional argument to parents() is another selector.
------------------------------------------------------------------------------------------------------------
$('form#login')
// hide all the labels inside the form with the 'optional' class
.find('label.optional').hide().end()
// add a red border to any password fields in the form
.find('input:password').css('border', '1px solid red').end()
// add a submit handler to the form
.submit(function(){
return confirm('Are you sure you want to submit?');
});
var div = jQuery('Some text');
You can use chaining to add attributes to the div once it has been created:
var div = jQuery('Some text').addClass('inserted').attr('id', 'foo');
Now append it to the body tag:
div.appendTo(document.body)
Or prepend it to a known location using a selector:
div.prependTo('div#primary')
------------------------------------------------------------------------------------------------------------
jQuery('p').click(function() { jQuery(this).css('background-color', 'red'); });
Set up paragraphs so that when you click them they turn red.
jQuery('p:first').click()
Send a fake “click” to the first paragraph on the page.
A couple of event related functions deserve a special mention:
jQuery('a').hover(function() {
jQuery(this).css('background-color', 'orange');
}, function() {
jQuery(this).css('background-color', 'white');
});
hover() is a shortcut for setting up two functions that run onmouseover and onmouseout.
jQuery('p').one('click', function() { alert(jQuery(this).html()); });
jQuery(document).bind('stuffHappened', function(event, msg) {
alert('stuff happened: ' + msg);
});
jQuery(document).trigger('stuffHappened', ['Hello!']);
jQuery(document).ready(function() {
alert('The DOM is ready!');
});
Even better, you can shortcut the above by passing your function directly to jQuery():
jQuery(function() {
alert('The DOM is ready!');
});
------------------------------------------------------------------------------------------------------------
jQuery('div#intro').load('/some/fragment.html');
This performs a GET request against /some/fragment.html and populates div#intro with the returned HTML fragment.
------------------------------------------------------------------------------------------------------------
jQuery.get('/some/script.php', {'name': 'Simon'}, function(data) {
alert('The server said: ' + data);
}); // GET against /some/script.php?name=Simon
jQuery.post('/some/script.php', {'name': 'Simon'}, function(data) {
alert('The server said: ' + data);
}); // POST to /some/script.php
jQuery.getJSON('/some.json', function(json) {
alert('JSON rocks: ' + json.foo + ' ' + json.bar);
}); // Retrieves and parses /some.json as JSON
jQuery.getScript('/script.js'); // GET and eval() /script.js
------------------------------------------------------------------------------------------------------------
jQuery.get( url, [data], [callback], [type] )
url String
The URL of the page to load.
data (Optional) Map
Key/value pairs that will be sent to the server.
callback (Optional) Function
A function to be executed whenever the data is loaded successfully.
function (data, textStatus) { // data could be xmlDoc, jsonObj, html, text, etc... this; // the options for this ajax request }
type (Optional) String
Type of data to be returned to callback function: "xml", "html", "script", "json", "jsonp", or "text".
--------------------------------------------------------------------------------------------------------
$('#external_links a').click(function() {
return confirm('You are going to visit: ' + this.href);
});
$(window).load(function() {
// run this when the whole page has been downloaded
});
Animate your HTML
$('#grow').animate({ height: 500, width: 500 }, "slow", function(){
alert('The element is done growing!');
});
$('#nav').slideDown('slow');
No comments:
Post a Comment