How jQuery works?

-

How jQuery Works?

     
This section we will see how jQuery works with the help of simple program. This tutorial will give you basic introduction to the jQuery and explain the concepts required to understand.
The jQuery library helps the developer to develop rich internet applications. This is one of the most used framework on the web. Its easy to learn and use language. Here is the highlights of jQuery:
  • jQuery is a JavaScript based Library that runs in browser. Its is client side ajax framework.
  • jQuery simplifies the development of ajax based application using JavaScript programming language.
  • jQuery is easy to learn and use language. Programmer's can learn it easily.
  • Lot's of support. There are many examples and tutorials available on internt.
The jQuery is designed to do more work in less coding. It's very easy to work with jQuery. It support all the serverside web application development technologies. You can use JSP,Servlets, Struts, Spring MVC, ASP, .NET, CGI, PHP, Perl etc. as server-side language and user jQuery to dynamically fetch data from the server.



So, jQuey is very useful tool. Let's see how it works and we can use it in programming.
Traditionally developer's are using Window.onload() function to initiate some action on page load. There is one drawback with this function. It does not fires until all the images including the advertisement banner are loaded. So, window.onload() can be painfully slow. The jQuery provides the solution for this problem. The $(document).ready(function(){}) solves the issue. It is fired once the Document Object Model is ready. So, you can use this to run any type of JavaScript to suite your business needs.
Here is the code that will display alert message once Document Object Model is ready:
$(document).ready(function(){
// Your code here...
alert("Hello");
});
Adding jQuery to a page:
The jQuery is distributed as js file. It can be downloaded fromhttp://docs.jquery.com/Downloading_jQuery. Download jquery-1.4.2.min.js and then place in your project folder. To include in the html file use the following code:
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
This will include the jQuery library into your webpage. Then add the following code into JavaScript block of the html page:
 $(document).ready(function(){
// Your code here
});
This method will be called once Document tree is ready. Here you can add any JavaScript function. Following example shows the hello world alert message:
I
Hello world alert box example(HelloAlert.html)
<html>
<head>
<title>jQuery Hello World Alert box</title>
 
<script type="text/javascript" src="jquery-1.4.2.js"></script>
 
</head>
 <script type="text/javascript">
$(document).ready(function(){
$("#cl").click(function(){
alert("HELLO WORLD!");
});
});
</script>
<body>
<font color="red">CLICK BELOW BUTTON TO SEE ALERT BOX</font>
<br>
<br>
<button id="cl">Click Me</button>
</body>
</html>
The following line includes the jQuery library into webpage:
<script type="text/javascript" src="jquery-1.4.2.js"></script>

Comments

Post a Comment

Popular posts from this blog

Create Desktop Application with PHP

-
Image
Here we will show you how you can create a web-based desktop application using PHP, CSS, HTML, and JavaScript with the help of PHP Desktop. In fact, PHP Desktop is an easy and simple solution we can use to create very powerful and complex desktop application. What Is PHP Desktop? PHP Desktop is an open source project founded by Czarek Tomczak in 2012 to provide a way for developing native desktop GUI applications using web technologies such as PHP, HTML5, JavaScript and SQLite. Mind you, the development workflow you are used to while creating web applications remains the same. The step of turning an existing website into a desktop application is basically a matter of copy and paste. PHPDesktop is an all-made container that will just swallow your project. With that, you can easily transform an existing website into a desktop application without any modification. When you download PHP Desktop , you will have some set of files and folders; among them you will have a ...
Read more

Insert pandas dataframe into Mongodb

-
Image
Insert pandas dataframe into Mongodb Pandas is most commonly used open-source Python Library for data manipulation, it provides high-performance data manipulation and analysis using its powerful data structures. Here we use pandas library to insert dataframe into Mongodb. I am taking Yahoo finance library to get dataset for a ticker and save that data into Mongo. First, we import all the necessary libraries from pandas_datareader import data as pdr import pandas as pd from pymongo import MongoClient import yfinance as yf yf.pdr_override() We get data from yahoo finance  # download dataframe data1 = pdr.get_data_yahoo("SPY", start="2017-01-01", end="2017-01-15") Now, we make a connection to Mongodb. Here I am connecting to local MongoDb Server on port 27018 and then creating a database with the name `finance`. MongoDB has a collection(table) and I name it as `mycollection`. #Step 1: Connec...
Read more

Add and delete columns dynamically in an HTML table

-
To add new rows to a table (or table section) you can use insertRow, but there isn't an equivalent insertColumn in the  DOM table methods . So what you can do is iterate the rows in the table (or table section), and call insertCell for each row. Javascript:   tableaddcolumn.js // 2006-08-21 - Created // 2006-11-05 - Modified - head and body function addColumn(tblId) { var tblHeadObj = document.getElementById(tblId).tHead; for (var h=0; h<tblHeadObj.rows.length; h++) { var newTH = document.createElement('th'); tblHeadObj.rows[h].appendChild(newTH); newTH.innerHTML = '[th] row:' + h + ', cell: ' + (tblHeadObj.rows[h].cells.length - 1) } var tblBodyObj = document.getElementById(tblId).tBodies[0]; for (var i=0; i<tblBodyObj.rows.length; i++) { var newCell = tblBodyObj.rows[i].insertCell(-1); newCell.innerHTML = '[td] row:' + i + ', cell: ' + (tblBodyObj.rows[i].cells.length - 1) } } function deleteColumn(tblId) { v...
Read more