Jquery Tips and Tricks

Attribute selectors in Jquery

We access page elements using Class and Id selectors most of the times but at times we need to fetch elements like,
access all elements where class name starts with 'form-controls' or class name contains 'form-controls'

$('[class^=form-controls]') // class name Begins with "form-controls"
$('[class*=form-controls]') // class name Contains "form-controls"
$('[class$=form-controls]') // class name Ends with "form-controls"

Add new class to existing elements
.addClass(className)
This will add specified class(es) to the element. This will not replace the existing class(es), rather it will append new class to the existing ones.

$( "table" ).addClass( "datatable stripped" );
This will add "datatable" and "stripped" class to all tables

Common mistake while using addClass

$('#pdOrder').addClass('.datatable'); //This is wrong. Observe "." while adding class "datatable", there is absolutely no need to add "."
Correct way : $('#pdOrder').addClass('datatable');