JQuery Basic Features Quick Walkthrough

1. Basic Selectors

• $('p')—Accesses all the paragraph elements in the HTML file

• $('div')—Accesses all the div elements in the HTML file

• $('#A')—Accesses all the HTML elements with id=A

• $('.b')—Accesses all the HTML elements with class=b

 

2. Applying CSS to Elements 

$('div').addClass('highlight');

 

3. Some basic selection APIs

// select all the elements that contain the text Life
$('span:contains(Life)').addClass('highlight');

$('div:odd').addClass('highlight');
$('div:even').addClass('boundary');
$('p:eq(1)').addClass('linkstyle');

 

4. Obtaining the HTML of an Element 

alert($('p').html());

 

5. Changing the Content of a DOM Node 

$('#textId').text('some text content');

$('p').html('<b>We can create Rich Internet Applications </b><br/>by making AJAX requests');

 

6. Creating a DOM Node on the Fly 

1) Inserts the specified content at the beginning of the selected element and returns a jQuery object 

$('p').prepend('<h2> Power of selectors </h2>');