이제 우리는 Domm이 왜 흥미로운 지에 대해 왜 신경 써야하는지에 대해 논의했습니다.
그리고 우리는 문서 객체 모델이 무엇을 의미하는지에 대해서도 이야기했습니다.
사실 자바 스크립트 객체를 사용하는 페이지의 모든 요소의 모델 인 최상위 객체를 문서라고합니다.
그래서 훌륭합니다. 그러나 우리는 아직 그걸로 아무 것도하지 않는 방법을 보았습니다.
그래서이 비디오에서는 개를 사용하여 사물을 조작하는 과정을 간략하게 소개 할 것입니다.
그래서 저는 전체 과정을 선택하고 조작하는 두 개의 키워드로 끓여 냈습니다.
그래서 우리가 특수 문자 또는 모든 h 또는 모든 이미지 태그의 클래스를 사용하여 셀렉터를 작성하는 곳을 평가하고 요소를 선택한 다음 배경색 보라색 테두리와 같은 스타일을 자바 스크립트와 Dom 및 채우기와 함께 적용합니다.
매우 다른 방식으로 요소를 선택하지만 요소도 선택합니다.
우리는 자바 스크립트 코드를 작성하여 요소를 선택하고이를 우리에게 반환 한 다음 우리가 속성을 변경하여 무언가를 선택하고 조작합니다.
다음 슬라이드에서는 H-1 헤더를 어떻게 선택할 수 있는지 그리고 어떻게 분홍색으로 바꿀 수 있는지 보여 드리겠습니다.
나는 지난 몇 편의 비디오에서 이것을 많이 말하고 있었지만, 당신은 개념만큼이나 구문에 초점을 맞추기를 원하지 않습니다.
다음 몇 개의 비디오는 선택 및 조작의 핵심입니다.
이것은 어떻게 작동하는지에 대한 개요 일뿐입니다.
이 슬라이드에서는 C와 마찬가지로 H1을 선택하는 방법을 보여 드리겠습니다.
주어진 요소를 선택하는 방법에는 여러 가지가 있습니다.
이 경우에이 코드 문서 도트 쿼리 선택기 H-1은이 페이지에서 H-1을 선택할 것입니다.
여기서는이 녹색 상자를 강조 표시하여 선택 대상을 볼 수 있습니다.
다시 var H-1 이것은 쿼리 선택기 8 : 1을 문서화하는 모든 변수와 동일합니다.
따라서 우리는 쿼리 선택기에 더 많은 시간을 할애하여 정의 된 내용과 작동 방식을 정의합니다.
그러나이 H1을 나타내는 객체를 반환하고이를 H-1 변수에 저장합니다.
이것이 바로 선정 과정입니다.
다음 부분은 그것을 조작하기 위해 그것을 조작하고 있습니다. 나는 모든 것을 할 수 있습니다. 여기에서 할 일은 모두 분홍색으로 변하는 것입니다.
그래서 우리는 H-1 점 스타일을 나타내는 객체를 가진 변수 인 H-1을 작성합니다.
그것은 하나의 속성이고 그 스타일 속성은 다른 속성이 많은 거대한 개체이며 색상이 그 중 하나입니다.
그래서 H-1은 스타일을하지만 컬러는 핑크색과 같습니다.
그리고 그게 우리가해야 할 전부입니다.
그리고 브라우저에서 해당 속성을 분홍색으로 변경하고 분홍색으로 바꾸면 표시되는 내용을 자동으로 업데이트합니다.
그래서 우리는 여기에서 선택한 다음 조작했습니다.
그래서 여기에 또 하나의 예가 있습니다.
조금 더 복잡합니다.
매 초마다 파란색과 흰색 사이의 배경색을 바꾸는 아주 간단한 애니메이션을 만들고 있습니다.
그래서 우리가 먼저해야 할 일은 몸을 선택하고 그것을 조작하기 위해서입니다.
나는 문서 덤프 쿼리 셀렉터를 사용하는 또 다른 라인을 가지고 있는데, 우리는 다음 비디오 문서에서 쿼리 셀렉터 본문으로 돌아갈 것입니다.
그래서 나에게 body 요소를주었습니다. body 요소는 body 변수에 저장 한 객체 모델을 실제로 제공합니다.
그런 다음이 변수를 파란색으로 만듭니다. 파란색에서 흰색 또는 흰색으로 이동할지 여부를 알아야하기 때문에 사용할 부울입니다.
그래서 그것은 거짓으로 시작한 다음 몇 년 전에 우리가 다루었던 간격을 사용하고 있습니다.
그것이 어떻게 작동 하는지를 기억하지 못한다면 기본적으로 두 가지 주장이 필요합니다.
첫 번째는 함수를 실행하는 코드이고 두 번째는 밀리 초 단위의 숫자 또는 시간입니다.
따라서이 코드는 1000 초 또는 1 초에 1 초마다 발생합니다.
그래서이 코드가 무엇을하는지는 배경이 현재 파란색인지 확인하는 것입니다.
그런 다음 배경이 흰색이면 파란색으로 변경합니다.
그래서 더 자세히 살펴보기 위해 if는 파란색입니다.
그래서 그것은 단지 변수입니다.
그것은 거짓으로 시작합니다.
따라서 페이지가 처음으로로드되는 배경은 흰색이고 파란색은 false입니다.
따라서이 줄은 실행되지 않지만 본문에서는 스타일이 어두운 배경이 파란색 인이 16 진수 색상과 같습니다.
이렇게하면 배경이 파란색으로 바뀝니다.
그래서 우리는 단지 blue 변수를 false에서 true로 변경합니다.
그리고 느낌표 또는 not 연산자를 사용하여 좋은 정렬 방법입니다.
그러면이 코드는 다음 번에 파란색으로 실행됩니다.
그래서이 코드는 몸체는 스타일을 실행하지만 배경은 흰색과 같습니다.
이제 우리는 흰색으로 돌아갈 것입니다.
이것은 실행되지 않습니다 그리고 우리는 다시 거짓으로 파란색으로 변경됩니다.
그리고 그것은 영원히 계속됩니다.
그러니 매 초마다 바뀌는 배경색만큼 산만 해지기를 원하지 않을 것입니다.
그러나 이것은 우리가 H1을 검은 색에서 분홍색으로 바꾸는 것보다 더 복잡한 일을 할 수 있음을 보여줍니다.
그래서 이것을 모두 두 단어로 감싸기 위해 우리가 선택하는 조작을 선택하십시오. 우리는 요소를 나타내는 어떤 객체를 움켜 쥐고 우리는 그들에게 뭔가를합니다.
따라서이 단원의 나머지 부분은 다양한 선택 방법과 조작 방법에 중점을 둡니다.
따라서 다음 비디오는 자바 스크립트를 사용하여 요소를 선택하는 다양한 방법에 대해 자세히 살펴볼 예정입니다.
우리는 이미 하나의 큐리 선택기를 보았습니다.