IntroductionTojQueryPart-I

8/6/2019 IntroductionTojQueryPart-I

http://slidepdf.com/reader/full/introductiontojquerypart-i 1/18

Introduction to

jQuery Presenting bySrinivasa Rao .K



Common issue in webDevelopment



Let me fix it …

Click to edit Master text stylesSecond level●

Third level● Fourth level● Fifth level



Cross Browser Compatibility

The jQuery code we write is compatible with all thebrowsers and hence it prevents the need to write

separate client side code for different browsers.



Advantages of jQueryIt’s lightweight, easy and fast

Write less but do more

To select a HTML element in javascript,

Ex:

document.getElementById('txtName');

//The above equivalent in jQuery will be,$('#txtName');



How much easy it is?

To select all the rows in a table and setting abackground color,

<script src="_scripts/jquery-1.6.1.min.js" type="text/javascript"></script>

<script language="javascript">

$(document).ready(function() { $('#table1 > tbody > tr').css("background-color", "Red");

});

</script>



Chaining mechanism+++

The above code selects a TextBox control with ID txtName,

then applies css style and then set its text as “Test”.


$(document).ready(function() {

$('#txtName').css("background-color", "Red").val("Test"); });

</script>



Separate JavaScript code from

HTML jQuery library enables us to separate the client sidescripts from the HTML mark-ups. This is possiblebecause of $(document).ready() function of jQuery.

For example,

<input id="btnSubmit" onclick="javscript:Save()" type="button" value="button" />



It’s clear..

The above code can written as,

<script src="_scripts/jquery-1.3.2.min.js" type="text/javascript"></script>


$(document).ready(function() {$('#btnSubmit').click(function() {

alert('Submit Clicked!');});

}); </script>



Separating concerns

We can make our HTML code neat without any javascript code combined with it.

It is also possible to separate jQuery code into aseparate javascript file and link to the aspx page.For example, the above code can be separated in aseparate javascript file and it can be linked to the

aspx page. Refer the below code,



Example..

ASPX

<head runat="server">

<title></title> <script src="_scripts/jquery-1.6.1.min.js"

type="text/javascript"></script> <script src="_scripts/Default.js" type="text/javascript"></script> </script></head>

Default.js

$(document).ready(function() { $('#btnSubmit').click(function() {

alert('Submit Clicked!'); });

});



Easy and Light-weight Ajax Application

One of biggest advantages of using jQuery library is

developing light weight Ajax application in ASP.Netwith JSON support. With jQuery library we canprevent the bulky ASP.Net AJAX’s UpdatePanelcontrol for Ajax communications.U

p d a t e P

a n e l

U p d a t e P a n e l

U p

d a t e

P a n e l

U p d a t e P a n e l



Availability of various

plug-in’sVarious free plug-in’s available

Ex, jQuery tabs, jTemplate, etc.

Some one has already solved your problem.

http://plugins.jquery.com/



You can extend it

It is also possible to extend existing functionality

provided by jQuery library.



We can use CDN for internetsite

You can start using the jQuery library hosted byMicrosoft CDN, Content Distribution Network.

The main advantage of using Microsoft CDN is theymanage all the bug fixes, recent updates andprovide a high speed access due to better caching,etc.

Read http://www.asp.net/ajaxlibrary/cdn.ashx toknow more.



Microsoft and Intelligence

support in Visual Studio2010

Click to edit Master text stylSecond level● Third level● Fourth level● Fifth level



Easy Integration with

ASP.Net Ajax projects

jQuery library can be easily integrated with ASP.NetAjax applications.

<script type="text/JavaScript" language="JavaScript"> function pageLoad() {

var manager = Sys.WebForms.PageRequestManager.getInstance(); manager.add_endRequest(endRequest);

}

function endRequest(sender, args) {

//Do all what you want to do in jQuery ready function } </script>



Thank you

skonakanchi

http://twitter.com/skonakanchi

skonakanchi.blogspot.com

http://in.linkedin.com/pub/srinivasa-rao-konakanchi/18/658/b58


http://skonakanchi.blogspot.com/

http://skonakanchi.blogspot.com/


http://in.linkedin.com/pub/srinivasa-rao-konakanchi/18/658/b58

IntroductionTojQueryPart-I

Documents

Transcript of IntroductionTojQueryPart-I