괜찮아.
다시 오신 것을 환영합니다.
이제 코드를 작성해 보겠습니다.
그리고 우리가하는 방법을 배워야 할 첫 번째 일은 요소를 선택하는 것입니다.
따라서 일반적인 지배적 인 관계 또는 음운론과 마찬가지로, 우리는 사물을 선택하고 조작해야합니다.
나는 거기에 약간의 부러진 기록이 있음을 알고 있지만, 그것은 정말로 중요한 과정이며, 그 다음에 사물을 변화시킨다.
이 비디오는 주로 두 가지 주요 목적을 위해 J Query를 사용하여 요소를 선택하는 데 초점을 맞 춥니 다.
첫 번째 방법은 달러 기호 함수를 사용하여 요소를 선택하는 방법과 C 평가 메서드를 사용하여 요소를 스타일 화하는 방법을 학습하는 것입니다.
그래서 우리는 단지 물건을 출력하는 것 뿐이며 더 시각적으로 만듭니다. 우리는 그들을 선택하고 배경색과 Jay 쿼리를 변경합니다. 우리는 하나의 기능을 사용하여 원하는 모든 것을 선택할 수 있습니다.
달러 기호입니다.
그래서 바닐라 J.S. 우리는 id에 의해 요소를 얻는 문서를 가지고있다. 질의 선택자 (query selector) 모든 것은 클래스 이름의 원소를 얻는다. 태그 이름으로 원소를 얻는다.
달러 기호를 선택하는 방법에는 여러 가지가 있으며 Jay 쿼리는 모든 것을 대체합니다.
기본적으로 Cs 스타일 선택기를 제공한다는 점에서 쿼리 선택기와 같이 작동합니다.
Jay 질의는 우리가 제공 한 선택 자와 일치하는 모든 일치하는 요소를 반환합니다.
그래서 여기에 예제가 있습니다. 페이지의 모든 이미지 태그를 선택하기를 원한다면 우리는 점 스케일을 수행하는 모든 클래스의 요소를 선택하고 싶을 것입니다.
스타일 선택기가 설정되어 있다는 것을 기억하십시오.
그래서 ID를 위해서 점을 필요로하는 클래스를위한 Thorpe 호가 필요합니다. 그리고 목록 요소 안에있는 모든 앵커 태그를 선택하는 것과 같은 더 진보 된 것들을 할 수 있습니다.
여기 어떻게 작동하는지에 대한 간단한 데모를하겠습니다.
그래서 우리는 Jake Querrey 데모를 통해 Cdn이 포함 된 페이지를 설정했습니다.
N 단어를 사용하면 문제가되지 않으며 다운로드 한 사본을 사용하려면 동일한 방법으로 작동합니다.
그래서 우리는이 스크립트가 필요합니다. 그리고 나서 우리는 약간의 콘텐츠가 필요합니다.
그래서 나는 H-1 S.J. 핵심 데모.
이 동맹국을 조금 더 독특하게 바꾸어 내가 좋아하는 동물 몇 개를 채울거야.
끝은 뉴트입니다.
내 5 살짜리 자기가 가장 좋아하는 동물 알파벳 노래 부분에서 내 즐겨 찾기 앨범 인 원숭이를 추가 할 것입니다.
그리고 마침내 소나무 마틴.
그리고 당신이 소나무 marten을 결코 보지 않는 경우에 그들은 동등하게 사랑스럽고 두려운 동물이다.
그래서 여기에서 꽤 사랑스러운 것을 볼 수 있습니다.
그러나 행동에서 그들을 보시면 미친 포식자이며 꽤 무서운 사람입니다.
승인.
목록에있는 내가 좋아하는 동물 중 일부가 저장되어 이제 열어 보겠습니다.
우리가 올바른 디렉토리에 있는지 확인하십시오.
Jay는 각 Chimo와 내가 할 일은 자체 창에서이 작업을 이동시키는 데모를 수행하고 콘솔에서 글꼴 크기를 조금 더 크게 설정하고 쿼리를 사용하여 이러한 작업 중 일부를 선택하도록하겠습니다.
그래서 달러 기호는 함수라는 것을 기억하십시오.
그리고 달러 기호 만 입력하면 괄호없이 자신의 것입니다.
그건 마치 괄호 나 죄수없이 경고를 타이핑하는 것과 같습니다. 괄호가없는 도트 로그는 말해주는 것 외에는 아무 것도하지 않습니다.
그래, 그 코드에 대해 알고 있지만 실제로 그것을 실행하지 않습니다.
먼저 페이지에서 H-1 만 선택하면됩니다.
달러 기호와 s 선택기를 사용하여 h를 선택하면 H-1이고 엔터를 누릅니다.
J queery 데모 H-1을 반환하는 것을 볼 수 있습니다.
또한 목록 안에 있음을 알 수 있습니다.
따라서 첫 번째 인스턴스를 반환하는 쿼리 선택기와 달리 달러 기호 선택기를 사용합니다.
실제로 유용한 하나의 항목 만있는 경우에도 쿼리는 목록을 반환하며 조금만 보게됩니다.
이제는 모든 동맹국을 선택해 봅시다. 그래서 우리는 Dollar Sign 동맹과 같은 일을 할 수 있습니다. 그러면 우리는 3 명의 동맹국을 얻게됩니다.
우리는 또한 시체를 입력하여 시체를 선택하고 좀 더 흥미로운 것들을 만들 수 있습니다.
우리 나이의 이메일로 돌아가서 아이디를 추가합시다. 소나무 마틴에 우리는 그것을 이드로서 사랑스럽고, 우리는 또한 우리의 고함 원숭이에 A 태그 고함 원숭이를 추가 할 수 있으며, 원숭이 닷컴에 가면 이것은 원숭이 닷컴이 될 것입니다.
그리고 만약 우리가 그 링크를 선택하고 싶다면 나는 달러 기호를 사용할 것이고 나는 단지 앵커 태그를 할 수 있고 그것은 나에게 줄 것이다.
나는 또한 맹방 내부에 앵커 태그를 말할 수 있습니다.
나는 또한 의지의 대신에 맹방의 안쪽에 닻 꼬리표를 말하고 싶으면 할 수 있었다.
그리고 지금까지 모든 경우에 그것들은 동일합니다.
그러나 페이지의 하단에 다른 앵커 태그를 추가하면 Google은 컴퍼넌트를 새로 고칩니다.
그리고 지금 저는 달러 기호 앵커 태그를 사용합니다.
나는 두 앵커 태그를 모두 얻는다.
안쪽에 앵커 태그가있는 동맹국과 함께 달러 기호 UL을한다면이 앵커 태그 만 제공합니다.
아니면 그냥 여기에 우리가 그것을 단축 할 수있는 아이디어를 사랑 스럽다 selectable 또는 all 또는 query selector 또는 C Ss와 같은 작품을 선택하여 북극 또는 해시 기호가 필요한 곳을 선택하십시오. ID 이름은 사랑 스럽다. 그리고 그것은 나에게 소나무 marten 동맹국을 준다.
그래서 우리는 콘솔을 선택하는 방법을 보았습니다. 단지 콘솔로 출력하거나 그냥 여기로 돌아 오는 것을 보는 것만으로는 그리 흥미롭지 않습니다.
하지만 실제로하고 싶은 것은 다음에 나오는 몇 가지 비디오에서 훨씬 더 많은 메서드를 볼 수있는 방법을 소개하는 것입니다.하지만 지금은 시각적으로 보이고 스타일을 변경하는 데 도움이 될 것입니다. 메서드는 Dotsie SS라고 불리며 작동 방식은 선택기 달러 기호와 일부 선택자를 입력 한 다음 Dotsie SS를 끝에 추가하고 일부 속성 및 값을 변경하여 전달할 수 있습니다.
그래서 여기에 특별한 아이디어로 뭔가를 선택하는 예가 있습니다. CSSA를 실행하고 경계선을 두 개의 픽셀로 조정하면됩니다.
그럼 그걸 보여 드리죠.
H-1에 맡기십시오.
그래서 달러 기호 H-1 Dotsie SS를 선택합니다.
그리고 나서 여기 대신에 색깔을 노란색으로 변경하십시오.
그리고 나는 엔터를 쳤다.
그리고 그것이 굉장한 노란색으로 바뀌는 것을 볼 수 있습니다.
따라서 jQuerrey없이 어떻게 할 것인지 항상 기억하는 것이 좋습니다.
그래서 우리는 문서 쿼리 선택기 H-1 점을 얻고 B는 C S를 갖지 않도록 문서와 같은 것을 할 것입니다. 그래서 점 스타일의 점 색상을 동일하게 처리해야합니다.
그리고 그것을 오렌지색으로 바꾸자.
그리고 거기에 우리가 간다.
우리는 그것을 주황색으로 바꿨지 만,이 줄은 실제로 훨씬 더 강력하고 여기서 한 줄로 할 수있는 것보다 훨씬 많은 것을 할 수 있습니다.
이 H-1에 대한 여러 스타일을 변경하고 싶다고 가정 해 보겠습니다. 색상, 배경색 및 테두리를 변경하고 싶었습니다.
내가 할 수있는 것은 내 스타일을 객체에 정의하고 객체를 전달하는 것입니다.
그래서 나는 Porter에 문자열 값을 쉼표로 사용하지 않아도됩니다.
여러 속성을 가진 개체를 여러 개의 키 값 쌍으로 정의하고이를 전달하면 모두 적용됩니다.
자 이제하자.
스타일을 정의하고 별도의 객체를 만들 필요가 없습니다.
내가 보여줄거야.
그리고 여기 대신에 색상은 빨간색이어야하고 분홍색이어야하며 우리는 테두리가 두 개의 픽셀로 단색 자주색이어야한다고 말합니다.
그리고 Enter를 누르면 스타일이 객체가되고 다시 호출 할 수 있습니다.
그리고 나서 우리가 할 일은 H-1을 선택하는 것입니다.
그래서 달러 기호 H-1은 우리에게 다시 큰 도움을줍니다. 우리는 우리 스타일의 객체를 전달하고 모든 스타일이 적용됩니다.
따라서 j 쿼리없이이 작업을 수행하려면 세 개의 별도 라인을 사용해야합니다.
당신은 쿼리 분석가가 H-1 스타일의 짙은 색상을 빨간색과 같게하고 도트 스타일의 도트 배경이 분홍색과 같고 테두리가 두 개의 픽셀 단색의 보라색과 같다고하는 문서를 작성해야합니다.
다행히도 이미 몇 라인 만 있으면 알 수 있습니다.
J Query는 이미 매우 강력한 것으로 입증되었습니다.
그리고 우리가 그것없이 모든 것을 할 수있는 동안 그것은 확실히 우리에게 시간을 절약하고 우리의 코드를 더 깨끗하게합니다.
점 CSSA 메서드의 또 다른 기능을 사용하면 훨씬 더 유용 할 것입니다. 이제 우리가 할 수있는 일은 실제로 첫 번째 요소를 선택하고 노란색으로 만드는 것보다 한 번에 여러 요소를 스타일링하는 것입니다.
우리는 모든 사람 또는 모든 동맹국을 선택할 수 있으며, 그렇게하기 위해서는 한 줄만 있으면됩니다.
그래서 나는 그것을 보여줄 것이다.
이제 모든 거짓말을 만들어 봅시다.
그래서 동맹국을 선택해야합니다.
그렇게 좋아.
그리고 내가 들어간다면.
당신은 그것이 나에게 3 명의 동맹국을 제공한다는 것을 알게 될 것입니다. 그러면 C Ss에 체인을 줘야합니다. 그리고 저는 그것에게 하나의 속성 색을주고 그것과 같이 파란색으로 바꿀 것입니다. 그리고 나는 진입해서 이것을 주목할 것입니다. 3 명의 동맹국 모두가 바뀐다.
아주 강력합니다.
우리가하는 일은 선택자 달러 기호 동맹으로 선택하는 것이고 그것은 우리에게 3 명의 동맹국을 제공하고 ALWIS의 여기에있는 동맹국 목록에 Dotsie SS를하는 것입니다.
그것은 실제로 그것들을 모두 청색으로 만들 것이고 우리는 질의없이 수동으로 루프를 돌릴 필요조차 없습니다.
그래서 쿼리를 사용하지 않고 모든 항목을 녹색으로 변경하려면 먼저 모든 항목을 선택해야합니다.
따라서 var 동맹은 쿼리 선택기가 모두 문자열 string을 전달한다는 문서와 동일합니다.
그리고 나서 반복해야합니다.
그래서 var I에서 0은 Elvises보다 길이가 더 깁니다 플러스 플러스입니다.
그리고 루프 안에서 우리는 동맹국을 수행해야합니다. 그 스타일은 그 색깔이 같고 우리는 그렇게 녹색을하고 Enter를 누르십시오.
그리고 당신은 그들이 모두 녹색으로 변하는 것을 볼 수 있습니다.
다시 쿼리가 없으면 할 수 있지만 훨씬 더 많은 코드입니다.
우리는 먼저 그들을 모두 선택해야하며 심지어 그들을 선택하는 것만으로도 고통 스럽습니다.
이것은 단지 달러 기호보다 훨씬 길다.
그리고 나서 for 루프 나 while 루프를 사용하여 수동으로 루프를 돌린 다음 각각을 개별적으로 변경해야합니다. 그러면 쿼리가 완료됩니다.
우리가 파란색으로 되돌아 가기 위해해야하는 일은 모든 동맹국 Dotsie SS를 선택한 다음 푸른 색 파란색 속성을 전달하는 것입니다.
여기서 몇 가지 예를 더 설명 할 것입니다.
모든 앵커 태그를 Cs와 같은 태그를 선택하고 글꼴 크기를 더 크게 만들어 글꼴 크기를 40 픽셀로 설정하면됩니다.
우리는 큰 링크를 얻었습니다. 이전에했던 것처럼 스타일로 가득 찬 오브젝트를 정의 할 수 있다는 것을 보여줄 것입니다. 그리고 이것을 사용하여 하나의 요소가 아닌 여러 요소의 스타일을 지정할 수 있습니다.
그래서 우리는 모든 거짓말을 선택하고 그것들을 함께 스타일링 할 것입니다. 단순히 SS를 수행하고 색상과 같은 문자열을 전달하는 것보다는 객체를주고 여기에 정의 할 것입니다.
그리고 우리는 여기에 어떤 타입의 공간을 추가 할 것입니다.
그리고 우리가 할 첫 번째 일은 그들 모두의 글꼴 크기를 바꾸는 것입니다.
그래서 글꼴 크기 NCSA 글꼴 Dasch 크기 또는 높이 및 크기 자바 스크립트 및 J 쿼리에서 우리는 낙타의 경우 사용해야합니다.
그래서 글꼴 크기는 공백이나 대시가 없지만 대문자 인 Kimbal의 경우 10 개를 채우면 10 픽셀이됩니다. 그런 다음 테두리에 추가하고이 픽셀을 3 픽셀 보라색으로 채 웁니다.
그 경계선은 항상 놀랍습니다.
마지막으로 배경색 배경을 추가합니다.
그리고 우리 자신의 R.G. 색깔.
그래서 R.G. 비.
그리고 우리는 G.P.A를 할 것입니다. 사실은.
그리고 첫 번째 것도 읽을 것입니다.
89 빨간색 45 녹색 20 파란색.
그리고 0.5 알파는 불투명도 또는 투명도 채널입니다.
그리고 우리가 엔터를 치면 모든 것을 즉시 적용 할 수 있습니다.
그래서 글꼴 크기는 줄어 듭니다. 우리는 10 픽셀을 가지고 있습니다.
우리는 동맹 주위에이 아름다운 경계선을 가지고 있습니다.이 경계선은 보라색 3 픽셀이며,이 색상이 밝은 갈색의 색상처럼 보이는 것으로 밝혀진 배경색을 가지고 있습니다.
괜찮아.
그래서 우리는 달러 기호를 사용하여 선택하는 두 가지 다른 일과 그 자체만으로도 매우 강력한 데모에서 볼 수 있습니다.
그것은 기본적으로 질서 정연한 Slichter와 질서 정연한 선택자가 모두 결합 된 것처럼 작동합니다.
그리고 구문을 작성하는 것이 훨씬 쉽고 빠릅니다.
CSSA 메소드는 여기에서했던 것처럼 개별 속성을 변경할 수 있기 때문에 매우 강력하지만 CSSA 속성에도 서명 할 수 있습니다. 바로 여기 에서처럼 키 값 쌍으로 가득 찬 객체를 전달한 것처럼 말입니다.
아마도이 모든 것의 가장 중요한 부분은 바로 여기에서했던 것처럼 모든 동맹과 같은 컬렉션을 선택할 때 수동으로 반복하여 개별적으로 적용 할 필요가 없다는 것입니다. 여기에서 모든 작업을 반복해야했던 것처럼 J 쿼리를 사용하여 한 번에 하나씩 색상을 변경하십시오.
요소 컬렉션이 있으면 자동으로 반복되고 Dotsie 평가가 모든 단일 요소에 적용됩니다.
그래서 매우 강력합니다.
이것이 왜 사이드 노트로서 항상 여기에 배열을 반환하는지에 대한 이유입니다.
ID가있는 요소가 하나만 있어도 목록 뒤에있는 모든 논리는 해당 목록에서 반복되므로 항상 목록에서 반환합니다.
그래서 이것으로 반복 할 것이고 여기에는 하나의 항목 만 있습니다.
그래서 실제로 돌아 가지 않습니다.
그것은 단지 한 번 넘어갑니다.