1
00:00:00,600 --> 00:00:07,320
Jake query syntax is specifically made for selecting each GMO elements and performing some type of action

2
00:00:07,440 --> 00:00:10,350
on an individual element or group of elements.

3
00:00:11,710 --> 00:00:14,460
The basic syntax looks as follows.

4
00:00:16,050 --> 00:00:25,400
A dollar sign is to define an access J query a selector is to query or find specific each GMO elements

5
00:00:26,890 --> 00:00:34,930
a J query action is to be performed on the elements it's also a good practice to nest.

6
00:00:34,930 --> 00:00:41,730
J query methods and functions inside a document ready event that looks like this.

7
00:00:44,480 --> 00:00:51,290
This prevents any J query code from running before the document is finished loading will come back to

8
00:00:51,290 --> 00:00:53,880
this point in a moment.

9
00:00:53,990 --> 00:00:57,700
Let's take a look at an example to better illustrate this concept.

10
00:00:59,300 --> 00:01:06,590
We'll create a script that allows users to hide any text contained within a paragraph tag in an each

11
00:01:06,590 --> 00:01:17,520
terminal document by clicking a button Here's a demonstration of what the script will do.

12
00:01:17,630 --> 00:01:25,420
Here we have two lines of text and also a heading the two lines of text are contained within paragraph

13
00:01:25,420 --> 00:01:26,590
tags.

14
00:01:26,680 --> 00:01:32,820
When we click the high text button those two text lines disappear.

15
00:01:34,480 --> 00:01:35,690
And that's what the script will do.

16
00:01:36,590 --> 00:01:39,230
Let's go ahead and get started on the script.

17
00:01:39,230 --> 00:01:45,890
First we need to create a few blocks of text in our body type type the following in with it in between

18
00:01:45,890 --> 00:01:47,750
your open and closed body tags

19
00:01:53,330 --> 00:02:02,290
we'll start with the header.

20
00:02:02,310 --> 00:02:04,750
Now we have our two paragraphs created.

21
00:02:04,750 --> 00:02:06,750
And lastly we need to create our button

22
00:02:10,480 --> 00:02:14,230
next we'll create our script starting with the document ready function

23
00:02:38,190 --> 00:02:43,590
this section here is the hide function that will be triggered when the button is clicked.

24
00:02:43,590 --> 00:02:49,530
Remember that we've specified that only the text in the paragraph tags should be hidden when the button

25
00:02:49,530 --> 00:02:50,910
is clicked.

26
00:02:50,910 --> 00:02:55,470
So the event is specified here the action.

27
00:02:55,540 --> 00:03:03,180
Hi and the element is P which is for the paragraph elements

28
00:03:06,560 --> 00:03:08,830
and this will all be triggered when the button is clicked

29
00:03:15,190 --> 00:03:16,750
and that's it.

30
00:03:16,750 --> 00:03:21,820
The function should now work we'll go ahead and save the file and preview it in our web browser.

31
00:03:25,160 --> 00:03:28,260
And so you can test that out in yours as well.