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>>
Wednesday, July 5, 2017
JQuery
Subscribe to:
Post Comments (Atom)
No comments:
Post a Comment