jQuery를 사용하면 HTML 요소를 선택(쿼리)하고 해당 요소에 대해 "작업"을 수행할 수 있습니다.
jQuery 구문
jQuery 프로그램에서는 페이지 요소 선택이든 내장 함수 선택이든 모두 달러 기호 "$"로 시작하는데 이 "$"가 jQuery입니다. 그 중 가장 중요하고 고유한 객체는 jQuery 객체이므로 페이지 요소를 선택하거나 기능적 기능을 실행할 때 다음과 같이 작성할 수 있습니다.
$(function(){})； //执行一个匿名函数$('#box'); //进行执行的ID元素选择$('#box').css('color','red'); //执行函数功能"$" 자체가 jQuery 객체의 약어이므로, 즉, 위 코드는 다음과 같은 형식으로 작성할 수 있습니다.
jQuery(function(){});jQuery('#box');jQuery('#box').css('color','red');Instance
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表格</title>
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js" type="text/javascript"></script>
<script>
$(function(){
$('#box').css('color','red');
});
// alert($===jQuery);
</script>
</head>
<body>
<div id="box">jQuery语法</div>
</body>
</html>jQuery 로딩 모드
$(function(){})을 사용했습니다. 이전 코드에서 이 코드는 시작과 끝을 래핑합니다.
이유는 jQuery 라이브러리 파일이 body 요소보다 먼저 로드되기 때문입니다. JavaScript 코드를 로드하기 전에 모든 웹페이지 코드가 로드될 때까지 기다려야 합니다. 그렇지 않으면
인스턴스를 얻을 수 없습니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表格</title>
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js" type="text/javascript"></script>
<script>
$('#box').css('color','red');
</script>
</head>
<body>
<div id="box">jQuery语法</div>
</body>
</html>이전 JavaScript는 다음을 제공했습니다.
window.onload=function(){}; //JavaScript等待加载jQuery는 다음을 제공했습니다.
$(document).ready(function(){}); //jQuery等待加载둘 사이의 차이점:
1. 실행 시기
window.onload: 패키지 코드를 실행하기 전에 웹페이지가 로드(이미지 포함)될 때까지 기다려야 합니다.
$(document).ready(function(){}): 래핑된 코드를 실행하기 전에 웹페이지의 DOM 구조가 로드될 때까지 기다리세요. 효과가 더 높습니다
2. 실행 횟수
window.onload는 한 번만 실행될 수 있으며 두 번째 실행 시 첫 번째 실행을 덮어쓰게 됩니다
$ (document ).ready(function(){}): 몇 번을 실행해도 덮어쓰이지 않습니다.
window.onload None
$(document).ready(function(){ }) $(함수 (){});실제 애플리케이션에서는 window.onload를 직접 사용하는 경우가 거의 없습니다. 왜냐하면 JS 코드를 실행하기 전에 사진과 같은 큰 요소가 로드될 때까지 기다려야 하기 때문입니다. 네트워크 속도가 느리면 페이지가 완전히 로드됩니다. 확장하면 이미지가 여전히 느리게 로드됩니다. 현재 페이지의 모든 JS 대화형 기능(예: 일부 드롭다운 메뉴 등)은 일시 중지된 애니메이션 상태입니다.
