JQuery Selectors

                               

Today I would talking about Jquery selectors

Before the evolution of Jquery we would see less developers used to like javascript. Reason, it was difficult to learn and code was lengthy.However Jquery internally uses javascript

Main advantage of using Jquery

• Runs across all browsers
• Lean and clean
• Simple powerful syntax
• Highly exentesible
• Ajax support
• Uses Css selectors

Note: Based on my knowledge the libary has atleast 19 pages of code.

Important syntax
Jquery Identifier  :$();

Anonymous function

$(function (){

});

Simple selectors
$('.classname') : Selects all element within a class

$('.#spaceId')   : Selects all element within a Id
$('<div>')         : Selects all 'Div' element

psuedo code selection

$('div:first-child');

finds the first item in the list

 1.Ana

 2.Beena

The selection would fetch  Ana

Find all the external link in a web page

 var ExternalRef=  $('<a href ^="http://">');

 ex: <a href="http://KudupuTechnologies.com">

      <a href ="~/home">

 it would only fetch the anchor tag which has "http:"

Find Array of buttons

var buttons=$('button');

Write dynamic literals

var div =$('<Div>This is a Div</Div>');

Add an Array

var elements=$('<span>One</span','<span>Two</span>');

Access raw DOM elements

var detail =$(document.getElementId('house-detail');

It would fetch all the DOM elements with id "house-detail"

Find the title in specific page

var detail =$([document.querySelector('h2'),document.querySelector('h3')]);

Find specific element within a specific column

var primary = $(.col-sm-5").find(' button[class*="btn-search"] ');

It would fetch a button with class name "btn search" within the column.

Get the parent

var parents =$('tbody').parents();

Goes all the way upto find a parent

Find specific parent
var specficParent=$('tbody').parents('table');
Goes all the way till it finds "table"

Find specific children
var children =$('tbody').children();

Find specific td value in a table
var tdArray=$("td:contains('Myvalue')");

Hide a Bootstrap Modal using Jquery

("#Id").modal('hide');

I have listed selectors which I feel is helpful .we would have ended up writing lengthy JavaScript code for the same functionality.
For more Jquery selectors please refer http://api.jquery.com/category/selectors/