1
00:00:00,110 --> 00:00:00,530
괜찮아.

2
00:00:00,530 --> 00:00:01,500
다시 오신 것을 환영합니다.

3
00:00:01,500 --> 00:00:03,350
이제 코드를 작성해 보겠습니다.

4
00:00:03,480 --> 00:00:07,290
그리고 우리가하는 방법을 배워야 할 첫 번째 일은 요소를 선택하는 것입니다.

5
00:00:07,290 --> 00:00:13,310
따라서 일반적인 지배적 인 관계 또는 음운론과 마찬가지로, 우리는 사물을 선택하고 조작해야합니다.

6
00:00:13,380 --> 00:00:18,300
나는 거기에 약간의 부러진 기록이 있음을 알고 있지만, 그것은 정말로 중요한 과정이며, 그 다음에 사물을 변화시킨다.

7
00:00:18,300 --> 00:00:24,230
이 비디오는 주로 두 가지 주요 목적을 위해 J Query를 사용하여 요소를 선택하는 데 초점을 맞 춥니 다.

8
00:00:24,390 --> 00:00:33,500
첫 번째 방법은 달러 기호 함수를 사용하여 요소를 선택하는 방법과 C 평가 메서드를 사용하여 요소를 스타일 화하는 방법을 학습하는 것입니다.

9
00:00:33,630 --> 00:00:45,210
그래서 우리는 단지 물건을 출력하는 것 뿐이며 더 시각적으로 만듭니다. 우리는 그들을 선택하고 배경색과 Jay 쿼리를 변경합니다. 우리는 하나의 기능을 사용하여 원하는 모든 것을 선택할 수 있습니다.

10
00:00:45,570 --> 00:00:46,800
달러 기호입니다.

11
00:00:46,920 --> 00:00:55,650
그래서 바닐라 J.S. 우리는 id에 의해 요소를 얻는 문서를 가지고있다. 질의 선택자 (query selector) 모든 것은 클래스 이름의 원소를 얻는다. 태그 이름으로 원소를 얻는다.

12
00:00:55,650 --> 00:01:00,840
달러 기호를 선택하는 방법에는 여러 가지가 있으며 Jay 쿼리는 모든 것을 대체합니다.

13
00:01:00,990 --> 00:01:07,230
기본적으로 Cs 스타일 선택기를 제공한다는 점에서 쿼리 선택기와 같이 작동합니다.

14
00:01:07,320 --> 00:01:12,370
Jay 질의는 우리가 제공 한 선택 자와 일치하는 모든 일치하는 요소를 반환합니다.

15
00:01:12,720 --> 00:01:25,460
그래서 여기에 예제가 있습니다. 페이지의 모든 이미지 태그를 선택하기를 원한다면 우리는 점 스케일을 수행하는 모든 클래스의 요소를 선택하고 싶을 것입니다.

16
00:01:25,620 --> 00:01:28,380
스타일 선택기가 설정되어 있다는 것을 기억하십시오.

17
00:01:28,380 --> 00:01:39,000
그래서 ID를 위해서 점을 필요로하는 클래스를위한 Thorpe 호가 필요합니다. 그리고 목록 요소 안에있는 모든 앵커 태그를 선택하는 것과 같은 더 진보 된 것들을 할 수 있습니다.

18
00:01:39,360 --> 00:01:41,900
여기 어떻게 작동하는지에 대한 간단한 데모를하겠습니다.

19
00:01:42,060 --> 00:01:47,750
그래서 우리는 Jake Querrey 데모를 통해 Cdn이 포함 된 페이지를 설정했습니다.

20
00:01:48,300 --> 00:01:54,180
N 단어를 사용하면 문제가되지 않으며 다운로드 한 사본을 사용하려면 동일한 방법으로 작동합니다.

21
00:01:54,180 --> 00:01:58,110
그래서 우리는이 스크립트가 필요합니다. 그리고 나서 우리는 약간의 콘텐츠가 필요합니다.

22
00:01:58,110 --> 00:02:00,410
그래서 나는 H-1 S.J. 핵심 데모.

23
00:02:00,510 --> 00:02:06,270
이 동맹국을 조금 더 독특하게 바꾸어 내가 좋아하는 동물 몇 개를 채울거야.

24
00:02:06,480 --> 00:02:08,260
끝은 뉴트입니다.

25
00:02:08,520 --> 00:02:15,510
내 5 살짜리 자기가 가장 좋아하는 동물 알파벳 노래 부분에서 내 즐겨 찾기 앨범 인 원숭이를 추가 할 것입니다.

26
00:02:15,870 --> 00:02:19,050
그리고 마침내 소나무 마틴.

27
00:02:19,680 --> 00:02:24,820
그리고 당신이 소나무 marten을 결코 보지 않는 경우에 그들은 동등하게 사랑스럽고 두려운 동물이다.

28
00:02:24,950 --> 00:02:27,190
그래서 여기에서 꽤 사랑스러운 것을 볼 수 있습니다.

29
00:02:28,060 --> 00:02:32,690
그러나 행동에서 그들을 보시면 미친 포식자이며 꽤 무서운 사람입니다.

30
00:02:33,000 --> 00:02:33,270
승인.

31
00:02:33,300 --> 00:02:38,770
목록에있는 내가 좋아하는 동물 중 일부가 저장되어 이제 열어 보겠습니다.

32
00:02:39,720 --> 00:02:41,150
우리가 올바른 디렉토리에 있는지 확인하십시오.

33
00:02:41,200 --> 00:02:53,620
Jay는 각 Chimo와 내가 할 일은 자체 창에서이 작업을 이동시키는 데모를 수행하고 콘솔에서 글꼴 크기를 조금 더 크게 설정하고 쿼리를 사용하여 이러한 작업 중 일부를 선택하도록하겠습니다.

34
00:02:53,640 --> 00:02:56,100
그래서 달러 기호는 함수라는 것을 기억하십시오.

35
00:02:56,520 --> 00:03:00,490
그리고 달러 기호 만 입력하면 괄호없이 자신의 것입니다.

36
00:03:00,720 --> 00:03:08,700
그건 마치 괄호 나 죄수없이 경고를 타이핑하는 것과 같습니다. 괄호가없는 도트 로그는 말해주는 것 외에는 아무 것도하지 않습니다.

37
00:03:08,940 --> 00:03:12,610
그래, 그 코드에 대해 알고 있지만 실제로 그것을 실행하지 않습니다.

38
00:03:13,170 --> 00:03:16,860
먼저 페이지에서 H-1 만 선택하면됩니다.

39
00:03:16,860 --> 00:03:24,550
달러 기호와 s 선택기를 사용하여 h를 선택하면 H-1이고 엔터를 누릅니다.

40
00:03:24,600 --> 00:03:27,480
J queery 데모 H-1을 반환하는 것을 볼 수 있습니다.

41
00:03:27,630 --> 00:03:30,110
또한 목록 안에 있음을 알 수 있습니다.

42
00:03:30,300 --> 00:03:36,480
따라서 첫 번째 인스턴스를 반환하는 쿼리 선택기와 달리 달러 기호 선택기를 사용합니다.

43
00:03:36,480 --> 00:03:43,310
실제로 유용한 하나의 항목 만있는 경우에도 쿼리는 목록을 반환하며 조금만 보게됩니다.

44
00:03:43,320 --> 00:03:53,150
이제는 모든 동맹국을 선택해 봅시다. 그래서 우리는 Dollar Sign 동맹과 같은 일을 할 수 있습니다. 그러면 우리는 3 명의 동맹국을 얻게됩니다.

45
00:03:53,490 --> 00:03:59,130
우리는 또한 시체를 입력하여 시체를 선택하고 좀 더 흥미로운 것들을 만들 수 있습니다.

46
00:03:59,130 --> 00:04:20,430
우리 나이의 이메일로 돌아가서 아이디를 추가합시다. 소나무 마틴에 우리는 그것을 이드로서 사랑스럽고, 우리는 또한 우리의 고함 원숭이에 A 태그 고함 원숭이를 추가 할 수 있으며, 원숭이 닷컴에 가면 이것은 원숭이 닷컴이 될 것입니다.

47
00:04:20,730 --> 00:04:30,550
그리고 만약 우리가 그 링크를 선택하고 싶다면 나는 달러 기호를 사용할 것이고 나는 단지 앵커 태그를 할 수 있고 그것은 나에게 줄 것이다.

48
00:04:30,600 --> 00:04:34,740
나는 또한 맹방 내부에 앵커 태그를 말할 수 있습니다.

49
00:04:34,980 --> 00:04:40,770
나는 또한 의지의 대신에 맹방의 안쪽에 닻 꼬리표를 말하고 싶으면 할 수 있었다.

50
00:04:41,100 --> 00:04:43,990
그리고 지금까지 모든 경우에 그것들은 동일합니다.

51
00:04:44,160 --> 00:04:51,270
그러나 페이지의 하단에 다른 앵커 태그를 추가하면 Google은 컴퍼넌트를 새로 고칩니다.

52
00:04:51,810 --> 00:04:55,290
그리고 지금 저는 달러 기호 앵커 태그를 사용합니다.

53
00:04:55,290 --> 00:04:57,350
나는 두 앵커 태그를 모두 얻는다.

54
00:04:57,820 --> 00:05:05,820
안쪽에 앵커 태그가있는 동맹국과 함께 달러 기호 UL을한다면이 앵커 태그 만 제공합니다.

55
00:05:05,970 --> 00:05:27,890
아니면 그냥 여기에 우리가 그것을 단축 할 수있는 아이디어를 사랑 스럽다 selectable 또는 all 또는 query selector 또는 C Ss와 같은 작품을 선택하여 북극 또는 해시 기호가 필요한 곳을 선택하십시오. ID 이름은 사랑 스럽다. 그리고 그것은 나에게 소나무 marten 동맹국을 준다.

56
00:05:27,940 --> 00:05:33,660
그래서 우리는 콘솔을 선택하는 방법을 보았습니다. 단지 콘솔로 출력하거나 그냥 여기로 돌아 오는 것을 보는 것만으로는 그리 흥미롭지 않습니다.

57
00:05:33,670 --> 00:06:00,440
하지만 실제로하고 싶은 것은 다음에 나오는 몇 가지 비디오에서 훨씬 더 많은 메서드를 볼 수있는 방법을 소개하는 것입니다.하지만 지금은 시각적으로 보이고 스타일을 변경하는 데 도움이 될 것입니다. 메서드는 Dotsie SS라고 불리며 작동 방식은 선택기 달러 기호와 일부 선택자를 입력 한 다음 Dotsie SS를 끝에 추가하고 일부 속성 및 값을 변경하여 전달할 수 있습니다.

58
00:06:00,450 --> 00:06:11,220
그래서 여기에 특별한 아이디어로 뭔가를 선택하는 예가 있습니다. CSSA를 실행하고 경계선을 두 개의 픽셀로 조정하면됩니다.

59
00:06:11,500 --> 00:06:13,190
그럼 그걸 보여 드리죠.

60
00:06:13,300 --> 00:06:15,400
H-1에 맡기십시오.

61
00:06:15,390 --> 00:06:21,390
그래서 달러 기호 H-1 Dotsie SS를 선택합니다.

62
00:06:21,610 --> 00:06:30,380
그리고 나서 여기 대신에 색깔을 노란색으로 변경하십시오.

63
00:06:30,630 --> 00:06:31,480
그리고 나는 엔터를 쳤다.

64
00:06:31,600 --> 00:06:34,980
그리고 그것이 굉장한 노란색으로 바뀌는 것을 볼 수 있습니다.

65
00:06:35,310 --> 00:06:39,420
따라서 jQuerrey없이 어떻게 할 것인지 항상 기억하는 것이 좋습니다.

66
00:06:39,630 --> 00:06:54,840
그래서 우리는 문서 쿼리 선택기 H-1 점을 얻고 B는 C S를 갖지 않도록 문서와 같은 것을 할 것입니다. 그래서 점 스타일의 점 색상을 동일하게 처리해야합니다.

67
00:06:54,940 --> 00:06:56,700
그리고 그것을 오렌지색으로 바꾸자.

68
00:06:57,690 --> 00:06:58,400
그리고 거기에 우리가 간다.

69
00:06:58,440 --> 00:07:06,300
우리는 그것을 주황색으로 바꿨지 만,이 줄은 실제로 훨씬 더 강력하고 여기서 한 줄로 할 수있는 것보다 훨씬 많은 것을 할 수 있습니다.

70
00:07:06,550 --> 00:07:14,100
이 H-1에 대한 여러 스타일을 변경하고 싶다고 가정 해 보겠습니다. 색상, 배경색 및 테두리를 변경하고 싶었습니다.

71
00:07:14,110 --> 00:07:19,240
내가 할 수있는 것은 내 스타일을 객체에 정의하고 객체를 전달하는 것입니다.

72
00:07:19,480 --> 00:07:24,250
그래서 나는 Porter에 문자열 값을 쉼표로 사용하지 않아도됩니다.

73
00:07:24,550 --> 00:07:31,070
여러 속성을 가진 개체를 여러 개의 키 값 쌍으로 정의하고이를 전달하면 모두 적용됩니다.

74
00:07:31,360 --> 00:07:32,500
자 이제하자.

75
00:07:32,760 --> 00:07:37,080
스타일을 정의하고 별도의 객체를 만들 필요가 없습니다.

76
00:07:37,120 --> 00:07:38,250
내가 보여줄거야.

77
00:07:38,350 --> 00:07:56,340
그리고 여기 대신에 색상은 빨간색이어야하고 분홍색이어야하며 우리는 테두리가 두 개의 픽셀로 단색 자주색이어야한다고 말합니다.

78
00:07:56,740 --> 00:08:02,460
그리고 Enter를 누르면 스타일이 객체가되고 다시 호출 할 수 있습니다.

79
00:08:02,740 --> 00:08:05,060
그리고 나서 우리가 할 일은 H-1을 선택하는 것입니다.

80
00:08:05,310 --> 00:08:14,950
그래서 달러 기호 H-1은 우리에게 다시 큰 도움을줍니다. 우리는 우리 스타일의 객체를 전달하고 모든 스타일이 적용됩니다.

81
00:08:15,190 --> 00:08:19,720
따라서 j 쿼리없이이 작업을 수행하려면 세 개의 별도 라인을 사용해야합니다.

82
00:08:19,750 --> 00:08:32,400
당신은 쿼리 분석가가 H-1 스타일의 짙은 색상을 빨간색과 같게하고 도트 스타일의 도트 배경이 분홍색과 같고 테두리가 두 개의 픽셀 단색의 보라색과 같다고하는 문서를 작성해야합니다.

83
00:08:32,710 --> 00:08:35,580
다행히도 이미 몇 라인 만 있으면 알 수 있습니다.

84
00:08:35,640 --> 00:08:38,240
J Query는 이미 매우 강력한 것으로 입증되었습니다.

85
00:08:38,520 --> 00:08:44,370
그리고 우리가 그것없이 모든 것을 할 수있는 동안 그것은 확실히 우리에게 시간을 절약하고 우리의 코드를 더 깨끗하게합니다.

86
00:08:44,710 --> 00:08:58,160
점 CSSA 메서드의 또 다른 기능을 사용하면 훨씬 더 유용 할 것입니다. 이제 우리가 할 수있는 일은 실제로 첫 번째 요소를 선택하고 노란색으로 만드는 것보다 한 번에 여러 요소를 스타일링하는 것입니다.

87
00:08:58,260 --> 00:09:03,290
우리는 모든 사람 또는 모든 동맹국을 선택할 수 있으며, 그렇게하기 위해서는 한 줄만 있으면됩니다.

88
00:09:03,340 --> 00:09:04,110
그래서 나는 그것을 보여줄 것이다.

89
00:09:04,110 --> 00:09:06,430
이제 모든 거짓말을 만들어 봅시다.

90
00:09:06,970 --> 00:09:09,580
그래서 동맹국을 선택해야합니다.

91
00:09:09,730 --> 00:09:11,550
그렇게 좋아.

92
00:09:11,550 --> 00:09:12,650
그리고 내가 들어간다면.

93
00:09:12,780 --> 00:09:31,940
당신은 그것이 나에게 3 명의 동맹국을 제공한다는 것을 알게 될 것입니다. 그러면 C Ss에 체인을 줘야합니다. 그리고 저는 그것에게 하나의 속성 색을주고 그것과 같이 파란색으로 바꿀 것입니다. 그리고 나는 진입해서 이것을 주목할 것입니다. 3 명의 동맹국 모두가 바뀐다.

94
00:09:32,350 --> 00:09:34,610
아주 강력합니다.

95
00:09:34,650 --> 00:09:46,030
우리가하는 일은 선택자 달러 기호 동맹으로 선택하는 것이고 그것은 우리에게 3 명의 동맹국을 제공하고 ALWIS의 여기에있는 동맹국 목록에 Dotsie SS를하는 것입니다.

96
00:09:46,240 --> 00:09:52,320
그것은 실제로 그것들을 모두 청색으로 만들 것이고 우리는 질의없이 수동으로 루프를 돌릴 필요조차 없습니다.

97
00:09:52,360 --> 00:09:59,360
그래서 쿼리를 사용하지 않고 모든 항목을 녹색으로 변경하려면 먼저 모든 항목을 선택해야합니다.

98
00:09:59,500 --> 00:10:06,570
따라서 var 동맹은 쿼리 선택기가 모두 문자열 string을 전달한다는 문서와 동일합니다.

99
00:10:06,790 --> 00:10:08,390
그리고 나서 반복해야합니다.

100
00:10:08,520 --> 00:10:15,350
그래서 var I에서 0은 Elvises보다 길이가 더 깁니다 플러스 플러스입니다.

101
00:10:16,260 --> 00:10:30,100
그리고 루프 안에서 우리는 동맹국을 수행해야합니다. 그 스타일은 그 색깔이 같고 우리는 그렇게 녹색을하고 Enter를 누르십시오.

102
00:10:30,390 --> 00:10:32,850
그리고 당신은 그들이 모두 녹색으로 변하는 것을 볼 수 있습니다.

103
00:10:32,860 --> 00:10:36,800
다시 쿼리가 없으면 할 수 있지만 훨씬 더 많은 코드입니다.

104
00:10:36,900 --> 00:10:40,780
우리는 먼저 그들을 모두 선택해야하며 심지어 그들을 선택하는 것만으로도 고통 스럽습니다.

105
00:10:40,770 --> 00:10:43,820
이것은 단지 달러 기호보다 훨씬 길다.

106
00:10:43,870 --> 00:10:53,450
그리고 나서 for 루프 나 while 루프를 사용하여 수동으로 루프를 돌린 다음 각각을 개별적으로 변경해야합니다. 그러면 쿼리가 완료됩니다.

107
00:10:53,560 --> 00:11:02,900
우리가 파란색으로 되돌아 가기 위해해야하는 일은 모든 동맹국 Dotsie SS를 선택한 다음 푸른 색 파란색 속성을 전달하는 것입니다.

108
00:11:03,420 --> 00:11:05,260
여기서 몇 가지 예를 더 설명 할 것입니다.

109
00:11:05,430 --> 00:11:20,970
모든 앵커 태그를 Cs와 같은 태그를 선택하고 글꼴 크기를 더 크게 만들어 글꼴 크기를 40 픽셀로 설정하면됩니다.

110
00:11:20,980 --> 00:11:31,140
우리는 큰 링크를 얻었습니다. 이전에했던 것처럼 스타일로 가득 찬 오브젝트를 정의 할 수 있다는 것을 보여줄 것입니다. 그리고 이것을 사용하여 하나의 요소가 아닌 여러 요소의 스타일을 지정할 수 있습니다.

111
00:11:31,240 --> 00:11:44,890
그래서 우리는 모든 거짓말을 선택하고 그것들을 함께 스타일링 할 것입니다. 단순히 SS를 수행하고 색상과 같은 문자열을 전달하는 것보다는 객체를주고 여기에 정의 할 것입니다.

112
00:11:45,550 --> 00:11:47,920
그리고 우리는 여기에 어떤 타입의 공간을 추가 할 것입니다.

113
00:11:48,420 --> 00:11:52,340
그리고 우리가 할 첫 번째 일은 그들 모두의 글꼴 크기를 바꾸는 것입니다.

114
00:11:52,540 --> 00:12:01,300
그래서 글꼴 크기 NCSA 글꼴 Dasch 크기 또는 높이 및 크기 자바 스크립트 및 J 쿼리에서 우리는 낙타의 경우 사용해야합니다.

115
00:12:01,480 --> 00:12:21,140
그래서 글꼴 크기는 공백이나 대시가 없지만 대문자 인 Kimbal의 경우 10 개를 채우면 10 픽셀이됩니다. 그런 다음 테두리에 추가하고이 픽셀을 3 픽셀 보라색으로 채 웁니다.

116
00:12:21,340 --> 00:12:23,610
그 경계선은 항상 놀랍습니다.

117
00:12:23,980 --> 00:12:27,840
마지막으로 배경색 배경을 추가합니다.

118
00:12:28,140 --> 00:12:30,490
그리고 우리 자신의 R.G. 색깔.

119
00:12:30,660 --> 00:12:31,670
그래서 R.G. 비.

120
00:12:31,710 --> 00:12:33,540
그리고 우리는 G.P.A를 할 것입니다. 사실은.

121
00:12:33,690 --> 00:12:36,640
그리고 첫 번째 것도 읽을 것입니다.

122
00:12:37,070 --> 00:12:43,340
89 빨간색 45 녹색 20 파란색.

123
00:12:43,480 --> 00:12:49,490
그리고 0.5 알파는 불투명도 또는 투명도 채널입니다.

124
00:12:49,620 --> 00:12:54,490
그리고 우리가 엔터를 치면 모든 것을 즉시 적용 할 수 있습니다.

125
00:12:54,630 --> 00:12:58,110
그래서 글꼴 크기는 줄어 듭니다. 우리는 10 픽셀을 가지고 있습니다.

126
00:12:58,260 --> 00:13:13,060
우리는 동맹 주위에이 아름다운 경계선을 가지고 있습니다.이 경계선은 보라색 3 픽셀이며,이 색상이 밝은 갈색의 색상처럼 보이는 것으로 밝혀진 배경색을 가지고 있습니다.

127
00:13:13,090 --> 00:13:13,360
괜찮아.

128
00:13:13,360 --> 00:13:22,070
그래서 우리는 달러 기호를 사용하여 선택하는 두 가지 다른 일과 그 자체만으로도 매우 강력한 데모에서 볼 수 있습니다.

129
00:13:22,090 --> 00:13:26,390
그것은 기본적으로 질서 정연한 Slichter와 질서 정연한 선택자가 모두 결합 된 것처럼 작동합니다.

130
00:13:26,640 --> 00:13:29,620
그리고 구문을 작성하는 것이 훨씬 쉽고 빠릅니다.

131
00:13:29,910 --> 00:13:45,040
CSSA 메소드는 여기에서했던 것처럼 개별 속성을 변경할 수 있기 때문에 매우 강력하지만 CSSA 속성에도 서명 할 수 있습니다. 바로 여기 에서처럼 키 값 쌍으로 가득 찬 객체를 전달한 것처럼 말입니다.

132
00:13:45,100 --> 00:14:03,830
아마도이 모든 것의 가장 중요한 부분은 바로 여기에서했던 것처럼 모든 동맹과 같은 컬렉션을 선택할 때 수동으로 반복하여 개별적으로 적용 할 필요가 없다는 것입니다. 여기에서 모든 작업을 반복해야했던 것처럼 J 쿼리를 사용하여 한 번에 하나씩 색상을 변경하십시오.

133
00:14:03,930 --> 00:14:12,990
요소 컬렉션이 있으면 자동으로 반복되고 Dotsie 평가가 모든 단일 요소에 적용됩니다.

134
00:14:12,990 --> 00:14:14,600
그래서 매우 강력합니다.

135
00:14:14,770 --> 00:14:19,770
이것이 왜 사이드 노트로서 항상 여기에 배열을 반환하는지에 대한 이유입니다.

136
00:14:19,890 --> 00:14:28,370
ID가있는 요소가 하나만 있어도 목록 뒤에있는 모든 논리는 해당 목록에서 반복되므로 항상 목록에서 반환합니다.

137
00:14:28,470 --> 00:14:31,860
그래서 이것으로 반복 할 것이고 여기에는 하나의 항목 만 있습니다.

138
00:14:31,890 --> 00:14:33,030
그래서 실제로 돌아 가지 않습니다.

139
00:14:33,040 --> 00:14:34,540
그것은 단지 한 번 넘어갑니다.