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

1. Selectors

1.1. $

1.1.1. Alias for jQuery object

1.1.2. $(document) - document

1.1.3. $(this) - this element

1.1.4. windows params and methods are accessible by default

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

1.1.6. $('body')

1.1.7. Implementation

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

1.1.8. Adds inner HTML content

1.1.8.1. see 'working with DOM'

1.2. Custom selectors

1.2.1. Array-like working with selected els

1.2.1.1. :eq

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

1.2.1.2. :even

1.2.1.3. :odd

1.2.2. .Contains(pattern)

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

1.2.3. Form selectors

1.2.3.1. :input

1.2.3.2. :button

1.2.3.3. :enabled

1.2.3.4. :disabled

1.2.3.5. :checked

1.2.3.6. :selected

1.2.4. Selector functions

1.2.4.1. filter(function)

1.2.5. Chaining

1.2.5.1. parent() method

1.3. Work with selected elements like with array

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

1.3.1.1. Uset to be: .get(0)

2. Patterns

2.1. Module/plugin organization

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

2.1.1.1. We create a function closure with arg

2.1.1.2. We pass jQuery as an argument to function closure

3. Adding event handlers to selected items

3.1. blur

3.2. change

3.3. click

3.4. hover

3.5. resize

3.6. ...

4. Working with CSS

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

5. Working with DOM

5.1. $(elem).attr(attrMap)

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

5.2. Getting property values

5.2.1. $(elem).prop(propName)

5.3. Add inner HTML content

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

5.4. wrap

5.4.1. Wraps selected elements with given HTML

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

5.5. clone

5.6. Replace

5.6.1. replaceWith

5.6.2. html

5.6.2.1. Set inner html content of element

6. AJAX

6.1. load(href)

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

6.2. .ajaxStart

6.2.1. called when AJAX is started

6.3. .ajaxStop

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

6.5. .ajaxSetup

6.5.1. TO init parameters (minimize further code)

7. Util methods

7.1. JSON

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

7.2. XML

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

7.3. JS

7.3.1. $.getScript(scriptName)

7.4. HTTP

7.4.1. GET request

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

7.4.2. POST request

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

8. Deferred binding

8.1. $(document).ready(function)