Get Started. It's Free
or sign up with your email address
jQuery by Mind Map: jQuery

1. Patterns

1.1. Module/plugin organization

1.1.1. (function($){ ... })(jQuery);

1.1.1.1. We create a function closure with arg

1.1.1.2. We pass jQuery as an argument to function closure

2. AJAX

2.1. load(href)

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

2.2. .ajaxStart

2.2.1. called when AJAX is started

2.3. .ajaxStop

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

2.5. .ajaxSetup

2.5.1. TO init parameters (minimize further code)

3. Util methods

3.1. JSON

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

3.2. XML

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

3.3. JS

3.3.1. $.getScript(scriptName)

3.4. HTTP

3.4.1. GET request

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

3.4.2. POST request

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

4. Deferred binding

4.1. $(document).ready(function)

5. Selectors

5.1. $

5.1.1. Alias for jQuery object

5.1.2. $(document) - document

5.1.3. $(this) - this element

5.1.4. windows params and methods are accessible by default

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

5.1.6. $('body')

5.1.7. Implementation

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

5.1.8. Adds inner HTML content

5.1.8.1. see 'working with DOM'

5.2. Custom selectors

5.2.1. Array-like working with selected els

5.2.1.1. :eq

5.2.1.1.1. $('div.horizontal:eq(1)')

5.2.1.2. :even

5.2.1.3. :odd

5.2.2. .Contains(pattern)

5.2.2.1. $('td:contains(Henry)')

5.2.3. Form selectors

5.2.3.1. :input

5.2.3.2. :button

5.2.3.3. :enabled

5.2.3.4. :disabled

5.2.3.5. :checked

5.2.3.6. :selected

5.2.4. Selector functions

5.2.4.1. filter(function)

5.2.5. Chaining

5.2.5.1. parent() method

5.3. Work with selected elements like with array

5.3.1. $('#my-element')[0]

5.3.1.1. Uset to be: .get(0)

6. Adding event handlers to selected items

6.1. blur

6.2. change

6.3. click

6.4. hover

6.5. resize

6.6. ...

7. Working with CSS

7.1. $(elem).css(key,value)

8. Working with DOM

8.1. $(elem).attr(attrMap)

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

8.2. Getting property values

8.2.1. $(elem).prop(propName)

8.3. Add inner HTML content

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

8.4. wrap

8.4.1. Wraps selected elements with given HTML

8.4.1.1. .wrap('<li></li>');

8.5. clone

8.6. Replace

8.6.1. replaceWith

8.6.2. html

8.6.2.1. Set inner html content of element