jQuery之HelloWorld
jQuery介绍
介绍：
jQuery，顾名思义，也就是JavaScript和查询（Query），它就是辅助JavaScript开发的js类库。
核心思想：
它的核心思想是write less,do more(写得更少,做得更多)，所以它实现了很多浏览器的兼容问题。
好处：
jQuery是免费、开源的，jQuery的语法设计可以使开发更加便捷，例如：
强大选择器：方便快速查找DOM元素
隐式遍历(迭代)：一次操作多个元素
读写合一：读数据/写数据用的是一个函数
链式调用：可以通过，不断调用jQuery对象的方法
HTML事件处理
DOM操作(CUD)
CSS样式操作
动画效果
浏览器兼容
易扩展插件
ajax封装
jQuery使用
引入jQuery库：
本地引入与CDN远程引入。
区别2种js库库文件：
开发版(测试版)
生产版(压缩版)
区别2种引用js库的方式：
服务器本地库：开发测试时使用，加重了服务器负担，上线时一般不使用这种方式。
CDN远程库：项目上线时，一般使用比较靠谱的CDN资源库减轻服务器负担。
使用jQuery：
jQuery核心函数：$/jQuery
jQuery核心对象：$xxx(执行$()得到的)
区别jQuery的不同版本：
1.x：兼容老版本IE，文件更大。
2.x：部分IE8及以下不支持，文件小，执行效率更高。
3.x：完全不再支持IE8及以下版本，提供了一些新的API，提供不包含ajax/动画API的版本。
示例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>HelloWorld</title> </head> <body> <!-- 需求: 点击"确定"按钮，提示输入的值 --> 用户名：<input type="text" id="username"> <button id="btn1">确定(原生版)</button> <button id="btn2">确定(jQuery版)</button> <!-- 方式一：使用原生JS实现功能 --> <script type="text/javascript"> window.onload = function () { var btn = document.getElementById('btn1'); btn.onclick = function () { alert(document.getElementById('username').value); } } </script> <!-- 方式二：使用jQuery实现功能 1.引入jQuery库 本地引入 远程引入 2.使用jQuery函数和jQuery对象编码 --> <script type="text/javascript" src="../js/jquery.min.js"></script> <script type="text/javascript"> $(function () { $('#btn2').click(function () { alert($('#username').val()); }); }); </script> </body> </html>
