jQuery总结

首先我是学javaEE的，对于jQuery并不是全面深入的学习，专业前端的看看就行了！！！也用于自己的复习！！！

引入一本有关jQuery书中的一段话有助于理解

通过 jQuery 库编写尽量少的代码来为网站添加复杂功能。通常情况下，使用 jQuery 在网站中添加 JavaScript 函数比自己编码实现这些函数要容易得多。

 jQuery 的用户界面工具包，借助于它，你能够轻松地为网站添加一些功能， 如菜单、按钮、对话框和进度条等，这些功能都是 OS X 和Windows 系统用户的常用功能。除了用户界面上的改进，jQuery 库还为向网站添加各种功能打下了基础。举两个这方面的例子：基于 jQuery， 你能够使用 Ajax、JSON 或者两者兼而有之的方式来访问服务器上的远程数据；利用 jQuery 插件，你可以赋予 jQuery 全新的功能，进而为网站添加这些全新的功能。

引入jQuery的最大收获之一是你能将自己从浏览器兼容性的桎梏中解放出来。对不同浏览器而言，其使用 JavaScript 的方式不尽相同，因此，手写 JavaScript 代码时往往需要编写额外的代码以应对不同浏览器的特质。使用 jQuery 时，兼容性问题将不复存在，因为 jQuery 提供了一套跨浏览器的通用函数集。jQuery 库充分考虑了浏览器间的差异，而作为开发者的你则不必再考虑兼容性问题了。

基于 jQuery，使用包括类名和 id 在内的 CSS 选择器，你能够访问并操作页面上的任意元素。你可以更好地控制页面，因为 jQuery 赋予了你随时创建或删除 HTML 元素的能力。

jQuery 库先于页面上其他元素加载（因为它是在页面上的 head 部分中调用的，而其他元素则是在 body 元素中），因此，待操作的元素一准备好，库就能立即运行与之相关的代码。这种方式优于使用浏览器的 onload 函数——只有当页面上包括图片在内的所有元素都加载完毕时，onload 函数才会被调用。对用户而言，使用 jQuery 这种方式的好处是页面能够更快响应他们的行为

使用jQuery核心函数库：选择器、工具、ajax

使用jQuery对象：属性、css、文档、筛选、事件、效果、使用特点

jQuery插件

先进行图解，学习jQuery的大体框架。

      这是一个老师做的，很全，也就是大体的知识框架了！！！！

 

先从API看起，一会详细介绍，API是最全的，一定要会看！！！

x

精简：

ji

下面我们正式开始：简单介绍一下，把所有用到的全部列出，后续写实例

     了解jQuery
  * 是什么: What?
                     * 一个JS函数库: write less, do more
                     * 封装简化DOM操作(CRUD) / Ajax
  * 为什么用它: why?
                     * 强大选择器: 方便快速查找DOM元素
                     * 隐式遍历(迭代): 一次操作多个元素
                     * 读写合一: 读数据/写数据用的是一个函数
                     * 链式调用: 可以通过.不断调用jQuery对象的方法
                     * 事件处理
                     * DOM操作(CUD)
                     * 样式操作
                     * 动画
                     * 浏览器兼容
  * 如何使用: How?
                    * 引入jQuery库       
                    * 本地引入与CDN远程引入
                    * 测试版与生产版(压缩版)
                    * 使用jQuery
                    * 使用jQuery函数: $/jQuery
                    * 使用jQuery对象: $xxx(执行$()得到的)
2. jQuery的2把利器
  * jQuery函数: $/jQuery
       * jQuery向外暴露的就是jQuery函数, 可以直接使用
                      * 当成一般函数使用人: $(param)
                      * param是function: 相当于window.onload = function(文档加载完成的监听)
                      * param是选择器字符串: 查找所有匹配的DOM元素, 返回包含所有DOM元素的jQuery对象
                      * param是DOM元素: 将DOM元素对象包装为jQuery对象返回  $(this)
                      * param是标签字符串: 创建标签DOM元素对象并包装为jQuery对象返回
    * 当成对象使用: $.xxx
                      * each(obj/arr, function(key, value){})
                      * trim(str)
  * jQuery对象
     * 包含所有匹配的n个DOM元素的伪数组对象
     * 执行$()返回的就是jQuery对象
     * 基本行为:
                * length/size(): 得到dom元素的个数
                * [index]: 得到指定下标对应的dom元素
                * each(function(index, domEle){}): 遍历所有dom元素
                * index(): 得到当前dom元素在所有兄弟中的下标
3. 选择器
  * 是什么?
                  * 有特定语法规则(css选择器)的字符串
                  * 用来查找某个/些DOM元素: $(selector)
  * 分类
    * 基本
                   * #id
                   * tagName/*
                   * .class
                   * selector1,selector2,selector3: 并集
                   * selector1selector2selector3: 交集
    * 层次
                    * 找子孙后代, 兄弟元素
                    * selector1>selector2: 子元素
                    * selector1 selector2: 后代元素
    * 过滤
      * 在原有匹配元素中筛选出其中一些
                  * :first
                  * :last
                  * :eq(index)
                  * :lt
                  * :gt
                  * :odd
                 * :even
                 * :not(selector)
                 * :hidden
                 * :visible
                 * [attrName]
                 * [attrName=value]
    * 表单
               * :input
               * :text
               * :checkbox
               * :radio
               * :checked: 选中的
4. 属性/文本
            * 操作标签的属性, 标签体文本
                      * attr(name) / attr(name, value): 读写非布尔值的标签属性
                      * prop(name) / prop(name, value): 读写布尔值的标签属性
                      * removeAttr(name)/removeProp(name): 删除属性
                      * addClass(classValue): 添加class
                      * removeClass(classValue): 移除指定class
                      * val() / val(value): 读写标签的value
                      * html() / html(htmlString): 读写标签体文本

2. 筛选模块
    * 过滤
    * 在jQuery对象内部的元素中找出部分匹配的元素, 并封装成新的jQuery对象返回
                    * first()
                   * last()
                   * eq(index)
                   * filter(selector): 对当前元素提要求
                   * not(selector): 对当前元素提要求, 并取反
                   * has(selector): 对子孙元素提要求
  * 查找
    * 查找jQuery对象内部的元素的子孙/兄弟/父母元素, 并封装成新的jQuery对象返回
                  * children(selector): 子元素
                  * find(selector): 后代元素
                  * preAll(selector): 前的所有兄弟
                  * siblings(selector): 所有兄弟
                  * parent(): 父元素
3. 文档处理(CUD)模块
  * 增加
                * append() / appendTo(): 插入后部
                * preppend() / preppendTo(): 插入前部
                * before(): 插到前面
                * after(): 插到后面
  * 删除
               * remove(): 将自己及内部的孩子都删除
               * empty(): 掏空(自己还在)
  * 更新
               * replaceWith()
  
4. 事件模块
  * 绑定事件
                      * eventName(function(){})
                      * on('eventName', function(){})
                      * 常用: click, mouseenter/mouseleave mouseover/mouseout focus/blur
                      * hover(function(){}, function(){})
  * 解绑事件
               * off('eventName')
  * 事件委托
    * 理解: 将子元素的事件委托给父辈元素处理
      * 事件监听绑定在父元素上, 但事件发生在子元素上
      *　事件会冒泡到父元素
      * 但最终调用的事件回调函数的是子元素: event.target
    * 好处
      * 新增的元素没有事件监听
      * 减少监听的数量(n==>1)
  * 事件相关
                 * 停止事件冒泡: event.stopPropagation()
                * 阻止事件的默认行为: event.preventDefault()