JQuery: Features

JQuery is a JavaScript framework that has many built-in functionalities.”Write less do more library.”
Fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development.
An open source project.
1000+ plugins available.
History:
Developed by John Resig of Mozzila.
jQuery was first announced at BarCamp NYC in 2006. Then the growth of jQuery has exploded. They now have a team of developers working on jQuery including a UI team, Documentation Team, etc..
Integration with VS– Shipped with VS 2008

For using along with ASP.Net and MVC.
Fully supported product.
— Send down the Script library to client browser.

 

Basic Features:
$- the JQuery Function- Gateway of all jQuery functionality
Return a JQuery object.
Overloaded to perform different tasks.
$ – can do many thing depends upon what we pass in the argument.
$(function(){…}); — Invoke Document ready or similar to asp.net page load.
Selectors- Find DOM elements to manipulate.
Based on CSS selector syntax.
Can be Found by id, class, element name and hierarchical positioning.
$(“#menu  > p”) — p tag direct descanted/Child of tag element id menu
$(“.content”)
$(“a”)
Have specific Selector Patterns to get the elements..
E[foo] Get E element having attribute foo
E[foo=’bar”] Get E element having attribute foo with value bar.
Selector Pseudo Classes: Refine selection information i.e. not available on DOM.
Start with colon (:) example-  :link, :visited, :odd, :even, :not, :first
Example:
$(“a:contains(‘Anshu’)”).attr(“href”, “https://medium.com/“);
Event-
Chaining- jQuery use a builder design pattern i.e. api always return a instance of same object i.e. jQuery object.
Example:
$(“a”).mouseover(function(){ $(this.addClass(“highlight”);})
         .mouseout(function(){ $(this.removeClass(“hightlight”);})
         .filter(“:odd”.addClass(“oddrow”).end();
Effects-
Basic- hide, show, toggle
Sliding
Fading
Custom animate function-
Example: on click of Header(p) show sliding toggle(div id=”section”) .
$(“.section”.hide());
$(“#menu > p”).click(function() {
       $(this).next().slideToggle(“slow”);
});
 
Communication-
Asynchronously communicate with server through XMLHttp request object like ASP.NET AJAX client lib use it.
We can create WCF service then use ScriptManager to generate proxy.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s