jQuery从0开始之【一】jQuery的引入及第一个例子

最新推荐文章于 2025-04-19 14:03:57 发布

原创最新推荐文章于 2025-04-19 14:03:57 发布 · 1.3k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#jquery #入门 #教程 #笔记

WEB——前端专栏收录该内容

5 篇文章

订阅专栏

本文介绍jQuery的引入方法，包括使用百度CDN和本地文件两种方式。并通过一个简单的点击事件示例展示了如何利用jQuery改变页面元素的样式。

一、jQuery的引入

jQuery的引入有两种方式：

使用百度的CDN，在head标签里加入

<script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>

就可以使用在线的jQuery文件。

引入本地的jQuery文件

<script src="../js/jQuery.js"></script>

需要特别注意路径问题，否则很容易引入失败。

二、jQuery的第一个例子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="../js/jquery-3.1.1.js" type="text/javascript"></script>
    <!--jquery的百度CDN-->
   <!-- <script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>-->
    <title>Jquery 点击事件</title>
    <script type="text/javascript">
/*所有的事件函数都在文档自身的“事件处理器”内部进行定义*/
$(document).ready(function(){
    /*jQuery的点击事件click函数*/
    $("button").click(function(){
        /*内部调用css方法修改css属性*/
        $("p").css("background-color","yellow");
    });
});
</script>
</head>
<body>

<h1>点击下面的按钮，可以改变下面一行的背景色，没有用JavaScript的onclick事件哦！</h1>
<p>我的背景会变颜色</p>
<p>我的背景会变颜色</p>
<button type="button">click me</button>

</body>
</html>