jQuery

What is :lt(n) selector in jQuery ?

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

How to select all checkboxes that are in checked state using jQuery ?

$('input[type=checkbox][checked]')

What is :button selector in jQuery ?

Selects only button elements (input[type=submit], input[type=reset], input[type=button], or button).

What is :contains(foo) in jQuery ?

Selects only elements containing the text foo.

What is :file in jQuery ?

Selects only file input elements (input[type=file]).

What is :hidden in jQuery ?

Selects only elements that are hidden.

What is size() method ?

Returns the count of elements in the wrapped set. It takes no parameter.

What is get() method ?

Obtains one or all of the matched elements in the wrapped set. If no parameter is specified, all elements in the wrapped set are returned in a JavaScript array. If an index parameter is provided, the indexed element is returned.

It takes the index of the single element to return. If omitted, the entire set is returned in an array.

For example, to obtain the first element in the set of all <img> elements with an alt attribute on the page, we could write

$('img[alt]').get(0)

For example, .get(-1) will retrieve the last element in the wrapped set, .get(-2) the second to last, and so on.

What is eq() method ?

Obtains the indexed element in the wrapped set and returns a new wrapped set containing just that element.

It takes the index of the single element to return. As with get(), a negative index can be specified to index from the end of the set.

What is first() method ?

Obtains the first element in the wrapped set and returns a new wrapped set containing just that element. If the original set is empty, so is the returned set.

It does not take any parameter.

What is last() method ?

Obtains the last element in the wrapped set and returns a new wrapped set containing just that element. If the original set is empty, so is the returned set.

It does not take any parameter.

What is toArray() method ?

Returns the elements in the wrapped set as an array of DOM elements.

It does not take any parameter.

Consider the below example:

var allLabeledButtons = $('label+button').toArray();

This statement collects all the <button> elements on the page that are immediately preceded by <label> elements into a jQuery wrapper, and then creates a JavaScript array of those elements to assign to the allLabeledButtons variable.

What is index() method ?

Finds the passed element in the wrapped set and returns its ordinal index within the set, or finds the ordinal index of the first element of the wrapped set within its siblings. If the element is not found, the value -1 is returned.

It takes a reference to the element whose ordinal value is to be determined, or a selector that identifies the element. If omitted, the first element of the wrapped set is located within its list of siblings.

We can shorten $(‘img’).index($(‘img#findMe’)[0]) to $(‘img’).index(‘img#findMe’).

How to check whether <td/> contains numeric values only using jQuery ?

$('td').filter(function(){
    return this.innerHTML.match(/^\d+$/)
});

What does slice() method do ?

Creates and returns a new wrapped set containing a contiguous portion of the matched set.

It takes two parameters

begin – The zero-based position of the first element to be included in the returned slice.

end – The optional zero-based index of the first element not to be included in the returned slice, or one position beyond the last element to be included. If omitted, the slice extends to the end of the set.

For example, to obtain the third element, we could write

$('*').slice(2,3);

How to check a div element contains an image that has alt attribute ?

$('div').has('img[alt]');

What is map() method ?

Invokes the callback function for each element in the wrapped set, and collects the returned values into a jQuery object instance.

For example, the following code will collect all id values on the page into an array:

var allIds = $('div').map(function(){
    return (this.id==undefined) ? null : this.id;
}).get();

What is each() method ?

Traverses all elements in the matched set, invoking the passed iterator function for each.

For example, the below statement will invoke the passed function for each div element on the page, modifying its id value.

$('div').each(function(n){
    this.id='This is div[' + n + '] with an id of ' + this.id;
});

The each() method will also iterate over arrays of JavaScript objects and even individual objects.

$([1,2,3]).each(function(){
    alert(this);
});

What is is() method ?

Determines if any element in the wrapped set matches the passed selector expression.

For example,

$('*').is('img');

The above statement sets the value to true if the current DOM has an image element.

How to fetch attribute value using jQuery ?

<div id="myDiv" class="divClass" data-attr="some value"/>

We can retrieve that attribute’s value, as if it were any of the standard attributes, with

$("#myDiv").attr("data-attr");

How to set an attribute’s value using jQuery ?

$('*').attr('title', 'This is an updated value');

What is attr() method ?

Uses the properties and values specified by the passed object to set corresponding attributes onto all elements of the matched set.

It takes one parameter

attributes – An object whose properties are copied as attributes to all elements in the wrapped set.

For example,

$('input').attr(
    { value: '', title: 'Please enter a value' }
);

This statement sets the value of all <input/> elements to the empty string, and sets the title to the string “Please enter a value”.

What is adding or removing class name using jQuery ?

The class attribute of DOM elements is unique in its format and semantics and is crucially important to the creation of interactive interfaces. The addition using addClass() of class names to and removal using removeClass() of class names from an element are the primary means by which their stylistic rendering can be modified dynamically.

What is toggleClass() method ?

Often, we may want to switch a set of styles back and forth, perhaps to indicate a change between two states or for any other reasons that make sense with our interface. jQuery makes this easy with the toggleClass() method.

What is css() method ?

Sets the CSS properties specified as keys in the passed object to their associated values for all matched elements.

Parameters

properties – Specifies an object whose properties are copied as CSS properties to all elements in the wrapped set.

For example,

$('<img>',{
    src: 'macos.png',
    alt: 'Mac OS',
    title:'Mac Operating System',
    click: function(){
        alert($(this).attr('title'));
    }
})
.css({
    cursor: 'pointer',
    border: '1px solid black',
    padding: '12px 12px 20px 12px',
    backgroundColor: 'white'
});

What are width() and height() methods ?

width() method is used either to set or get width of a particular element.

For example, to set width

$("div.myElements").width(500);

or

$("div.myElements").css("width",500);

to get width

$('div#testSubject').width();

height() method is used either to set or get height of a particular element.

For example, to set height

$("div.myElements").height(300);

or

$("div.myElements").css("height",300);

to get height

$('div#testSubject').height();

List all event names

blur
change
click
dblclick
error
focus
focusin
focusout
keydown
keypress
keyup
load
mousedown
mousenter
mouseleave
mousemove
mouseout
mouseover
resize
scroll
select
submit
unload

What are the main disadvantages of using innerHTML in JavaScript?

  • Content is replaced everywhere
  • You cannot use like “appending to innerHTML”
  • Even if you use +=like “innerHTML = innerHTML + ‘html'” still the old content is replaced by html
  • The entire innerHTML content is re-parsed and build into elements, therefore its much slower
  • The innerHTML does not provide validation and therefore we can potentially insert valid and broken HTML in the document and break it

How does prototype chain work?

All JavaScript objects inherit properties and methods from a prototype. Date objects inherit from Date.prototype Array objects inherit from Array.prototype Person objects inherit from Person.prototype.