Home-theater-designers
지난 주에 저는 jQuery가 현대 웹 개발자에게 얼마나 중요한지, 그리고 왜 멋진지에 대해 이야기했습니다. 이번 주에는 일부 코드로 손을 더럽히고 프로젝트에서 jQuery를 실제로 사용하는 방법을 배웠습니다.
나는 지금 이것을 말할 것이다 - 당신은 jQuery를 사용하기 위해 자바스크립트를 배울 필요가 없다. jQuery를 단순히 기능을 추가하는 라이브러리보다 더 나은 방법인 Javascript의 진화로 생각하는 것이 가장 좋습니다. 필요한 모든 Javascript는 도중에 선택됩니다. 그러나 웹 개발자로서 HTML과 CSS에 대한 상당한 지식이 있다고 가정합니다(그렇지 않은 경우 여기에 유용한 무료 xHTML 가이드가 있습니다!).
문서 객체 모델
jQuery는 순회와 조작에 관한 것입니다. 심판 - NS NS 양피지 또는 대상 미디엄 오델. DOM은 모든 HTML 코드를 읽은 후 브라우저에서 빌드한 페이지의 계층적 트리 표현입니다. jQuery에서는 다음과 같은 용어를 사용합니다. 부모의 , 어린이들 , 그리고 형제 꽤 자주, DOM과 관련하여 이것이 무엇을 의미하는지 알아야 합니다.
이 간단한 다이어그램은w3schools개념을 상당히 잘 설명하고 있습니다. 요소의 부모가 , 반면 요소에는 즉각적인형제 자매.
시작하기: jQuery 추가
최신 버전의 jQuery는 압축 시 약 91KB이므로 작은 사진이나 스크린샷과 같은 페이지 무게가 추가됩니다. 프로젝트에 jQuery를 포함하는 가장 쉬운 방법은 가장 최근에 호스팅된 버전에 대한 참조를 사이트 헤더 섹션에 붙여넣는 것입니다.
그러나 Wordpress를 실행하는 경우 jQuery 라이브러리의 자체 복사본이 이미 있기 때문에 문제가 발생할 수 있습니다. 플러그인은 이것을 로드하도록 요청할 수 있으며 Wordpress는 얼마나 많은 플러그인이 요청했는지에 관계없이 지능적으로 jQuery를 한 번만 로드합니다.
다음 줄을 추가하면 함수.php 테마 파일에 포함할 다른 요청을 추가합니다. 그러면 Wordpress는 테마가 활성 상태인 경우 항상 로드하도록 인식합니다.
아마존 파이어 HD 8 구글 플레이 스토어
wp_enqueue_script('jquery');두 번째로 염두에 두어야 할 것은 jQuery가 표준 방법을 사용하여 추가될 때 다음과 같이 로드된다는 것입니다. $ . jQuery로 수행하는 모든 작업은 다음과 같이 이 $가 앞에 옵니다.
$.ajax또는
$('#header')그러나 jQuery가 Wordpress를 통해 로드되면 $ 대신 jQuery 변수를 사용하여 모든 작업이 수행됩니다. 예를 들면 다음과 같습니다.
jQuery('#header')자신의 코드를 작성할 때 이것이 큰 문제는 아니지만 웹에서 찾은 jQuery 조각을 잘라내어 붙여넣기 대신 jQuery를 사용하려면 번역해야 합니다. $ - 그게 다야.
이 문제를 해결하는 한 가지 방법은 다음과 같이 찾은 $ 스타일 코드를 래핑하는 것입니다.
(function($) {
// paste $ code in here
})(jQuery);이것은 걸립니다 제이쿼리 변수를 다음과 같이 익명 함수에 전달합니다. $ . 익명 함수는 다음 시간에 설명하겠습니다. 지금은 jQuery 코드의 기본 구조를 조금 알아보겠습니다.
HTML 또는 PHP 페이지에 코드를 추가하려면 다음과 같이 모든 항목을 태그로 묶습니다.
// jQuery code codes here
$('선택자').방법();
그게 다야, 거기 제목에. 이것이 DOM을 조작하는 단일 jQuery 코드의 기본 구조입니다. 쉽죠?
NS선택자jQuery에 이 규칙과 일치하는 항목을 찾도록 지시합니다. CSS 선택기와 동일합니다. 따라서 CSS에서와 마찬가지로 모든 링크의 스타일을 지정합니다.
a { }jQuery에서 다음과 같이 수행됩니다.
$('a')이것은 div, h1, span 등 모든 HTML 요소에 대해 수행할 수 있습니다. CSS 클래스와 ID를 사용하여 보다 구체적으로 지정할 수도 있습니다.
예를 들어, 'findme' 클래스가 있는 모든 링크를 찾으려면 다음을 사용합니다.
$('a.findme')매번 요소의 유형을 지정할 필요는 없습니다. 하지만 그렇게 하면 단순히 규칙을 더 구체적으로 만듭니다. 당신은 방금 말할 수 있었다
$('.findme')클래스와 모든 것을 일치시킬 것입니다. 나를 찾아 , 링크인지 여부.
명명된 ID 요소를 사용하려면 # 대신 서명하십시오. 여기서 주요 차이점은 ID 선택기는 하나의 객체만 선택하는 반면 클래스 선택기는 둘 이상을 찾을 수 있다는 것입니다.
안전 모드 Windows 10으로 부팅할 수 없습니다
$('#something')기본적으로 CSS에서 할 수 있다면 jQuery도 그렇게 할 것입니다. 사실, 다음과 같이 상당히 복잡한 CSS3 스타일 의사 선택기를 사용할 수도 있습니다.
$('body p:first')페이지의 단락을 잡을 것입니다. 특정 속성을 가진 요소도 찾습니다. 이 예를 고려하십시오. 내부적으로 가리키는 페이지의 모든 링크를 찾고 싶습니다. 활용 어떤 식으로든 강조 표시합니다. 찾을 수 있는 방법은 다음과 같습니다.
$('a[href*='makeuseof']')멋지지 않아? 글쎄요.
다음 호출 포트는 선택기를 위한 jQuery API 문서 . 사용할 수 있는 모든 다양한 종류의 선택기 목록이 있으며 아무도 당신이 그것들을 모두 배울 것이라고 기대하지 않습니다.
방정식의 다음 부분은방법- 일단 그것들을 모두 찾았으면 그것들을 어떻게 할 것인가 - 그러나 우리는 다음 수업을 위해 그것을 남겨둘 것입니다. 지금 다양한 선택기를 사용해 보려면 다음 CSS 방법을 사용하는 것이 좋습니다. 이것은 두 개의 매개변수를 필요로 합니다 - CSS 속성 이름 , 그리고 새로운 값 해당 속성에 할당합니다. 따라서 모든 링크에 빨간색 배경색을 지정하려면 다음을 수행합니다.
$('a').css('background-color','red');충분히 간단합니다! 실용적인 용도는 아니지만 선택기를 사용하여 찾은 모든 요소를 쉽게 볼 수 있습니다. 이제 계속해서 선택하십시오. DOM이 여러분을 기다립니다.
이 튜토리얼이 도움이 되었기를 바랍니다. 최대한 이해하기 쉽게 하려고 노력했습니다. 궁금한 점이 있으면 언제든지 질문하거나 피드백을 남겨주세요. 하지만 저는 확실히 엘리트 jQuery 닌자가 아닙니다.
공유하다 공유하다 트위터 이메일 VirtualBox Linux 시스템을 강화하는 5가지 팁가상 머신이 제공하는 열악한 성능에 지쳤습니까? VirtualBox 성능을 높이려면 다음을 수행해야 합니다.
다음 읽기 관련 항목- 웹 문화
- 웹 개발
- 자바스크립트
- 프로그램 작성
- 제이쿼리
James는 인공 지능 학사 학위를 보유하고 있으며 CompTIA A+ 및 Network+ 인증을 받았습니다. 하드웨어 리뷰 편집자로 바쁘지 않을 때는 LEGO, VR 및 보드 게임을 즐깁니다. MakeUseOf에 합류하기 전에 그는 조명 기술자, 영어 교사 및 데이터 센터 엔지니어였습니다.
제임스 브루스가 참여한 작품 더보기뉴스레터 구독
뉴스레터에 가입하여 기술 팁, 리뷰, 무료 전자책 및 독점 거래를 확인하십시오!
구독하려면 여기를 클릭하세요.