jQuery Write less, Do more

Introduction What we will discuss jQuery is a fast and concise JavaScript Library Separates the "behavior" characteristics from the HTML structure. Separation of behavior from structure -> principle of Unobtrusive JavaScript

What we will discuss

jQuery is a fast and concise JavaScript Library

Separates the "behavior" characteristics from the HTML structure.

Separation of behavior from structure -> principle of Unobtrusive JavaScript

jQuery – Description jQuery Core Library jQuery UI

jQuery Core Library

jQuery UI

The $ function One of the critical concepts in any jQuery code is the so called ' $ ' function. ' $ ' is actually an 'alias' for the 'jQuery' namespace. Example 1 : jQuery provides a function for trimming strings. This function can be used as: str = " foo "; jQuery . trim (str); // returns "foo" str = “ foo "; $ . trim (str); These are equivalent. Usage of ' $ ' instead of 'jQuery' is an ad-hoc convention, and is considered easier.

One of the critical concepts in any jQuery code is the so called ' $ ' function. ' $ ' is actually an 'alias' for the 'jQuery' namespace.

Example 1 : jQuery provides a function for trimming strings. This function can be used as:

str = " foo ";

jQuery . trim (str); // returns "foo"

str = “ foo ";

$ . trim (str);

These are equivalent. Usage of ' $ ' instead of 'jQuery' is an ad-hoc convention, and is considered easier.

Example 2 : To select all the paragraphs that have the class 'foo' and add another class called 'bar' to all of them: $ (" p . foo ").addClass("bar"); Example 3 : To execute a function 'myfunc' immediately after the page is loaded (called the ready handler in jQuery lingo): $ ( document ). ready (function() { myfunc(); });

Example 2 : To select all the paragraphs that have the class 'foo' and add another class called 'bar' to all of them:

$ (" p . foo ").addClass("bar");

Example 3 : To execute a function 'myfunc' immediately after the page is loaded (called the ready handler in jQuery lingo):

$ ( document ). ready (function() {

myfunc();

});

Use jQuery usually exists as a single JavaScript file, containing all the common DOM, Event, Effects, and Ajax functions. It can be included within any web page by using the following mark-up: <script type = &quot;text/javascript&quot; src = &quot;/path/to/jQuery.js&quot; ></script> The latest stable versions of jQuery can also be loaded using the Google AJAX Libraries API. <script type= &quot;text/javascript“ src= &quot;http://www.google.com/jsapi&quot; > </script> <script> google. load ( &quot;jquery&quot;, &quot;1.3.2&quot; ); </script>

jQuery usually exists as a single JavaScript file, containing all the common DOM, Event, Effects, and Ajax functions. It can be included within any web page by using the following mark-up:

<script type = &quot;text/javascript&quot; src = &quot;/path/to/jQuery.js&quot; ></script>

The latest stable versions of jQuery can also be loaded using the Google AJAX Libraries API.

<script type= &quot;text/javascript“ src= &quot;http://www.google.com/jsapi&quot; > </script>

<script> google. load ( &quot;jquery&quot;, &quot;1.3.2&quot; ); </script>

jQuery Selectors - :first and :last selectors Add a Class on the First and Last Element $ (&quot; ul .column li . block : first &quot;). addClass (&quot; first &quot;); //Add a class name of &quot;first&quot; to the first selector $ (&quot; ul .column li . block : last &quot;). addClass (&quot; last &quot;); //Add a class name of &quot;last&quot; to the last selector CSS . first { background : #ffdbdb ;} . last { margin-right : 0; background : #c4dcff ; }

Add a Class on the First and Last Element

$ (&quot; ul .column li . block : first &quot;). addClass (&quot; first &quot;);

//Add a class name of &quot;first&quot; to the first selector

$ (&quot; ul .column li . block : last &quot;). addClass (&quot; last &quot;);

//Add a class name of &quot;last&quot; to the last selector

CSS

. first { background : #ffdbdb ;}

. last {

margin-right : 0;

background : #c4dcff ;

}

Example :-

:odd and :even Selectors Specify Even and Odd Selectors $ (&quot; ul li : even &quot;). addClass (&quot; even &quot;); $ (&quot; ul li : odd &quot;). addClass (&quot; odd &quot;); CSS . even { background : #fff ; border : 1px solid #ccc ; } . odd { background : #ccc ; }

Specify Even and Odd Selectors

$ (&quot; ul li : even &quot;). addClass (&quot; even &quot;);

$ (&quot; ul li : odd &quot;). addClass (&quot; odd &quot;);

CSS

. even {

background : #fff ;

border : 1px solid #ccc ;

}

. odd { background : #ccc ; }

How to get the element ? The key point you have to learn is how to get the exact element that you want to apply the effects. $ (&quot; # header &quot;) = get the element with id=&quot;header“ $ (&quot; h3 &quot;) = get all <h3> element $ (&quot; div # content . photo &quot;) = get all element with class=&quot;photo&quot; nested in the <div id=&quot;content&quot;> $ (&quot; ul li &quot;) = get all <li> element nested in all <ul> $ (&quot; ul li : first &quot;) = get only the first <li> element of the <ul>

The key point you have to learn is how to get the exact element that you want to apply the effects.

$ (&quot; # header &quot;) = get the element with id=&quot;header“

$ (&quot; h3 &quot;) = get all <h3> element

$ (&quot; div # content . photo &quot;) = get all element with class=&quot;photo&quot; nested in the <div id=&quot;content&quot;>

$ (&quot; ul li &quot;) = get all <li> element nested in all <ul>

$ (&quot; ul li : first &quot;) = get only the first <li> element of the <ul>

Styles of Interaction via the $ function, which is a factory method for the jQuery object. These functions, often called commands , are chainable ; they each return the jQuery object via $. -prefixed functions. These are utility functions which do not work on the jQuery object.

via the $ function, which is a factory method for the jQuery object. These functions, often called commands , are chainable ; they each return the jQuery object

via $. -prefixed functions. These are utility functions which do not work on the jQuery object.

$ (&quot; div . test &quot;). add (&quot; p . quote &quot;). addClass (&quot; blue &quot;). slideDown (&quot; slow &quot;); Finds the union of all div tags with class attribute test and all p tags with class attribute quote, adds the class attribute blue to each matched element, and then slides them down with an animation. The $ and add functions affect the matched set, while the addClass and slideDown affect the referenced nodes. $ .each([1,2,3], function() { document.write(this + 1); }); ... writes 234 to the document.

$ (&quot; div . test &quot;). add (&quot; p . quote &quot;). addClass (&quot; blue &quot;). slideDown (&quot; slow &quot;);

Finds the union of all div tags with class attribute test and all p tags with class attribute quote, adds the class attribute blue to each matched element, and then slides them down with an animation. The $ and add functions affect the matched set, while the addClass and slideDown affect the referenced nodes.

$ .each([1,2,3], function() { document.write(this + 1); });

... writes 234 to the document.

Ajax It is possible to perform Ajax routines using the $.ajax and associated methods to load and manipulate remote data. $.ajax ( { type: &quot;POST&quot;, url: &quot;some.php&quot;, data: &quot;name=John&location=Boston&quot;, success: function(msg) { alert( &quot;Data Saved: &quot; + msg ); } });

It is possible to perform Ajax routines using the $.ajax and associated methods to load and manipulate remote data.

$.ajax ( { type: &quot;POST&quot;,

url: &quot;some.php&quot;,

data: &quot;name=John&location=Boston&quot;,

success: function(msg) {

alert( &quot;Data Saved: &quot; + msg );

} });

Demo : Simple-Side-Panel – Jquery Code $( document ). ready ( function() { $( &quot;.btn-slide&quot; ).click( function() { $( &quot;#panel&quot; ).slideToggle( &quot;slow&quot; ); $(this).toggleClass( &quot;active&quot; ); return false; }); });

$( document ). ready ( function() {

$( &quot;.btn-slide&quot; ).click( function() {

$( &quot;#panel&quot; ).slideToggle( &quot;slow&quot; );

$(this).toggleClass( &quot;active&quot; ); return false;

});

});

Demo : Simple-Side-Panel – Html Code </head> <body> <div id=&quot;panel&quot;> <!-- you can put content here --> </div> <p class=&quot;slide&quot;> <a href= &quot;#&quot; class= &quot;btn-slide&quot; > Slide Panel </a> </p> </body> </html>

</head>

<body>

<div id=&quot;panel&quot;>

<!-- you can put content here -->

</div>

<p class=&quot;slide&quot;> <a href= &quot;#&quot; class= &quot;btn-slide&quot; > Slide Panel </a> </p>

</body>

</html>

References jQuery http://jquery.com/ http://ui.jquery.com/ http://dev.iceburg.net/jquery/jqModal/ http://bassistance.de/jquery-plugins/jquery-plugin-autocomplete/ http://docs.jquery.com/Plugins/Autocomplete

jQuery

http://jquery.com/

http://ui.jquery.com/

http://dev.iceburg.net/jquery/jqModal/

http://bassistance.de/jquery-plugins/jquery-plugin-autocomplete/

http://docs.jquery.com/Plugins/Autocomplete