Write your first jQuery program

Write a program

Create an html page, introduce the jQuery class library and write the following code:

<!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>

The effect is as follows:

QQ截图20161021134933.png

There are three buttons on the page, which respectively control the display, hiding and modifying the content of Hello World.

This example uses:

(1) jQuery ID selector: $("#btnShow") (2) Event binding function: bind() (3) Show and hide Functions: show() and hide() (4) Function to modify the html inside the element: html()

Continuing Learning

new file

<!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>

submit Reset Code

Automatic operation

Write your first jQuery program

ElementaryImperial CMS enterprise imitation website tutorial

ElementaryNewbies with zero foundation in WordPress build personal blogs and corporate websites

ElementaryUltimate CMS zero-based website building instruction video

ElementaryFront-end project-Shangyou [HTML/CSS/JS technology comprehensive practice]

IntermediateVue3.0 from 0 to build a universal backend management system project practice

ElementaryZero-based front-end course [Vue advanced learning and practical application]

ElementaryWEB front-end tutorial [HTML5+CSS3+JS]

ElementaryQuick introduction to apipost

IntermediateVue3+TypeScript practical tutorial-enterprise-level project practice

ElementaryLet's briefly talk about starting a business in PHP

IntermediateVUE e-commerce project (front-end & back-end dual project actual combat)

ElementaryApipost practical application [api, interface, automated testing, mock]