1
00:00:00,570 --> 00:00:07,500
Hello and welcome to this lecture on how to access J query library.

2
00:00:07,500 --> 00:00:11,760
There are two main ways you can access feature query library.

3
00:00:11,850 --> 00:00:13,530
You can download from J.

4
00:00:13,530 --> 00:00:21,450
Query dot com or you can reference it from a content delivery network they will hosted for you or you

5
00:00:21,450 --> 00:00:28,230
need to do these references using this source attribute some on the J.

6
00:00:28,230 --> 00:00:31,490
Query dot com Web sites if you can just go to J.

7
00:00:31,490 --> 00:00:36,530
Queried or com to download and click on the download button here

8
00:00:39,060 --> 00:00:42,000
depending on what projects you want to use.

9
00:00:42,000 --> 00:00:42,270
J.

10
00:00:42,270 --> 00:00:52,040
Query for if your project is going to involve Internet Explorer 9 or less then you want to go for J.

11
00:00:52,050 --> 00:00:55,020
Query version 1 x.

12
00:00:55,080 --> 00:00:57,210
So there are two branches.

13
00:00:57,300 --> 00:00:57,530
J.

14
00:00:57,540 --> 00:00:59,040
Query one X and J.

15
00:00:59,040 --> 00:01:04,590
Query 2 x 1 x supports Internet Explorer 9 or less.

16
00:01:04,590 --> 00:01:10,470
If you want to use that but if your project doesn't include that you could come for the latest one which

17
00:01:10,470 --> 00:01:12,490
is version to X.

18
00:01:12,600 --> 00:01:14,130
There are two versions of J.

19
00:01:14,130 --> 00:01:15,060
Query.

20
00:01:15,060 --> 00:01:25,110
You've got the compressed and the uncompressed the compressed is usually used for a production development

21
00:01:25,140 --> 00:01:33,480
environment because it makes a faster overlay network while the uncompressed is used for development

22
00:01:33,660 --> 00:01:35,250
or debugging work.

23
00:01:35,250 --> 00:01:43,590
So if you want to do development work or debugging or testing that is recommended that you use the uncompressed

24
00:01:43,650 --> 00:01:45,810
version of a query.

25
00:01:45,810 --> 00:01:51,830
So let me scroll down to I've already got a download that I'm just going to show you what to do.

26
00:01:51,900 --> 00:02:00,840
So if you're going to use version to X if you don't need Internet Explorer 9 or less this is the version

27
00:02:00,840 --> 00:02:01,810
you go for.

28
00:02:01,950 --> 00:02:10,110
You download the compressed sorry the uncompressed because the compress is for a live production environment.

29
00:02:10,110 --> 00:02:16,080
So if you're going to be using development work you'll be needing the compressed version.

30
00:02:16,180 --> 00:02:18,750
This two part one is the current version.

31
00:02:18,750 --> 00:02:23,670
Just double click or you right click and save link as.

32
00:02:23,730 --> 00:02:34,080
Just double click and it should download to your download folder if you want to reference Jake query

33
00:02:34,080 --> 00:02:36,910
from a content delivery network.

34
00:02:36,910 --> 00:02:37,290
What.

35
00:02:37,320 --> 00:02:39,670
This is a good way of doing it.

36
00:02:39,690 --> 00:02:44,850
A lot of people access to query this way because it takes a hassle.

37
00:02:44,850 --> 00:02:52,710
Also out of hosting query this content delivery networks their big networks they can host your query

38
00:02:52,710 --> 00:03:00,390
for you and you don't need to worry about dating J query cause they automatically do it for you or you

39
00:03:00,390 --> 00:03:06,380
need to do is reference the location of the content delivery network.

40
00:03:06,480 --> 00:03:12,660
Just like as they've done yet you put the reference in your script tag where it's got the source attribute

41
00:03:12,960 --> 00:03:21,480
you specify the location of the CDM you want to use your OK you can specify multiple ones but Google

42
00:03:21,480 --> 00:03:22,400
is a very good one.

43
00:03:22,470 --> 00:03:25,610
I'll be using Google for this course.

44
00:03:25,620 --> 00:03:30,570
So if you want to click these are the various content delivery network on the J.

45
00:03:30,630 --> 00:03:39,990
Query website if you wanted to use Google you click on the Google C then and then you go to the code

46
00:03:39,990 --> 00:03:43,750
snippet so you go to libraries and the one you want.

47
00:03:43,750 --> 00:03:49,740
So you just copy this script tag here and paste that into your text editor in the script.

48
00:03:49,740 --> 00:03:57,780
So in the head section and this will give you access to the J query library.

49
00:03:57,780 --> 00:04:01,110
This is my downloaded J query file.

50
00:04:01,110 --> 00:04:07,880
This is your original it's really a small file is 2 for 1 kilobytes of you right click.

51
00:04:07,890 --> 00:04:16,050
You see this size this a really tiny file 241 kilobytes so you can open it and see what's inside.

52
00:04:16,050 --> 00:04:17,250
If you wish.

53
00:04:17,250 --> 00:04:25,200
Once you've downloaded a query you can rename it like I've done here to make it easy for me to reference

54
00:04:25,500 --> 00:04:25,710
so.

55
00:04:25,900 --> 00:04:32,120
But if you don't want to rename it when you reference it in your source attribute you must include the

56
00:04:32,470 --> 00:04:40,260
this the false path that is dash to point one point one point for you must include that if you remove

57
00:04:40,260 --> 00:04:46,510
that extension then you can just name it as a J query dot js file.

58
00:04:46,680 --> 00:04:49,660
So this is how you would use it in a local.

59
00:04:49,670 --> 00:04:55,650
P.S. There are advantages and disadvantages of hosting a query yourself locally.

60
00:04:55,650 --> 00:05:01,830
You don't get the updates regularly so you could miss out on the updates while if you're using a content

61
00:05:01,830 --> 00:05:04,630
delivery network data all the hosting for you.

62
00:05:04,770 --> 00:05:11,610
The updates are automatic so that's the difference between the CDM and hosting it locally.

63
00:05:11,610 --> 00:05:14,810
So let me show you how you would reference it.

64
00:05:14,820 --> 00:05:18,080
So this is a little piece of code I have written.

65
00:05:18,420 --> 00:05:27,780
So this is the way you would include a query in your code usually to be in the health section or in

66
00:05:27,780 --> 00:05:28,620
the script.

67
00:05:28,680 --> 00:05:32,640
Just the very first part of the script.

68
00:05:32,700 --> 00:05:39,350
So this is my local reference to J query because I have renamed it.

69
00:05:39,380 --> 00:05:47,510
So that's why I've just got it as a J query the j as file and then this is my reference to the C the

70
00:05:47,510 --> 00:05:49,610
N network.

71
00:05:49,610 --> 00:05:51,290
This is a google link to the J.

72
00:05:51,290 --> 00:05:52,160
Query library.

73
00:05:52,490 --> 00:05:57,860
So for the duration of the course I'll be using the link from Google just in case there are any updates

74
00:05:58,490 --> 00:05:59,270
during the course.

75
00:05:59,270 --> 00:06:00,900
And I don't miss them.

76
00:06:01,020 --> 00:06:03,110
Few if you're going to do locally.

77
00:06:03,110 --> 00:06:06,400
Make sure you you reference it a name correctly.

78
00:06:06,470 --> 00:06:08,960
If not you it will not work.

79
00:06:08,960 --> 00:06:11,080
If you get the name wrong it will not work.

80
00:06:11,080 --> 00:06:18,420
So make sure you reference Metro the source links to the name correctly.

81
00:06:18,420 --> 00:06:18,830
All right.

82
00:06:18,860 --> 00:06:23,760
Might be safer to just use the CDL network like I've done here.

83
00:06:24,470 --> 00:06:27,980
So they were there so now we'll talk about the syntax.

84
00:06:28,010 --> 00:06:30,490
So we've reference J query.

85
00:06:30,560 --> 00:06:33,970
Let's talk of how you would write to check query code.

86
00:06:33,980 --> 00:06:40,770
So this is how you specify a jerk query code between this script tag here.

87
00:06:40,880 --> 00:06:46,640
So you go to the first script tag is a reference.

88
00:06:47,000 --> 00:06:48,440
I've got two references here.

89
00:06:48,950 --> 00:06:53,630
And then the main code is between the other script tag.

90
00:06:53,690 --> 00:06:58,100
So you've always specify the source first where you get in J.

91
00:06:58,100 --> 00:07:01,220
Query for specify the location of J.

92
00:07:01,220 --> 00:07:04,330
Query and then you specify your code.

93
00:07:05,220 --> 00:07:11,710
So the first line of code is this here is a document the ready function.

94
00:07:11,720 --> 00:07:13,120
This is very important.

95
00:07:13,220 --> 00:07:17,630
You find this line of code in most J query code.

96
00:07:17,630 --> 00:07:22,040
What this does is an event handler function.

97
00:07:22,040 --> 00:07:29,870
It listens out for the web page to make sure the web page has loaded correctly before this code will

98
00:07:29,960 --> 00:07:30,800
execute.

99
00:07:30,810 --> 00:07:34,790
That's the main purpose of the document ready function.

100
00:07:35,150 --> 00:07:40,670
So every J query code is identified with the dollar sign.

101
00:07:41,010 --> 00:07:42,740
Anyway you see a dollar sign.

102
00:07:42,770 --> 00:07:47,080
You know you are referencing a J query library.

103
00:07:47,070 --> 00:07:48,440
The dollar sign.

104
00:07:48,440 --> 00:07:55,190
And then you've got this selector which is this document dot ready function which listens out for the

105
00:07:55,190 --> 00:08:00,230
web page to load before the code on the need executes.

106
00:08:01,040 --> 00:08:12,860
And the code here is this J query uses the uncle as a selector which is this Uncle Tiger this link he

107
00:08:12,860 --> 00:08:15,680
uses that as a selector.

108
00:08:15,680 --> 00:08:23,270
So what we're saying that when I click on this link the event that I want to happen is to make an unlocked

109
00:08:23,270 --> 00:08:24,200
box pop up.

110
00:08:24,410 --> 00:08:31,460
So when the link is clicked this allows lag alert box will pop up and then it would direct me to the

111
00:08:31,460 --> 00:08:33,290
location of the link.

112
00:08:33,290 --> 00:08:34,550
So let's check this out.

113
00:08:36,530 --> 00:08:39,260
So we're going to test AJ queries working.

114
00:08:39,260 --> 00:08:45,950
So if I click on this link here which is this year it should give me this alert and then redirect me

115
00:08:45,950 --> 00:08:47,130
to the actual link.

116
00:08:47,150 --> 00:08:50,880
So if I click on that that's the alert from that.

117
00:08:50,900 --> 00:08:55,810
If I click OK it will now redirect me to this location.

118
00:08:56,040 --> 00:08:56,860
So that means J.

119
00:08:56,860 --> 00:08:59,860
Query is working and installed properly.

120
00:09:00,290 --> 00:09:01,390
And this reference.

121
00:09:01,550 --> 00:09:09,650
So one advantage also arsehole of having a query local and also from a CBN for example the first line

122
00:09:09,650 --> 00:09:17,000
doesn't work if you can't find your query locally it will picture a query up from the CBN network below.

123
00:09:17,240 --> 00:09:22,210
So I've specified it twice if he doesn't get it there he'll pick it up from here.

124
00:09:22,880 --> 00:09:30,680
In this video I showed you how to download a query from the query dot com and also how to reference

125
00:09:30,680 --> 00:09:40,520
it on on your old code and also using the content delivery network object query code must be preceded

126
00:09:40,520 --> 00:09:47,060
with a dollar sign way you see a dollar sign you know you are referencing AJ query code.

127
00:09:47,060 --> 00:09:48,760
Thank you so much for watching.