Wednesday, 8 May 2013

Jquery Tutorial Part 4


.each()
These method is used to iterate over the selected DOM elements while each iteration callback function gets triggered and in that function using this keyword to get the current element, the begins with zero.

Syntax: $(selector).each('div');
Eg:
<body>
<script>
$(document).ready(function(){
$("#firstdiv > div").each(function(){
$(this).html($(this).html() + " jquery");});});
</script>
<div id="firstdiv" class="sample">
<div>Hello</div>
<div>Hai</div>
<div>Welcome</div>
</div>
</body>


.detach()
These method is like the remove method the only difference is keeps the stored data and events associated with the matched elements.

Syntax: $(selector).detach();
Eg:
<body>
<script>
$(document).ready(function(){
var span = $('span').detach();
span.appendTo('body');
});
</script>
<div id="firstdiv" class="sample">
<span name="jQuery"> Hello Jquery </span>
</div>
</body>

Live Example click here. Try Live Example.

.empty()
These method will remove the selected elements children and other descendant elements with in the selection. The difference between empty and remove is remove method remove the children element and also the selected element, but empty remove only its children element.

Syntax: $(selector).empty();
Eg:
<body>
<script>
$(document).ready(function(){
$('div').empty();
});
</script>
<div id="firstdiv" class="sample">
<span name="jQuery"> Hello Jquery </span>
</div>
</body>

Live Example click here. Try Live Example.

.insertAfter()
As given in the jquery documentation after() and insertAfter() are inverse of each other.

'after' inserts the argument after the selector.
'insertAfter' inserts the selector after the argument.
Try difference using Live Example below.

Syntax: $('content to insert').insertAfter('selector');
Eg:
<body>
<script>
$(document).ready(function(){
$('<h2>Hai</h2>').insertAfter("#firstdiv");
});
</script>
<div id="firstdiv" class="sample">
<div name="jQuery"> Hello Jquery </div>
</div>
</body>


.insertBefore()
before() and insertBefore() are inverse of each other.

'before' inserts the argument before the selector.
'insertBefore' inserts the selector before the argument.
Try difference using Live Example below.

Syntax: $('content to insert').insertBefore('selector');
Eg:
<body>
<script>
$(document).ready(functioOne
n(){
$('<h2>Hai</h2>').insertBefore("#firstdiv");
});
</script>
<div id="firstdiv" class="sample">
<div name="jQuery"> Hello Jquery </div>
</div>
</body>


.replaceWith()
These methods removes the content from the DOM element and inserts new content in its place.

Syntax: $(selector).replaceWith(“replaced element”);
Eg:
<body>
<script>
$(document).ready(function(){
$("#firstdiv").replaceWith("<h1>Replaced</h1>");
});
</script>
<div id="firstdiv" class="sample">
<div name="jQuery"> Hello Jquery </div>
</div>
</body>


.replaceAll()
replaceAll is same as the replaceWith but only difference is source and selector is inverted in syntax.

Syntax: $('replaced element').replaceWith(“selector”);
Eg:
<body>
<script>
$(document).ready(function(){
$("<h1>Replaced</h1>").replaceAll("#firstdiv");
});
</script>
<div id="firstdiv" class="sample">
<div name="jQuery"> Hello Jquery </div>
</div>
</body>


.toArray()
These method returns all the element in the jQuery set. All of the DOM elements are returned in a form of array

Syntax: $(selector).toArray();
Eg:
<body>
<script>
$(document).ready(function(){
alert($("#firstdiv > div").toArray());
});
</script>
<div id="firstdiv">
<div>Hello Jquery</div>
<div>Welcome to Tutorial</div>
<div>Hello World</div>
<div>Ends</div>
</div>
</body>


.reverse()
These method reverse the order of elements in the collections

Syntax: collections.index();
in here collections means the array of object.

Eg:
<body>
<script>
$(document).ready(function(){
$("#secondiv").html($("#firstdiv > div").toArray().reverse());
});
</script>
<div id="firstdiv">
<div>Hello Jquery</div>
<div>Welcome to Tutorial</div>
<div>Hello World</div>
<div>Ends</div>
</div>
<div id="secondiv" class="sample"></div>
</body>


.makeArray()
These methods returns the collections as a text, but toArray() returns the elements as an object.

Syntax: $.makeArray(selector);
Eg:
<body>
<script>
$(document).ready(function(){
alert($.makeArray($("#firstdiv").html()));
});
</script>
<div id="firstdiv">
<div>Hello Jquery</div>
<div>Welcome to Tutorial</div>
<div>Hello World</div>
<div>Ends</div>
</div>
</body>


.first()
first method is used to select the first element from the jquery collections. These are same equivalent to eq(0) function.

Note : How .first method is implement in jquery
first : function(){
return this.eq(0);
}

Syntax: $(selector).first();

Eg:
<body>
<script>
$(document).ready(function(){
alert($('#firstdiv > div').first().html());
});
</script>
<div id="firstdiv">
<div>Hello Jquery</div>
<div>Welcome to Tutorial</div>
<div>Hello World</div>
<div>Ends</div>
</div>
</body>


.last()
last method returns the last element from the jquery collections.

Syntax: $(selector).last();

Eg:
<body>
<script>
$(document).ready(function(){
alert($('#firstdiv > div').last().html());
});
</script>
<div id="firstdiv">
<div>Hello Jquery</div>
<div>Welcome to Tutorial</div>
<div>Hello World</div>
<div>Ends</div>
</div>
</body>


.has()
These method check for the given selection element present in the DOM element.


Syntax: $(selector).has(“selector”);

Eg:
<body>
<script>
$(document).ready(function(){
$(“#firstdiv”).has('.sample').addClass('foo');
});
</script>
<div id="firstdiv">
<div>Hello Jquery</div>
<div id='sample'>Welcome to Tutorial</div>
<div>Hello World</div>
<div>Ends</div>
</div>
</body>



.is()
These methods is not like other methods it does not create new jquery object instead of it you can test the content without modification.


Syntax: $(selector).is('element to be check');

Eg:
<body>
<script>
$(document).ready(function(){
$("#firstdiv > div").each(function(){
if ($(this).is("div")){
$(this).addClass("foo");
}
});
});
</script>
<div id="firstdiv">
<div>Hello Jquery</div>
<div id='sample'>Welcome to Tutorial</div>
<div>Hello World</div>
<div>Ends</div>
</div>
</body>


.not()
not method creates a new jquery object from a subset of matching element. The element that do not match the selector will included in the result

Syntax: $(selector).not('selector');

Eg:
<body>
<script>
$(document).ready(function(){
$("#firstdiv > div").not('#sample').addClass('foo');
});
</script>
<div id="firstdiv">
<div>Hello Jquery</div>
<div id='sample'>Welcome to Tutorial</div>
<div>Hello World</div>
<div>Ends</div>
</div>
</body>


.prev()
These methods search for the given selector element and returns the selectors previous element if it has the previous element.

Syntax: $(selector).prev();

Eg:
<body>
<script>
$(document).ready(function(){
$("#sample").prev().addClass('foo');
});
</script>
<div id="firstdiv">
<div>Hello Jquery</div>
<div id='sample'>Welcome to Tutorial</div>
<div>Hello World</div>
<div>Ends</div>
</div>
</body>


.parent()
These methods search for the given selector element and returns the selectors parent element.

Syntax: $(selector).parent();

Eg:
<body>
<script>
$(document).ready(function(){
$("#sample").parent().addClass('foo');
});
</script>
<div id="firstdiv">
<div>Hello Jquery</div>
<div id='sample'>Welcome to Tutorial</div>
<div>Hello World</div>
<div>Ends</div>
</div>
</body>


.slice()
These methods creates a jquery object containing a element get from the selector with start and End index.

Syntax: $(selector).slice(index);$(selector).slice(startindex, endindex);

In here, startindex and endindex may be the positive and negative value. It starts from the zero. If you give the positive value then it search towards forward. If you give the negative value then it search towards backward.

Eg:
<body>
<script>
$(document).ready(function(){
$("#firstdiv > div").slice(2).addClass("foo");
$("#firstdiv > div").slice(1,4).addClass("foo");
$("#firstdiv > div").slice(-3,-1).addClass("foo");
});
</script>
<div id="firstdiv">
<div>Hello Jquery</div>
<div id='sample'>Welcome to Tutorial</div>
<div>Hello World</div>
<div>Ends</div>
</div>
</body>


.children()
These method search for the given selectors in the DOM tree child and returns the jquery object. The difference between children and find is children will search only for the children element but find will search over the element for entire DOM tree. Try Live Example below for know the difference between children and find.

Syntax: $(selector).children('selector');

Eg:
<body>
<script>
$(document).ready(function(){
$(“#firstdiv”).children('sample').addClass('foo');
});
</script>
<div id="firstdiv">
<div>Hello Jquery</div>
<div id='sample'>Welcome to Tutorial</div>
<div>Hello World</div>
<div>Ends</div>
</div>
</body>


.add()
These method constructs a jquery object from the union of the given selector element and then these passed to another methods. Do not assume that this method appends the element to the existing collection.

Syntax: $(selector).add('param');
In here, Param may be object, selector, element, html.

Eg:
<body>
<script>
$(document).ready(function(){
$("#firstdiv > div.simple").add("#firstdiv > span").addClass("foo");
});
</script>
<div id="firstdiv">
<div>Hello Jquery</div>
<div class=”simple”>Welcome to Tutorial</div>
<span>Hello World</span>
<div>Ends</div>
</div>
</body>


.wrap()
These method gets the param and wrap the selected element with the given htmlstring or selector.

Syntax: $(selector).wrap('param');

In here, param may be selector, htmlstring, element, jquery

Eg:
<body>
<script>
$(document).ready(function(){
$("#firstdiv > span”).wrap(“<div />”);
});
</script>
<div id="firstdiv">
<div>Hello Jquery</div>
<div class=”simple”>Welcome to Tutorial</div>
<span>Hello World</span>
<div>Ends</div>
</div>
</body>


.unwrap()
These method removes the wrapped element from the selected element.

Syntax: $(selector).unwrap();

In here, param may be selector, htmlstring, element, jquery

Eg:
<body>
<script>
$(document).ready(function(){
$('span').unwrap();
});
</script>
<div id="firstdiv">
<div>Hello Jquery</div>
<div class=”simple”>Welcome to Tutorial</div>
<div><span>Hello World</span><div>
<div>Ends</div>
</div>
</body>

List of Events:

  • click - Triggers when the element is click.
  • change - Triggers when an field value changes.
  • blur - Triggers when an element loses the focus.
  • focus - Triggers when an element got the focus.
  • contextmenu - Triggers when Right click the element.
  • Keypress – Triggers as long as user depresses a key.
  • keyup – Triggers when user release the key.
  • keydown – Triggers when user depresses a key.
  • Mousedown – Triggers when user depress a mouse button.
  • Mouseenter – Triggers when mouse enter to a element.
  • Mouseover – Triggers when mouse enter an element.
  • mousemove – Triggers when mouse move.
  • Mouseout – Triggers when a mouse get out of a element.
  • Scroll – Triggers when user scroll the screen.
  • Resize – Triggers when user resize the browser.
  • Unload – Triggers when user unload or close the page.
  • Load – Trigger when all html, css, javascript are get loaded.
  • Select – Triggers when user selects the text.
  • Dblclick – Triggers when user double click in a element within a central interval of time.

Jquery Event Handler Attachment:


.bind()
These method attaches the events to the selected elements.

Syntax: $(selector).bind(eventType, eventData, function);

In here, eventType is the string that has one or more DOM event types such as “click, submit, onmouseover etc.,”. eventData is the object containing data that passed to the event. function is to execute each time when event is triggered.

Eg:
<body>
<script>
$(document).ready(function(){
$('#event').bind('click',function(){
alert('Event attached');
});
});
</script>
<div id="firstdiv">
<div id='event'>Hello Jquery</div>
</div>
</body>


.unbind()
Unbind is used to remove the previously attached event handler from the selected element.

Syntax: $(selector).bind(eventType, function);

Eg:
<body>
<script>
$(document).ready(function(){
$('#event').unbind('click');
});
</script>
<div id="firstdiv">
<div id='event'>Hello Jquery</div>
</div>
</body>

 
Posted by at
Labels: ,

1 comment:

Subscribe to: Post Comments (Atom)