집 > 오류 > Lessons 왜 JQuery에는 달러 기호가 어디에나 있나요? jQuery 소개


Lessons 왜 JQuery에는 달러 기호가 어디에나 있나요? jQuery 소개




JQuery HTML은 "적게 작성하고 더 많은 작업을 수행"하도록 설계된 라이브러리입니다. 프로그래밍 언어는 아니지만 일반적인 JavaScript 작업을 더 쉽게 구현하는 데 사용되는 도구입니다.

JQuery에는 브라우저 간 호환이라는 추가 이점이 있습니다. 귀하의 코드는 모든 최신 브라우저에서 해석될 것입니다.

간단한 프로그램 “Hello, World!” 작성 비교 " JavaScript와 jQuery를 사용하면 둘 사이의 차이점을 확인할 수 있습니다.

자바스크립트

document.getElementById("demo").innerHTML = "안녕하세요, 세계!";

제이쿼리

$("#demo").html("Hello, World!");

이 짧은 예는 jQuery를 사용하여 표준 JavaScript와 동일한 결과를 얻을 수 있지만 더 간결하게 설명하는 방법을 보여줍니다.

목표

이 튜토리얼에서는 jQuery에 대한 기본 지식이 없다고 가정하지만 다음 주제를 다룹니다.

  • 웹 프로젝트에 jQuery를 설치하는 방법;
  • API, DOM, CDN과 같은 중요한 웹 개발 개념을 정의합니다.
  • 일반적인 jQuery 선택기, 이벤트 및 효과.
  • 이 문서에서 배운 개념을 테스트하기 위한 예입니다.
jQuery 설정

JQuery는 문서에 링크할 JavaScript 파일입니다. JQuery를 HTML에 연결하는 방법:

  • 로컬 사본을 다운로드하십시오.
  • CDN(콘텐츠 전송 네트워크)을 통해 파일에 대한 링크를 추가합니다.

메모. CDN(Content Delivery Network)은 지리적 위치를 기반으로 사용자에게 웹 콘텐츠를 제공하는 여러 서버로 구성된 시스템입니다. CDN을 통해 jQuery 파일에 연결하면 자체 서버에서 호스팅되는 경우보다 더 빠르고 효율적으로 사용자에게 제공됩니다.

예제에서는 CDN을 통해 jQuery에 연결합니다. 최신 버전의 jQuery는 Google에서 찾을 수 있습니다. 대신 라이브러리를 다운로드하려면 공식 웹사이트에서 jQuery 사본을 얻을 수 있습니다.

작은 웹 프로젝트를 만들어 보겠습니다. style.css 파일, scripts.js 및 기본 index.html 파일로 구성됩니다.


기본 HTML 마크업을 설정하고 index.html에 저장합니다.

Index.html

jQuery 데모

Index.html

jQuery 데모

JavaScript 스크립트(scripts.js)는 jQuery 라이브러리 아래 문서에 포함되어야 하며 그렇지 않으면 작동하지 않습니다.

메모. jQuery의 로컬 복사본을 다운로드한 경우 js/ 폴더에 저장하고 js/jquery.min.js 링크를 통해 연결합니다.

jQuery 라이브러리가 HTML에 추가되었으며 jQuery API에 대한 전체 액세스 권한이 있습니다.

jQuery를 사용하여

jQuery는 DOM을 통해 브라우저의 HTML 요소에 연결하는 데 사용됩니다.

DOM(문서 개체 모델)은 JavaScript(및 jQuery)가 브라우저에서 HTML과 상호 작용하는 방법입니다. DOM이 무엇인지 확인하려면 브라우저에서 현재 웹페이지를 마우스 오른쪽 버튼으로 클릭하고 "코드 보기"를 선택하세요. 그러면 “개발자 도구” 패널이 열립니다. 여기에 보이는 HTML 코드는 DOM입니다.

모든 HTML 요소는 JavaScript에서 액세스할 수 있는 객체인 DOM 노드로 간주됩니다. 이러한 개체는 루트에 가장 가까운 요소와 트리의 가지로 구성된 트리 구조를 갖습니다. JavaScript는 이러한 요소를 추가, 제거 및 수정할 수 있습니다.

다시 마우스 오른쪽 버튼을 클릭하고 "소스 보기"를 선택하면 원시 HTML이 표시됩니다. 처음에는 DOM과 HTML 소스 코드가 혼동될 수 있지만 둘은 서로 다릅니다. 페이지의 소스 코드는 HTML 파일에 작성된 내용과 정확히 일치합니다. 정적이며 변경되지 않으며 JavaScript의 영향을 받지 않습니다. 결과적으로 DOM은 동적이며 변경될 수 있습니다.

전체 노드를 감싸는 외부 DOM 레이어가 문서 객체입니다. 페이지에서 jQuery를 사용하려면 문서가 "준비"되었는지 확인해야 합니다.

js/ 폴더에 scripts.js 파일을 만들고 다음 코드를 추가합니다.

js/scripts.js

HTML에 삽입된 모든 jQuery 코드는 위 코드로 래핑됩니다. DOM이 JavaScript 코드를 실행할 준비가 된 후에만 작동합니다. 어떤 경우에는 요소가 렌더링될 때까지 JavaScript가 로드되지 않지만 이 블록을 포함하는 것이 모범 사례로 간주됩니다.

"Hello, World!" 스크립트를 실행하려면 jQuery를 사용하여 브라우저에 텍스트를 표시하려면 먼저 데모 식별자가 적용된 빈 단락 요소를 만듭니다.

Index.html

... ...

JQuery가 호출되고 달러 기호($)로 표시됩니다. CSS 구문을 사용하여 jQuery로 DOM에 액세스하고 다음 메소드를 사용하여 작업을 적용합니다.

$("선택기").method();

CSS의 식별자는 (#) 기호로 표시되므로 #demo 선택기를 사용하여 데모 식별자에 액세스합니다. html()은 요소 내부의 HTML 마크업을 변경하는 메서드입니다.

이제 “Hello, World!” 프로그램을 배치하겠습니다. " jQuery Ready() 래퍼 내부에 있습니다. scripts.js 파일의 기존 함수에 다음 줄을 추가하세요.

js/scripts.js

$(document).ready(function() ( $("#demo").html("Hello, World!"); ));

변경 사항을 저장한 후 브라우저에서 index.html 파일을 열 수 있습니다. 모든 것이 올바르게 작동하면 "Hello, World!"라는 문구가 표시됩니다. »

“Hello, World!”를 마우스 오른쪽 버튼으로 클릭하세요. "를 선택하고 "코드 보기"를 선택합니다. 이제 DOM이 표시됩니다.

안녕하세요, 월드!

. 페이지의 소스 코드를 보면 우리가 작성한 원본 HTML 코드만 볼 수 있습니다.

선택기

선택기는 작업할 요소를 jQuery HTML에 알려주는 방법입니다. 공식 문서에서 jQuery 선택기의 전체 목록을 볼 수 있습니다.

선택기에 액세스하려면 $ 기호 뒤에 괄호()를 사용합니다.

$("선택기")

jQuery 매뉴얼에 따르면 큰따옴표로 묶인 문자열이 선호됩니다. 작은따옴표가 있는 문자열이 자주 사용됩니다.

다음은 일반적으로 사용되는 선택기에 대한 간략한 개요입니다.

  • $("*") - 와일드카드: 페이지의 모든 요소를 ​​선택합니다.
  • $(this) - current : 함수 내에서 현재 조작되고 있는 현재 요소를 선택합니다.
  • $("p") - 태그: 태그의 모든 인스턴스를 선택합니다.

    ;

  • $(".example") - class: 예제 클래스가 적용되는 모든 요소를 ​​선택합니다.
  • $("#example") - 식별자: 고유 식별자가 있는 하나의 인스턴스를 선택합니다.
  • $("") - 속성: 유형 속성이 텍스트로 설정된 모든 요소를 ​​선택합니다.
  • $("p:first-of-type") - 의사 요소: 첫 번째 요소를 선택합니다.

    .

JQuery를 HTML에 연결할 때 클래스와 ID를 다루게 됩니다. 클래스는 여러 요소를 선택해야 할 때 사용되고, 식별자는 하나만 선택해야 할 때 사용됩니다.

jQuery 이벤트

예에서 “Hello, World! "페이지가 로드되고 문서가 준비되면 코드가 실행되므로 사용자 개입이 필요하지 않았습니다. 이 경우 jQuery 없이 HTML로 직접 텍스트를 작성할 수 있습니다. 그러나 마우스 클릭 후 페이지에 텍스트가 나타나도록 하려면 jQuery를 사용해야 합니다.

index.html 파일로 돌아가서 요소를 추가하세요. 이 버튼을 사용하여 클릭 이벤트를 추적하겠습니다.

index.html

...클릭 해주세요

click() 메소드를 사용하여 “Hello, World!” 코드가 포함된 함수를 호출합니다. "

js/scripts.js

$(document).ready(function() ( $("#trigger").click(); ));

요소 ID는 Trigger 이며 $("#trigger") 를 사용하여 선택합니다. click()을 추가하면 클릭 이벤트를 수신합니다. 다음으로 click() 메서드 내부에 코드가 포함된 함수를 호출합니다.

function() ( $("#demo").html("Hello, World!"); )

다음은 요소에 대한 전체 jQuery HTML 코드입니다.

js/scripts.js

$(document).ready(function() ( $("#trigger").click(function() ( $("#demo").html("Hello, World!"); )); ));

scripts.js 파일을 저장하고 브라우저에서 index.html을 업데이트하세요. 이제 버튼을 클릭하면 "Hello, World!"라는 텍스트가 나타납니다. ".

이벤트는 마우스나 키보드를 사용하여 브라우저와 사용자가 상호 작용하는 것입니다. 방금 만든 예제에서는 클릭 이벤트를 사용합니다. jQuery 이벤트 메서드의 전체 목록은 공식 jQuery 설명서를 참조하세요. 다음은 일반적으로 사용되는 이벤트 목록입니다.

  • click() - 클릭: 단일 마우스 클릭으로 발생합니다.
  • hover() - hover: 마우스 포인터가 요소 위에 있을 때 발생합니다.
  • submit() - submit: 양식 데이터가 제출될 때 발생합니다.
  • scroll() - 스크롤: 페이지나 요소를 스크롤할 때 발생합니다.
  • keydown() - 키 누름: 키보드의 키를 누를 때 발생합니다.

사용자가 페이지를 스크롤할 때 요소에 애니메이션을 적용하거나 숨기려면 scroll() 메서드를 사용합니다.

ESC 키를 사용하여 메뉴를 종료하려면 keydown() 메서드를 사용합니다. JQuery를 사용하여 드롭다운 메뉴를 만들거나 div에 HTML을 추가하려면 click() 메서드가 사용됩니다.

jQuery 효과

jQuery 효과를 사용하면 페이지에 애니메이션을 추가하고 요소를 조작할 수 있습니다.

자바스크립트와 jQuery

jQuery 란 무엇입니까?

jQuery는 로드된 페이지의 HTML 마크업 요소를 조작하기 위한 다양하고 유용한 소프트웨어 서비스 라이브러리입니다. 로 작성되었습니다. 이 앱의 장점은 매우 뛰어난 기능을 갖추고 있을 뿐만 아니라 소프트웨어 인터페이스가 믿을 수 없을 정도로 단순하다는 것입니다.

jQuery에 대한 설명으로 넘어가기 전에, jQuery가 무엇인지 다시 한 번 상기시켜 드리겠습니다. 문서 개체 모델또는 DOM (문서 개체 모드엘). DOM은 RAM에 있는 개체의 계층 구조로, 로드된 인터넷 페이지의 구조에 해당합니다. DOM은 브라우저에 의해 생성되며, 예를 들어 동일한 JavaScript를 사용하여 마크업 요소 작업을 위한 프로그래밍 인터페이스를 제공합니다. DOM 도구를 사용하면 문서 요소를 검색, 추가 및 제거하고 해당 속성을 편집하고 스타일을 변경할 수 있습니다. 즉, DOM과 JavaScript를 사용하여 동적 인터넷 페이지를 생성합니다. DHTML 페이지(동적 HTML 페이지). jQuery 라이브러리로 돌아가 보겠습니다. jQuery API를 사용하면 필요한 DOM 요소를 쉽게 선택하고 아래 목록에서 해당 요소에 대한 작업을 수행할 수 있습니다.

  • 변화 ;
  • 속성 구성을 편집합니다.
  • 삭제;
  • 자손을 추가합니다.
  • 다른 요소로 이동하거나 감싸십시오.
  • 복사를 수행합니다.
  • 바인딩 이벤트 핸들러;
  • 시각 효과나 애니메이션을 사용자 정의합니다.
물론 이 모든 작업은 베어 DOM과 JavaScript를 사용하여 수행할 수 있지만 이미 만들어진 무료 도구 세트가 있다면 왜 그럴까요? 브라우저 간 호환성을 잊지 마세요. 페이지가 널리 사용되는 모든 브라우저에서 동일하게 작동하도록 하려면 많은 노력이 필요합니다. 왜냐하면 다양한 브라우저에서 다르게 구현하는 항목의 목록이 상당히 많기 때문입니다. jQuery 인터페이스를 통해 작업한다면 이 문제를 잊어버릴 수 있습니다. 당연히 프로그램은 사람이 작성하므로 jQuery에 버그가 있을 수 있지만 이 경우 가까운 시일 내에 문제가 해결될 것으로 예상할 수 있습니다. 에 익숙하고 JavaScript가 무엇인지 알고 있다면 이제는 jQuery를 마스터할 때입니다. 이 멋진 라이브러리의 출현으로 전문가와 초보 웹 디자이너의 역량은 다소 평준화되었으며, 이는 전자를 슬프게 할 수도 있지만 후자에게 영감을 줄 수 있습니다. 다소 과장된 것일 수도 있지만 이제 복잡한 JavaScript 프로그래밍에 특별히 경험이 없는 모든 사람이 인상적이고 빠르며 안정적인 DHTML 페이지를 만들 수 있는 상당한 무기고를 가지고 있다는 사실은 jQuery의 부인할 수 없는 장점입니다. jQuery 연결

먼저 라이브러리를 다운로드해야 합니다. jQuery 작성자 웹사이트에서 이 작업을 수행할 수 있습니다. http://jquery.com. 다음으로, 다음과 같은 태그를 사용하여 연결하면 됩니다.

그게 다입니다. 작업을 시작할 수 있습니다. 다운로드하고 싶지 않다면 개발자 서버에 있는 최신 버전의 라이브러리에 대한 링크를 직접 제공할 수 있습니다. 한편으로는 최신 버전에 연결하는 것이 좋습니다. 왜냐하면 지속적으로 일부 오류를 수정하고 최적화하기 때문입니다. 개별 기능의 작동은 중요하지만, 새 버전에서는 예상하지 못한 변경 사항이 있을 수 있으며 이로 인해 프로젝트 작동 방식이 변경될 수 있습니다.

jQuery 프로그래밍 인터페이스 또는 구문

나는 이미 jQuery 쿼리 구문이 매우 간단하다고 말했습니다. 즉, 요청입니다. jQuery를 사용하여 JavaScript로 프로그래밍하는 것은 다음과 같이 분류될 수 있기 때문입니다. 선언적 프로그래밍, 이는 "어떻게 해야 하는지"보다는 "무엇을 해야 하는지"를 설명한다는 점에서 고전적인 절차적 프로그래밍과 다릅니다. 라이브러리의 이름은 그 본질, 즉 JavaScript 컨텍스트의 쿼리 언어를 반영합니다. 모든 jQuery 요청은 요청 자체가 인수인 $ 함수에 대한 호출로 시작됩니다. 따라서 일반적인 jQuery 쿼리 구문은 다음과 같습니다.

$(요구)[{.필터(표준)}].행동(인수){ .행동(인수)} 요구쉼표로 구분된 선택기 또는 선택기 목록입니다. 요청 구문은 CSS 스타일 선택기의 구문과 동일합니다. 따라서 jQuery 쿼리는 다음과 같이 시작할 수 있습니다.
$("div") - 모든 요소 선택 div;
$(“div, p”) – 모든 요소 선택 div및 요소 피;
$(“.class_name”) – 모든 클래스 요소를 선택합니다. 클래스_이름;
$(“#element_id”) – 식별자가 있는 요소 선택 요소_ID;
$(*) – 모든 요소 선택;
$(“.class_namespan”) – 모든 클래스 요소 내의 모든 범위 요소를 선택합니다. 클래스_이름;
$(“#element_id > div”) – 모든 요소 선택 div, 이는 식별자가 있는 요소의 직계 자손(자식)입니다. 요소_ID.
$(“#element_id .class_name + div”) – 클래스 요소 바로 뒤에 오는 모든 요소를 ​​선택합니다. 클래스_이름요소 내에서 요소_ID.
$(“#ul_id > li:first”) – 첫 번째 요소 선택 리목록 ul_id. 또한 마지막 마지막 요소를 선택하거나 모든 짝수 또는 홀수 홀수 요소를 선택할 수도 있습니다. 다른 옵션이 있습니다.
$(“a”) – 속성 값이 있는 모든 링크를 선택합니다. href로 시작 “http://ru.wikipedia.org”. "^" 기호가 없으면 값이 완전히 일치하는 조건을 얻습니다. "^" 기호 대신 "$" 기호를 넣으면 끝부터 일치하는 데 제한이 생기고 * 기호는 다음을 의미합니다. 속성 값에는 지정된 조각만 포함되어야 합니다.

필터– 추가 기준에 따라 선택한 요소 집합을 필터링하는 방법입니다. 기준은 선택자와 동일합니다. 서로 반대되는 두 가지 작업, 즉 필터와 필터가 없습니다. 조작을 사용하는 경우 필터(기준), 인수 기준을 충족하는 요소만 선택된 상태로 유지됩니다. ~ 아니다, 그러면 만족하지 않는 것만 남게 됩니다. 일반적으로 연산을 사용하는 것이 합리적입니다. ~ 아니다, 연산 기준 이후 필터일반적으로 기본 기능 선택기와 결합하기 쉽습니다. $() . 다음은 이러한 작업을 사용하는 몇 가지 예입니다.
$(“div”).not(“.class_name”) – 모든 항목 제외 div수업 클래스_이름;
$(“td, th, div”).filter(“.class_name”) – 요소 선택 TD, 일, div수업 클래스_이름.

또한 간격 [에서 인덱스가 있는 요소의 시퀀스를 선택할 수 있는 슬라이스(from, to) 작업도 있습니다. ~에서 - 에게].

행동- 사실 이것은 작업 자체입니다. 선택한 요소 집합에 대한 일부 작업입니다. 각 작업은 특정 결과를 반환합니다. 즉, 작업에 새 요소 생성이나 선택한 요소 삭제가 포함되지 않은 경우 동일한 세트, 이미 편집된 세트 또는 새로 생성된 요소 세트가 반환됩니다. 덕분에 여러 작업을 점으로 구분하여 한 번에 지정할 수 있습니다. 아래 예에서는 모든 요소를 ​​선택합니다. 기간, 수업과 관련 없음 클래스_이름 ID가 있는 요소에 복사합니다. 표적:
$("span").not(".class_name").clone().appendTo("#target");

각 작업의 결과는 다음과 같습니다. HTMLElement 요소의 배열. 배열의 크기는 length 속성이나 size() 함수를 사용하여 확인할 수 있습니다. 작업 인수는 문자열 매개변수일 뿐만 아니라 다른 쿼리의 결과일 수도 있습니다. 다음은 한 쿼리의 결과가 요소 내부에 배치되어 다른 쿼리의 결과가 되는 방법에 대한 예입니다.
$("span").not(".class_name").clone().appendTo($("span.class_name"))

전체 쿼리 결과를 인수로 사용할 수는 없지만 별도의 요소를 사용할 수 있습니다.
$("span.class_name").append($("span").not(".class_name"));

따라서 작업에 대한 인수는 문자열로서의 선택자이거나 다른 쿼리의 결과이거나 임의의 인스턴스일 수 있습니다. HTML요소.

jQuery 작업

다음은 jQuery 작업이 포함된 요약 표, 간단한 설명, 실제 사용법을 보여주는 예제 링크입니다.

속성

선택한 요소의 다양한 속성 값을 가져오거나 설정합니다. 새 속성 값을 정의해야 하는 경우 이를 인수로 전달해야 합니다(예: $(“#element”).text(text_value) 또는 $(#element”).html(html_value):

이름 설명 예
텍스트()텍스트.-
오프셋()오프셋(왼쪽, 위쪽)., 볼 이동 기능 공.이동(): $("#ball").offset((left:$("#ball").offset().left + this.dx, top:$("#ball").offset().top + this. dy)); 이 함수는 10밀리초마다 타이머에서 호출됩니다.
너비(), 높이()너비와 높이.-
HTML()선택한 요소 내부의 html 마크업.

jQuery 선택기는 페이지에서 원하는 요소를 선택하는 데 사용됩니다.

jQuery 명령

JavaScript 코드와 마찬가지로 jQuery 코드는 순차적 명령으로 구성됩니다. 명령은 jQuery의 기본 구성 요소입니다.

표준 jQuery 명령 구문:

$(선택기).방법();

  • $ 기호는 그 뒤에 오는 문자가 jQuery 코드임을 나타냅니다.
  • 선택기를 사용하면 페이지에서 요소를 선택할 수 있습니다.
  • 이 메서드는 선택한 요소에 대해 수행해야 하는 작업을 지정합니다. jQuery의 메소드는 다음 그룹으로 나뉩니다.
    • DOM을 조작하는 방법
    • 요소를 장식하는 방법;
    • AJAX 요청을 생성하는 방법
    • 효과 생성 방법
    • 이벤트 핸들러 바인딩 방법.
    • $ 기호

    jQuery는 일반 JavaScript와 결합될 수 있습니다.

    $로 시작하는 줄은 jQuery이고, 줄 시작 부분에 $가 없으면 JavaScript 코드 줄입니다.

    Function start() ( //jQuery를 사용하여 id="hid"인 단락 숨기기 $("p#hid").hide(); //id="change"로 단락의 내용 변경 document.getElementById(" 변경") .innerHTML="이 내용은 JavaScript를 사용하여 수정되었습니다.";

    일부 JavaScript 라이브러리는 $를 사용하여 코드를 나타냅니다. 이들 사이의 이름 충돌을 피하기 위해 jQuery는 noConflect() 명령을 제공합니다. noContribute() 명령을 사용하면 $ 기호를 다른 기호로 바꿀 수 있습니다.

    통사론:

    Var custom_name=jQuery.noConflect();


    //표준 $ 기호를 nsign으로 변경 var nsign=jQuery.noConflect(); //$ nsign(document).ready(function())( nsign("p").css("color","green"); )) 대신 nsign을 사용하여 단락의 색상을 변경합니다.

    퀵뷰

    jQuery 선택기

    선택기를 사용하면 페이지의 요소를 선택하여 해당 요소에 특정 작업을 적용할 수 있습니다.

    다음은 선택기를 사용하여 원하는 요소를 선택하는 다양한 예가 포함된 표입니다.

    예시 결과
    $("p") 페이지에 있는 모든 p 요소가 선택됩니다.
    $(".par") class="par"인 페이지의 모든 요소가 선택됩니다.
    $("#파") id="par"인 페이지의 첫 번째 요소가 선택됩니다.
    현재 HTML 요소를 선택할 수 있습니다. 온라인 편집기에서 이 선택기를 사용하는 예를 보려면 왼쪽의 $(this)를 클릭하세요.
    $("p.par") class="par"인 페이지의 모든 p 요소가 선택됩니다.
    $("p#par") id="par"인 페이지의 모든 p 요소가 선택됩니다.
    $(".par,.header,#열") class="par", class="header" 및 id="heat" 속성 값이 있는 페이지의 모든 요소가 선택됩니다.
    $("") src 속성이 있는 페이지의 모든 요소가 선택됩니다.
    $("") src="value" 속성 값을 가진 모든 요소가 선택됩니다.
    $("") src 속성 값이 .gif로 끝나는 모든 요소가 선택됩니다.
    $("div#wrap .par1") id=wrap인 div 요소 내에 있는 class=par1인 모든 요소가 선택됩니다.
    $(":입력") 페이지의 모든 입력 요소가 선택됩니다.
    $(":유형") . 예를 들어:버튼은 모든 요소를 ​​선택하고, :text는 모든 요소를 ​​선택합니다.

    $(document).ready(function())( //모든 문단의 글꼴 크기를 20픽셀로 설정 $("p").css("fontSize","20px"); //문단의 글꼴 색상을 변경합니다. id=인 요소를 녹색 el2로 $("#el2").css("color","green"); //class=el3인 요소의 글꼴 색상 변경 $(".el3").css(" color","red") ; //id=el2 및 class=el3인 요소의 글꼴을 굵게 만듭니다. $("#el2,.el3").css("fontWeight","bold"); //변경 버튼 텍스트 색상을 파란색으로 $(":input) ").css("color","blue"); //href 속성을 가진 모든 요소의 글꼴 크기를 20픽셀로 설정 $("").css( "fontSize","20px"); //www..site/"]").css("color","green" ));

    퀵뷰

    jQuery 선택기의 전체 목록은 다음에서 찾을 수 있습니다.

    조기 코드 실행 방지

    문서가 완전히 로드되기 전에 코드를 실행하면 종종 오류가 발생한다는 JavaScript 튜토리얼을 기억하실 것입니다.

    사실 스크립트는 아직 로드되지 않은 콘텐츠에 액세스할 수 있으며 이로 인해 항상 오류나 예상치 못한 결과가 발생합니다.

    이를 방지하기 위해 문서가 완전히 로드된 후에만 실행을 시작하는 함수에 코드를 넣는 경우가 많습니다.

    JavaScript에서 조기 코드 실행 방지:

    function start() (문서가 완전히 로드된 후 실행될 코드)

    jQuery에서는 다음과 같은 방법으로 조기 코드 실행을 제거할 수 있습니다.

    jQuery에서 조기 코드 실행 방지:

    //첫 번째 방법: $(document).ready(function())( 문서가 완전히 로드된 후 실행될 코드 )); //두 번째 방법: $().ready(function())( 문서가 완전히 로드된 후 실행될 코드 )); //세 번째 방법: $(function())( 문서가 완전히 로드된 후 실행될 코드 ));

    JavaScript 및 jQuery 코드의 조기 실행을 방지하고 페이지 로딩 속도를 높이는 데 도움이 되는 또 다른 대체 방법이 있습니다( 이에 대해 상기시켜 준 Gringo Americano 사용자에게 감사드립니다.).

    문서 본문의 맨 끝(예: 앞)에 코드를 배치해야 합니다. 이 경우 브라우저에 내장된 JavaScript 인터프리터는 문서가 로드된 후에만 코드를 구문 분석하기 시작합니다. 이전 방법에서는 문서 로딩과 동시에 스크립트가 로딩되며, 문서가 로딩된 후에 이 코드가 실행됩니다.

    문서 본문 내용

    문서 본문의 내용 문서가 완전히 로드된 후 실행될 코드입니다.

    jQuery의 명령 체인

    코드 크기를 줄이기 위해 jQuery 명령을 연결할 수 있습니다.

    체인의 명령은 왼쪽에서 오른쪽으로 교대로 실행됩니다.

    //약어가 없는 코드 $("p").css("color","green"); $("p").css("글꼴 크기","30px"); //단축 코드 $("p").css("color","green").css("font-size","30px");

    너 스스로해라

    작업 1 코드 단어의 문자를 강조 표시하기 위해 아래 나열된 요소의 색상과 글꼴 크기를 변경합니다.

    글꼴 색상 및 크기를 변경합니다.

    • ID가 초원인 요소;
    • class=rainbow인 요소;
    • id=fut인 요소 내부에 있는 id=future인 요소; (이 요소는 빨간색 이외의 색상으로 강조 표시되어야 합니다.)
    • set 속성이 있는 요소입니다.
    • last=code 속성을 가진 요소입니다.

    참고: 요소의 텍스트 색상을 변경하려면 css("color","new_text_color") 메소드를 사용하고, 글꼴 크기를 변경하려면 css("font-size","font_size_px") 메소드를 사용하세요.

    Keypress() - 키보드에서 문자를 입력하기 위한 핸들러를 설치하거나 이 이벤트를 트리거합니다.

    이 방법에는 세 가지 용도가 있습니다.

    키누름(핸들러)

    • eventData - 핸들러에 전달될 데이터가 포함된 객체입니다. (fName1:value1, fName2:value2, ...) 형식이어야 합니다.
    • handler는 핸들러로 설정될 함수입니다.

    키 누름()

    선택한 페이지 요소에서 키 누르기 이벤트를 발생시킵니다.

    참고: 키 누르기 이벤트는 공식 사양에서 다루지 않기 때문에 이를 사용할 때 발생하는 실제 동작은 브라우저, 브라우저 버전 및 플랫폼에 따라 다를 수 있습니다.

    처음 두 변형에서 이 메서드는 .on("keypress", handler) 의 단축 버전이고 세 번째 변형에서는 입니다.

    사용자가 키보드의 키를 누르면 keypress 이벤트가 요소로 전송됩니다. 이는 Shift, Esc 및 Delete와 같은 수정자 및 비인쇄 키가 키 재입력 이벤트를 실행하지만 키 누르기 이벤트는 실행하지 않는다는 점을 제외하면 이벤트와 유사합니다. 두 이벤트의 다른 차이점은 플랫폼과 브라우저에 따라 다를 수 있습니다.

    keypress 이벤트는 모든 요소에 첨부될 수 있지만 포커스가 있는 요소에서만 실행됩니다. 포커스를 받을 수 있는 요소 목록은 브라우저에 따라 다르므로 항상 포커스를 받을 수 있으므로 이 이벤트를 양식 요소에 바인딩하는 것이 가장 안전합니다.

    예를 들어, HTML을 고려해보세요:

    이벤트 핸들러는 입력 필드에 바인딩될 수 있습니다.

    $("#target").keypress(function() ( Alert("이벤트가 트리거되었습니다.keypress()"); ));

    $("#대상" ) . 키 누르기(함수()(

    Alert ("이벤트가 발생했습니다.keypress()" ) ;

    } ) ;

    입력 필드에서 키를 누르면 "Event.keypress() 발생"이라는 메시지가 표시됩니다.

    이벤트를 수동으로 트리거하려면 인수 없이 .keypress()를 사용하십시오.

    $("#other").click(function() ( $("#target").keypress(); ));

    $("#기타" ) . 클릭(함수()(

    $ ("#대상" ) . 키 누름();

    } ) ;

    id="other"인 영역을 클릭하면 이벤트가 실행되고 메시지도 표시됩니다.

    페이지의 아무 곳에나 키 누르기 핸들러를 설치해야 하는 경우(예: 전역 키보드 단축키 구현) 이 동작을 문서 객체에 연결하는 것이 가장 좋습니다. 명시적으로 중지하지 않는 한 키 누르기 이벤트는 DOM을 따라 버블링됩니다.

    키를 누른 코드

    위의 예에서는 어떤 키보드 키가 눌렸는지 확인하기 위해 누른 키의 코드가 포함된 eventObject.which 변수의 값을 보면 됩니다. 브라우저는 이 정보를 저장하기 위해 다양한 속성을 사용하지만 jQuery는 .which 속성을 정규화하므로 이를 안정적으로 사용하여 문자 코드를 추출할 수 있습니다.

    keydown 및 keyup 메소드는 누른 키를 결정하고 keypress는 입력된 문자를 나타냅니다. 따라서 라틴어 "a"를 입력하면 keydown 또는 keyup 이벤트 핸들러 내부의 변수 eventObject.에는 값 65가 포함되고, 키 누르기 핸들러 내부에는 값 97이 포함됩니다. 대문자인 "A"는 다음과 같이 보고됩니다. 모든 종목에서 65개. 이러한 차이로 인해 화살표 키, keydown 또는 keyup과 같은 특수 키 입력을 처리하는 것이 더 나은 선택입니다.

    추가 참고사항

    .keypress() 메서드는 .on("keypress", handler) 의 단축 버전이므로 .off("keypress")를 사용하여 제거할 수 있습니다.

    JavaScript에서 달러 기호는 변수 선언 및 함수 호출에서 흔히 발견됩니다. 변수명(식별자)일 뿐이기 때문에 여기에 숨겨진 신비한 것은 없다는 것을 확신시켜 드리겠습니다. 이것에 대해 이상한 것은 없습니다. 예를 들어, 제가 이전에 작성한 엄청나게 인기 있는 JavaScript 프레임워크(jQuery란 무엇입니까?)는 달러 기호를 사용하여 기본 jQuery 개체에 액세스합니다.

    많은 컴파일 및 해석 언어는 변수를 식별자로 취급합니다. C, C++, PHP, Java, JavaScript 등 모든 언어에는 고유한 구문이 있습니다. 그리고 각 언어의 구문에는 특정 규칙이 적용됩니다. 예를 들어, JavaScript에서 변수 선언 규칙은 각 식별자가 라틴 알파벳 문자, 달러 기호($) 또는 밑줄(_)로 시작해야 하며 숫자(0~9) 또는 기타 문자로 시작할 수 없다는 것입니다. 기호 구두점과 같은 문자. 언급된 두 문자($ 및 _)는 모두 비표준이며 나머지 식별자에 나타날 수 있습니다. 예를 들어 $$$$$(또는 임의 개수의 밑줄)라는 5개의 달러 기호가 연속으로 지정된 변수 이름은 JavaScript 구문 규칙을 따르기 때문에 완벽하게 허용됩니다. 이는 프로그래머가 반드시 준수해야 하는 JavaScript 언어의 간단한 요구 사항입니다. 저를 믿으세요. 여기에는 아주 좋은 이유가 있습니다.

    일부 코드에는 이름이 단순한 $ 기호인 전역 함수 개체가 있었습니다. 숙련된 프로그래머는 이러한 스타일의 코드(var 키워드가 없음)를 바람직하지 않은 것으로 간주합니다. 물론 속임수를 사용하지 않는 한 JavaScript에서는 전역 변수를 사용하지 않으려고 합니다. 어쨌든 요점은 이 함수의 이름을 a, z 또는 _ 등 거의 모든 이름으로 지정할 수 있다는 것입니다.

    // 올바른 식별자의 예 var A = function() ( Alert("함수 A가 호출되었습니다"); ) var $ = function() ( Alert("함수 $가 호출되었습니다"); ) var _ = function() ( 경고 ( "함수 _가 호출되었습니다.");

    또한 JavaScript 버전 1.5 이상에서는 달러 기호 및 밑줄 외에도 Ø와 같은 식별자에 ISO 8859-1 및 유니코드 문자를 사용할 수 있습니다. 놀랄 수도 있지만 uXXXX와 같은 유니코드 시퀀스도 허용됩니다. 여기서 XXXX는 숫자(예: 0024)입니다. 유니코드 문자 u0024는 다음과 동일합니다. ... 달러 표시. 그리고 달러 기호를 참조로 사용하여 ID u0024로 지정된 함수를 호출할 수도 있습니다! 물론, 단지 가능하다고 해서 모든 곳에 사용해서는 안 됩니다. 나는 이것이 바람직한 관행이 아니라고 생각합니다. 많은 프로그래머는 당신보다 지식이 부족할 수 있으며 그러한 "트릭" 때문에 코드가 혼란스럽고 읽을 수 없는 것처럼 보일 것입니다.

    아시다시피 JavaScript는 객체지향 프로그래밍 언어입니다. 식별자에 값을 할당하는 방법에는 여러 가지가 있습니다. 예를 들어, var 키워드를 사용하면 JavaScript는 현재(또는 로컬) 범위에 변수를 생성합니다. var 키워드를 생략하면 변수가 계속 생성되지만 프로그램의 전역 범위에 있으므로 전체 .js 파일에서 볼 수 있습니다. 다시 한 번 상기시켜드리고 싶습니다. 전역 변수를 피하세요. 이 기사는 달러 기호에 관한 것이라는 것을 알고 있지만, 이미 명확하지 않은 경우 다양한 구성 요소가 다른 사람에 의해 작성되거나 프로그래머 팀에 의해 개발된 대규모 프로젝트에 직면할 때 전역 변수가 작동합니다. 따라서 누군가가 var 키워드 없이 전역 변수를 사용해도 괜찮다고 말한다면 그 말을 믿지 마십시오. 그들은 당신을 속이고 있는 것입니다.

    그리고 더. 변수는 JavaScript의 객체이므로 변수를 사용하여 함수를 참조할 수 있습니다. 이미 존재하는 함수에 "멤버 함수"를 할당할 수도 있습니다. 그러나 아직 존재하지 않는 객체에 함수를 할당하려는 시도는 JavaScript에서 실패할 운명입니다. 정말 잘 이해하고 싶다면 아래 코드에 특히 주의하세요.

    이제 배운 내용을 사용하여 브라우저에서 이 코드를 실행하지 않고 이것이 작동하는지 알 수 있습니까?

    관례적으로 달러 기호($), 밑줄(_) 및 심지어 일부 ASCII 문자도 JavaScript의 식별자 어디에서나 사용할 수 있습니다. Ecma 스크립트 문서(7.6 식별자, ECMA-262, 3판)에는 "달러 기호는 자동으로 생성된 코드에만 사용됩니다."라고 나와 있습니다. 이는 프레임워크를 작성하지 않는 한 식별자에 달러 기호($)를 사용해서는 안 된다는 것을 의미합니다. 식별자에 사용할 수 있는 허용되는 문자 목록은 다음과 같습니다.

    식별자 이름::
    식별자시작
    식별자이름 식별자부분
    식별자시작::
    유니코드문자
    $
    _
    유니코드 이스케이프 시퀀스
    식별자부분::
    식별자시작
    유니코드결합마크
    유니코드숫자
    UnicodeConnector구두점
    유니코드 이스케이프 시퀀스

    이 기사의 목적은 달러 기호가 단지 식별자(인기 있는 Prototype 프레임워크에 의해 구현되고 jQuery 개발자가 선택한)일 뿐이라는 것을 보여주는 것입니다. 프로그래머는 왜 그것을 사용합니까? 음, 이는 프레임워크 코드에서 명확한 목적을 갖는 함수에 대한 매우 편리한 이름입니다. 이러한 이유로 달러 기호로 정의된 기본 jQuery 객체는 jQuery 객체와 동의어입니다. 일반 코드에서는 $ 대신 jQuery 객체를 사용합니다. jQuery에 정통하고 문서에 세심한 주의를 기울이는 경우 jQuery 객체 대신 $ 동의어를 사용하는 것은 바람직하지 않습니다. 비록 어떤 이유에서는 그것이 깔끔하다고 생각하는 프로그래머들 사이에서 매우 인기가 있기는 하지만 말입니다.

    요약하자면

    달러 기호 사용의 차이는 의미적입니다. 식별자 이름입니다. 심리적인 측면에서 보면 편안하고 우아해 보입니다. 기술적으로는 단지 함수이거나 변수에 대한 기호 참조일 뿐입니다. $, _ 또는 기타 기호를 사용하는 데에는 실제로 차이가 없습니다.

    Ecmascript 사양에 명시된 대로 $ 문자는 식별자에 사용할 수 있습니다. 식별자가 단일 $ 기호로 구성되면 확실히 이상해 보이지만 이러한 차이는 사람에게만 표시됩니다. 내가 아는 한, 컴파일러는 변수가 a 또는 b와 같은 다른 문자로 구성되었는지 여부를 신경 쓰지 않습니다.

    반면, Ecmascript 사양에는 단순히 편의상 jQuery 코드와 같은 내부 코드에서 $ 기호를 사용해야 한다고 명시되어 있습니다. 이는 단지 멋져 보인다는 이유만으로 코드에서 이를 사용해서는 안 된다는 것을 의미하지만, 프레임워크를 개발할 때 프레임워크의 전역 개체가 독특해 보이고 나머지 코드보다 눈에 띄기 때문에 실제로 이점을 누릴 수 있습니다.