jQuery
  初识jQuery
    What?
      http://jquery.com/
      一个优秀的JS函数库
      使用了jQuery的网站超过90%
      中大型WEB项目开发首选
      Write Less, Do More!!!
    Why?
      HTML元素选取(选择器)
      HTML元素操作
      CSS操作
      HTML事件处理
      JS动画效果
      链式调用
      读写合一
      浏览器兼容
      易扩展插件
      ajax封装
      ......
    How?
      1. 引入jQuery库
      2. 使用jQuery
        jQuery核心函数
        jQuery核心对象
      区别2种js库库文件
        开发版(测试版)
        生产版(压缩版)
      区别2种引用JS库的方式
        服务器本地库
          开发测试时使用
          加重了服务器负担, 上线时一般不使用这种方式
        CDN远程库
          项目上线时, 一般使用比较靠谱的CDN资源库
          减轻服务器负担
      区别jQuery的不同版本
        1.x
          兼容老版本IE
          文件更大
        2.x
          部分IE8及以下不支持
          文件小, 执行效率更高
        3.x
          完全不再支持IE8及以下版本
          提供了一些新的API
          提供不包含ajax/动画API的版本
  jQuery的2把利器
    1.jQuery核心函数
      理解
        即: $ 或 jQuery
        jQuery定义了这个全局的函数供我们调用
        它既可作为一般函数调用, 且传递的参数类型不同/格式不同功能就完全不同
        也可作为对象调用其定义好的方法, 此时$就是一个工具对象
      作为函数调用
        1. 参数为函数
          $(fun)
        2. 参数为选择器(selector)字符串
          $("#div1")
        3. 参数为DOM对象
          $(div1Ele)
        4. 参数为html标签字符串
          $("<div>")
      作为对象使用
        发送ajax请求的方法
          $.ajax()
          $.get()
          $.post()
          ......
        其它工具方法
          $.each()
          $.trim()
          $.parseJSON()
          ......
    2.jQuery核心对象
      理解
        即执行jQuery核心函数返回的对象
        jQuery对象内部包含的是dom元素对象的伪数组(可能只有一个元素)
        jQuery对象拥有很多有用的属性和方法, 让程序员能方便的操作dom
      .属性/方法
        基本行为
          size()/length
          [index]/get(index)
          each()
          index()
        属性
          操作内部标签的属性或值
        CSS
          操作标签的样式
        文档
          对标签进行增删改操作
        筛选
          根据指定的规则过滤内部的标签
        事件
          处理事件监听相关
        效果
          实现一些动画效果
  使用jQuery核心函数
    选择器
      说明
        选择器本身只是一个有特定语法规则的字符串, 没有实质用处
        它的基本语法规则使用的就是CSS的选择器语法, 并对基进行了扩展
        只有调用$(), 并将选择器作为参数传入才能起作用
        $(selector)作用 : 根据选择器规则在整个文档中查找所有匹配的标签的数组, 并封装成jQuery对象返回
      分类
        基本选择器
          最基本最常用的选择器
          #id
            id选择器
          element
            元素选择器
          .class
            属性选择器
          *
            任意标签
          selector1,selector2,selectorN
            取多个选择器的并集(组合选择器)
          selector1selector2selectorN
            取多个选择器的交集(相交选择器)
        层次选择器
          查找子元素, 后代元素, 兄弟元素的选择器
          ancestor descendant
            在给定的祖先元素下的后代元素中匹配元素
          parent > child
            在给定的父元素下的子元素中匹配元素
          prev + next
            匹配所有紧接在prev元素后的next元素
          prev ~ siblings
            匹配prev元素之后的所有siblings元素
        过滤选择器
          在原有选择器匹配的元素中进一步进行过滤的选择器
          基本
          内容
          可见性
          属性
        表单选择器
          表单
          表单对象属性
    工具
      $.each()
        遍历数组或对象中的数据
      $.trim()
        去除字符串两边的空格
      $.type(obj)
        得到数据的类型
      $.isarray(obj)
        判断是否是数组
      $.isFunction(obj)
        判断是否是函数
      .......
    ajax
      ajax()
      get()
      post()
      ......
  使用jQuery对象
    属性
      操作任意属性
        attr()
        removeAttr()
        prop()
        attr 与 prop
      操作class属性
        addClass()
        removeClass()
      操作HTML代码/文本/值
        html()
        val()
    CSS
      设置css样式/读取css值
        css()
      获取/设置标签的位置数据
        offset()
          相对页面左上角的坐标
        position()
          相对于父元素左上角的坐标
        scrollTop()
        scrollLeft()
      获取/设置标签的尺寸数据
        heigh()
        width()
        innerHeight()
        innerWidth()
        outerHeight()
        outerWidth()
        不包括内边距和边框的尺寸
        包括内边距,但不包括边框的尺寸
        包括内边距和边框的尺寸
    文档
      添加节点
        append(content)
          向当前匹配的所有元素内部的最后插入指定内容
        prepend(content)
          向当前匹配的所有元素内部的最前面插入指定内容
        before(content)
          将指定内容插入到当前所有匹配元素的前面
        after(content)
          将指定内容插入到当前所有匹配元素的后面
      替换节点
        replaceWith(content)
          用指定内容替换所有匹配的标签
      删除节点
        empty()
          删除所有匹配元素的子元素
        remove()
          删除所有匹配的元素
    筛选
      过滤
        在jQuery对象中的元素对象数组中过滤出一部分元素来
        first()
        last()
        eq(index|-index)
        filter(selector)
        not(selector)
        has(selector)
      查找孩子/父母/兄弟标签
        在已经匹配出的元素集合中根据选择器查找孩子/父母/兄弟标签
        children()
        find()
        parent()
        prevall()
        nextall()
        siblings()
    事件
      事件处理
        on()
          通用的绑定事件监听
        xxx()
          绑定某个具体的事件监听
        off()
          解绑事件监听
      事件切换
        hover()
          同时绑定鼠标移入和移出监听
      事件委派(委托)
        delegate()
          绑定委托事件监听
        undelegate()
          移除委托事件监听
      相关重要知识
        事件坐标
          相对可视窗口左上角
            event.clientX
            event.clientY
          相对页面左上角
            event.pageX
            event.pageY
          相对元素左上角
            event.offsetX
            event.offsetY
        阻止事件冒泡
          event.stopPropagation();
        取消事件的默认行为
          event.preventDefault();
    效果
      滑动动画
        不断改变元素的高度来实现的
        slideDown()
          带动画的展开
        slideUp()
          带动画的收缩
        slideToggle()
          带动画的切换展开/收缩
      淡入淡出动画
        不断改变元素的透明度来实现的
        fadeIn()
          带动画的显示
        fadeOut()
          带动画隐藏
        fadeToggle()
          带动画切换显示/隐藏
      显示/隐藏动画
        不断改变元素的尺寸和透明度来实现
        show()
          (不)带动画的显示
        hide()
          (不)带动画的隐藏
        toggle()
          (不)带动画的切换显示/隐藏
      自定义动画
        animate()
          自定义动画效果的动画
        stop()
          停止动画
    jQuery对象使用特点
      链式调用
        调用jQuery对象的任何方法后返回的还是当前jQuery对象
      读写合一
        读: 内部第一个dom元素
        写: 内部所有的dom元素
  jQuery插件
    扩展插件
      扩展jQuery的工具方法
      扩展jQuery对象的方法
    jQuery插件
      理解
        基于jQuery编写的扩展库
        http://plugins.jquery.com/
      jquery-validation
        表单验证插件
        参考"菜鸟教程"学习
        使用
          下载
          引入js
            jquery-1.11.1.js
            jquery.validate.js
            messages_zh.js
          定义验证
            直接在标签中指定
            js编码指定
      jquery UI
        http://jqueryui.com/
      laydate
        http://www.layui.com/laydate/
  练习
    1. 常见效果
    2. 爱好选择器
    3. 员工管理
    4. 轮播图
    5. JD商品详情页
1. 使用<script>引用jQuery源码库文件
1). 本地引入
2). 在线远程引入(CDN):
https://cdn.bootcss.com/jquery/1.9.0/jquery.min.js
https://cdn.bootcss.com/jquery/1.9.0/jquery.js
2. 在<script>中调用jQuery核心函数和使用jQuery对象
1. jQuery核心函数
* 简称: jQuery函数($/jQuery)
* jQuery库向外直接暴露的就是$/jQuery
* 引入jQuery库后, 直接使用$即可
* 当函数用: $(xxx)
* 当对象用: $.xxx()
2. jQuery核心对象
* 简称: jQuery对象
* 得到jQuery对象: 执行jQuery函数返回的就是jQuery对象
* 使用jQuery对象: $obj.xxx()
1. 作为一般函数调用: $(param)
1). 参数为函数 : 当DOM加载完成后，执行此回调函数
2). 参数为选择器字符串: 查找所有匹配的标签, 并将它们封装成jQuery对象
3). 参数为DOM对象: 将dom对象封装成jQuery对象
4). 参数为html标签字符串 (用得少): 创建标签对象并封装成jQuery对象
2. 作为对象使用: $.xxx()
1). $.each() : 隐式遍历数组
2). $.trim() : 去除两端的空格
1. jQuery对象是一个包含所有匹配的任意多个dom元素的伪数组对象
2. 基本行为
* size()/length: 包含的DOM元素个数
* [index]/get(index): 得到对应位置的DOM元素
* each(): 遍历包含的所有DOM元素
* index(): 得到在所在兄弟元素中的下标
具有 true 和 false 两个属性的属性，如 checked, selected 或者 disabled 使用prop()，其他的使用 attr()
得到页面滚动条的scrollTop
$(document.body).scrollTop()+$(document.documentElement).scrollTop()
设置滚动条的新坐标:
$('body,html').scrollTop(60);