jQuery 구문

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 대화형 기능(예: 일부 드롭다운 메뉴 등)은 일시 중지된 애니메이션 상태입니다.

지속적인 학습

새로운 파일

<!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> // window.onload=function(){ // alert(1) // }; // window.onload=function(){ // alert(2) // }; // $(document).ready(function(){ // alert(1) // }); // $(document).ready(function(){ // alert(2) // }) </script> </head> <body> <div id="box">jQuery语法</div> </body> </html>

제출하다 코드 재설정

자동운전