Jquery presentation

jQuery Training
Write Less Do
More...
Presentation By :-
Narendra Dabhi
IndiaNIC InfoTech Ltd.
(Sr. Yahoo Store Developer)

# Basic Structure of Jquery ?
$(document).ready(function(){
// jQuery Code
});

# Creating content.
- Once we select a content using jQuery, we might be doing something to it.
- Dynamic content may be added to existing page.
- Remove certain content from the page.
- jQuery provides mechanism to create, copy, delete and move content in page.
- jQuery even provides the mechanism to alter the CSS properties.
- we can create an html content as follows.
- var data1 = $(“This is content creation”);
- var dataString = “This may be a dynamic content”;
Var data2 = $(dataString).addClass(“abc”);

# Get and Set a content.
- Selecting a content of element is easy via jQuery
- html() & text() functions which returns the content with respect to
their intended function names.
- $(“div.abc”).html();
- $(“p#description).text();
- Setting a content of elements is easy as well.
- html(data) & text(data) sets the content of elements but there is
a difference, html(data) will recognize the tags in the data while
text(data) will escape the special chars and display the data as it is.
- $(“div.abc”).html(“This is new text”);
- $(“p#description).text(“This is new text”);

# Inserting Content.
- jQuery provides set of functions with which we could insert content,
before, after or within a content itself. They are of two types base on
the arguments content & selector based.
- append(content)
prepend(content)
before(content)
after(content)
All the function above add content to each of the elements returned by
the jQuery selector.
- appendTo(selector)
prependTo(selector)
insertBefore(selector)
insertAfter(selector)
All the function above add content to the specified selector.

# Wrapping, replacing & removing content.
- wrap(html)
- wrapAll(html)
- wrapInner(html)
- wrap(element)
- wrapAll(element)
- wrapInner(element)
- replaceWith(content)
- replaceAll(selector)
- empty()
- remove()
- clone()
- clone(true/false)

# Manipulate attributes.
- jQuery provides an attr([key], [props], [key, val], [key, function(){}]) to inspect
the attributes of the elements selected by jQuery
- attr(name) > fetch the value of the attributed defined by the name.
- attr(props) > here props is std JS object {src:“new.jpg”, target:“_blank”}.
- attr(key, val) > here val will be applied to attribute defined by key.
- jQuery also provides removeAttr(name) to remove a particular attribute.

# Working with CSS.
_ jQuery provide the css() function, which takes following forms
- css(name) > retrieves the value for particular css.
- css(props) > a JS object specifying the values e.g.
var myNewCSS = {
'background-color' : '#FF0000',
'color' : '#00FF00'
};
- css(name, val) > set the val for the property specified by name on
all the elements returned by the jQuery selector.

# Working with CSS.
_ jQuery provide the functions to work on CSS Classes.
- addClass(“abc”) > adds a class “abc” to all elements returned by query.
- hasClass(“abc”) > returns true if any one elements has class abc.
- removeClass(“abc”) > removes the specified class from the elements.
- toggleClass(“abc”) > adds class if not present & remove if present.
- toggleClass(“abc”, flag) > adds or removes the class based on flag.

# Working with CSS.
- offset(), offsetParent()
- position()
- scrollTop(), scrollTop(val)
- scrollLeft(), scrollLeft(val)
- height(), height(val)
- width(), width(val)
- innerHeight(), innerWidth()
- outerHeight(T/F), outerWidth(T/F) > True or False for considering margin

# Create Custom Plugins
- A jQuery plugin is simply a new method that we use to extend jQuery's prototype
Object. By extending the prototype object you enable all jQuery objects to
inherit any methods that you add. As established, whenever you call jQuery() you're
creating a new jQuery object, with all of jQuery's methods inherited.
Syntax for Create Custom Plugin :-
(function($){
$.fn.<pluginname>=function(options){
// your code
}
})(jQuery);

# Create Custom Plugins
Code in myplugin.js
(function($){
$.fn.myplugin=function(options){
alert(“Hello this is first Plugin.”);
}
})(jQuery);

# Ajax.
- AJAX stands for Asynchronous JavaScript and XML.
- Unlike an HTTP request, Ajax allows content on Web pages to update
immediately when a user performs an action.
- jQuery has excellent support for AJAX
1. $('div#id').load('/some/file.html)
2. $.ajax({
url: "test.php”,
context: document.body
}).done(function(data) {
$( this ).addClass( "done" );
});
3. $.ajax({
type: "POST",
url: url,
data: data,
success: callback function,
dataType: dataType
});

# Ajax.
- Other functions used for ajax are :
post(url,params,callback)
get(url,params,callback)
getJSON(url,params,callback)
getScript(url,params,callback)
ajaxComplete()
ajaxError()
ajaxStart()
ajaxStop()
ajaxSuccess()

# Animation.
- jQuery has built in effects:
$('h1').hide('slow');
$('h1').slideDown('fast');
$('h1').fadeOut(2000);
- You can chain them:
$('h1').fadeOut(1000).slideDown();
- Create your own animation:
$('#block').animate({
width:"+=60px",
opacity:0.4,
fontSize:"3em",
borderWidth:"10px"
},1500);

Jquery presentation

More Related Content

What's hot

Similar to Jquery presentation

Recently uploaded

Jquery presentation