什么是jquery

    jquery官网：jquery.com

    jQuery速查表地址：  jQuery速查表 

    jQuery是一个快速、简洁的 js 框架或者 js 库。【说白了就是一个 js 文件】

    jQuery是用原生 js 写的，一般是在 pc 端网站去使用

jQuery使用

    *****jQuery的版本有很多1.x、2.x、3.x 等等。但是一般都用 【 jquery-1.11.3.min.js 】这个版本

    使用步骤：

        1》jquery引入

            <script src="js/jquery.js"></script>

        2》开头格式

            $(function() {  //相当于window.onload

                //代码块

            })

基本选择器（一）

    #id                ===>    $('#id名称')

    .class             ===>    $('.class名称')

    element        ===>    $('div')、$('p').......

    selector1,selector2    ===>    $('p,span,h1........')

    *                    ===>    几乎不用

基本选择器（二）

    :first                    ===>    选择到第一个

    :last                     ===>    选择到第二个

    :even                   ===>    匹配所有索引变量偶数的元素，从0开始计算

    :odd                    ===>    匹配所有索引变量奇数的元素，从0开始计算

    :eq(index)           ===>    匹配到一个给定索引值的元素，从0开始计算

    :gt(index)            ===>    匹配所有大于给定索引值的元素，从0开始计算

    :lt(index)             ===>    匹配所有小于给定索引值的元素，从0开始计算

    :not(selector)      ===>    去除所有与给定选择器匹配的元素，也就是【排除】

层级选择器

    ancestor descendant    ==>    在给定的祖先元素下匹配所有的后代元素

内容选择器

    :contains(text)               ==>    含有 这个文本的节点【模糊搜索】

    :empty                           ==>    选取到不含有子元素的元素

    :has(selector)                 ==>    选取到含有子元素的元素

    :parent                           ==>    选取到含有某一个元素的元素

可见性选择器：一般要在判断的时候使用可见性选择器

    :hidden            ==>    匹配所有不可见元素，或者type为hidden的元素

    :visible             ==>    匹配所有的可见元素

属性选择器

    $('div[id]')

    $('div[id=abc]')

子元素

    :first-child

    :last-child

    :nth-child    ==>要匹配元素的序号，从1开始，如果:nth-child(2n)==>表示2的倍数也就是偶数

表单

    :input

表单对象属性

    :checked    几乎用来判断的

css类

    addClass()            ==》添加 class

    removeClass()      ==》删除 class

    toggleClass()        ==》做切换的，如果存在就删除，如果不存在就添加一个类

******重点操作的是：addClass、removeClass

过滤方法

    eq()

    first()

    last()

    not()

        注意：eq、fitst、last、not方法和选择器的功能是一样的

    filter    ==> 筛选出与指定表达式匹配的元素集合

    is         ==> DOM元素或 jQuery 对象来检测匹配元素集合，如果其中至少一个元素符合这个给定的表达式就返回 true。

    slice    ==> 字符串或者数组的 slice 完全一样

插入节点

    内部插入

        append(content|fn)    ==> 内部插入，插入到内部的最后面

        appendTo(content)

        prepend(content|fn)    ==> 内部插入，插入到内部的最前面

        prependTo(content)

        ***语法

            1. append、prepend            ==> 父元素.方法名称（子元素）

            2. appendTo、prependTo     ==> 子元素.方法名称（父元素）

    外部插入

        after(content|fn)        ==> 平级插入，插入在当前的下面

        before(content|fn)     ==> 平级插入，插入在当前的上面

        insertAfter(content)

        insertBefore(content)

        ***语法

            1. after、before                   ==> 当前元素.方法名称（插入元素）

            2. appendTo、prependTo    ==> 插入元素.方法名称（当前元素）

删除节点

    js原生种删除节点用的方法    ==>    removeChild()

    jQuery中使用remove()来删除节点

属性

    1. attr 获取匹配的元素集合中的第一个元素的属性的值或设置每一个匹配元素的一个或多个属性

        js 原生中设置属性或者获取属性的值用什么方法

            setAttribute、getAttribute

        jQuery：attr() 用来获取或者设置属性

            如果写一个参数是获取属性的值

            如果写两个参数是设置属性

    2. prop 获取匹配的元素集中第一个元素的属性（property）值或设置每一个匹配元素的一个或多个属性

***attr和prop的区别

    在检测的时候，prop返回的是一个布尔值，而attr返回的是具体的值（字符串类型）

文本值

    html()        js原生中==》innerHTML

    text()         js原生中==》innerText

    val()          js原生中==》value（input的）

    ***获取

        选择器.方法名称()

    ***赋值

        选择器.方法名称(赋值的内容)

尺寸

    height([val|fn])

    width([val|fn])

        *** 只是单纯的返回width和height

    innerHeight()

    innerWidth()

        *** width + height

    outHeight()([options])

    outWidth()([options])

        *** width + padding + border

        *** 如果参数给 true ，则是：width + padding + border + margin

位置

    offset().left

    offset().top

        ***当前元素距离浏览器左侧【顶部】的偏移量

    scrollTop()

    scrollLeft()

事件绑定：bind(type,fn)

    让 input 事件执行，写法如下：

        $('#txt').bind('input',function(){

            console.log(1)

        })

事件委托：on

    $('父元素').on('事件名称','子元素',函数)

事件对象

    eve.pageX    ==> 类似于 js 原生的 e.clientX

    eve.pageY    ==> 类似于 js 原生的 e.clientY

        鼠标距离浏览器左侧【顶部】的距离（偏移）

    event.preventDefaule()      ==> 阻止默认行为

    event.stopPropagation()    ==> 阻止冒泡

循环遍历

    方式一：

        $(选择器).each(function(index,item){

            // 循环体

        })

    方式二：

        $.each(要遍历的对象，function(index,item){

            // 循环体

        })

    ***区别

        当遍历一个jQuery对象的时候可以用方式一

        当遍历一个对象或者数组的时候，可以用方式二

jQuery自带动画

基本动画

    show()

    hide()

        ***可以加入参数，就是动画完成的毫秒数

滑动动画

    slideDown([s],[e],[fn])

    slideUp([s],[e],[fn])

淡入淡出

    fadeIn()

    fadeOut()

    ***注意 stop 可以清空动画的队列

自定义动画

    animate(要改变的样式，毫秒数，回调函数)

    例如：

        animate({

            margin: '10px,

            padding: '10px;

            color: '#000'

            ......

        },500,function(){

            console.log(1)

        })

jQuery 对象访问

    size()        ==> length，获取个数的

    index()     ==> 获取下标

插件写法

    插件机制和方法

        $.fn.extend(object,  ==> 扩展 jQuery 元素集来提供新的方法（通常用来制作插件）

            *** $('ul li').扩展一个方法()

            *** 局部插件

        extend(object)         ==> 扩展jQuery对象本身

            $    ==> 扩展方法的

            *** 全局插件

    如何写 jQuery 插件

        文件引入

            <script src="./js/jquery-1.11.3.min.js"></script>

            <script src="插件地址"></script>

        插件的命名规范

            jquery.插件名称.js

            例如：

                jquery.nav.js

                jquery.swiper.js

                jquery.scroll.js

        插件内部写法

            开始是匿名函数自我执行

                (function(){

                })()

            全局插件

                (function(){

                    $.extend({

                        'nav':function() {

                            alert(1)

                        }

                     })

                  })()

            调用：$.nav()

            局部插件

                (function(){

                    $.fn.extend({

                          'nav':function() {

                                $(this).find('li').click(function(){

                                    $(this).hide()

                                })

                                return this

                          }

                    })

              })()

            调用：$('ul').nav()

插件参数传递

    固定的写法语法：

        (function(){

            $.fn.插件名称 = function(options){

                // 默认参数

                var defaults = {

                }

                // 合并2个对象，形成新的对象

                var settings = $.extend({},defaults,options)

                // 写的代码体

                //实现继续的连缀写法，返回 this

                return this

            }

        })()