前端进阶——jQuery选择的艺术
jQuery是什么
是一款JavaScript 库
• 方便地处理HTML（处理HTML文档中的DOM节点，如添加、删除内容和样式等）、事件（通过jQuery对页面上的事件进行处理，如绑定、解绑一些事件）、动画（通过jQuery实现淡入、淡出、滑动、变形等动画）等
• 好处：可以兼容多浏览器
• 80%以上网站使用
安装和选择版本
下载jQuery： http://jquery.com/
压缩和非压缩版本
• Download the compressed, production jQuery
下载压缩版本，用于生产
• Download the uncompressed, development
jQuery 下载非压缩版本，用于开发
如何使用
<script src="jquery-3.1.0.js"></script>
如何选择版本
• V1.x：兼容IE6-8 所以1.x版本文件要比2.x版本大一些
• V2.x：不兼容IE6-8
• V3.x：分为精简版和普通版，也不兼容IE6-8，其中3.x普通版比2.x普通版差不多，只不过更新相应的API，加了相应的性能优化
我们一般要选择最新的1.x版本，因为要兼容一些低端浏览器，老版本浏览器，而且这三个版本差不多，会一个其他的也都会了
使用CDN
CDN--运营商分布在各个地区的节点服务器，让网络内容缓存在这些服务器上，所以各个地域的用户去看，都会很长的快。
CDN加速，各个互联网网站都会使用CDN，CDN可以放各种资源，视频，图片等等，所以jQuery也可以用CDN。
• Content Delivery Network 内容分发网络
http://www.bootcdn.cn/ 国内的CDN服务
<script src="//cdn.bootcss.com/jquery/3.3.1/core.js"></script>
为什么没加https: 是因为为了让使用不同的主机头
CDN的好处：加载块，增加性能，比如一个域名绑定的文件只能同时下载4-8个文件，如果放置在多个域名下，那么就可以同时下载更多的文件了。
jQuery的基本概念
设计哲学
• Write less，do more
结构、表现和行为分离
$
• window.jQuery === window.$
$.xxx
• $.each(…)
• $.noop
• $.toArray()
• …
$(xxx) 相当于返回jQuery对象
什么是jQuery对象：
1.是原生DOM对象的封装
2.jQuery对象和原生DOM对象不同
3.jQuery对象包含了很多方法，方便操作DOM元素
• $('#myDiv')
$('.myClass')
• …
jQuery对象转化为DOM对象
• $(domObject) ==> jQuery Object
• $(xxx).get(0) ==> DOM Object
• $(xxx)[0] ==> DOM Object
链式语法chaining
$('#divTest').text('Hello, world!')
$('#divTest').removeClass('blue')
$('#divTest').addClass('bold')
$('#divTest').css('color', 'red')
上面的代码可以写成这样：这样写可以一直去写比较方便，也不用每次都去查询对象
$('#divTest')
.text('Hello, world!')
.removeClass('blue')
.addClass('bold')
.css('color', 'red')
使用链式语法需要注意：当把jQuery对象转化成dom对象的时候，链式语法就会报错。链式语法中有一些破坏性的，需要用 .end 去初始化
$(document).ready(function(){…})
• vs window onload 这种体验不好，所以jQuery自己写了上面的那种方法，原因：如果加载一些结构完成的，但是又一些图片没完成，这个还会继续加载，如果引入了第三方的iframe，而这个第三方一直在加载，加载了一分钟，这样自己的页面也会被影响，所以jQuery才自己搞出一个：
$(document).ready(function(){…})
ready方法要比onload方法快很多，平时不要把二者一起用，这样会让ready方法无效，直接用ready就好了。当然除非有特殊要求，就用onload
元素的选择
JavaScript中如何选择元素？
• document.getElementById()
• document.getElementsByName()
• document.getElementsByTagName()
• document.getElementsByClassName()
• document.querySelector()
• document.querySelectorAll()
