什么是jQuery

• 是一款JavaScript库
• 方便的处理HTML，事件，动画等
• 可以兼容多浏览器

jQuery的基本概念

下载和安装jQuery

• 下载：
  从jQuery官网下载，压缩版本用于生产，非压缩版本用于开发
  如果想要兼容IE6~IE8，建议选择V1.12.4
• 安装：
  直接在html中引入即可
  <script src="./../jquery-3.3.1.js"></script>

使用CDN

• CDN(content Delivery Network)：内容分发网络，比如BootCDN
• 可以用来引入jQuery，提高性能，加快下载速度
  <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>

基本概念

• 设计哲学：write less do more
• 设计思想：结构，表现，行为分离
• jQuery库对外仅仅暴露出一个全局变量：$
  window.jQuery===window.$
• $(xxx)：调用jQuery本身的选择方法，返回一个jQuery对象
• jQuery对象
  1，是原生DOM对象的封装
  2，jQuery对象和原生DOM对象不同，但是可以相互转换
  3，jQuery对象包含了很多方法，方便的操作DOM元素
• jQuery对象，原生DOM对象间的转换
  $(domObject) : jQuery Object
$(xxx).get(0) : DOM Object
$(xxx)[0] : DOM Object
• 链式语法
  1，实现原理是每次操作都会返回jQuery对象
  2，有些方法具有破坏性(比如find())，不返回原先的jQuery对象，这时候就需要用end()方法，重置为原先的jQuery对象
• $(document).ready(function(){...})
  1，$(document).ready()在DOM结构加载完毕后就会执行
  2，$(document).ready(function(){...}) 等价于$(function(){...})

jQuery的选择器

选择元素的方法：$(xxx)

• 特点1：兼容CSS选择器语法以及扩展
• 特点2：返回0个，1个或多个jQuery元素集合，是一个类数组
• 特点3：集合内元素顺序与页面上顺序一致
• 特点4：可以用逗号隔开，而选择多个元素
• 返回值：jQuery对象

选择器的种类：

• 基本选择器：CSS基本一致
• 筛选器/过滤器：$('a:xxx')：a是要筛选的对象(如果空就是所有)，xxx是筛选方法

基本选择器（与CSS选择器基本一致）

• ID选择器：$('#p1')
• 类选择器：$('.list')
• 元素选择器：$('div')
• 后代选择器：$('.list > li')
• 属性选择器：
  $('a[href="http://www.baidu.com"]')：网址等于http://www.baidu.com的a元素
  $('a[href*="www"]')：网址中包含www的a元素
  $('a[href^="http"]')：网址中以http开头的a元素
  $('a[href$="com"]')：网址中以com结尾的a元素
  $('a[href][target]')：包含href属性和target属性的a元素
  $('a[href!="http://www.baidu.com"]')：网址不等于http://www.baidu.com的a元素，这个是jQuery独有的，CSS选择器中没有

位置筛选器（jQuery独有，CSS选择器中没有，n从0开始）

• :first
  $('li:first')，选择第一个li元素
• :last
  $('li:last')，选择最后一个li元素
• :even
  $('li:even')，选择偶数位的li元素，第一个元素是0。注意跟$('li:nth-child(even)')不一样
• :odd
  $('li:odd')，选择奇数位的li元素，第一个元素是0。注意跟$('li:nth-child(odd)')不一样
• :eq(n)
  $('li:eq(2)')，选择第2个li元素
• :gt(n)
  $('li:gt(2)')，选择所有位置大于2的li元素
• :lt(n)
  $('li:lt(2)')，选择所有位置小于2的li元素

子元素筛选器 (与CSS一致，n从1开始)

• :first-child
  $('li:first-child')，选择父元素的首个子元素的li元素
• :last-child
  $('li:last-child')，选择父元素的最后一个子元素的li元素
• :nth-child(n)
  $('li:nth-child(2)')，选择父元素的第2个元素的li元素
• :nth-child(2n)
  $('li:nth-child(2n)')，选择父元素的偶数个元素的li元素
• :nth-child(odd)
  $('li:nth-child(odd)')，选择父元素的奇数个元素的li元素，注意跟$('li:odd')不一样
• :nth-child(even)
  $('li:nth-child(even)')，选择父元素的偶数个元素的li元素，注意跟$('li:even')不一样
• :nth-last-child(n)
  与:nth-child(n)意思一样，只不过从最后一个子元素开始计数
• :first-of-type
  $('li:first-of-type')，选择父元素的首个li元素
• :last-of-type
  $('li:last-of-type')，选择父元素的最后一个li元素
• :nth-of-type(n)
  $('li:nth-of-type(2)')，选择父元素的第二个li元素
• :nth-last-of-type(n)
  与:nth-of-type(n)意思一样，只不过从最后一个子元素开始计数
• :only-child
  $('li:only-child')，选择父元素的唯一子元素的每个li元素
• :only-of-type
  $('li:only-of-type')，选择父元素的唯一li元素

表单筛选器（前四种与CSS一致，后面是jQuery独有的）

• :checked
  $(':checked')，选择处于选中状态的元素(单选/多选/下拉框..)
• :disabled
  $(':disabled')，选择处于disable状态的元素
• :enabled
  $(':enabled')，选择处于enable(也就是非disable)状态的元素
• :focus
  $(':focus')，选择获得焦点的元素
• :button
  $(':button')，选择button元素
• :checkbox
  $(':checkbox')，选择多选框元素
• :file
  $(':file')，选择文件输入框元素
• :image
  $(':image')，选择type="image"的元素
• :input
  $(':input')，选择所有form元素(而不仅仅是input元素)
• :password
  $(':password')，选择password元素
• :radio
  $(':radio')，选择单选框元素
• :reset
  $(':reset')，选择type="reset"的元素
• :selected
  $(':selected')，选择选中状态的select元素
• :submit
  $(':submit')，选择type="submit"的元素
• :text
  $(':text')，选择text类型的元素

内容筛选器（第一种与CSS一致，后面是jQuery独有的）

• :empty
  $('p:empty')，选择没有文本内容的p元素
• :parent
  $('p:parent')，选择含有子元素或者文本的p元素，与$(':empty')相反
• :contains(text)
  $('p:contains("abc")')，选择包含给定文本("abc")的p元素
• :has(selector)
  $('p:has(span)')，选择包含和span元素的p元素

其他筛选器（前四种与CSS一致，后面是jQuery独有的）

• :lang(language)
  $(':lang(en)')，选择语言为en的元素
• :not(selector)
  $('p:not(#foo)')，选择id不为foo的p元素
• :root
  $(':root')，选择该文档的根元素(就是HTML)
• :target
  $(':target')，根据URL的hash找到对应id的元素。比如URL的hash是foo，那么会找到id为foo的元素。
• :hidden
  $(':hidden')，选择不可见元素(display:none 和 type:hidden)
• :visible
  $(':visible')，选择可见元素，与$(':hidden')相反
• :header
  $(':header')，选择标题类元素(h1/h2..)
• :animated
  $(':animated')，选择正在执行动画效果的元素

选择器的性能优化

• 尽量使用CSS中有的选择器
  慢：$('ul li:even)
  快：$('ul li:nth-child(odd)')
• 避免过度约束
  慢：$('div ul li.item')
  快：$('li.item2')
• 尽量以ID开头
  慢：$('.list li.item')
  快：$('#list li.item')
• 让选择器的右边有更多特征
  慢：$('ul.list .item')
  快：$('.list li.item')
• 避免使用全局选择器
  慢：$('ul')
  快：$('.list')
• 缓存选择器结果
  慢：$('.#list .item2'); $('.#list .item4');
  快：var ul = $('.#list'); ul.find('.item2'); ul.find('.item4');