jquery前端开发教程（web前端开发之jQuery使用）
jquery前端开发教程（web前端开发之jQuery使用）2.2 轻量级脚本 代码小巧2.1 语法简练 语义易懂 学习快速 文档丰富jQuery代码:无需考虑浏览器兼容问题 代码少.官网 http://jquery.com二、 jQuery特点
都说HTLM5就和英语一样，入门简单，但越学越难，真的是这样的吗?确实是这样。不过不用担心，今天蓝鸥HTML5培训（http://hn.lanou3g.com/zt/h5Web/）小编特意邀请了一位专门学习HTML5的同学给大家分享一下他的学习感悟。希望对学HTML5开发的朋友有所帮助。闲话少提 直奔核心。
一、 jQuery是什么?
是对JavaScript封装的一个框架包 旨在简化对JavaScript的操作.
JavaScript代码:获得元素的节点对象、ajax实现、事件操作、事件对象(大量重复代码 并且考虑到浏览器的兼容性问题)
jQuery代码:无需考虑浏览器兼容问题 代码少.
官网 http://jquery.com
二、 jQuery特点
2.1 语法简练 语义易懂 学习快速 文档丰富
2.2 轻量级脚本 代码小巧
2.3 支持CSS1~CSS3定义的属性和选择器
2.4 是跨浏览器的 支持包括IE6.0、FF1.5-、Safari2.0 和Opera9.0
2.5能将JavaScript脚本和HTML源代码完全分离 便于后期编辑和维护
2.6插件丰富 可以实现更多功能
三、 其他JavaScript相关的框架包
Prototype、YUI、Extjs、bindows、JSVM、moo tools等
下载jquery
4.2进入下载页面
这里看实际需求选择不同的jQuery框架
jQuery下载界面
4.3下载某版本的jQuery代码
jQuery代码
4.4将jQuery导入工程.js文件
将jQuery代码复制到工程的.js文件
五、演示代码
这里使用的是HBuilder软件
程序图标
软件界面
代码界面
index.html文件
<!DOCTYPE html><html>
<head>
<meta charset="UTF-8">
<title>测试网页</title>
<!-- 引入外部js文件-->
<script type="text/javascript" src="https://img.aigexing.comindex.js"></script>
<script type="text/javascript">
function f1(){ // 通过原生js实现
var result = document.getElementById("username").value;
alert(result); // 通过jQuery实现
var result = $('#onclick').val();
alert(result);
} </script>
<style type="text/css">
</style>
</head>
<body>
<input id="username" type="text" name="userName" value="laowang" /><input id="onclick" type="button" value="触发" onclick="f1()"/>
</body></html>
演示效果
浏览器界面
浏览器界面
结语
jQuery使用前期:侧重快速找到页面上的各种节点.
jQuery使用后期:丰富了事件操作、ajax操作、动画效果、DOM操作等.
在后续文章中 会对jQuery的上述的使用进行逐一讲解.
