一、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>效果如下
点击click me后，所有p标签的背景将会变为黄色
三、总结
从第一个小例子大致感受jQuery的使用方式，并且激起自己的兴趣。下一节将记录jQuery的基本元素讲解。
2175
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
