What is jQuery?

jQuery is a lightweight,JavaScript library (write less, do more). The purpose of jQuery is to make it much easier to use JavaScript on your website. jQuery takes a lot of common tasks that require many lines of JavaScript code to accomplish, and wraps them into methods that you can call with a single line of code. jQuery also simplifies a lot of the complicated things from JavaScript, like AJAX calls and DOM manipulation.

jQuery features:

1. HTML/DOM manipulation CSS
2. manipulation HTML event methods
3. Effects and animations AJAX
4. Utilities
5. jQuery rescues us by
6. working the same in all browsers!
7. Easier to write jQuery than pure JavaScript

SAMPLE Code Example:---Hide divs with pure JavaScript

divs = document.getElementByTagName(div);
for (i = 0; i < divs.length; i++) {
divs[i].style.display = none;
}

Hide divs with jQuery

$(div).hide();

jQuery Philosophy

1. Find some HTML
2. Do something to it

Jquery Selectors

jQuery selectors allow you to select and manipulate HTML element(s). jQuery selectors are used to "find" (or select) HTML elements based on their id, classes, types, attributes, values of attributes and much more. It's based on the existing CSS Selectors, and in addition, it has some own custom selectors.

**Syntax    Description**       
   $("*"):-Selects all elements       
   $(this):-Selects the current HTML element       
   $("p.intro"):-Selects all <p> elements with class="intro"       
  

jQuery Event Methods:

An event represents the precise moment when something happens. Examples:- 1. moving a mouse over an element 2.selecting a radio button 3.clicking on an element Events:-bind(), trigger(), unbind(), live(), click()

Ex:- $(button).click(function(){alert("test");});

Moving Elements:-append(), appendTo(), before(), after(),

Attributes:-css(), attr(), html(), val(), addClass()

Effects:-show(), fadeOut(), toggle(), animate()

Traversing:-find(), is(), prevAll(), next(), hasClass()

Set:-.attr(id, foo), .val(new val), .width(), .css()

Types of Effects

1. Hide and Show
2. Fade In and Out

3. Slide Up and Down

   ex:- slide up / slide down a div.

   $(...).click(function(){ $(div:first).slideToggle(); });

   Animate elements to 300px wide in .5 seconds. $(...).animate({ width: 300px }, 500);

   Take focus off elements by fading them to 30% opacity in .5 seconds. $(...).fadeTo(500, 0.3);

Do & Dont of Jquery

Always Descend From an #id : The fastest selector in jQuery is the ID selector ($('#someid')). This is because it maps directly to a native JavaScript method, getElementById(). Use Tags Before Classes

Cache jQuery Objects : Get in the habit of saving your jQuery objects to a variable. 

Ex: var traffic_light = $('#content #traffic_light'); Never do like this: $('#traffic_light input.on).bind('click', function(){...});

Harness the Power of Chaining : This allows us to write less code, making our JavaScript more lightweight. 

Ex: var $active_light = $active_light.bind('click', function(){...}) .css('border', '3px dashed yellow') .css('background-color', 'orange') .fadeIn('slow');

Use Sub-queries Limit Direct DOM Manipulation : Create exactly what you need in memory, and then update the DOM.

 Leverage Event Delegation : Every event in JavaScript bubbles up the DOM tree to parent elements. This is incredibly useful when we want many elements (nodes) to call the same function. Instead of binding an event listener function to many nodesvery inefficientyou can bind it once to their parent, and have it figure out which node triggered the event.

Eliminate Query Waste : jQuery fails nicely if it does not find any matching elements, it still takes time to look for them. If you have one global JavaScript for your entire site, it may be tempting to throw every one of your jQuery functions into ready() function. The most efficient way to do this is to use inline initialization functions.

Defer to $(window).load : There is a temptation among jQuery developers to hook everything into the $(document). ready pseudo event. It occurs during page render while objects are still downloading. If you notice your page stalling while loading, all those $(document).ready functions could be the reason why. You can reduce CPU utilization during the page load by binding your jQuery functions to the $(window).load event, which occurs after all objects called by the HTML have downloaded.

What is AJAX?

AJAX = Asynchronous JavaScript and XML.In short; AJAX is about loading data in the background and display it on the webpage, without reloading the whole page. Examples of applications using AJAX: Gmail, Google Maps, Youtube, and Facebook tabs.

Syntax:---
var id = studId;    
$.ajax({
    type: "POST" 
    url: "../Webservices/test.asmx/GetAll",
    data: "{studId: " + studId+ "}",
    contentType: "application/json; charset=utf-8",
    dataType: "json",
    success: function(result){
        alert(result.d);
        console.log(result);
    }
});

WebMethods for AJAX calls

Client Side Methods

<script type = "text/javascript">
function ShowName() {
    $.ajax({
        type: "POST",, -----------------------------------(Request Type)  
        url: "Default.aspx/GetName",----------(Page url & web method)
        data: '{name: "' + $("#<%=txtUserName.ClientID%>")[0].value + '" }',---(Parameter & value)
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: OnSuccess,------------------------------(Success Method)
        failure: function(response) {
            alert(response.d);
        }
    });
}
function OnSuccess(response) {
    alert(response.d);
}
</script>

Server Side Methods

[System.Web.Services.WebMethod]
public static string GetName(string name)
{
    return "Hello " +" "+name;
}