jQuery基础

 jQuery 介绍

JavaScript 库：就是一个JS 文件，里面对我们原生js代码进行了封装
jQuery的概念：jQuery 是一个快速、简洁的 JavaScript 库
jQuery 封装了 JavaScript 常用的功能代码，优化了 DOM 操作、事件处理、动画设计和 Ajax 交互

jQuery 的基本使用

jQuery的官网地址： https://jquery.com/，官网即可下载最新版本。
各个版本的下载：https://code.jquery.com/
使用时引入jQuery文件即可

jQuery的入口函数：

第一种: 简单易用。

     $(function () {   
    ...  // 此处是页面 DOM 加载完成的入口
}) ; 

第二种: 繁琐，但是也可以实现

                $(document).ready(function(){
   ...  //  此处是页面DOM加载完成的入口
});

总结：
                1. 等着 DOM 结构渲染完毕即可执行内部代码，不必等到所有外部资源加载完成，jQuery 帮我们完成了封装。
                2. 相当于原生 js 中的 DOMContentLoaded。
                3. 不同于原生 js 中的 load 事件是等页面文档、外部的 js 文件、css文件、图片加载完毕才执行内部代码。
                4. 更推荐使用第一种方式。

jQuery 对象和 DOM 对象

            1. 用原生 JS 获取来的对象就是 DOM 对象
            2. jQuery 方法获取的元素就是 jQuery 对象。
            3. jQuery 对象本质是： 利用$对DOM 对象包装后产生的对象（伪数组形式存储）。
注意：只有 jQuery 对象才能使用 jQuery 方法，DOM 对象则使用原生的 JavaScirpt 方法

jQuery中的顶级对象$

            1.  \$是 jQuery 的别称，在代码中可以使用 jQuery 代替，但一般为了方便，通常都直接使用 $ 。
            2.  \$是jQuery的顶级对象，相当于原生JavaScript中的 window。把元素利用$包装成jQuery对象，就可以调用jQuery 的方法。

jQuery 对象和 DOM 对象转换

因为原生js 比 jQuery 更大，原生的一些属性和方法 jQuery没有给我们封装. 要想使用这些属性和方法需要把jQuery对象转换为DOM对象才能使用
DOM对象转换成jQuery对象，方法只有一种：先获取在转换

var box = document.getElementById('box');  // 获取DOM对象
var jQueryObject = $(box);  // 把DOM对象转换为 jQuery 对象

jQuery 对象转换为 DOM 对象有两种方法：

                Query对象[索引值]
var domObject1 = $('div')[0]

                jQuery对象.get(索引值)
var domObject2 = $('div').get(0)

jQuery 选择器

基础选择器

$("选择器")   //  里面选择器直接写 CSS 选择器即可，但是要加引号 

层级选择器

层级选择器最常用的两个分别为：后代选择器和子代选择器

筛选选择器

            $('li:first')：获取第一个li元素
            $('li:last')：获取第一个li元素
            $('li:eq（2）')：获取到的li元素中索引号为2的元素
            $('li:odd')：获取到的li元素中索引号为奇数的元素
            $('li:even')：获取到的li元素中索引号为偶数的元素

jQuery中还有一些筛选方法，类似DOM中的通过一个节点找另外一个节点，父、子、兄以外有所加强
            $('li').parent();：查找父级
            $('ul').children('li');：相当于$('ul>li'),最近一级（亲儿子）
            $('ul').find('li');：相当于$('ul li'),后代选择器
            $('.first').siblings('li');：查找兄弟节点，不包括自己
            $('.first').nextAll('li');：查找当前元素之后的所有同辈元素
            $('.first').prevAll('li');：查找当前元素之前的所有同辈元素
            $('div').hasClass('protected');：检查当前的元素是否含有某个特定的类，如果有就返回true
            $('li').eq(2)：相当于$('li:eq(2)')

知识铺垫

jQuery 里面的排他思想

想要多选一的效果，排他思想：当前元素设置样式，其余的兄弟元素清除样式。

            例：$(this).css(“color”,”red”);
$(this).siblings(). css(“color”,””);

隐式迭代

遍历内部 DOM 元素（伪数组形式存储）的过程就叫做隐式迭代
给匹配到的所有元素进行循环遍历，执行相应的方法，而不用我们再进行循环

 例：$('div').hide();  // 页面中所有的div全部隐藏，不用循环操作

链式编程

链式编程是为了节省代码量，看起来更优雅

 例：$(this).css('color', 'red').sibling().css('color', ''); 

 jQuery 样式操作

操作 css 方法

参数只写属性名，则是返回属性值

var strColor = $(this).css('color');

参数是属性名，属性值，逗号分隔，是设置一组样式，属性必须加引号，值如果是数字可以不用跟单位和引号

$(this).css(''color'', ''red'');

参数可以是对象形式，方便设置多组样式。属性名和属性值用冒号隔开， 属性可以不用加引号

$(this).css({ "color":"white","font-size":"20px"});

设置类样式方法

添加类：$("div").addClass("current");
删除类：$("div").removeClass("current");
切换类：$("div").toggleClass("current");
注：原生 JS 中 className 会覆盖元素原先里面的类名，jQuery 里面类操作只是对指定类进行操作，不影响原先的类名

 jQuery 效果

显示隐藏

显示：show（【speed】，【easing】，【fn】）
                speed：三种预定速度（slow、normal、fast）或者数值（表示动画时长的毫秒数）
                easing：（OPtional）用来指定切换效果，默认是‘swing’，可用参数‘linear’
                fn：回调函数，在动画执行时执行的函数，每个元素执行一次
隐藏：hide（【speed】，【easing】，【fn】）
切换：toggle（【speed】，【easing】，【fn】）
建议：一般不带参数，直接显示隐藏即可

滑入滑出

            下滑：slideDown（【speed】，【easing】，【fn】）
            上滑：slideUp（【speed】，【easing】，【fn】）
            切换：slideToggle（【speed】，【easing】，【fn】）
            注：上滑下滑是指方向向上向下，而不是显示隐藏

淡入淡出

            淡入：fadeIn（【speed】，【easing】，【fn】）
            淡出：fadeOut（【speed】，【easing】，【fn】）
            切换：fadeToggle（【speed】，【easing】，【fn】）

渐进方式调整到指定的不透明度

                fadeTo（speed，opacity，【easing】，【fn】）

自定义动画

animate（params，【speed】，【easing】，【fn】）
params：想要改变的样式属性，以对象形式传递，如果是符合属性需要采用驼峰命名法

停止动画排队stop（）
            动画或者效果一旦触发就会执行，多次触发就会造成多个排队执行
            写在动画或者效果前，相当于停止结束上一次的动画或者效果

事件切换
            hover（over，out）：只写一个函数时，鼠标经过离开都会触发，写两个函数分别触发

jQuery 属性操作

元素固有属性值 prop()

            获取：prop（‘属性’）
            设置：prop（‘属性’，‘属性值’）
            注意：prop() 除了普通属性操作，更适合操作表单属性：disabled / checked / selected 等

元素自定义属性值 attr()

            获取：attr（‘属性’）类似原生 个体Attribute（）
            设置：attr（‘属性’，‘属性值’）类似原生setAttribute()
            注意：attr() 除了普通属性操作，更适合操作自定义属性。（该方法也可以获取 H5 自定义属性）

数据缓存 data()

            data() 方法可以在指定的元素上存取数据，并不会修改 DOM 元素结构。一旦页面刷新，之前存放的数据都将被移除。
            附加数据：data（‘name’，’value‘）向被选元素附加数据
            获取数据：data（‘name’）向被选元素获取数据
            注意：同时，还可以读取 HTML5 自定义属性  data-index ，得到的是数字型。

jQuery 文本属性值

普通元素内容html（）相当于原生innerhtml

            获取：html（）
            html（‘内容’）设置元素的内容

普通元素文本内容text（）相当于原生innerText

            获取：text（）
            text（‘内容’）设置元素的内容

表单的值val（）相当于value

            获取：val（）
            val（‘内容’）设置元素的内容
注意：html() 可识别标签，text() 不识别标签。

jQuery 元素操作

遍历元素

如果想要给同一类元素做不同操作，就需要用到遍历

 $('div').each(function(index,domEle){xxx;})

遍历匹配的每一个元素，主要用DOM处理，demEle是每个DOM元素对象，不是jquery对象
所以想要使用jquery方法，需要给这个dom元素转换为jquery对象$(domEle)

$.each()方法可用于遍历任何对象，主要用于数据处理

$.each(object,function(index,domEle){xxx;})

创建、添加、删除

创建

                $('<li></li>')

内部添加

                element.append('内容') 放入到匹配元素内部的最后面 类似原生 appendChild
                element.prepend('内容') 放入到匹配元素内部的最前面 

外部添加

                emlement.after('内容') 把内容放入目标元素后面
                emlement.before('内容') 把内容放入目标元素前面

删除

                element.remove（） 删除匹配元素本身
                element.empty()删除匹配的元素集合中所有的子节点
                element.html('') 清空匹配元素的内容
重点学习以上几个创建、添加、删除常用方法，还有更多其他方法

jQuery 尺寸、位置操作

尺寸操作

            width（）/height() 取得匹配元素宽和高 只算width/height
            innerWidth（）/innerHeight() 取得匹配元素的宽高 包含padding
            outerWidth（）/outerHeight() 取的匹配元素的宽/高包含padding、border
            outerWidth（true）/outerHeight(true) 取的匹配元素的宽/高包含padding、border、margin
以上参数为空获得对应值，返回的是数值型  如果是数字则改为对应值 参数不必写单位

位置操作

            offset（）
                设置或返回相对于文档的偏移坐标，跟父级没关系
                有两个属性left、top  offset（）.top/offset().left
                设置：offset({top:10,left:10})
            position()
                设置或返回相对于带有定位的父级元素的偏移坐标，如果父级没有定位就以文档为准
            scrollTop（）/scrollLeft() 设置或获取元素被卷去的头部或左侧

jQuery 事件注册

        普通：element.事件（function（）{}）
        优点：不用担心事件覆盖问题
        缺点：不能做事件委托，且无法实现事件解绑、对创建元素操作

事件处理

on() 绑定事件

jQuery中有多个新的绑定事件方法bind（）/live()/delegate()/on()等，其中最好用的就是：on（）
可以绑定多个事件，用对象形式
如果事件处理程序相同就可以同时写
可以进行事件委派
可以给动态生成的元素绑定事件
如果只想触发一次，可以用one（）来绑定事件

off() 解绑事件

            $('p').off() 解绑p元素所有事件处理程序
            $('p').off(‘click’) 解绑p元素上的点击事件处理程序
            $('p').off(‘click’，‘li’) 解绑事件委托

trigger() 自动触发事件

            element.click() 简写形式
            element.trigger('type') 自动触发
            element.triggerHandler('type') 自动触发事件 不会触发元素的默认行为

事件对象

        element.on(events.[selector],function(event){})
        阻止默认行为：event.preventDefault() 或者return false
        阻止冒泡：event.stopPropagation()

拷贝对象

        $.extend([deep],target,object1,[objectN])
        deep:如果为true为深拷贝，反之为浅拷贝
        target为要拷贝的目标对象
        object1为拷贝到第一个对象
        objectN为拷贝到第N个对象
        浅拷贝为引用为拷贝对象的地址，修改目标对象会影响被拷贝对象
        深拷贝为完全克隆，修改目标对象不会影响被拷贝对象

多库共存

        多种版本同时使用时，$符号被使用后，需使用jQuery或直接定义新的对象
        把$符号同一改为jQuery

 <script>
    $(function() {
          // 让jquery 释放对$ 控制权 让用自己决定
          var suibian = jQuery.noConflict();
          console.log(suibian("span"));
    })
</script>

jQuery 插件

插件也是依赖于jQuery来完成的，所以必须要先引入jQuery文件
常用的网站：
            jQuery 插件库  http://www.jq22.com/  
            jQuery 之家   http://www.htmleaf.com/ 
使用步骤：
            引入相关文件。（jQuery 文件 和 插件文件）    
            复制相关html、css、js (调用插件)。
            引用的相关插件下都有使用说明和参数，可以根据这些做相应的更改
            一些简单的插件只需引入html、js，甚至有的只需要引入js
常见插件：瀑布流、图片懒加载、全屏滚动、bootstrap组件/插件