JQuery基本使用和JQuery常用API

---

一，JQuery的概述

jQuery
（j就是JavaScript，query就是查询，jQuery就是查询js把js里面常用的dom操作进行了封装，我们可以快速的查询和使用里面的功能）

是一个快速高效的JavaScript库，里面封装了常用的JavaScript功能代码，优化了dom操作，事件处理，动画设计和Ajax交互。
学习jQuery的本质：就是学习怎样调用这些方法。
jQuery出现的目的就是加快了前端人员的开发速度，我们可以非常方便的使用jQuery从而提高开发效率。
JavaScript库：就是一个js文件，把我们常用的dom操作，原生js代码进行了封装存放到里面，这样我们就可以快速高效的使用这些封装好的功能了。
常见的js库：

• jQuery
• prototype
• YUI
• Dojo
• Ext JS
• 移动端的zepto
  这些库都是对原生js代码进行了封装，内部都是用JavaScript实现的。
  jquery优点：
• 轻量级
• 隐式迭代，链式编程
• 跨浏览器兼容
• 对事件，样式，动画支持，大大简化了dom操作
• 支持插件拓展开发例如：轮播图，日期控件，树形菜单
• 免费，开源

二，JQuery的基本使用

1.引入jQuery文件
2.使用即可
jQuery的入口函数：

$(function () {
   
...//Dom加载完成的入口
})

1.等着DOM结构渲染完毕就可以执行内部代码，不必等到所有外部资源加载完毕，jQuery帮我们完成了封装，相当于原生js中的DOMContentLoaded.

• 其中$ 符号是jQuery的别称，在代码中可以使用$符号替代jQuery
• $符号是jQuery的顶级对象。相当于原生js里面的window，把元素利用 $包装成jQuery对象，就可以调用jQuery的方法。

jQuery对象和DOM对象：

• 用原生JS获取过来的就是DOM对象。
• 用jQuery方法获取过来的就是jQuery对象。
• jQuery对象的本质是：利用$符号把DOM 元素包装后产生的对象（伪数组形式存储）

//DOM对象
var div = document.querySelector("div");
console.log(div)
//jQuery对象
$('div')

DOM元素和jQuery对象相互转换：

//将DOM对象转换为jQuery对象
$('div')
//将jQuery对象转换为DOM对象（两种方式）
$('div')[index]
$('div').get(index)//index是索引号

三，JQuery常用API

学习目标：

• 能够写出常用的jQuery选择器
• 能够操作jQuery样式
• 能够写出常用的jQuery动画
• 能够操作jQuery属性
• 能够操作jQuery元素
• 能够操作jQuery元素尺寸，位置

四，JQuery选择器

因为原生js获取元素方法很杂而且兼容性情况不一致，所以jQuery帮我们进行了封装，是获取元素统一标准。

$('选择器')

<

名称	用法
ID选择器	$(’#div’)
全选选择器	$(’*’)
类选择器	$(’.class’)
标签选择器	$(‘div’)
并集选择器	$(‘div,p’)
交集选项器	$(‘li.current’)