WEBVTT 00:00:06.610 --> 00:00:09.800 In this video you're going to get introduced to Jay Querrey. 00:00:10.050 --> 00:00:11.440 So what is the equerry. 00:00:12.030 --> 00:00:17.320 Let's go to the Web site and find out is Jay where does. 00:00:18.180 --> 00:00:22.130 If we scroll down we'll find a definition of equerry here. 00:00:22.470 --> 00:00:28.610 So it's saying Jay is a fast small and feature rich javascript's library. 00:00:28.620 --> 00:00:34.980 So first of all it is a javascript library which means that it combines a big list of functions and 00:00:34.980 --> 00:00:40.000 methods that are built using Javascript code. 00:00:40.080 --> 00:00:40.750 All right. 00:00:41.220 --> 00:00:48.060 And then it carries on testing the capabilities of equerry including the manipulation of HMO elements 00:00:48.420 --> 00:00:52.890 and also doing some event handling animations and so on. 00:00:53.490 --> 00:01:03.120 So they query is a javascript library combining functions and methods which make our javascript experience 00:01:03.180 --> 00:01:06.180 easier and our code more user friendly. 00:01:06.210 --> 00:01:12.900 Usually you will find these functions replacing multiple lines of javascript's code by a single line 00:01:12.900 --> 00:01:13.350 . 00:01:13.620 --> 00:01:16.530 So they would make our life easier basically. 00:01:16.620 --> 00:01:17.310 All right. 00:01:17.310 --> 00:01:25.410 So if we want to use the query we need to download a equerry file which includes all these functions 00:01:25.500 --> 00:01:31.020 and if we go to the link don't know equerry because few choices here. 00:01:31.020 --> 00:01:35.430 So we've called equerry 1.6 Jake to point X. 00:01:35.430 --> 00:01:40.710 We're going to go for the first one and we only need the the compressed version because we are going 00:01:40.710 --> 00:01:43.000 for live web sites. 00:01:43.020 --> 00:01:48.510 The compressed version we can use it as well but it's usually used for development and debugging purposes 00:01:48.510 --> 00:01:48.770 . 00:01:48.790 --> 00:01:56.300 OK so if we click on that link We're going to get a file just like this one. 00:01:56.880 --> 00:02:03.560 And then we will need to refer to that file in our javascript code as we have done earlier in external 00:02:03.570 --> 00:02:04.420 Javascript. 00:02:04.710 --> 00:02:11.860 So now we can create a new folder in our products for them when we get a call it's Jake Query. 00:02:13.870 --> 00:02:15.140 OK. 00:02:15.920 --> 00:02:25.740 And then we're going to open this folder using brackets and we're going to create a new file 00:02:28.760 --> 00:02:33.500 and we're going to call it one imbedding. 00:02:33.950 --> 00:02:43.630 Jay equerry and syntax because we're going to be looking at the same sex as well. 00:02:43.650 --> 00:02:45.070 All right. 00:02:45.960 --> 00:02:50.970 So I just copy paste the structure from our recent file. 00:02:51.320 --> 00:02:58.930 Is going to change the title to imbedding query and syntax. 00:02:59.640 --> 00:02:59.850 OK 00:03:07.380 --> 00:03:12.790 let's see the text in the paragraph to Jacqui. 00:03:16.200 --> 00:03:27.450 OK so now we want to use the equerry file and we want to refer to it using external javascript's. 00:03:27.600 --> 00:03:34.900 So all we need to do is to copy the the file. 00:03:35.490 --> 00:03:38.840 Are we going to create another folder first. 00:03:38.870 --> 00:03:43.830 We're going to call it genius where we put all our javascript files and really is just going to copy 00:03:43.830 --> 00:03:47.040 the query file in society's file. 00:03:47.460 --> 00:03:57.740 So in order to embed the query using the query file that we don't know that we will have a script inside 00:03:57.750 --> 00:04:05.390 the head elements using the script tag and we're going to give as a source attributes. 00:04:05.460 --> 00:04:13.500 If you remember how we did the external javascript is exactly that and we are referring to this file 00:04:14.310 --> 00:04:15.390 using the location. 00:04:15.390 --> 00:04:18.840 So is yes for Slash the name of the file. 00:04:19.170 --> 00:04:27.570 Ok so now we've got our e-mail file link to the query. 00:04:27.900 --> 00:04:29.080 Javascript's file. 00:04:29.190 --> 00:04:34.170 Ok so now we can use any function in the query library. 00:04:34.170 --> 00:04:41.190 So if we go to our script here we can use any query function. 00:04:41.340 --> 00:04:44.180 And let's start with one one first example. 00:04:44.700 --> 00:04:45.970 OK. 00:04:46.440 --> 00:04:49.470 So the syntax is as following. 00:04:49.470 --> 00:04:57.330 So first of all we need a dollar sign which means select OK and then we're going to need a selector 00:04:57.340 --> 00:04:57.930 . 00:04:58.530 --> 00:04:59.550 OK. 00:04:59.550 --> 00:05:07.020 So basically the selector is similar to the javascript's gets element by something. 00:05:07.290 --> 00:05:11.420 So we can use an ID we can use a class and so on. 00:05:11.550 --> 00:05:15.510 OK so if we try something like this. 00:05:15.810 --> 00:05:19.210 So it's always a string and we need to put the contents inside the string. 00:05:19.380 --> 00:05:25.230 So if we write before paragraph so we are selecting all the paragraphs in our documents. 00:05:25.260 --> 00:05:26.190 OK. 00:05:26.360 --> 00:05:30.290 And then we need a dot and then an action. 00:05:30.630 --> 00:05:36.600 So the action that we use here is going to be based on the methods of the query library. 00:05:36.600 --> 00:05:42.000 So for example if you want to hide all the barograph in our documents we're just going to use the function 00:05:42.090 --> 00:05:43.440 or the method height. 00:05:43.640 --> 00:05:45.340 OK. 00:05:45.450 --> 00:05:46.910 Just like that's OK. 00:05:46.980 --> 00:06:03.540 One good practice is to wrap the day query code inside another code which is selects the documents and 00:06:04.210 --> 00:06:13.080 a dot and then ready which means that we only run the query code once the documents or the web page 00:06:13.080 --> 00:06:14.410 has fully loaded. 00:06:14.460 --> 00:06:15.100 OK. 00:06:15.100 --> 00:06:25.350 And then inside the ready function we need to put our function we want to execute Okay so we close the 00:06:25.380 --> 00:06:30.750 curly brackets and close the princess and then we can put the code there. 00:06:30.990 --> 00:06:31.410 OK. 00:06:31.410 --> 00:06:33.580 So this is good practice. 00:06:33.780 --> 00:06:38.100 So if we refresh the page we can see that our paragraph disappeared. 00:06:38.550 --> 00:06:39.940 All right. 00:06:39.980 --> 00:06:44.640 There is another easy way of using the documents that's ready. 00:06:44.750 --> 00:06:50.810 There's a short version for that is just by doing a dollar followed by the function. 00:06:51.050 --> 00:06:52.660 And this will work as well. 00:06:53.000 --> 00:06:56.640 OK I can see that but the paragraph has been hidden. 00:06:56.850 --> 00:06:57.420 OK. 00:06:57.660 --> 00:06:59.060 So that's how the query work. 00:06:59.060 --> 00:07:03.700 So first of all we need to use the query library. 00:07:03.720 --> 00:07:12.480 So we need to refer to it in the head elements and then a good practice before using the javascript's 00:07:13.200 --> 00:07:17.570 methods is to wrap the code inside this expression. 00:07:17.640 --> 00:07:25.380 There is another way of referring to the query library is by using a CDMA so we can use for example 00:07:25.890 --> 00:07:28.290 Google Cdn or Microsoft's Cydia. 00:07:28.860 --> 00:07:39.720 So it's a Google CD and library or whatever and we can go to Google hosted libraries 00:07:42.630 --> 00:07:43.830 and if you go to equerry 00:07:47.370 --> 00:07:49.460 we'll find a link here. 00:07:49.460 --> 00:07:53.720 The first one so for boys x so we can just copy the link 00:07:59.830 --> 00:08:02.430 in our head section. 00:08:02.620 --> 00:08:04.440 It's just commons the first one. 00:08:04.830 --> 00:08:06.120 So basically if we do that 00:08:12.150 --> 00:08:15.220 so we can see that our function is working. 00:08:15.330 --> 00:08:22.650 And basically there are advantages of using a link rather than hosting the file ourselves so this is 00:08:22.650 --> 00:08:31.200 going to be mainly faster loading time because users would have already downloaded the query from the 00:08:31.290 --> 00:08:40.440 Google CD and when they have visited other Web sites and also see the ads usually we make sure that 00:08:40.440 --> 00:08:45.160 the download is done using the Lotus server to the user. 00:08:45.180 --> 00:08:49.570 So these are all these will lead to faster loading times. 00:08:49.590 --> 00:08:54.350 All right.