jQuery 학습 노트 (1) - 선택기와 이벤트
3420 단어 JavaScriptjquery
jQuery는 JavaScript의 확장 라이브러리로 원래 JavaScript 코드보다 HTML 페이지의 DOM(Document Object Model, 파일 대상 모델) 작업을 간편하게 할 수 있다. 즉, 페이지의 각종 라벨 요소를 선택하고 조작할 수 있다. jQuery를 통해 고급 페이지 상호작용과 멋진 애니메이션 효과를 실현할 수 있다.jQuery를 사용하려면 HTML 페이지에 jQuery의 소스 코드 파일을 가져와야 합니다.
JQuery의 소스 코드 파일에는
4
4
HTML 페이지에 jQuery 파일을 가져오는 방법, 탭에 해당하는 JQuery 파일을 가져오는 방법:
<head>
<script src="jquery-1.10.2.min.js"></script>
</head>2. JQuery의 기본 형식
jQuery 문은 다음 구조에 포함됩니다.
$(document).ready(function(){
// JQuery
});여기서 $.ready () 는 jQuery의 문서 준비 이벤트입니다. 스크립트 세션의 jQuery 함수는 대부분 $(document) 에 포함됩니다.ready () 함수에서이것은 문서가 완전히 불러오기 전에 jQuery 코드를 실행하는 것을 방지하기 위해서입니다.
보다 간결한 문서 준비 이벤트 형식도 있습니다.
$(function(){
// JQuery
});$(document).ready()의 구체적인 jQuery 문 형식은 다음과 같습니다.
$(selector).action();$(selector)는 HTML 요소 선택기로서 페이지의 HTML 요소를 조회하고 선택할 수 있습니다. 괄호 안에는 HTML 탭의 이름, 대응하는class나 id, 예를 들어'p','.myclass'또는'#myID'가 있습니다.action () 은 효과 방법, HTML/CSS 방법 등을 포함하여 선택한 HTML 요소를 조작하는 방법입니다.hide (), show () 등입니다.
jQuery에는 일반적인 방법과 다른 이벤트 방법이 있습니다.
$(selector).event(function(){
/* */
})이벤트 ()는 이벤트입니다. 선택한 요소의 트리거 이벤트입니다. 클릭 (),mouseenter () 등입니다.
일반적인 방법과 이벤트 방법을 결합하여 사용하다.
$(document).ready(function(){
$(selector).event(function(){
$(selector).action();
});
});실례
인스턴스 1,
요소 필드를 클릭하면 해당 요소가 숨겨집니다.
HTML 코드는 다음과 같습니다.
<!DOCTYPE html>
<html>
<head>
<script src="jquery-1.10.2.min.js"></script>
</head>
<body>
<p>setence</p>
</body>
</html>해당 JQuery 코드는 다음과 같습니다.
$(document).ready(function(){
$("p").click(function(){ //$("p") <p> ，click() 。
$(this).hide(); //$(this) ，hide() JQuery 。
});
});실례2,class1의
요소를 클릭하면 그 뒤에 단락이 나타나고 대화상자가 팝업됩니다.내용이class2인
요소를 클릭하면 스타일이 바뀌고 대화상자가 팝업됩니다.이 인스턴스에는 기본 JavaScript 코드인 jQuery 구문이 혼합되어 있습니다.
HTML 코드는 다음과 같습니다.
<html>
<head>
<script src="jquery-1.10.2.min.js"></script>
</head>
<body>
<p class="1">class1</p>
<p class="2">class2</p>
</body>
</html>해당 JQuery 코드는 다음과 같습니다.
$(document).ready(function(){
$(".1").click(function(){
var x = "<p>this is class 1!</p>"; // JavaScript ， 。
$(".1").after(x);
alert("NOTATION:just now you click class 1!"); // JavaScript alert()。
}); // “ ; ” 。
$(".2").click(function(){
$(".2").css({"color":"red","background-color":"black"});
alert("NOTATION:just now you click class 2!");
});
});참조 출처:
앵무새 튜토리얼 - jQuery 튜토리얼
jQuery 공식 문서
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
기초 정리 - 1문자 (String) 숫자 (Number) 불린 (Boolean) null undefined 심볼 (Symbol) 큰정수 (BigInt) 따옴표로 묶어 있어야 함 Not-A-Number - 숫자 데이터 / 숫자로 표...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
