Home » Jquery1
Jquery1
What is jQuery
jQuery is a lightweight and cross-platform JavaScript library designed to simplify the client-side scripting program built on the philosophy of "write less and do more". jQuery is free for the development process, open-source software licensed under the MITjQuery was introduced on August 26, 2006, to overcome the disadvantages of JavaScript and considerably simplifies the JavaScript programming easier to learn and use in the development of websites.Overcoming javascript disadvantages by jQuery:
jQuery simplifies the core philosophy of writing many or too many lines of code in JavaScript to a single line of code by wrapping them into simple methods. We may invoke these methods by simply calling its name as sort, each, eq method, etc. jQuery also simplifies many complicated things exist in JavaScript like AJAX calls and DOM manipulation.
jQuery Features
- jQuery made for DOM manipulationjQuery makes it easier to select DOM elements, traverse them and modifying their content by using a cross-browser open source selector engine called Sizzle.
What is the use of sizzle engine? - StackOverflow - Event handlingjQuery makes it easy to implement a wide variety of events. The most common events are link clicking without the looking into the actual HTML code itself.
- AJAX SupportThe extensive jQuery library gives the flexibility for developers to work with AJAX to implement responsive web pages.
- AnimationsjQuery allows developers to build interactive animations on the web page to give interactive and responsive user experience to the users.
- LightweightThe jQuery is a lightweight library - about 19KB in size ( Minified and zipped ).
- Cross Browser SupportThe jQuery library has no excuse to build the native web applications which works on all modern browsers including Google Chrome, Mozilla Firefox, Internet Explorer, Opera, Safari.What is Cross Browser Testing?- Wikipedia
- Latest TechnologyjQuery has support for the latest technologies like CSS3 selectors, HTML5
jQuery Version
The current version of jQuery used in web development is jQuery 2.1.1. jQuery Core - All 2.x Versions and jQuery Core - All 1.x Versions. Don't forget to check the latest jQuery version Download the Latest jQuery Version
jQuery Basics Overview
In this overview chapter, let us look at how jQuery works with
HTML elements and implement the jQuery functions or methods on it.Learn jQuery
Following steps are very useful to start with jQuery that helps you to understand how jQuery internally works with HTML elements.
When you work with jQuery, you should follow these steps to ensure the jQuery library is configured and working correctly
STEPS
- Wait until the page is being ready.
- Select HTML elements that are defined to modify later.
- Specify appropriate attributes with CSS styles to change the behavior.
- Try adding the listener functions, e.g. click() or wait for a JQuery effect to finish, etc.
Example
//Step 1. Make sure you wait till the page is ready. This will be done by ready().
// Step 2. Select the HTML element with id ‘#hide’ is actually defined in the below html code.
// Step 3. Modify the HTML elements CSS attributes
// Step 4. Add a click-listener function .
$(document).ready(function(){ // STEP 1
$("#hide-btn").click(function(){ // STEP 2
$("p").hide(); // STEP 3 & 4
});
$("#show-btn").click(function(){
$("p").show();
});
});
In the above example by default jQuery
$(document).ready() function will be called when the page is being ready which takes a parameter as a function.
In the second step, jQuery will select HTML element by using the jQuery selection function called
$() where it takes string as a parameter to identify the particular HTML element like #hide-btnand #show-btn.
In the third step, if we want to modify the styles of HTML element that can be done by just taking the help of CSS styles. To do this, we have to use CSS() function with CSS attributes.
In the final step, we added jquery events for the HTML elements like
click(). Then jQuery adds the click listener to HTML #hide-btn , #show-btn elements which is done using the click()function. Now, Click listener will be called upon clicking on the HTML #hide-btn, #show-btnelements.Learning jQuery is easy
Let us understand how this jQuery show and hide method works. See the below examples
Demonstrates a simple jQuery show() method.
Demonstrates a simple jQuery hide() method.
How to install jQuery?
Before using jQuery in your application, you have to install the jQuery official library in your application. Follow the below steps to install it locally.
Download the jQuery library from jQuery website and host it in your application
There are two versions available, choose which one to use based on your requirements.
Production Version - This is for your live website because it was minified and compressed.
Development Version - This is for testing and development (uncompressed and readable code) Both versions can be downloaded from jQuery Official website.
If you want to download the jQuery API, you have to place it on a web server. Once it is done, your webpages will start using jQuery
Note: The
<script> tag should be inside the <head> section.How to include jQuery in the HTML file?
<!doctype html>
<html>
<head>
<title>Including jQuery in HTML</title>
<script type="text/javascript" src="/folder/1.7.1/jquery.min.js"></script>
</head>
<body>
<p>Basic jQuery Example<p>
</body>
</html>
jQuery CDN :
Referencing jQuery at Google CDN and jQuery CDN:
If you don't want to download and but you still want use it from the third party providers then you can use it via CDN networks. It easiest way to include jQuery from a CDN (Content Delivery Network) is just use their CDN link on your web page. Both Google and Microsoft has CDN to host them onto web pages.
What is Content Delivery Network? - Wikipedia
To use jQuery from Google or Microsoft, use one of the following:
Google CDN:
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
</head>
Microsoft CDN:
<head>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.11.2.min.js"></script>
</head>
Minimized vs. Full jQuery Versions
jQuery provides two different versions to use in web pages. They are called minified version and full version. Technically, there is no difference in functionality however the file size is different.
The jQuery full version contains the code that can be easily readable by the users. The code can be readable and debugging is very easy. It is always a good not use this version because the file size would be more and loading the libraries becomes very difficult in terms of performance
The jQuery minified version contains the code that can not be easily readable by the users. Debugging this minified code is technically hard. But the goodnews about this version is, the file size is very tiny. It makes the performance very smooth.
Subscribe to:
Posts
(
Atom
)
No comments :
Post a Comment