8.1 jQuery 연결하기
마지막으로 jQuery 라이브러리에 도달했습니다. 이 문서가 작성될 당시에는 이미 구식이었으며 새 프로젝트에서는 거의 사용되지 않았습니다 . 그러나 한때 그것은 매우 인기가 있었고 매우 잘 문서화되었으며 인터넷에 사용에 대한 많은 예가 있습니다 .
따라서 소규모 웹 프로젝트를 작성 중이고 최신 프레임워크를 학습하는 데 몇 달을 허비하고 싶지 않다면 jQuery 라이브러리를 사용하는 것이 좋습니다.
수천 개의 jQuery 함수를 사용하려면 페이지에 포함하기만 하면 됩니다. 다음과 같이 할 수 있습니다.
<head>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>jQuery 작업은 두 가지 유형으로 나눌 수 있습니다.
먼저 사용자 지정 jQuery 개체에 래핑된 일반 HTML 요소인 jQuery 라이브러리 개체를 가져올 수 있습니다.
둘째, jQuery에는 HTML 요소에 바인딩되지 않은 여러 전역 객체가 있습니다. 그들은 또한 사용해야합니다.
첫 번째부터 시작하겠습니다.
8.2 선택자 작업
jQuery는 선택자를 사용하여 객체 작업을 수행합니다(CSS와 해당 클래스를 기억하십니까?). 따라서 jQuery에서 일부 개체 또는 개체 그룹을 선택하려면 해당 선택기를 설정해야 합니다.
예:
| 암호 | 설명 | 메모 | |
|---|---|---|---|
| 1 | $("사업부") | DIV 태그가 있는 모든 개체를 선택합니다. | 많은 물체 |
| 2 | $("img.#image123") | IMG 태그 및 ID == image123이 있는 모든 개체를 선택합니다. | 하나의 개체 |
| 삼 | $("#이미지123") | ID == image123인 모든 개체를 선택합니다. | 하나의 개체 |
| 4 | $("div.문서") | 클래스 기사가 있는 DIV 태그가 있는 모든 개체를 선택합니다. | 많은 물체 |
모든 링크에 이벤트 처리를 추가하고 싶다고 가정해 보겠습니다 onclick. jQuery를 사용하여 수행할 수 있는 방법은 다음과 같습니다.
$("a").click(function() {
alert("Click");
});여기에서 세 단계가 수행됩니다.
- 선택기와 일치하는 개체를 가져옵니다
"a". - 를 호출하는 익명 함수를 만듭니다
alert(). - 이 함수를 포인트 1의 모든 객체에 대한 이벤트 핸들러로 설정했습니다
click.
jQuery의 또 다른 좋은 점은 코드를 읽기 쉽다는 것입니다. 모든 것이 어떻게 작동하는지 파악하는 데 많은 시간이 걸리지 않습니다. 작동하는 코드가 있으면 코드가 무엇을 하는지 쉽게 이해할 수 있습니다.
8.3 문서 요소 작업
jQuery를 사용하여 문서 작업에 대한 몇 가지 시나리오를 살펴보겠습니다.
요소의 값을 가져옵니다(값이 있는 요소의 경우).
var result = $ ("selector").value();요소 값 설정(값이 있는 요소의 경우):
$ ("selector").value(newValue);일부 요소 안에 HTML을 추가하는 방법은 무엇입니까?
$ ("selector").html(newHTML);그리고 요소 안에 있는 HTML을 얻는 방법은 무엇입니까?
var html = $ ("selector").html();HTML이 아닌 일반 텍스트를 가져오거나 추가하려면 어떻게 해야 합니까? 여기서도 놀랄 일이 아닙니다.
var html = $ ("selector").text();요소의 색상을 가져오거나 변경하려면 어떻게 해야 합니까?
$ ("selector").color("red");스타일로 작업해야 하는 경우 다음 작업도 쉽게 수행할 수 있습니다.
$ ("selector").css("color", "red");새 요소를 추가하는 방법은 무엇입니까?
$ (".container").append($("h3"));