Create your own awesome maps

Even on the go

with our free apps for iPhone, iPad and Android

Get Started

Already have an account?
Log In

jQuery by Mind Map: jQuery
5.0 stars - 2 reviews range from 0 to 5

jQuery

Selectors

$

Alias for jQuery object

$(document) - document

$(this) - this element

windows params and methods are accessible by default

$("tagName") - assess specific element like anchor

$('body')

Implementation, var jQuery = window.jQuery = window.$ = function(selector, context)

Adds inner HTML content, see 'working with DOM'

Custom selectors

Array-like working with selected els, :eq, $('div.horizontal:eq(1)'), Gets 2nd element, :even, :odd

.Contains(pattern), $('td:contains(Henry)')

Form selectors, :input, :button, :enabled, :disabled, :checked, :selected

Selector functions, filter(function)

Chaining, parent() method

Work with selected elements like with array

$('#my-element')[0], Uset to be: .get(0)

Patterns

Module/plugin organization

(function($){ ... })(jQuery);, We create a function closure with arg, We pass jQuery as an argument to function closure

Adding event handlers to selected items

blur

change

click

hover

resize

...

Working with CSS

$(elem).css(key,value)

Working with DOM

$(elem).attr(attrMap)

$(document).ready(function() { $('div.chapter a').attr({ rel: 'external', title: 'Learn more at Wikipedia' }); });

Getting property values

$(elem).prop(propName)

Add inner HTML content

$('<a href="#top">back to top</a>');

wrap

Wraps selected elements with given HTML, .wrap('<li></li>');

clone

Replace

replaceWith

html, Set inner html content of element

AJAX

load(href)

$('#dictionary').load('a.html');

.ajaxStart

called when AJAX is started

.ajaxStop

$.ajax({ url: 'a.html', success: function(data) { $('#dictionary').html(data); } });

.ajaxSetup

TO init parameters (minimize further code)

Util methods

JSON

$.getJSON(fileName, function(data));

XML

$.get(xmlName, function(data));

JS

$.getScript(scriptName)

HTTP

GET request, $.get('e.php', requestData, function(data)

POST request, $.post('e.php', requestData, function(data)

Deferred binding

$(document).ready(function)