Wednesday, April 1, 2009

JQuery Help

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: