一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第16天，点击查看活动详情。

jQuery概述

嗨嗨嗨，我又来水文章了，这几天水一下jQuery

JavaScript库

JavaScript库即Library，是一个封装好的特定的集合(方法和函数)。从封装一大堆函数的角度理解库，就是在这个库中，封装了很多预先定义好的函数在里面，比如动画animate、hide、show，比如获取元素等。

简单理解：就是一个JS文件，里面对我们原生js代码进行了封装，存放到了里面。这样我们可以快速高效的使用这些封装好的功能。

比如jQuery，就是为了快速方便的操作DOM，里面基本都是函数(方法)

常见的JavaScript库： jQuery、Prototype、YUI、Dojo、Ext JS、移动端的zepto

这些库的特点都是对原生JS的封装，内部都是用JavaScript实现的。

jQuery的概念

jQuery是一个快速、简介的JavaScript库，其设计的宗旨是“write less，do more”，即倡导写更少的代码 j就是JavaScript,Query查询，意思就是查询JS，把js的DOM操作做了封装，我们可以快速的查询使用里面的功能。

jQuery的使用

使用时需要引入相关文件

入口函数

之前的文章提到过，如果把script写在结构之前，那么script中的代码不会执行。在dom中，我们讲过可以用onload事件来解决，那在jQuery中呢？

jQuery中有两种方法：
(1) $(document).ready(function(){ ...//此处是页面dom加载完成的入口 });

    $(document).ready(function () {
             $('div').hide();
         });  
         
         老版写法

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

    $(function () {
            $('div').hide();
        })

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

jQuery顶级对象

1. $是jQuery的别称
将$符号替换成jQuery，执行结果一样

        // $(function () { //入口函数
        //     alert('11');
        // })
        
        jQuery(function () { //入口函数
            alert('11');
        });

2. $同时也是jQuery的顶级对象
$同时也是jQuery的顶级对象，相当于原生js的window。元素利用$包装成jQuery对象，就可以调用jQuery方法。
比如$('div').hide() 将div包装成jQuery对象，调用jQuery的方法。

jQuery对象和DOM对象

1.DOM对象：用原生JS获取过来的对象就是DOM对象

        var myDiv = document.querySelector('div');
        var mySpan = document.querySelector('mySpan');

2.jQuery对象：用jQuery方式获取过来的对象是jQuery对象。
本质：通过$把DOM元素进行了包装

        $('div'); //$('div')就是一个jQuery对象
        $('span'); //$('span')就是一个jQuery对象
        console.dir($('div'));

上面输出的是一个伪数组，jQuery对象的本质就是利用$对DOM元素包装后产生的对象 (伪数组存储)

3.jQuery对象只能使用jQuery方法，DOM对象则使用原生的JavaScript属性和方法

    myDiv.style.display = 'none'; 
    $('div').hide();  
    
    各自用各自的方法

DOM对象与jQuery对象之间是可以相互转换的。因为原生js比jQuery更大，原生的一些属性和方法jQuery没有给我们封装，要想使用这些属性和方法需要把jQuery对象转换成DOM对象才能用。

举个例子，视频中有播放功能，通过play这个方法实现，但是调用它只能通过原生js，在jQuery并没有play这个方法，所以这时候只能使用DOm对象而不能用jQuery对象，但是呢，jQuery获取过来会更容易，所以我们可以进行对象转换。

4.DOM对象转换为jQuery对象

    var myvideo = document.querySelector('video');
    $(myvideo); 
    
    直接通过$将DOM元素包装成jQuery对象

5.jQuery对象转换为DOM对象

        (1)
        $('video')[index]         index是索引号，因为前面讲过jQuery对象是一个伪数组
        $('video')[0].play();

        (2)
        $('video').get(index)     index是索引号
        $('video').get(0).play();

通过添加索引号的方式，将jQuery对象转换为DOM对象，然后再使用DOM中的方法。

jQuery基础选择器

原生JS获取元素方式很多，很杂，而且兼容性情况不一致，因此jQuery给我们做了封装，使获取元素统一标准。
语法：
$("选择器") 里面选择器直接写CSS选择器即可，要加引号

比如：

$("#id") 获取指定ID的元素
$("*") 匹配所有元素
$(".class") 获取同一类Class的元素
$("div") 获取同一类标签的所有元素
$("div,p,li") 选取多个元素
$("li.current") 交集元素
$("ol>li") 获取父元素下指定的最近一级的子元素
$("ol li") 获取父元素下所有指定的子元素

隐式迭代

上面说过，通过jQuery获取到的对象存储到了伪数组中。
而遍历内部DOM元素(伪数组形式存储)的过程叫隐式迭代。
简单理解：给匹配到的所有元素进行循环遍历，执行相应的方法，而不用我们再进行循环，简化我们的操作，方便我们调用

jQuery筛选选择器

语法	用法	描述
:first	$('li:first')	获取第一个li元素
:last	$('li:last')	获取最后一个li元素
:eq(index)	$('li:eq(2)')	获取到的li元素中，选择索引号为2的元素，索引号从0开始
:odd	$('li:odd')	获取到的li元素中，选择索引号为奇数的元素
:even	$('li:even')	获取到的li元素中，选择索引号为偶数的元素

jQuery筛选方法

语法	用法	说明
parent()	$('li').parent();	查找父级
children(selector)	$('ul').children('li')	相当于$('ul>li'),查找最近一级子元素li
find(selector)	$('ul').find('li')	相当于$('ul li')，后代选择器
siblings(selector)	$('.first').siblings('li')	查找兄弟节点，不包括自身
nextAll([expr])	$('.first').nextAll()	查找当前元素之后所有的同辈元素
prevAll([expr])	$('.last').prevAll()	查找当前元素之前所有的同辈元素
hasClass(class)	$('div').hasClass('protected')	检查当前的元素是否含有某个特定的类，如果有，则返回true
eq(index)	$('li').eq(2)	查找第n个li

jQuery简单操作①