Friday, August 7, 2015

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
finds the first item in the list
The selection would fetch  Ana

Find all the external link in a web page
 var ExternalRef=  $('<a href ^="http://">');

 ex: <a href="">
      <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


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

No comments:

Post a Comment