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 :$();
Jquery Identifier :$();
Anonymous function
$(function (){
});
Simple selectors
$('.classname') : Selects all element within a class
$('<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/
No comments:
Post a Comment