Jquery教程
Jquery动效
Jquery HTML/CSS
Jquery 事件
jquery常用

JQuery 示例

JQuery由Google开发。要创建第一个JQuery示例,您需要使用JQuery的JavaScript文件。您可以从JQuery.com下载JQuery文件,也可以使用JQuery文件的绝对URL。
在此JQuery示例中,我们使用的是JQuery文件的绝对URL。 JQuery示例写在script标签内。
让我们看一个简单的JQuery示例。
文件: firstJQuery.html
<!DOCTYPE html>
<html>
<head>
 <title>First JQuery Example</title>
 <script type="text/javascript" src="/ajax/libs/JQuery/2.1.3/JQuery.min.js">
 </script>
 <script type="text/javascript" language="javascript">
 $(document).ready(function() {
 $("p").css("background-color", "cyan");
 });
 </script>
 </head>
<body>
<p>已选择第一段。</p>
<p>已选择第二段。 </p>
<p>选择了第三段。</p>
</body>
</html>
输出:
已选择第一段。
已选择第二段。
选择了第三段。

$(document).ready()和$()

当页面准备好执行JavaScript代码时,插入到$(document).ready()之间的代码仅执行一次。
代替$(document).ready(),您可以仅使用速记符号$()。
 $(document).ready(function() {
 $("p").css("color", "red");
 });
上面的代码等同于此代码。
 $(function() {
 $("p").css("color", "red");
 });
让我们看一下使用速记符号$()的JQuery的完整示例。
文件: shortJQuery.html
<!DOCTYPE html>
<html>
<head>
 <title>Second JQuery Example</title>
 <script type="text/javascript" src="/ajax/libs/JQuery/2.1.3/JQuery.min.js">
 </script>
 <script type="text/javascript" language="javascript">
 $(function() {
 $("p").css("color", "red");
 });
 </script>
 </head>
<body>
<p>选择了第一段。</p>
<p>选择了第二段。</p>
<p>选择了第三段。</p>
</body>
</html>
输出:
选择了第一段。
选择了第二段。
选择了第三段。
$("p").css("background-color","cyan");将所有<p>标签或段落的背景颜色更改为青色。
昵称: 邮箱:
Copyright © 2022 立地货 All Rights Reserved.
备案号:京ICP备14037608号-4