WHAT ARE JQUERY SELECTORS
JQuery selectors use css selectors to identify the elements of the document to be operated with the JQuery function. There are three types of JQuery selectors:
- Basic JQuery selector
- Postitional JQuery selector
- Custom JQuery selector
hide()
It only sets the display propery of the matched elements to none, all the events, properties, elemetnts and classes remain intact in DOM.
hide() Syntax
$(selector).hide(speed, callback);
detach()
detach() method removes all the child and child nodes from the selected elements, but keeps event handlers and data stored which can be reinserted when needed later in the application.
detach() syntax
$(selector).detach();
In order to re-insert a detached element into the DOM, write the returned jQuery set like below from detach() method.
var detachedelment = $('div').detach();
detachedelment.appendTo('body');
Remove()
This method completely removes the selected element from DOM, including all its texts, classes and events associated with the removed elements. With remove() method, elements data can be restored but not its event handlers as it removes all events and event handlers from DOM.
Remove() syntax
$(selector).remove();
________________________________________________________________________
filter() and find() functions
filter() and find() are two different methods in jQuery almost similar but behave differently.
filter() method is used for all the elements while find() method is used for child elements only.
The find() and children() methods are similar in jQuery.
Example: Copy past the code below in your editor and check the code on browser.
<html>
<head>
<script src="jquery-1.3.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#filterbutton").click(function () {
$('div').css('background','white');
$('div').filter('#country').css('background','green');
});
$("#findbutton").click(function () {
$('div').css('background','white');
$('div').find('#country').css('background','green');
});
});
</script>
</head>
<body>
<div id="country"> country
<div id="Germany">Germany</div>
<div id="Hungry">Hungry</div>
</div>
<div id="listing"> listing
<div id="country">India</div>
<div id="usa">USA</div>
</div>
<br/>
<input id="filterbutton" type="button" />
<input id="findbutton" type="button" />
</body>
</html>
In this example, filterbutton which is assigned filter() method will filter the DOM an gives the result after it get the id "country" like in this case two, while, findbutton which is assigned find() method will give the result if it gets the id "country" as child like in this case only one
No comments:
Post a Comment