$(‘.myClass’) - Targets myClass
$(‘img.myClass’) - Targets tag img that has myClass class
$(‘p’) - All P in the DOM
$(‘*’) - All the elements in the DOM
$(‘h1:first’) - First H1 in the DOM
$(‘.myClass h1:first’) - First H1 in the myClass container
$(‘.myClass h1:even’) - Selects all even H1 in the myClass container
$(‘:checked’) - All elements that are checked
$(‘.myClass p:not(p:eq(2))’) - Selects all P in myClass except the P that have the index of 2 (remember, it is zero index)
$(‘div > p’) - Select all P that are direct child of DIV
$(‘ul + div’) - Select the DIV that are next to a UL
$(‘p[class]’) - Select all the P that have a class attribute
$(‘p[id^=pro][lang*=en-]’) - Select all the P that have a ID attribute that starts with PRO and a Lang attribute that contains en-
$(‘p:contains('3')’) - Select all the P that contains the text string 3.
$(‘p:parent’) - Select all the P that contains something
$(‘div p:nth-child(2)’) - Select all the second P that are inside of a P inside of the div.
$(‘div p:nth-child(3n)’) - Select every 3third P that are inside of a P that are inside of a div.
$(‘#example’).find('.myClass'); - Search the #example to find .myClass.
$(‘p’).css(‘color’,’blue’); - All P color:blue;
$(‘p:not(.myClass)’).css(‘color’,’blue’); - All P that not have the class myClass with color:blue;
$(‘.myClass’).pretend('YO'); - Targets myClass and inserts YO in the beginning of myClass
$(‘.myClass’).html('<h1>Yo</h1>'); - Insert HTML element
$(‘.myClass’).text('<h1>Yo</h1>'); - Insert as plain text
$(‘.myClass’).load('example.html'); - Inserts example.html into myClass
$( "li[class^='myCla']" ).css("display", "none"); - Find LI where the class name starts with 'myCla' and apply css.
Simple animation example:
$(document).ready(function() {
$("h1").click(function() {
$("h2").animate({
font-size: "toggle", //Can be Hide or Show or Toggle
width: "30%",
top: "+=100px"
}, 1000, 'swing', function() {
$("h3").fadeOut(2000); //This happens after the first animation
});
});
});
