첫 번째 jQuery 프로그램 작성

프로그램 작성

html 페이지를 만들고 jQuery 클래스 라이브러리를 소개하고 다음 코드를 작성합니다.

<!doctype html>
<html lang="zh">
<head>
    <meta charset="utf-8"/>
    <title>Hello World jQuery!</title>
    <script src="http://code.jquery.com/jquery-3.1.1.min.js"></script>
</head>
<body>
<div id="divMsg">Hello jQuery!</div>
<input id="btnShow" type="button" value="show" />
<input id="btnHide" type="button" value="hidden" /><br/>
<input id="btnChange" type="button" value="change content is Hello World, too!"/>
<script>
    $("#btnShow").bind("click", function(event) {
        $("#divMsg").show();
    });
    $("#btnHide").bind("click", function(event) {
        $("#divMsg").hide();
    });
    $("#btnChange").bind("click", function(event) {
        $("#divMsg").html("Hello World, too!");
    });
</script>
</body>
</html>

효과는 다음과 같습니다.

QQ截图20161021134933.png

페이지에는 세 개의 버튼이 있습니다. Hello World의 표시, 숨기기 및 표시를 각각 제어합니다.

이 예제에서는 다음을 사용합니다.

(1) jQuery ID 선택기: $("#btnShow") (2) 이벤트 바인딩 함수: 바인딩() (3) 표시 및 숨기기 함수: show() 및 hide( ) (4) 요소 내부의 html을 수정하는 함수: html()

지속적인 학습

새로운 파일

<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>第一个简单的jQuery程序</title> <style type="text/css"> div{ padding:8px 0px; font-size:12px; text-align:center; border:solid 1px #888; } </style> <script src="http://code.jquery.com/jquery-3.1.1.min.js"></script> <script type="text/javascript"> $(document).ready(function() { $("div").html("在php中文网学习，才是最好的学习途径。"); }); </script> </head> <body> <div></div> </body> </html>

코드 재설정

자동운전

제출하다

시사 Clear