This is the first post of the new jQuery Tut & Example series, walking you through the process of learning the hugely popular JavaScript library jQuery from scratch. This will lead us on to doing much cooler stuff with the library.
Note: Folks who don’t have knowledge on HTML and CSS, I suggest you learn those before coming back to this.
What is jQuery?
jQuery is a "DO MORE" by "WRITE LESS" JavaScript library. This lightweight library simplifies javascript programming. jQuery contanins range of actions (Web Devlopment) such as Event handling, HTML document traversing, CSS manipulation, Animation & Effects and Ajax. The ultimate goal of jQuery, to make javascript more accessible for the less ‘Hardcore’ developer. jQuery is a lightweight, "write less, do more", JavaScript library.
Lets start with the very beginning. First step : How to add jQuery library to your web pages. We will then look at how we use it to select and interact with elements on the page. Each post will add a new layer on top of the previous post. If you have any queries, please leave as comment and I’ll answer them in next week’s edition. So, with no further ado, let’s get started!
Before we can start using jQuery’s functions we need to include the source, that is the file containing the code which makes jQuery tick. You can do this in two ways. Firstly, you can download a copy from jQuery and include it like so:
Note: If you do it above mentioned way, be sure to download the minified version, as it reduces the strain on your server.
The second, and prefered way, is to include it from Google’s Content Delivery Network, or CDN for short. There are two main benefits to doing it this way. Firstly, we can make sure we are always using the most recent version of the library, and secondly it means your server does not have to load the file and it takes up less bandwidth. To include it from the CDN we use similar code to above:
Lets write some Code!
Now we now how to add jQuery to our page we can get writing some! You should include jQuery using one of the two techniques covered above just below the end tag on your page. This way, the file is loaded last, meaning that all the HTML content is loaded first, so we make sure the page’s look & content is loaded first. Below that, add the following code:
Before we start playing with jquery and DOM elements, learn how to select elements.
To select an element with jQuery, we use the $ symbol followed by parenthesis:
ex: $('div p') That selector can be any valid selector, including new CSS3 selectors.
For example,
I hope you’ve enjoyed your first crash course in jQuery. Any questions, leave them in the comments and I’ll address them in the next post.
Note: Folks who don’t have knowledge on HTML and CSS, I suggest you learn those before coming back to this.
What is jQuery?
jQuery is a "DO MORE" by "WRITE LESS" JavaScript library. This lightweight library simplifies javascript programming. jQuery contanins range of actions (Web Devlopment) such as Event handling, HTML document traversing, CSS manipulation, Animation & Effects and Ajax. The ultimate goal of jQuery, to make javascript more accessible for the less ‘Hardcore’ developer. jQuery is a lightweight, "write less, do more", JavaScript library.
Lets start with the very beginning. First step : How to add jQuery library to your web pages. We will then look at how we use it to select and interact with elements on the page. Each post will add a new layer on top of the previous post. If you have any queries, please leave as comment and I’ll answer them in next week’s edition. So, with no further ado, let’s get started!
Before we can start using jQuery’s functions we need to include the source, that is the file containing the code which makes jQuery tick. You can do this in two ways. Firstly, you can download a copy from jQuery and include it like so:
1 | <script type="text/javascript" src="local/path/to/jquery.min.js"> |
The second, and prefered way, is to include it from Google’s Content Delivery Network, or CDN for short. There are two main benefits to doing it this way. Firstly, we can make sure we are always using the most recent version of the library, and secondly it means your server does not have to load the file and it takes up less bandwidth. To include it from the CDN we use similar code to above:
1 | <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"> |
Lets write some Code!
Now we now how to add jQuery to our page we can get writing some! You should include jQuery using one of the two techniques covered above just below the end tag on your page. This way, the file is loaded last, meaning that all the HTML content is loaded first, so we make sure the page’s look & content is loaded first. Below that, add the following code:
1 2 3 | <script type="text/javascript"> // Add Some Code </script> |
Before we start playing with jquery and DOM elements, learn how to select elements.
To select an element with jQuery, we use the $ symbol followed by parenthesis:
ex: $('div p') That selector can be any valid selector, including new CSS3 selectors.
For example,
1 2 3 | $('div p').html(".."); //selects all paragraphs that exist within a parent div. $('#ID Selector').css(...); //selects the element with an id of 'something' $('.Class Selector').addClass(...); //selects the element(s) with a class of 'something' |
No comments:
Post a Comment