jquery1

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

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

jQuery的优点

1. 轻量级。核心文件才几十kb，不会影响页面加载速度。
2. 跨浏览器兼容，基本兼容了现在主流的浏览器。
3. 链式编程、隐式迭代。
4. 对事件、样式、动画支持，大大简化了DOM操作。
5. 支持插件扩展开发。有着丰富的第三方的插件，例如：树形菜单、日期控件、轮播图等。
6. 免费、开源.

// 第一种: 简单易用。
$(function () {   
    ...  // 此处是页面 DOM 加载完成的入口
}) ; 

// 第二种: 繁琐，但是也可以实现
$(document).ready(function(){
   ...  //  此处是页面DOM加载完成的入口
});

 jQuery 对象和 DOM 对象转换

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

// 1.DOM对象转换成jQuery对象，方法只有一种
var box = document.getElementById('box');  // 获取DOM对象
var jQueryObject = $(box);  // 把DOM对象转换为 jQuery 对象

// 2.jQuery 对象转换为 DOM 对象有两种方法：
//   2.1 jQuery对象[索引值]
var domObject1 = $('div')[0]

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

jQuery 选择器

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

#id

HTML 代码:

<div id="notMe">
   <p>id="notMe"</p>
</div>
<div id="myDiv">id="myDiv"</div>

jQuery 代码:

$("#myDiv");

element

根据给定的元素标签名匹配所有元素

HTML 代码:

<div>DIV1</div>
<div>DIV2</div>
<span>SPAN</span>

jQuery 代码:

$("div");

.class

HTML 代码:

<div class="notMe">div class="notMe"</div>
<div class="myClass">div class="myClass"</div>
<span class="myClass">span class="myClass"</span>

jQuery 代码:

$(".myClass");

*

找到每一个元素

HTML 代码:

<div>DIV</div>
<span>SPAN</span>
<p>P</p>

jQuery 代码:

$("*")

selector1,selector2,selectorN

将每一个选择器匹配到的元素合并后一起返回。

你可以指定任意多个选择器，并将匹配到的元素合并到一个结果内。

HTML 代码:

<div>div</div>
<p class="myClass">p class="myClass"</p>
<span>span</span>
<p class="notMyClass"><p class="notMyClass"</p>

jQuery 代码:

$("div,span,p.myClass")