jQuery

Articles
Deffered
Event
Custom Event
Cookie
Plugins
Plugin Development
Performance
Custom Queue
AJAX
Validation
jQuery UI

http://www.w3schools.com/jquery/jquery_ref_selectors.asp - done reading
https://api.jquery.com/category/selectors/
http://codylindley.com/jqueryselectors/ - done reading
https://dzone.com/refcardz/jquery-selectors
https://api.jqueryui.com/data-selector/
http://learn.jquery.com/

<script type="text/javascript" charset="utf8" src="/srm/js/jquery-1.10.2.min.js"></script>

How can we check a checkbox?

jQuery('input.apInput[value=' + value + ']').prop('checked',true);

How can we select all the check boxes that are checked?

jQuery('#nearmissVersusActualCon input[type=checkbox]:checked')

How can we select a particular option from a select box?

$('.selDiv option:eq(1)').prop('selected', true);

How can we do event delegation?

jQuery("body").on( "click", '.apInputQuickSelect', function(){});

What are various ways to select elements?

$("*")
$("#id")
$('.className')
$('tagName')
$('tagName.className');
$('selector1, selector2, selector3, ...');
$(this); // Takes a DOM element and turn it into a wrapped set
$("div > p"); // selects all <p> elements that are a direct child of a <div> element
$("div p"); // selects all <p> elements that are descendants of a <div> element
$("div + p"); // selects all <p> element that are next (sibling) to each <div> elements in the forward (next) order
$("div ~ p"); // selects all <p> elements that are siblings of a <div> element in any order

$(":contains('Hello')"); // selects elements which contains the text "Hello"
$("p:contains(coffee)") selects all <p> elements that contain the text coffee

$("input:not(:empty)"); // selects all input elements that are not empty
$(":focus"); // selects the element that currently has focus
$(":input"); // selects all input elements
$(":text"); // selects all input elements with type="text"
$(":password"); // selects all input elements with type="password"
$(":radio"); // selects all input elements with type="radio"
$(":checkbox"); // selects all input elements with type="checkbox"
$(":submit"); // selects all input elements with type="submit"
$(":reset"); // selects all input elements with type="reset"
$(":button"); // selects all input elements with type="button"
$(":image"); // selects all input elements with type="image"
$(":file"); // selects all input elements with type="file"
$(":enabled"); // selects all enabled input elements
$(":disabled"); // selects all disabled input elements
$(":selected"); // selects all selected input elements
$(":checked"); // selects all checked input elements
$("option:not(:selected)") selects all unselected <option> elements
$("#myForm button:not(.someClass)") selects all buttons from the <form> with the id of myForm that do not possess the class name someClass.
$("select[name=choices] :selected") selects the selected <option> elements within the <select> element named choices.

$("[href]"); // selects all elements that have the href attribute
$("[href='default.htm']"); // selects all elements with a href attribute value equal to "default.htm"
$("[href!='default.htm']"); // selects all elements with a href attribute value not equal to "default.htm"
$("[href$='.jpg']"); // selects all elements with a href attribute value ending with ".jpg"
$("[title|='Tomorrow']"); // selects all elements with a title attribute value equal to 'Tomorrow', or starting with 'Tomorrow' followed by a hyphen
$("[title^='Tom']"); // selects all elements with a title attribute value starting with "Tom"
$("[title~='hello']"); // selects all elements with a title attribute value containing the specific word "hello"
$("[title*='hello']"); // All elements with a title attribute value containing the word "hello"

$("div:has(p)"); // selects all <div> elements that have a <p> element
$(":empty"); // selects all elements that are empty
$(":parent"); // selects all elements that are a parent of another element
$("p:hidden"); // selects all hidden <p> elements
$("table:visible"); // selects all visible tables
$(":root"); // selects the document's root element
$("p:lang(de)"); // selects all <p> elements with a lang attribute value starting with "de"

$("p:first"); // Select the first p
$("p:last"); // Select the last p
$("tr:even"); // selects all even tr elements
$("tr:odd"); // selects all odd tr elements
$("a:only-child") selects all <a> elements that are the only element within their parent
$("p:only-child"); // selects all p elements that are the only child of their parent

$("p:first-child"); // selects all p elements that are the first child of their parent
$("li:first-child") selects all <li> elements that are first children within their lists

$("p:first-of-type"); // selects all p elements that are the first <p> element of their parent (may not be the first child)
$("p:last-child"); // selects all p elements that are the last child of their parent
$("p:last-of-type"); // select all p elements that are the last <p> element of their parent

$("p:nth-child(2)"); // selects all p elements that are the 2nd child of their parent
$("p:nth-child(odd|even)"); // selects all p elements that are odd / even child of their parents
$("p:nth-child(Xn+Y)"); // selects all p elements that are
$("li:nth-child(2)") selects all <li> elements that are the second item within their lists
$("tr:nth-child(odd)") selects all odd <tr> elements within a table
$("div:nth-child(5n)") selects every 5th <div> element
$("div:nth-child(5n+1)") selects the element after every 5th <div> element

$("p:nth-last-child(2)"); // selects all p elements that are the 2nd child of their parent, counting from the last child
$("p:nth-of-type(2)"); // selects all p elements that are the 2nd <p> element of their parent
$("p:nth-last-of-type(2)"); // selects all p elements that are the 2nd <p> element of their parent, counting from the last child

$(".someClass:eq(1)") selects the second element with a class name of someClass
$("ul li:eq(3)"); // selects all fourth element in a list (index starts at 0)

$(".someClass:gt(1)") selects all but the first two elements with a class name of someClass
$("ul li:gt(3)"); // selects all li elements with an index greater than 3

$(".someClass:lt(4)") selects the first four elements with a class name of someClass
$("ul li:lt(3)"); // selects all li elements with an index less than 3

$("p:only-of-type"); //selects all p elements that are the only child, of its type, of their parent

$(":header"); // selects all header elements <h1>, <h2> ...

$(":animated"); // selects all animated elements

Note that the :nth-child selectors begin counting at 1, while the :eq, :gt and :lt selectors begin with 0.

A filter selector is any selector beginning with colon (:)

How can we check the version of jQuery?

$().jquery;
jQuery.fn.jquery;

How can we run a function when the DOM is ready?

$(document).ready(function() { ... });

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

How can we map $ to jQuery?

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

This is if you have some other library loaded and you want to use $ as jQuery in the body of your function.

How can we obtain the raw DOM element?

jQuery('#id').get(0)

How can we append raw HTML to an existing element?

jQuery(html).appendTo(existingElementSelector);

How can we create a jQuery collection from a string?

jQuery can create a collection from a string. You can do anything with this collection just as you would do with any jQuery collection before inserting into the DOM.

Central to jQuery's DOM capabilities, is its element creation syntax. jQuery 1.4 brought with it an entirely new way to create your elements quickly and succinctly:

var myDiv = jQuery('<div/>', {
    id: 'my-new-element',
    class: 'foo',
    css: {
        color: 'red',
        backgrondColor: '#FFF',
        border: '1px solid #CCC'
    },
    click: function() {
        alert('Clicked!');
    },
    html: jQuery('<a/>', {
        href: '#',
        click: function() {
            // do something
            return false;
        }
    })
});

As of 1.4 you can pass a second argument to the jQuery function when you're creating an element — the object you pass will, for the most part, act as if you were passing it to '.attr(…)'. However, jQuery will map some of the properties to its own methods, for example, the 'click' property maps to jQuery's 'click' method (which binds an event handler for the 'click' event) and 'css' maps to jQuery's 'css' method etc.

All methods that appear to mutate the collection in some way return a brand new jQuery object — you can still access the old object though, via '.end()', or more verbosely, via '.prevObject'.

How can we obtain the selector that was used to query the DOM?

var jq = jQuery('...');
var selector = jq.selector;

var jqObject = jQuery('a');
jqObject.selector; // => "a"

How can we use event delegation?

function doSomething(ev) {
    ...
    ev.preventDefault();
    console.log( $( this ).text() );
}
jQuery("body").on( "click", "#addNewUserCancel", doSomething);

How can we write a custom utility function?

Utility functions are defined as properties of jQuery (and therefore $). These functions are not intended to operate on DOM elements. That is the job of methods defined to operate on a wrapped set. Utility functions are to either operate on a non-element JavaScript object or perform some other nonobject-specific operation. Examples: $.each(), and $.noConflict().

Adding a utility function to jQuery is as easy as declaring the function and assigning it to the object's property. So creating a custom utility function should be as easy as:

(function($){
    $.say = function(what) {
        alert('I say ' + what);
    }
})(jQuery);

jQuery methods:

.height(). Get or set the current computed height for the first element in the set of matched elements or set the height of every matched element.

.innerHeight(). Get the current computed inner height (including padding but not border) for the first element in the set of matched elements or set the inner height of every matched element.

.innerWidth(). Get the current computed inner width (including padding but not border) for the first element in the set of matched elements or set the inner width of every matched element.

.outerHeight(). Get the current computed height for the first element in the set of matched elements, including padding, border, and optionally margin. Returns a number (without “px”) representation of the value or null if called on an empty set of elements.

.outerWidth(). Get the current computed width for the first element in the set of matched elements, including padding and border.

.width(). Get the current computed width for the first element in the set of matched elements or set the width of every matched element.

jQuery.contains( container, contained ): Check to see if a DOM element is a descendant of another DOM element. The $.contains() method returns true if the DOM element provided by the second argument is a descendant of the DOM element provided by the first argument, whether it is a direct child or nested more deeply. Otherwise, it returns false. Only element nodes are supported; if the second argument is a text or comment node, $.contains() will return false.

$.contains( document.documentElement, document.body ); // true
$.contains( document.body, document.documentElement ); // false
Unless otherwise stated, the content of this page is licensed under Creative Commons Attribution-ShareAlike 3.0 License