web前端开发之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等
Prototype:与面向对象的原型集成关键字一致,该框架特点是功能扩展比较容易.
YUI:Yahoo 雅虎用户接口,该框架可以实现各种页面布局效果.比如标签切换对应内容.
Extjs:该框架可以实现许多绚丽的效果.比如:页面不同区域进行拖拽效果.
四、 简单使用
4.1官网下载
下载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=\”index.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的上述的使用进行逐一讲解.
一学就会！小白6分钟看懂学习JavaScript的六大步骤
JavaScript（通常缩写为JS）是一种解释型、面向对象、多范式的高级编程语言。它被世界上的绝大多数网站所使用，也被世界主流浏览器（Chrome、IE、Firefox、Safari、Opera）支持。
JavaScript是世界上最流行的脚本语言，因为它很容易上手，而且学习到它的精髓之后还可以编写高质量的代码，这就是我推荐给初学者学习的主要原因。今天就带大家来学习JavaScript。这是当年我学习JavaScript的六大步骤，希望对你也有帮助：
1.学习JavaScript基础语法：
古人常道：“万丈高楼平地起”，意思大概是再高的大厦都要从平地开始修建，学习JavaScript也是一样，想要学好它就一定要把基础先打牢，学习JS的第一步是JavaScript基础语法。
首先，你要了解async和defer之间的区别，然后，深入学习代码语法知识，例如变量，数据类型，循环和条件语句，函数，匿名函数，闭包，阵列和关联阵列，事件，正则表达式，promises。
注意语法顺序一定要准确！上述举例如果有遗漏的，大家可以在评论区留言。此外，我个人推荐你学习如何使用Chrome DevTools调试，因为Chrome DevTool是远程调试JS最好的工具。
2.学习面向对象编程：
当你具备一定的JavaScript基础语法后，你应该转向学习面向对象编程（OOPs）。OOPs是JS和其他编程语言中最重要的概念。JS中的OOPs是基于原型继承链上运行的，不像Java或C++是基于对象或类继承。
然而，关于元数据，你可以在学习了OOPs之后再转到学习元数据编程。虽然元数据很好学，但它并不是JS中最重要的部分。我相信，你可不会喜欢JS带来的意外“惊喜”。
3.学习测试QA：
测试代码和调试JS一样重要！你可能听说过TDD(测试驱动开发)或BDD(行为驱动开发)这样的词，但到底是什么意思呢？简而言之，TDD是指写一个未通过的测试用例，然后让测试通过，最后重构。
而BDD则是根据业务，编写具体的例子和自动化的测试，通过探索，发现，定义，最后推出软件所需的行为。BDD和TDD之间没有本质的区别。把它们组合在一起的是，它们都需要一群人，指定软件在执行之前应该如何协同行动。
4.学习jQuery：
jQuery是一套跨浏览器的JavaScript库，它的特点是动态性和互动性。它使用起来十分方便，就jquery本身而言，你经常会遇到如何将AJAX与jQuery整合的问题。AJAX是什么？举个例子来说吧，
「当你在百度浏览器中输入一个关键词，不用刷新便可得到关于词条的一些内容，这就是AJAX」
AJAX是Asynchronous JS and XML的缩写，它主要处理的是与HTML和CSS不同步的请求而产生的问题。
5.学习框架
现在，你已经了解了jQuery，JS基础语法，AJAX，Chrome DevTools，测试QA。以下的是你们现在真正应该学习的内容——框架：
React：
React的前身是React.JS。React最初是由Facebook和少数个人以及一个小社区开发的，但随着时间的推移，React进行了多次的优化，现在它变成了很有意思而且功能很强大的代码，也很容易学习。我个人是十分推荐你学习React的。日后，你可以用React以组件的形式在网页中开发用户界面。
Angular：
Angular在某方面和React非常相似，不过你可以用Angular以组件的形式编写SPA。它是现在IT行业前端开发方面需求量最大的语言。Angular其实是JS框架，基本上意味着它是用JS编写的。
你可以在每个浏览器的各个角落遇见JS，这也侧面证实了JS功能十分强大，也十分有用。我强烈建议你既要学习React，也要学习Angular。
Node.JS：
Node.JS是在服务器端编写JS的框架。用Node.JS写的代码或API的速度快得离谱，而且Node.JS还可以同时处理多个请求。不像其他后端语言，很少有公司在Node.JS上实现了他们的服务器。
它是服务器端语言的未来，在Node中实现的大型Web应用程序的可扩展性和部署方面存在一些问题，所以现在我不会称它为服务器端语言的主角。
Express.JS：
和上文所述的框架一致，它也是一个功能强大的框架。Express.JS简称Express，它是针对Node.JS的web应用框架，在MIT许可证下作为自由及开放源代码软件发行。它被设计来建造web应用和API。
同样它也是由用JS编写的，我个人建议如果你在学习Node.JS，那么一定要把Express.JS也掌握好。
6.学习库
框架学习也结束了，下面正是学习JavaScript之路上至关重要的最后一点。学习一段时间后，你可能绞尽脑汁想写好代码，而且明明思路很清晰，却只能写出一点点代码。这时候你就该使用这个库了，我并没有推广库的想法，而是真心希望你可以拥有非常有趣的学习和使用经历。
Coffee.Script：
Coffee.Script与JS功能类似，但它有一个好处就是没有分号，括号，双引号，甚至是大括号的杂乱和麻烦。当你学习了JS的基础语法，搭建完众多框架，再学习coffee.script，你就会意识到它有多么的很简单。正因为它十分容易编写，所以我真的很推荐你们进行学习。
当你开始学习时也可以使用JS文档访问JavaScript，并且不要害怕一路上承担一些项目。完全不需要担心，项目会给你带来的挑战，项目的一次次完成会带给你不一样的新鲜感和信心，只有突破重围才会看到崭新的自己。记住明天的你会感激现在拼命的自己，当你精通JS之时，任何挑战都没有办法限制你学习。
如果你对这篇文章有任何感悟或想法，可以在评论区留言。我个人对编码充满了激情，我认为每个人都应该学习它，而不是敬而远之。衷心地祝原你在编码的路上越走越稳，越走越快，越走越远。到那时你虽已是码农，但你仍要牢记学习，从中得到启发，并走向更美好的明天。
jQuery语法
通过 jQuery，我们可以选取 HTML 元素并对它们执行操作。
jQuery 语法是为选取 HTML 元素和对元素执行某些操作而定制的。
基本语法格式：
- 首先是美元符号 $，是 jQuery 的别名，表示 jQuery 对象。
- selector 是一个选择符，用于查询 HTML 元素。
- action() 表示要对元素执行的 jQuery 操作。
示例：
例如我们来看几个例子：
为了防止文档在没有完全加载之前就运行 jQuery 代码，我们需要一个文档就绪函数：
添加这个函数后，就只能在 DOM 加载完成后才可以对 DOM 进行操作。
如果在文档没有完全加载之前运行函数，可能会失败操作，例如：
- 试图隐藏一个不存在的元素。
- 尝试获取尚未加载的图像大小
上面的函数还有一个简洁的写法：
这两种写法的效果都是一样的，但是简写看起来更方便一些。
链接：https://www.9xkd.com/
本文作者及来源:Renderbus瑞云渲染农场https://www.renderbus.com
文章为作者独立观点不代本网立场，未经允许不得转载。
投诉举报&联系我们：
