All right this afternoon I will make an article about using JQuery as I promised in my previous article, I wrote an article earlier about knowing JQuery, because it has understood what JQuery I would give to know how to use JQuery but there are some things that must be done before using the following JQuery these steps are discussed below.
Download And Install JQuery
To be able to try to use JQuery in your local computer. Download the file from the official website JQuery JQuery located at http://jquery.com
 |
| Gamabar 1.1, Website Resmi JQuery |
Setelah masuk ke halaman website JQuery, Anda dapt unduh JQuery di bagian sidebar website JQuery. Anda dapat memilih tipe kompresi JQuery di antara production atau development. pilih saja yang development yang tanpa kompresi dan berukuran 229kb. Setelah itu klik download (JQuery) untuk menuju ke langkah selanjutnya
 |
| Gamabar 1.2, Klik Tombol Dowload JQuery |
Note: Keep in mind also that the JQuery version will always be updated every time. at the time of writing this article, JQuery version using version v1.9.1
After clicking the download button then the browser will display the program code that can andah JQuery Library ungguh. If you are using Firefox, click File -> save as to save JQuery page into a computer.
 |
| Figure 1.3 code listing on page JQuery Library Browser |
 |
| Figure 1.4 Click Save to save the page as |
 |
| Figure 1.5, Determining the Storage Location |
Files JQuery who stored within the computer you are berekstensi.js, namely JQuery-1.9.1.js
in this example will be made of a web page to display a warning window box using JQuery. For the steps to create a simple web with JQuery, the following steps:
JQuery First
Before you go further in learning to create a website with JQuery and JQuery. You can try to create a simple web that contain elements of JQuery. First of all, you can prepare beforehand text editor that can be used to store the HTML format, such as Dreamweaver, Notepad, Notepad + + and Other forth.in this example will be made of a web page to display a warning window box using JQuery. For the steps to create a simple web with JQuery, the following steps:
- Prepare a folder to store the JQuery project in the computer let's say you create a special folder CHAPTER 1, then enter-1.9.1.js JQuery library into the folder. Do not forget to create a folder to store the image with the images in the folder name CHAPTER 1.
 |
| Image around 1.6, Job Creation Project Folder |
- Start by Creating HTML listing like the listing below
<html><head><title>JQuery Pertama</title><body></body></html>
- Then add Listing JQuery JQuery to call the Library that is located in between tah <head> </ head> is
<html><head><title>JQuery Pertama</title><script src="jquery-1.9.1.js"></script></head><body></body></html>
- Fill listings among <body> </ body> as in the listing below, but make sure you have saved an image of type jpq in the images folder, with name-jquery.jpq loqo
<html><head><title>JQuery Pertama</title><script src="jquery-1.9.1.js"></script></head><body>
ujicoba pertamaku
<img src="images/logo-jquery.jpg" height="50" width="50" alt="ujicoba pertamaku">
</body>
</html>
- The next step you can add some JQuery code with Attribute.attr method (). put some JQuery code before </ script>
<script type="text/javascript">$ (document) . ready (function ( ) { alert ($("img") .attr ("alt));}0;</script>
- If completed, the listings you can see the details as below. save listings that you just created, for example save it as coba.html. Save coba.html into a folder in Chapter 1 that has been created earlier
<html><head><title>JQuery Pertama</title><script src="jquery-1.9.1.js"></script><script type="text/javascript">$ (document) . ready (function ( ) { alert ($("img") .attr ("alt));}0;</script>
</head><body>
ujicoba pertamaku
<img src="images/logo-jquery.jpg" height="50" width="50" alt="ujicoba pertamaku">
</body>
</html>
- If you've been keeping coba.html. Then the next step open coba.html through the browser it will show a webpage with no warning javascript window display box.
 |
| Figure 1.7, Display web pages using JQuery |
You can try to change the width of the image information is displayed in the window warning (alert) to edit the listing
alert($("img") .attr ("alt")) ;
modified with
alert(jQuery("img") .attr ("width"));
or
alert($("img") .attr ("width"));
If you have modified and saved listings coba.html, then you can run into the browser. Ditampilakan that will no longer be a warning window information from the "alt", but information from widht (width) of the image that is equal to 50px.
A few articles that I write today may be useful and can provide insight to the reader and can be applied on the website someday, if there kesilafan both in writing and the words that are not appropriate and I apologize if any comments and suggestions please comment below because not everyone is perfect.
No comments:
Post a Comment