本文介绍jQuery框架的基本概念，包括其核心理念、主要特点以及在网页中如何引入和使用。通过实例演示了使用jQuery进行DOM操作、修改样式和响应事件的简便方法。
Jquery入门
在众多JavaScript框架中，jQuery一枝独秀早已是不争的事实。
JQuery理念：写的更少，做得更多（Write less, Do more）
jQuery主要特点：
- l jQuery 极大地简化了 JavaScript 编程
- l 支持各种主流浏览器，包括IE6以上，FireFox2以上，Safari2以上和Opera9以上的版本
- l 以强大的CSS选择器为基础，几乎所有的操作都先使用选择器查找DOM对象，然后对其进行各种操作
- l 屏蔽浏览器差异，对DOM的操作提供了方便的扩展，易用的事件处理API和动画API。
- l 强大的插件机制
既然jquery这么好，举一个简单的列子，说明如何在js中引入jquery：
<!DOCTYPE html>
<html>
<head>
<title>MyHtml.html</title>
<script type="text/javascript" src="../../js/jquery-3.3.1.js"></script>
<script type="text/javascript">
$(function(){
//添加一个段落节点
$("<p>第一个段落</p>").appendTo($("body"));
});
</script>
</head>
<body>
This is my HTML page. <br>
</body>
</html>
显示结果：
项目布局：
其中添加节点部分，如果用js的DOM API方式实现：
window.onload = function(){
var e_p = document.createElement("p");
var t_text = document.createTextNode("第一个段落！");
e_p.appendChild(t_text);
document.documentElement.lastChild.appendChild(e_p);
}
而jquery只用了一句话，简化程度可见一斑。
小试一下其他功能：
改变div背景色：
<!DOCTYPE html>
<html>
<head>
<title>MyHtml.html</title>
<script type="text/javascript" src="../../js/jquery-3.3.1.js"></script>
<script type="text/javascript">
$(function(){
//添加一个段落节点
$("<p>第一个段落</p>").appendTo($("body"));
//改变div背景色
$("div").addClass("divCss").css("background","yellow");
});
</script>
</head>
<body>
<div>
this is my first div.
</div>
</body>
</html>
结果显示：
点击div时，将该div隐藏：
<!DOCTYPE html>
<html>
<head>
<title>MyHtml.html</title>
<script type="text/javascript" src="../../js/jquery-3.3.1.js"></script>
<script type="text/javascript">
$(function(){
//添加一个段落节点
$("<p>第一个段落</p>").appendTo($("body"));
//改变div背景色
$("div").addClass("divCss").css("background","yellow");
//添加div点击事件，点击时隐藏该div
$("div").click(function(){
$(this).hide("slow");
});
});
</script>
</head>
<body>
<div>this is my first div.</div>
<div>this is my second div.</div>
</body>
</html>
效果显示：
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
