编写第一个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)事件绑定函数:bind() (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>
提交重置代码
  • 推荐课程
  • 评论
  • 问答
  • 笔记
  • 课件下载

汪汪

好复杂的例子啊

9年前    添加回复 0

我又来了

有点没看懂

9年前    添加回复 0

男神

代码这样写起来就简单多了

9年前    添加回复 0

末日的春天

先敲一个Hello word压压惊

9年前    添加回复 0

课件暂不提供下载,工作人员正在整理中,后期请多关注该课程~