jQuery

What is Unobtrusive JavaScript ?

Ideally, an HTML page should be structured with structure, style, and behavior each partitioned nicely in its own niche. It is desirable to segregate style from structure within an HTML document, it is just as beneficial (if not more so) to separate the behavior from the structure. This strategy, known as Unobtrusive JavaScript, was brought into the limelight by the inventors of jQuery and is now embraced by every major JavaScript library.

Why jQuery ?

jQuery focuses on retrieving elements from HTML pages and performing operations upon them.

We are already well aware of the power of selectors, which describe groups of elements by their type, attributes, or placement within the document. With jQuery, we can work with selectors to vastly simplify our JavaScript.

jQuery places a high priority on ensuring that code will work consistently across all major browsers; many of the more difficult JavaScript problems, such as waiting until the page is loaded before performing page operations, have been silently solved for us.

jQuery has a simple but powerful built-in method for extending its functionality via plugins.

What is selector in jQuery ?

Selector is used to select an element from HTML page. To collect a group of elements, we pass the selector to the jQuery function using the simple syntax $(selector) or jQuery(selector).

How to select all links inside paragraph using jQuery ?

$("p a")

What is $() or jQuery() function in jQuery ?

The $() function (an alias for the jQuery() function) returns a special JavaScript object containing an array of the DOM elements, in the order in which they are defined within the document, that match the selector. This object possesses a large number of useful predefined methods that can act on the collected group of elements. This type of construct is termed a wrapper because it wraps the collected elements with extended functionality.

How to hide all div elements which have a class hide ?

$("div.hide").hide()

How to replace the content for a DOM element using jQuery ?

Suppose we have an ID value “content” whose content to be replaced by another text, say for example, “I have replaced the original text by some text to this element”.

$("#content").html("I have replaced the original text by some text to this element");

How to write the same text to multiple same elements using jQuery ?

Suppose we have div elements with a class “fillIn”. Then we can write a text string “I have added some text” to all div elements which are having class “fillIn”.

$("div.fillIn").html("I have added some text");

How to select all even paragraph elements using jQuery ?

$("p:even")

How to select the first row of the table using jQuery ?

$("tr:nth-child(1)")

How to select direct div element inside body using jQuery ?

$("body > div")

How to select links to doc file using jQuery ?

$("a[href$= 'doc']")

How to select direct div element that contains links ?

$("body > div:has(a)")

What $ or jQuery in jQuery ?

$ or jQuery is an identifier or namespace used to access built-in functions available in jQuery.

How to remove spaces from a string using jQuery ?

var someStringVariable = "  Hello, World!    ";
var trimmedString = $.trim(someStringVariable) or jQuery.trim(someStringVariable);

What is document.ready in jQuery ?

We need a way to wait until the DOM elements of the page are fully realized before we want to execute any operation on DOM elements. Therefore, we need document.ready that causes the defined code to execute after the document has fully loaded.

The formal syntax to define such code is as follows:

jQuery(document).ready(function() {
     $("div.hide").hide(); //hide div elements having class "hide"
});

First, we wrap the document instance with the jQuery() function, and then we apply the ready() method, passing a function to be executed when the document is ready to be manipulated. A shorthand form, used much more frequently, is as follows:

jQuery(function() {
      $("div.hide").hide(); //hide div elements having class "hide"
});

or

$(function() {
     $("div.hide").hide(); //hide div elements having class "hide"
});

How to insert text after an element using jQuery ?

Suppose there is a paragraph element and after this paragraph we want to insert some text

<p id="follow">Follow this paragraph</p>

Use the below code to inset text after the above paragraph

$(function(){
       $("<p>The above paragraph is followed!</p>").insertAfter("#follow");
});

How to extend jQuery and use it to work with jQuery ?

To disable a particular form element we write the below disable function

$.fn.disable = function() {
   return this.each(function() {
       if (this.disabled == null) this.disabled = true;
   });
}

$.fn.disable means that we are extending the $ wrapper with a method named disable. Inside that function, the this keyword is the collection of wrapped DOM elements that are to be operated upon.

The each() method of this wrapper is called to iterate over each element in the wrapped collection.

For each element, we check whether the element has a disabled attribute, and if it does, we set it to true. We return the result of the each() method so that our new disable() method will support chaining, like many of the native jQuery methods.

Now we will write

$("form#registerForm input.dateofbirth").disable().addClass("dateofbirthDisable");

How to use remove conflict when jQuery is used with other library ?

This situation could come about when we are transitioning an application from a previously employed library to jQuery, or we might want to use both jQuery and another library on our pages.

The thoughtful jQuery authors have provided a means to remove this conflict with a utility function appropriately named noConflict().

What is $(“a”) in jQuery ?

Select all that matches all anchor (<a>) elements.

What is $(“#specialID”) in jQuery ?

Select all that matches the element with the id value of specialID.

What is $(“.specialClass”) in jQuery ?

Select all that matches all elements with the class specialClass.

What is $(“a#specialID.specialClass”) in jQuery ?

Select all that matches the element with the id value specialID if it is an anchor tag and has class specialClass.

What is $(“p a.specialClass”) in jQuery ?

Select all that matches all anchor elements with the class specialClass that are descendants of <p> elements.

How to select multiple selectors using jQuery ?

To select all <div> and all <span> elements, we could do this: $(‘div,span’).

What is child selector in jQuery ?

A child selector is a selector in which a parent and its direct child are separated by the right angle bracket character (>).

For example, p > a

This selector matches only links that are direct children of a <p> element. If a link were further embedded, say within a <span> within the <p>, that link would not be selected.

ul.myList > li > a

This selector selects only links that are direct children of list elements, which are in turn direct children of <ul> elements that have the class myList. The links contained in the sublists are excluded because the <ul> elements serving as the parent of the sublists’ <li> elements do not have the class myList.

What is an attribute selector in jQuery ?

Using attribute selector we want to select only attributes of an element.

For example, we could select links that have an href value starting with http:// with the following selector:

a[href^='http://']

This matches all links with an href value beginning with the exact string http://. The caret character (^) is used to specify that the match is to occur at the beginning of a value.

To match an element that possesses a specific attribute, regardless of its value, we can use

form[method]

This matches any <form> element that has an explicit method attribute.

To match a specific attribute value, we use something like

input[type='text']

This selector matches all input elements with a type of text.

div[title^='my']

This selects all <div> elements with a title attribute whose value begins with my.

a[href*='jquery.com']

This selector matches all <a> elements that reference the jQuery site.

What is a:first in jQuery ?

This format of selector matches the first <a> element on the page.

How to pick every odd paragraph element using jQuery ?

$("p:odd")

What is $(“ul li:last-child”) in jQuery ?

It chooses the last child of parent elements. In this case, the last <li> child of each <ul> element is matched.

What is a:last in jQuery ?

This format of selector matches the last <a> element on the page.

What is $(“a:last-child”) in jquery ?

Select an element that matches the last child within the context. $(“a:last-child”) returns the last list item of each list.

What is $(“a:only-child”) in jquery ?

Returns all <a> elements that have no siblings.

What is :nth-child(n) selector in jquery ?

Select all that matches the nth child element within the context.

What is :nth-child(even|odd) selector in jQuery ?

Matches even or odd children within the context. li:nthchild(even) returns the even list items of each list. li:nthchild(odd) returns the odd list items of each list.

What is :nth-child(Xn+Y) selector in jQuery ?

Matches the nth child element computed by the supplied formula. If Y is 0, it may be omitted. li:nth-child(3n) returns every third list item, whereas li:nth-child(5n+1) returns the item after every fifth element.

What is :eq(n) selector in jQuery ?

Matches the nth matching element.

What is :gt(n) selector in jQuery ?

Select all that matches matching elements after and excluding the nth matching element.