Web笔记之jQuery

        ● jQuery 是一个 JavaScript库，即library，是一个封装了函数(方法)的集合。在这个库中，封装了很多预先定义好的
           函数在里面，比如动画animate、hide、show，比如获取元素等。
        ● 简单理解：jQuery就是一个JS文件，是对原生js代码进行了封装，存放到里面。这样可以快速高效的使用这些封装好的功能。
        ● jQuery是一个快速、简洁的JavaScript库，其设计的宗旨是“write Less，Do More"，即写更少的代码，做更多的事情。
        ● j是JavaScript，Query是查询，意思就是查询js，把js中的DOM *** 作做了封装，程序员可以快速的查询使用里面的功能。
        ● jQuery封装了JavaScript常用的功能代码，优化了DOM *** 作、事件处理、动画设计和Ajax交互。
        ● 学习jQuery的本质，就是学习如何去调用这些函数(方法)。
        ● jQuery出现的目的是加快前端人员的开发速度
        优点：
                ① 轻量级。核心文件才几十kb，不会影响页面加载速度
                ② 跨浏览器兼容。基本兼容了现在主流的浏览器
                ③ 链式编程、隐式迭代
                ④ 对事件、样式、动画支持，大大简化了DOM *** 作
                ⑤ 支持插件扩展开发。有着丰富的第三方插件，例如：树形菜单、日期控件、轮播图等
                ⑥ 免费、开源

        1 jQuery 的入口函数
                ① $(function() {

                     });
                ② $(document).ready(function() {

                     });
                注意：
                        ● jQuery 的入口函数相当于原生js中的 DOMContentLoaded。
                        ● 更推荐使用第①种方式。
        2 jQuery 的顶级对象 $
                ① $ 是jQuery的别称，在代码中可以使用jQuery代替$，但为了方便，通常是直接使用$。
                ② $ 是jQuery的顶级对象，相当于原生JS中的window。利用$把元素包装成jQuery对象，这样就可以调用jQuery的方法。
        3 jQuery对象 和 DOM对象
                ① 用原生JS获取来的对象就是DOM对象
                ② 用jQuery方法获取的元素就是jQuery对象。
                ③ jQuery对象的本质是：利用$对DOM对象包装后产生的对象，该对象是以伪数组的形式存储
                ④ jQuery对象只能使用jQuery方法，DOM对象只能使用原生JS的属性和方法，二者不能混淆
        4 jQuery对象 和 DOM对象的相互转换
                说明：
                        ● DOM对象 与 jQuery对象之间是可以相互转换的。
                        ● 有一些原生js的属性和方法jQuery没有封装，想使用这些没有封装的属性和方法需要
                           把jQuery对象转换为DOM对象才能使用。
                ① DOM对象转换为jQuery对象：
                        $(DOM对象)
                        比如：
                                var myDiv = document.querySelector('div');   //获取DOM对象
                                $(myDiv)    //转换为jQuery对象
                ② jQuery对象转换为DOM对象 (两种方式)
                        $('选择器')[index]
                        $('选择器').get(index)
                        注意：index 是索引号

        1 jQuery 基础选择器
                说明：原生JS获取元素方式很多，很杂，而且兼容性情况不一致，因此jQuery给我们做了封装，统一了获取元素的方式
                语法格式：
                        $('选择器')
                        注意：里面选择器直接写CSS选择器即可，但是要加引号
                选择器种类：
                        ID选择器        $('#id')
                        全选选择器        $('*')
                        类选择器        $('.class')
                        标签选择器        $('标签名')，比如，$('div')
                        并集选择器        $('标签名,标签名')，比如，$('p,span')
                        交集选择器        $('标签名.class')，比如，$('li.style-first')
                        子代选择器        $('标签名>标签名')，比如，$('ul>li')
                        后代选择器        $('标签名 标签名')，比如，$('ul li')
        2 隐式迭代 (重要)
                遍历内部 DOM元素 (伪数组形式存储)的过程就叫做隐式迭代。
                简单理解：
                        jQuery会给匹配到的所有元素进行循环遍历，执行相应的方法，而不用程序员进行循环遍历，简化 *** 作，方便调用。
        3 jQuery筛选选择器
                语法                用法                描述
                :first                $('li:first')         获取第一个li元素
                :last                $('li:last')         获取最后一个li元素
                :eq(index)       $('li:eq(2)')      获取到的li元素中，选择索引号为2的元素，索引号index从0开始。
                :odd                $('li:odd')        获取到的li元素中，选择索引号为奇数的元素
                :even              $('li:even')       获取到的li元素中，选择索引号为偶数的元素