1
00:00:00,000 --> 00:00:02,180
[treehouse presents]

2
00:00:02,180 --> 00:00:05,540
[Writing Code in jQuery with Andrew Chalkley]

3
00:00:05,540 --> 00:00:07,650
Hi, I'm Andrew.

4
00:00:07,650 --> 00:00:11,790
In this treehouse quick tip, we're talking about jQuery and learning JavaScript.

5
00:00:11,790 --> 00:00:14,550
jQuery, a framework written in JavaScript,

6
00:00:14,550 --> 00:00:18,420
offers a simple way to add behavior to website's cross-browser

7
00:00:18,420 --> 00:00:20,440
using the same CSS selectors

8
00:00:20,440 --> 00:00:22,480
web developers are familiar with.

9
00:00:22,480 --> 00:00:25,550
In other words, you can write less and do more.

10
00:00:27,210 --> 00:00:30,310
To get started with jQuery, visit jquery.com.

11
00:00:30,310 --> 00:00:32,100
And straight off the bat,

12
00:00:32,100 --> 00:00:34,760
you can see what jQuery code looks like.

13
00:00:34,760 --> 00:00:37,530
If we right-click and inspect the code of the site,

14
00:00:37,530 --> 00:00:39,990
we can see the paragraph with the class neat,

15
00:00:39,990 --> 00:00:42,660
and it's hidden with display none.

16
00:00:48,850 --> 00:00:52,810
Let's see what happens when we hit run code.

17
00:00:55,020 --> 00:00:58,140
As you can see, the paragraph has "ohmy"

18
00:00:58,140 --> 00:01:00,150
added to its class attribute,

19
00:01:00,150 --> 00:01:02,480
and the paragraph is shown.

20
00:01:02,480 --> 00:01:10,250
The $["p.neat"] is jQuery selecting the element

21
00:01:10,250 --> 00:01:12,470
you want to manipulate and add behavior to.

22
00:01:12,470 --> 00:01:15,140
The add class method adds the class name

23
00:01:15,140 --> 00:01:17,510
you want to pass in as an argument.

24
00:01:17,510 --> 00:01:20,480
So in this case, "ohmy" is added.

25
00:01:20,480 --> 00:01:22,490
Now neat is still there, too.

26
00:01:22,490 --> 00:01:26,480
And the show method with the speed of slow

27
00:01:26,480 --> 00:01:30,470
is passed in to show the hidden paragraph.

28
00:01:30,470 --> 00:01:33,260
Notice that the methods are chained together,

29
00:01:33,260 --> 00:01:35,950
resulting in less lines of code.

30
00:01:35,950 --> 00:01:41,990
What you can do in a line of jQuery often amounts to the lines and lines of JavaScript.

31
00:01:41,990 --> 00:01:44,520
While jQuery weighs in around 30k,

32
00:01:44,520 --> 00:01:46,700
it's worth the price of an extra download

33
00:01:46,700 --> 00:01:48,510
instead of reinventing the wheel,

34
00:01:48,510 --> 00:01:50,880
implementing your own cross-browser framework.

35
00:01:52,170 --> 00:01:54,040
With over 80% of sites using jQuery,

36
00:01:54,040 --> 00:01:56,080
it's become the go-to framework when

37
00:01:56,080 --> 00:01:58,760
adding behavior and interactivity to websites.

38
00:01:58,760 --> 00:02:00,250
So what are you waiting for?

39
00:02:00,250 --> 00:02:03,780
Go download it now and try adding it to your next project.