jQuery核心

一、引入jQuery

二、jQuery的内涵

1、jQuery挂载在window对象上

2、jQuery是一个函数对象

三、jQuery函数的四种参数形式

1、参数是一个函数function

2、参数是一个选择器

3、参数是一个DOM对象

4、参数是一个HTML元素标签（HTML代码）

简介：jQuery是一个JavaScript的库，是对JavaScript中DOM对象属性和方法的高级封装，目的是简化对DOM树中各种节点的CRUD操作，提高开发效率。可把jQuery视为JavaScript的一个插件。其特点如下表：

jQuery特点
1、使用选择器selector进行查询DOM节点
2、封装ajax
3、链式调用
4、读和写的API相同（读写合一）
5、操作HTML元素与CSS样式
6、事件操作
7、……

jQuery特点
1、使用选择器selector进行查询DOM节点
2、封装ajax
3、链式调用
4、读和写的API相同（读写合一）
5、操作HTML元素与CSS样式
6、事件操作
7、……

一、引入jQuery

使用<script>双标签引入本地文件或者远程CDN节点jQuery即可。

二、jQuery的内涵

1、jQuery挂载在window对象上

当jQuery引入到HTML页面时，window对象上就会添加两个属性：jQuery和$，这两个属性都指向一个函数——>jQuery。引入jQuery时，因为jQuery库是一个自执行函数，传入参数为window，第一步就会将jQuery和$添加到window上。

jQuery实际上一个较高级封装的函数，他的函数返回值是jQuery.fn.init的实例对象，这个实例对象是一个类数组，类数组中包含一个或者多个jQuery_DOM节点对象。

2、jQuery是一个函数对象

jQuery是一个函数，虽然不是构造函数，但是其包含很多作为对象的属性与方法，如方法trim、each、size、get、index；属性length、content、selector。根据方法和属性的用途不同，也分为工具属性和方法、普通对象与方法。

jQuery函数对象的工具属性与方法

三、jQuery函数的四种参数形式

jQuery()或者&()的括号中可以传递4中形式的参数，分别是：一个function、一个或多个DOM对象、选择器、HTML元素标签（字符串形式）。

1、参数是一个函数function

此时等价于window.onload(function(){})。即给window绑定一个onload事件的回调函数，当document文档加载完毕，就会执行这个回调函数。

2、参数是一个选择器

第一个参数是一个JavaScript表达式，一般是选择器字符串，第二个参数context指定查找的范围，如果context缺省，则默认在DOM树中寻找。

当传入参数是选择器时，则回去DOM树上寻找相应的节点，返回的结果是一个类数组对象，类数组中的元素是被封装为jQuery对象的DOM对象。这个类数组满足隐式遍历，当类数组使用自身的方法时，会自动给保存的所有DOM节点都执行该方法，隐式遍历时可以使用this来指代当前被遍历的DOM元素节点。this是调用JavaScript函数时，浏览器隐式传入的一个实参，用于记录是谁在调用这个函数，相同的隐式参数还有arguments类数组。

        被封装为jQuery对象的DOM对象，即对原生DOM对象的属性和方法进行了高级封装，比如html()、css()、val()、addClass()等等更加简洁的方法去修改对应DOM节点的属性和样式。jQuery节点对象一般含有下面的属性与方法如下下面两张图。对于方法，他们是读写合一的，根据传入的参数个数或者形式不同，会进行相应的读或者修改操作，一般进行写操作时，会传入key、value两个参数，或者一个对象，如object.css()、object.css(key,value)、object.css({key:value})。

        选择器为字符串形式，但是并不同于css样式表的选择器。其中基本选择器和层级选择器能够选取大部分的DOM元素节点，选取的不止只有一个元素节点，当存在多个节点时，使用过滤选择器进行挑选。另外还包括关于元素状态和表单状态的一些过滤选择器，以分号：开头的表示过滤，他表示元素节点的状态或者对元素节点做一些解释说明。

3、参数是一个DOM对象

例如$(document.getElementById('div'))，那么返回一个jQuery对象，该对象将id为div的DOM对象进行了封装。

4、参数是一个HTML元素标签（HTML代码）

        例如$('<div>')，那么返回一个jQuery对象，该对象此时在内存当中，并没有插入到DOM树当中。
$("<div><p>Hello</p></div>").appendTo("body");
$("<div>", {
  "class": "test",
  text: "Click me!",
  click: function(){
    $(this).toggleClass("test");
  }
}).appendTo("body");