Ankit B Desai: JQuery

JQuery

Content
* Introduction to Jquery
* jquery Syntax
* Document ready event
* Jquery Events
* Jquery Effects
* Handling css through jquery


Introduction to jquery

* JQuery is a JavaScript library. 
* It is a library of JavaScript functions. 
* jQuery is a fast, small, and feature-rich JavaScript library
* It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers.
* The jQuery library is stored as a single JavaScript file, containing all the jQuery methods. 
* You need to download jquery.js first.

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

Jquery Syntax

* The jQuery syntax is tailor made for selecting HTML elements and performing some action on the element(s).

$(selector).action()

* $ sign defines JQuery. 
* Selector is HTML element. 
* Action is a function to be performed.
* jQuery selectors allow you to select HTML elements (or groups of elements) by tag name, class name or by Id.

Example

$(this).hide()      //Hides the current element
$("img").hide() //Hide all images
$(".i").hide()      //Hide all html elements with class attribute value is 'i'.
$("#i1").hide() //Hide an html element whose id attribute is i1.

Document ready event

* All JQuery code written inside ready() method, this is to prevent any JQuery code from running before the document is finished loading. 

$(document).ready(function(){
//JQuery code here
}); 

Jquery Events

* All the different visitor actions that a web page can respond to are called events.
* An event represents the precise moment when something happens
* For example - moving a mouse over an element, selecting a radio button, selecting an element, clicking a button, etc
* Some of the jquery methods representing events are:
 - click  
 - dblclick
 - mouseenter
 - mouseleave
 - hover
 - mousemove
 - keypress
 - keydown
 - keyup
 - submit
 - change
 - focus
 - blur
 - load
 - resize
 - scroll
 - unload
* To assign a click event to a particular button on a page, you can do this
 - $("#button1").click();
* The next step is to define what should happen when the event fires
 - $("#button1").click(function(){
//your action code here
});


Jquery Effects

* There are several jquery methods that can be used to represent effects or actions.
 - animate
 - delay
 - fadeIn
 - fadeout
 - fadeTo
 - hide
 - show
 - slideDown
 - slideUp
 - toggle

Example

<html>
<head>
<script type="text/javascript" src="jquery.js">
</script>
<script type="text/javascript">
$(document).ready(function(){
  $("#hide").click(function(){
    $("p").hide();
  });
  $("#show").click(function(){
    $("p").show();
  });
});
</script>
</head>
<body>
<p>If you click on the "Hide" button, I will disappear.</p>
<button id="hide">Hide</button>
<button id="show">Show</button>
</body>
</html>

Example

<html>
<head>
 <script type="text/javascript" src="jquery.js">
 </script>
<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
    $("p").toggle(1000);
    if($(this).html()=="Hide")
        $(this).html("Show");
    else
        $(this).html("Hide");  });
});
</script>
</head>
<body>
<button>Hide</button>
<p>This is a paragraph with little content.</p>
<p>This is another small paragraph.</p>
</body>
</html>

Handling CSS through Jquery

* Just like javascript, we can manipulate css through jquery. 
* We use css() method, with two string arguments. First argument is property name and second argument is property value. 

Example: Change background when mouse move over a paragraph

<html>
<head>
 <script type="text/javascript" src="jquery.js">
 </script>
<script type="text/javascript">
$(document).ready(function(){
  $("p").hover(function(){
     $("this").css("background-color", "lightblue");
    }, function(){
     $("this").css("background-color", "white");
});
</script>
</head>
<body>
<p>This is first paragraph.</p>
<p>This is second paragraph.</p>
</body>
</html>

<<Prev     Home     Next>>
Ankit B Desai

Pages

Wednesday, July 5, 2017

JQuery

No comments:

Post a Comment
