Query is a fast and concise JavaScript Library that simplifies HTML
document traversing, event handling, animating, and Ajax interactions
for rapid web development. jQuery is designed to change the way that you write JavaScript.
A simple test for checking if it works in your system..
-->First download jquery.js .
-->Link the program to the downloaded file.
-->Then run the program and see the output.
Adding JQuery file:
<head>
<script type="text/javascript" src="jquery.js"></script>
</head>
-->JQuery helps in element and CSS element selectors and manipulations
-->Used in animations and special effects.
Syntax:
A dollar,a selector and an action function substitutes JQuery.
A simple sample program which illustrates fadeTo,slideToggle,hide functions..
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("p").click(function(){
$(this).hide();
});
$("#p1").click(function(){
$(this).slideToggle("slow");
});
$("#p2").click(function(){
$("#p1").fadeTo("slow",0.30);
});
});
</script>
</head>
<body>
<div id="p1"><img src="images.jpg" width:100px height:100px></div>
<p>Hide me!</p>
<p>Hide me too.I feel shy standing alone:)!</p>
<div id="p2"><img src="coffee.jpg" width:100px height:100px></div>
</body>
</html>
Output:
Other External Script Files:
*jquery.js
*movtools.js
*spectaculous.js
*prototype.js
*underscore.js
*backbone.js
backbome.js uses underscore.js.
JQuery Events:
*jquery.js
*movtools.js
*spectaculous.js
*prototype.js
*underscore.js
*backbone.js
backbome.js uses underscore.js.
JQuery Events:
Javascript normally executes when an event is triggered,so is JQuery.
Some of the events are.
-->click
-->dblclick
-->focus
-->mouseOver
-->ready.
This is accessed using
$(document).click(function(){....});
CSS Code to center a div to the center of the page:
#content{
position:absolute;
width:300px;
height:300px;
border:thin solid grey;
display:block;
top:50%;
left:50%;
margin-top:-150px;
margin-left:-150px;
}
AJAX:
This is asynchronous javascript and XMLUsed to access the database server without reloading the entire page together.
Introduced by Internet Explorer.
File System VS Server system:
-->In File system the entire web page is saved as a collection of HTML pages.The content in the HTML pages is all prewritten in the file.
-->In the server model the data is stored in the database as the content alone.When the particular HTML is accessed the css file and the html file are extracted and the data from the db server is taken and rendered to the form it appears in the screen
-->When connection is bad ,file system is the best option ,else follow server system cos it saves lot and lot of space.
-->When the HTML file system is not used and server system is used,languages like php,node etc are used to extract the required data from the database and render the correct HTML.
No comments:
Post a Comment