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>

 

Thursday 2 May 2013

Jquery Tutorial Part 3


.push()

This is a method of the Built-in Array Object. It is not related to jQuery. This method is used to add the element to the End of the Array.

Syntax: array.push(element,element1,...);
Eg:
<body>
<script>
$(document).ready(function(){
var foo = ["Javascript" , "Jquery" , "HTML"];
foo.push("CSS");
alert(foo);
});
</script>
</body>


.join()
These methods is not a Jquery function, Its'a regular Array.join function. It converts an array to a string by putting the argument between the each element.

Syntax: array.join(separator);
Eg:
<body>
<script>
$(document).ready(function(){
var foo = '<div>Hai Hello</div>';
document.write(foo.split(' ').join('</div><br/><div>'));
});
</script>
</body>


.find()
These methods in Jquery will search for the given element you given within that DOM element. find uses native browser methods to search over the element.

Syntax: $(selector).find('element');
Eg:
<body>
<script>
$(document).ready(function(){
alert($("#firstdiv").find("div[name='javascript']").html());
});
</script>
<div id="firstdiv" class="sample">
<div name="jQuery"> Hello Jquery </div>
<div name="jQuery"> Hello Jquery </div>
<div name="javascript"> Hello Javascript </div>
<div name="jQuery"> Hello Jquery </div>
</div>
</body>


.delay()
These method is used to delay the execution for the time you given. Its looks same as the setTimeOut but only difference is delay is mostly used to effects queueing and setTimeOut is used for all others without the effects.

Syntax: $(selector).delay(time);
Eg:
<body>
<script>
$(document).ready(function(){
$("#firstdiv").delay('3000').fadeIn("slow");
});
</script>
<div id="firstdiv" class="sample">
<div name="jQuery"> Hello Jquery </div>
</div>
</body>


.clone()
In Jquery this method is used to clone the selected elements. This has the parameter of boolean true and false. True means it clones the selected elements event also. But, False can clone only the element without the events default is false.

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


.eq()
These methods is like a selector which returns the jQuery Object containing the DOM element matched by the selector. In here index means the index number.

Syntax: $(selector).eq(index);
Eg:
<body>
<script>
$(document).ready(function(){
document.write($("#firstdiv").eq(0));
});
</script>
<div id="firstdiv" class="sample">
<div name="jQuery"> Hello Jquery </div>
</div>
</body>


.get()
These method is also same as the eq method in jQuery. The only difference is get returns the DOM element at the given index where eq returns the jQuery Object containing the DOM element.

Note: $(selector).get(0) is equivalent to $(selector).eq(0).get(0)


Syntax: $(selector).get(index);
Eg:
<body>
<script>
$(document).ready(function(){
document.write($("#firstdiv").get(0));
});
</script>
<div id="firstdiv" class="sample">
<div name="jQuery"> Hello Jquery </div>
</div>
</body>


.index()
These method returns the index position of the element relative to its selector.

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

Jquery Tutorial Part 4.

Monday 15 April 2013

Jquery Tutorial Part2


JQUERY METHODS


.width():
These methods can set or get the width of the given element. It returns only the width of the element it does not include the padding, margin and border. To learn about the padding and margin click here.

Syntax: $(selector).width();
$(selector).width('100px');

Eg:
<body>
<script>
$(document).ready(function(){
alert($('firstdiv').width());
$('firstdiv').width('100px');
});
</script>
<div id="firstdiv" class="sample">
Hello Jquery
</div>
</body>

Live Example click here. Try live example for compare this function with Javascript.

.height():
These methods can set or get the height of the given element. It returns only the height of the element it does not include the padding, margin and border. To learn about the padding and margin click here.

Syntax: $(selector).height();
$(selector).height('100px');

Eg:
<body>
<script>
$(document).ready(function(){
alert($('firstdiv').height());
$('firstdiv').height('100px');
});
</script>
<div id="firstdiv" class="sample">
Hello Jquery
</div>
</body>

Live Example click here. Try live example for compare this function with Javascript.



.innerWidth():
These method are also same as the .width() method in Jquery. The only difference is .width() return the width of the element without padding, margin, border. But these methods returns the width with padding.

Syntax: $(selector).innerWidth();

Eg:
<body>
<script>
$(document).ready(function(){
alert($('firstdiv').innerWidth());
});
</script>
<div id="firstdiv" class="sample">
Hello Jquery
</div>
</body>

Live Example click here. Try live example for compare this function with Javascript.


.innerHeight():
These method are also same as the .height() method in Jquery. The only difference is .height() return the height of the element without padding, margin, border. But these methods returns the height with padding.

Syntax: $(selector).innerHeight();

Eg:
<body>
<script>
$(document).ready(function(){
alert($('firstdiv').innerHeight());
});
</script>
<div id="firstdiv" class="sample">
Hello Jquery
</div>
</body>



.outerWidth():
outerWidth return the width of the element including the padding and border of the given element.

Syntax: $(selector).outerWidth();

Note: $(selector).outerWidth(true) returns width including padding, border and margin.

Eg:
<body>
<script>
$(document).ready(function(){
alert($('firstdiv').outerWidth());
alert($(“#firstdiv”).outerWidth(true));
});
</script>
<div id="firstdiv" class="sample">
Hello Jquery
</div>
</body>


.outerHeight():
outerHeight return the height of the element including the padding and border of the given element.

Syntax: $(selector).outerHeight();

Note: $(selector).outerHeight(true) returns width including padding, border and margin.

Eg:
<body>
<script>
$(document).ready(function(){
alert($('firstdiv').outerHeight());
alert($(“#firstdiv”).outerHeight(true));
});
</script>
<div id="firstdiv" class="sample">
Hello Jquery
</div>
</body>


.scrollTop()
We can scroll the top of page using these method in Jquery.
Syntax: $(selector).scrollTop();

Eg:
<body>
<script>
$(document).ready(function(){
$('#firstdiv').scrollTop();
$('#firstdiv').scrollTop(“0px”);
});
</script>
<div id="firstdiv" class="sample">
Hello Jquery
</div>
</body>


.scrollLeft()
We can scroll the left of page using these method in Jquery.
Syntax: $(selector).scrollLeft();

Eg:
<body>
<script>
$(document).ready(function(){
$('#firstdiv').scrollLeft();
$('#firstdiv').scrollLeft(“0px”);
});
</script>
<div id="firstdiv" class="sample">
Hello Jquery
</div>
</body>


.position()
These methods returns the position relative to its parent element of the first matched selector element.
Syntax: $(selector).position();

Eg:
<body>
<script>
$(document).ready(function(){
$('#firstdiv').position().top;
});
</script>
<div id="firstdiv" class="sample">
Hello Jquery
</div>
</body>


.offset()
These methods returns the position which is relative to the document of the given selector.

Syntax: $(selector).offset();
Eg:
<body>
<script>
$(document).ready(function(){
$('#firstdiv').offset().top;
$('#firstdiv').offset().left;
});
</script>
<div id="firstdiv" class="sample">
Hello Jquery
</div>
</body>


.removeAttr()

These methods is used to remove the attribute in the HTML element.

Syntax: $(selector).removeAttr('attrname');
Eg:
<body>
<script>
$(document).ready(function(){
$('#firstdiv').removeAttr('foo');
});
</script>
<div id="firstdiv" class="sample" value='foo'>
Hello Jquery
</div>
</body>

Live Example click here. Try live example for compare this function with Javascript.

.prop(), /removeProp()

These methods is same as the .attr() methods in jquery but the only difference is attr() methods returns the string but .prop() method returns its datatype. The removeProp() is used to remove the assigned properties in the particular HTML element. Try online example to get better understanding about attr() and prop().

Syntax: $(selector).prop('propname');
Eg:
<body>
<script>
$(document).ready(function(){
$('#firstdiv').prop('foo');
$('#firstdiv').removeProp('foo');
});
</script>
<div id="firstdiv" class="sample" value='foo'>
Hello Jquery
</div>
</body>


.hasClass()

These methods used to find the selected element has the given class. It returns true if it has the given class or else false.

Syntax: $(selector).hasClass('classname');
Eg:
<body>
<script>
$(document).ready(function(){
$('#firstdiv').hasClass('sample');
});
</script>
<div id="firstdiv" class="sample" value='foo'>
Hello Jquery
</div>
</body>

Continue in part 3.