浅谈js开源库jQuery

0 前言

jQuery是一款几乎被淘汰的js开源库，目前更多使用vue框架，新手不建议深入学习。
因为做的项目里有用到，这里总结一下jQuery的用法，之后会了解vue的用法。
jQuery的主要用途为：操作dom对象（增删改查）、处理js事件、封装ajax请求等

1 jQuery 核心函数

$ 是 jQuery 的核心函数，能完成 jQuery 的很多功能，$()就是调用 $ 这个函数。
1、传入参数为 [ 函数 ] 时： 表示页面加载完成之后。
相当于 window.onload = function(){}
2、传入参数为 [ HTML 字符串 ] 时： 会对我们创建这个 html 标签对象
3、传入参数为 [ 选择器字符串 ] 时：
$(“#id 属性值”); id 选择器，根据 id 查询标签对象
$(“标签名”); 标签名选择器，根据指定的标签名查询标签对象
$(“.class 属性值”); 类型选择器，可以根据 class 属性查询标签对象
4、传入参数为 [ DOM 对象 ] 时： 会把这个 dom 对象转换为 jQuery 对象

2 jQuery 对象和 dom 对象

DOM 对象 Alert 出来的效果是：[object HTML 标签名 Element]
jQuery 对象 Alert 出来的效果是：[object Object]

jQuery 对象是 dom 对象的数组 + jQuery 提供的一系列功能函数。
jQuery 对象转为 dom 对象 1、先有 jQuery 对象 2、jQuery 对象[下标]取出相应的 DOM 对象

3 jQuery 选择器

基本选择器
层级选择器
过滤选择器
用到时查看：jQueryAPI_1.7.1_CN.chm

4 DOM 的增删改

内部插入 a.appendTo(b) a.prependTo(b)
外部插入 a.insertAfter(b) a.insertBefore(b)
替换 a.replaceWith(b) a.replaceAll(b)
删除：a.remove(删除a标签) a.empty（清空a标签内容）

5 jQuery 的属性操作

html() 可以设置和获取起始标签和结束标签中的内容。 跟 dom 属性 innerHTML 一样。
text() 它可以设置和获取起始标签和结束标签中的文本。 跟 dom 属性 innerText 一样。
val() 它可以设置和获取表单项的 value 属性值，跟 dom 属性 value 一样。val 方法还可以设置表单项的选中状态。

6 jQuery 事件操作

1 $( function(){} ); 和window.onload = function(){} 的区别？
触发的顺序: jQuery 页面加载完成之后 先执行 ; 原生 js 的页面资源加载完成之后 再执行。
jQuery 的页面加载完成之后是浏览器的内核解析完页面的标签创建好 DOM 对象之后就会马上执行。
原生 js 的页面加载完成之后，除了要等浏览器内核解析完标签创建好 DOM 对象，还要等标签显示时需要的内容加载完成（图片等资源）。
执行次数：
原生 js 的页面加载完成之后，只会执行最后一次的赋值函数。 后面的window.onload = function(){}会覆盖前面的赋值函数，因此原生js事件只能有一个 页面加载完成 函数。
jQuery 的页面加载完成之后是全部把注册的 function 函数，依次顺序全部执行。
jQuery 中其他的事件处理方法：
mouseover() 鼠标移入事件
mouseout() 鼠标移出事件
bind() 可以给元素一次性绑定一个或多个事件。

$(function () { 
	$("#areaDiv").click(function (event) { 
		console.log(event); 
	}); 
});

javaScript 事件对象:
在给元素绑定事件的时候，在事件的 function( event ) 参数列表中添加一个参数，这个参数名，我们习惯取名为 event。 这个 event 就是 javascript 事件对象，event.type可以获得触发的事件类型。

7.封装ajax请求

$.ajax 方法

$.ajax({url: ,data:{key:value} , tpye: , success: function(data1){}, dataType: } )
url 表示请求的地址
type 表示请求的类型 GET 或 POST 请求
data 表示发送给服务器的数据
格式有两种：ame=value&name=value / {key:value}
success 请求成功时，响应的回调函数
dataType 响应的数据类型（返回值类型）
常用的数据类型有：
text 表示纯文本； xml 表示 xml 数据； json 表示 json 对象。
回调函数function的参数data1，为请求的返回值，

$.get 方法和 $.post 方法

$.get("url", "key=value&key=value", function(data){}, "dataType")
相比上面的方法，无需设置type-请求类型。

$.getJSON 方法

相比上面的方法，无需设置dataType-响应返回值类型。