Watches can also improve a person's grade. Just like a small fry favorite with the rolex replica gold chain, and successful people like to wear watches. Good watches exquisite workmanship, elegant appearance, can display the charm of women and men. Watch is also a symbol of rolex replica personal identity, the men look at the table, women look at the package, it is clear that this truth. A small piece of hublot replica fine watches a few thousand dollars, more than 10000 yuan, able to bring expensive watches are usually very successful in the work of people.
Hello JQuery
By: Tuts+ Tutorial
Page: 30 Days to Learn jQuery
Posted On: Sep 09, 2013
Email this knowledge


Download Project File

Are you excited to learn a new skill? jQuery is certainly a good one to have! In this opening lesson, we’ll download jQuery, and take a peek at how it can be used in our projects.

Lesson Transcript
Well, I hope you are excited, today is the first day of the rest of your life. Not really. Not at all. But it will be first day that you’ll realize how great and easy jQuery is to work with. So, we’re going to begin by installing jQuery, taking a look at some of the development tools we’ll use, and then I’ll give you a quick peek at how we can use CSS selectors that you likely already know to query what we refer to as the DOM. So, no more waiting, let’s get into it.
To use jQuery, we have a couple of different options and we’ll take a look at both. First, we’ll take a look at downloading the actual file. If we go over here to the right side, you’ll see that we have two options – production and development. Now, for you at this stage, it doesn’t really matter, but the basic difference is production code will be compressed which means it’ll be impossible for you to read it. The development version on the other hand will contain all of the necessary code, comments and spacing, so that it’s easy to filter through and learn from.
Now for production site, and what I mean the site that you will deploy and have live, you will always use the production version. And you’ll see one of its Minified and Gzipped, it comes up to around 31k, but if we keep all the comments spacing in, you’ll see that it’s wooping on 230k, and that’s really too big; however, for development only, definitely use this version, that way you can refer to it once you’ve learned a little bit more.
So, I’m going to click development and choose download jQuery. And you’ll see that it takes us to this link: code.jquery.com and the current version of jQuery. At the time of this writing, that’s 1.7.1. You can eaither copy and paste this into a new file or you can right click and choose ‘Save As’. And for now, we’ll save it to the desktop as jQuery-1.7.1. I’ll click save. There we are. Now we have a library ready to go. Next, I’m going to create a new folder. I will call this lesson-1 and I’ll drag in jQuery like so. Now, we need to be using a code editor. Im going to assume that you have some experience again with HTML and CSS, and you’ve already chosen a code editor. You can even use notepad if you want. I wouldn’t recommend it but if you want that’s what you wanted to do.
Personally, my favorite code editor is called Sublime Text. And what’s nice about this is, though it’s not free, you can use the trial version and it’s available for Windows, Mac, and Linux. And it’s the best code editor that I’ve ever used, so I highly recommend you to take a look at it.
The first step is we’ll create a new file, of course. I’m going to call it index.html, and I’ll paste in just some opening mark-up. You should be familiar with this at this point. If you’re not, you might want to step back before you to continue on. I need you to know a little HTML and a little CSS to move forward. The next step is we are going to reference jQuery. And we have a couple of different options. First, we can reference it within the head of our document, jQuery-1.7.1.js; however if possible, try to place it at the bottom just before the closing body tag, . The reason why we do this is, because the way the browser loads assets. The basic idea is, nothing can continue on until this script has been downloaded by the browser. More or less, some browsers get around that now, and that’s what we call “downloading in parallel”; however if you place it at the bottom, you can load all of that CSS and HTML and then load jQuery at the bottom. In that way, it’ll appear as if the pages loading more quickly. Okay, we’re also to go. We have jQuery set-up. Now we need to call the jQuery function.
For now, I’ll place my script tag within the same page and we can reference jQuery in two ways. First, we can use the long form, jQuery is a function. Within here we can pass what we call a “selector.” Actually, you can pass a lot of things, but for now we’ll take a look at using CSS selectors. And this is what you are familiar with. For example, let’s add ul>li{Hello}. Within your stylesheet, you would target that list item likely by doing li {color: red}. Am I right? Or, you might do ul li. But try not to be anymore specific than you need to be. So, how would we do that with jQuery if we want to target the same thing? Well, we reference to jQuery function and within it, we pass in the CSS selector. So just to give you a better understanding, let’s keep it ul li. I can copy that exact CSS selector that you know, and paste it into jQuery. Now we’re saying, “Hey jQuery, search the DOM.” Now DOM refers to the document object model. Don’t let that confuse you, for now just think of the DOM as representation of your page essentially. So, right here I’m saying, “Hey jQuery. Use this CSS selector and find all list items.” So, jQuery will jump in to the DOM and it’s going to look for every occurence of the list items like this one and the other set it defines and it will return them. Let’s try this.
We will save that to var (variable) and I’m going to assume again that you have a very modest understanding of JavaScript. And by that I mean, at least read a couple chapters of JavaScript book; otherwise, you might have a little trouble following along but we won’t do anything too difficult. And I’m going to save this to a variable called lis for list item, var lis jQuery(‘ul li’). So, let’s see and what we get in return. And the popular way to do that is through development tools. Most browsers these days have them built-in. For example, Chrome, what we’ll be using has Developer Tools available. I can right click and choose “Inspect Element”, and you’ll see that we have this awesome tool available to us that we can view a representation of the DOM. We can take a look at resources that are being loaded and we can also take a look at the console. And this is where errors, logs and warnings, and anything that we would like to log as well. For example, if I want to log this list item, I can say console, notice that it refers right here, and I want you to log list item. Let’s come back, open our file, lesson-1. And once again, if I open up Chrome Developer Tools, this time I’m going to ‘View’, ‘Developer’, ‘Developer Tools’. Alternatively, on the Mac, I can press ‘Command Option I’. Now, you’ll see that jQuery didn’t fact fetch the list item in the DOM and save it to ‘lis variable’. To make sure this is working, once again can, let’s copy a little more. Come back and reload the page. And you’ll see that we now have available these to us. So right about you can see how powerful this is. You don’t need to learn anything new. You simply rely on the CSS selector that you already familair with to query and manipulate the DOM. Before I move on to show you the short hand way of jQuery function, let’s do something with this object. So, I will clear the console, remove the variable and we will fetch all list items and adjust the CSS and we’ll make the color, this time will be green. Let’s try that out. Refresh and what do you know? The color is now green. If I want to see the representation of the DOM, I will click on elements, open up the ‘ul’ and you can see what jQuery’s doing is it is depending on style attribute to each list item. Now as a rule of thumb, sometimes you have to do this. For example, when the values will be calculated dynamically, you will have to reference methods like this; however, whenever possible, always try to keep this styling within your stylesheet. That where you have separation from your content to your styling to your logic.
In this case, let’s create a new class and we’ll simply call it emphasis, something like that, and the color will be green there. With jQuery, rather than editing the CSS for each dominal element, I will simply add a class. And to do that we will reference .addClass. What is the class means? We’ll simply copy that like so, and paste it in. Save it once again. I’m going to come back and reload the page, and we get the exact same effect, but this time we’re not adding a style attribute to each list item; instead, we’re referencing a class and that way CSS can take care of the work.
The last thing that we are going to do today is that you’ll find that it’s far more common for people to reference jQuery via short hand which will be a dollar sign, $. So, this is identical to this. The dollar sign is simply short hand for refering the jQuery object. Just to give you some assurance that they are same, let me show you a different way to reference jQuery as well as the reason why we can use jQuery and dollar sign interchangeably. If I return to Google Chrome, we can also reference a variety of JavaScript libraries using what we call a “CDN”. And the basic idea behind this is Google CDN in this example, we’ll take care bandwidth and because they can distribute so many people, it’s far more likely that the code will be cached to your sytem which means they don’t have to redownload the jQuery file. Again, that makes sure pages appear more quickly.
So you’ll find that it’s fairly common to use Google CDN when referencing the jQuery library. You can go to code.google.com/API/libraries. And in this case, I need jQuery and you’ll see that we have two options here, the Minified version and the Development version. So I’ll copy that version, paste it in and you’ll see that we get the exact same file but now we are using a CDN. I’ll return to Sublime text. And this time, I’m going to replace our local copy with the CDN version. The only downside to this is, you may sometimes end up issues where you don’t have an internet connection.So, this file is not working and you also happens save a local copy which means you can’t test your jQuery, maybe if you’re in the car or in a plane. Let’s do something to think about But definitely for production purposes, or it’s a good idea to use a CDN distributed version of the Minified file.
Now, if we come back to that file, not quite yet but I want you to get in a habit of refering to this source file whenever you need to figure out how to use a particular method. Right now, it’s probably too overwhelming and that’s okay. But if I scroll to the very bottom, you’ll see right here expose jQuery to the global object. Now window.jQuery is the exact same thing as referencing  jQuery. So this, is identical to this. With this kind of code we’re saying is “Get jQuery and create an A-list of source.” Make it equal to a dollar sign and both of those are going to reference the jQuery function right here. And that’s why we can use jQuery or dollar sign interchangeable. Thoughout this course now, I will be sticking with this second version.
Alright that will do it for day 1. Have some fun playing around with these techniques. See what’s possible and get ready for day 2.


1,671
1 likes, 0 dislikes
 TutsjQuery
Comments (0)
Your Response