Including jQuery
From Folder |
<script src="scripts/jQuery.js></script> |
From Google |
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script> |
Executing When The Document Is Ready
Method One |
$(document).ready(handler) |
Method Two |
$(handler) |
handler |
function(){ ... } |
Example |
$(function(){ alert('Document Loaded'); }); |
Altering CSS
Add Class |
.addClass("className") |
Remove Class |
.removeClass("className") |
Toggle Class |
.toggleClass("className") |
Getting a CSS value |
var value = $("selector").css("property") |
Getting an array of CSS values |
var values = $("selector").css(["prop1","prop2", ... ] |
Setting a CSS Value |
#(selector").css("property", value) |
Setting multiple CSS Values |
#(selector").css({'property' : value; 'property2' : value; ... }) |
Setting CSS based on a function |
#(selector").css("property", function(index,value){ code; return value;})) |
Element width |
.width(); .width(value), .width(function) |
|
|
Selecting content
Syntax |
$("selector") |
Select All |
$("*") |
Select Tag |
$("tag") |
Select Class |
$(".class") |
Select ID |
$("#ID") |
Selector Extensions |
:button, :checked, :even, :checkbox, :disabled, :enabled, :visible, :empty, :file, :first-child, :first-of-type, :first, :last-child, :last, :last-of-type, :focus, :hidden, :header, :image, :input, :lang, :odd, :only-of-type, :only-child, :parent, :password, :radio, :reset, :root, :selected, :submit, :target, :text |
Functional Selectors |
:contains('text'), :eq(2), :has( tag), :lt(n), :not(tag), :nth-child(n), :nth-last-child(n), :nth-of-type(n), :nth-last-of-type(n) |
|
|
|
