javascript

[Jquery] Using jquery functions

Jquery CSS functions

  • addClass(‘myClass’) Adds the specified class name to the class attribute of selected elements
  • hasClass(‘myClass’) Returns true if any of the selected elements have been assigned the specified class
  • removeClass(‘myClass’) Removes the specified class name from the class attribute of selected elements
  • toggleClass(‘myClass’) Adds the specified class if it isn’t present and removes it otherwise
  • css(‘property’, ‘value’) Adds the specified property and value to the style attribute of selected elements
  • css(‘property’) Returns the value of the specific property from the first matched element

Example:

/// <reference path="jquery-1.8.2.js" />
$(document).ready(function () {
    $('td').addClass("highlight").css("color", "blue");
});

Chaining jquery functions call together. This will matches all td elements, add class “highlight” and set css value to blue for color property.

Using the DOM navigation functions

  • children() Gets the children of the selected elements
  • closest(‘selector’) Navigates through the ancestors of each of the selected elements to find the first instance of an element that matches the specified selector
  • filter(‘selector’) Reduces the selected elements to those that match the specified selector
  • first(‘selector’) Navigates through the descendants of the selected elements and locates all those elements that match the specified selector
  • next() Gets the sibling elements that immediately follow the selected elements
  • prev() Gets the sibling elements that immediately precede the selected elements
  • parent() Returns the immediate parent of the selected elements
  • siblings() Returns the siblings of the selected elements

Example:

/// <reference path="jquery-1.8.2.js" />
$(document).ready(function () {
    $('table').find("td[class]").parent().filter(":odd").addClass("highlight");
});

In this example, we select the table element and then find all of the descendant td elements that have a class attribute. We use the odd filter to select only the odd numbered elements we selected and call the addClass function to apply our CSS class.

Using DOM manipulation functions

  • before(‘new’)after(‘new’) Inserts the element new either before or after the selected elements 
  • insertBefore()insertAfter() As for before and after, but the order of the new element and the selector is reversed, and these functions return the newly created elements
  • prepend(‘new’)append(‘new’) Inserts the element new inside of the selected elements, either as the first or last child
  • prependTo()appendTo() As for prepend and append, but the order of the new element and the selector is reversed, and these functions return the newly created elements
  • empty() Removes all children from the selected elements
  • remove() Removes the selected elements from the DOM
  • attr(‘name’, ‘val’) Sets the attribute name to value val on the selected elements; will create the attribute if it doesn’t already exist
  • removeAttr(‘name’) Removes the attribute name from the selected elements

Example:

/// <reference path="jquery-1.8.2.js" />
$(document).ready(function () {
    $('tr').prepend("<td></td>");
    $('<input name="delete" type="radio"/>').prependTo('tbody td:first-child')
        .first().attr("checked", true);
});

We have used the DOM manipulation functions to add a new column to the table element, allowing the user to select one of the rows with a radio button.

There are two jQuery statements in this example. The first one selects all of the tr elements in the document and inserts an empty td element as the first child for each of them using the prepend function.

The second statement uses the prependTo function to insert a new radio button into the td elements that are the first children of their parents and that are descendants of a tbody element—this is, a subset of the td elements that we just created excluding the one we added in the table header.

The result of the prependTo function is the set of elements that have been added to the document. We use this fact to call the first function (which, when used without a selector, matches the first element in the collection, irrespective of what it is) and then the attr function to set the checked attribute to true.

The result is that we add a new column of td elements throughout the table and insert radio buttons in those new cells that are in the table body, ensuring that the first radio button is checked

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s