1.JQuery介绍
JQuery是一个JavaScript库，是对ECMScript、dom、bom、的一个浅封装，让用户更方便操作。
理解成一个大的函数，函数内部封装了很多函数来供你使用。
学习jQuery之前需具备顶基础知识：
Html Css JavaScript
jQuery库包含以下功能
* HTML选取
* HTML元素操作
* CSS操作
* HTML事件函数
* JavaScript特效和函数
* HTML DOM遍历和修改
* AJAX提示：除此之外，Jquery还提供了大量的插件，目前jQuery兼容于所有主流浏览器
在线使用:https://www.bootcdn.cn/jquery/
中文文档:https://jquery.cuishifeng.cn/
1.2JQuery安装
jQuery安装十分简单，只需要将jQuery的库导入到html中即可，我们可以下载下来也可以使用CDN资源。
一般我们在下载或者使用cdn资源的时候，都会让我们选择jquery.js 与 jquery.min.js版本，它们的区别在于jquery.min.js是经过压缩的，体积更小，适用于部署环境。而jquery适用于源码研究，我们对于jquery的学习，应该要上升到源码层次。
1.本地引入2.在线引入
Document
//本地引入
//源代码引入
one
two
three
1.3jQuery函数
通过"jQuery"和'$'来调用函数
1.$(选择器)
通过选择器选择到符合条件的Element元素，将其保存到jQuery对象中
2.$(html片段)
将html片段转换成Element元素，然后再封装成一个jQuery对象
3.$(Element元素)
将Element元素转换成一个jQuery对象
4.$(匿名函数)
匿名函数在文档加载完毕后执行，类似于window.onload=function(){}// jquery核心函数
console.log($,typeof $) //function jQuery(selector, context) function
// jquery核心对象
console.log($(),$() instanceof Object)//Object{} true
1.选择器
选择到符合条件的Element元素，将其保存到jQuery对象中
console.log($('.box'));
var children=$('.child');
console.log(children);
one
two
three
2.html片段
将html代码片段转换成Element元素，封装成一个jQuery对象
var newChild=$('four');
console.log(newChild)
3.Element元素
console.log($('div'))--转换成一个Jquery对象
4.$(匿名函数)1.比较原生js和jQuery
通过原生js和jQuery来获取到三个div并修改他们的背景色
Document
1.4比较原生js和jquery入口函数的区别
原生js
1.如果编写了多个入口就函数，后面的会覆盖掉前面的
window.onload=function(){
alert('我是入口函数1')
};
window.onload=function(){
alert('我是入口函数2')
}
jquery
2.如果编写了多个入口函数 ，会依次执行
$(document).ready(function(){
alert('我是入口函数1jquery')
})
$(document).ready(function(){
alert('我是入口函数2jquery')
})
$(document).ready(function(){
alert('我是入口函数3jquery')
})
3.jquery入口函数的写法
第一种:
$(document).ready(function(){
alert('我是入口函数3jquery')
})
第二种
jQuery(document).ready(function(){
alert('我是入口函数4jquery')
})
第三种-->推荐写法
$(function(){
alert('我是入口函数5jquery')
})
第四种
jQuery(function(){
alert('我是入口函数6jquery')
})1.5jQuery对象
jQuery对象是类数组对象，jQuery方法都是对类数组对象中元素的批量操作.
注意：jQuery对象可以调用jQuery.prototype中声明的方法，普通的Element元素则不能调用。在使用jquery的时候，拿到一个对象务必要搞明白该对象是Element元素还是jQuery实例**
$(function(){
$('.child').text('hello')
})2.jQuery选择器
jQuery选择器与CSS选择器几乎完全一致，这里就不再赘述。
1.基本选择器
2.层次选择器
3.伪类选择器
4.伪元素选择器
5.属性选择器
$("form")
$("ul.nav > li")jQuery中所有选择器都以美元符号开头：$()
1.元素选择器
在页面中选取所有 实例 用户点击按钮后所有 jQuery的事件绑定与Element元素不同，不可以使用onxxx属性，也不能使用addEventListener，而是使用on()，可以理解为on是对于Element元素事件绑定的封装。 2.click() click()方法是当按钮点击事件被触发时会调用一个函数 3.dblclick() 当双击元素时，会发生dbclick事件 4.mouseenter() 当鼠标指针穿过元素时，会发生mouseenter事件 5.mouseleave() 当鼠标指针离开元素时，会发生mouseleave事件 6.mousedown() 当鼠标指针移动到元素上方，并按下鼠标按键时，会发生mousedown事件 7.mouseup() 当元素上松开鼠标按钮时，会发生mouseup事件 8.hover() hover()方法用于模拟光标悬停事件 当鼠标移动到元素上时，会触发指定当第一个函数（mouseenter）；当鼠标移出这个元素时，会触发指定当第二个函数（mouseleave） 9.blur() 当元素失去焦点时，发生blur事件 10.keydown() 键盘事件：按键按下事件 11.keyup() 键盘事件：按键抬起事件 jQuery中提供了一系列的操作DOM节点的api,用于解决DOM原生API无法进行批量操作并且功能性较差的弊端。 插入方法：append、appendTo、prepend、prependTo、after、before、insertBefore、insertAfter 1.属性：attr、removeAttr 2.css：addClass、removeClass、toggleClass 3.内容：html、text、val 静态方法属于定义在jQuery函数上的方法，通过jQuery或者$直接调用的方法 数组及对象操作：each、map、toArray$("div")$(function(){
var div= $('div');
console.log(div)
var button=$('button');
button.click(function(){
div.hide()
})
})
2.类选择器
var child1=$('.child1')
var button=$('button');
button.click(function(){
child1.hide()
})
3.id选择器
$('#child2')
var child2=$('#child2')
var button=$('button');
button.click(function(){
child2.hide()
})
3.事件绑定
1.on
$('.child').on('click',function(event){
// this--dom节点
console.log(this)
})
2.one
$('.child').one('click',function(event){
// this--dom节点
console.log(this)
})3.trigger 先有一个点击事件 trigger模拟点击事件
$('.child').on('click',function(event){
// this--dom节点
console.log(this)
})
// trigger 模拟事件触发
// 触发第一个child的点击事件
$('.child:first-child').trigger('click')4.off 解绑 解绑第二个参数必须是具名函数，匿名函数不可解绑
function handler(){
console.log(this)
}
$('.child').on('click',handler);
$('.child').off('click',handler);5.快捷绑定
$('.child').click(function(){
console.log(this)
})3.2事件类型
$('.child').dblclick(function(){
console.log(this)
})$('.child').mouseenter(function(){
console.log(this)
})$('.child').mouseleave(function(){
console.log(this)
})$('.child').mousedown(function(){
console.log(this)
})$('.child').mouseup(function(){
console.log(this)
})$('.child').hover(function(){
console.log(this)
})$('input').blur(function(){
console.log(this)
})$('.child').keydown(function(){
console.log(this)
}) $('.child').keyup(function(){
console.log(this)
})3.3事件代理
$('body').on('click','button',function (event) {
console.log(event)
})4.jQuery Dom操作
包裹方法：wrap、unwrap、wrapAll、wrapInner、
替换方法：replaceWith、replaceAll
移除方法：empty、remove、detach
克隆方法：clone1.append 将内容插入到元素内同尾部
$(function(){
$('.parent').append('Hello')
})
4.2属性操作
1.atte 获取属性 一个参数代表获取属性值 两个参数代表修改当前属性值为第二个参数
console.log($('.parent').attr('class'))
$('.parent').attr('title','one')
console.log($('.parent').attr('title'))
2.removeAttr
$('.parent').removeAttr('title')
console.log($('.parent').attr('title'))
3.removeClass 移除类名 并且移除样式
$('.child').removeClass('child');
4.addClass 添加类名
$('.child').addClass('active')
5.静态方法
5.1数组及对象操作
1.each 遍历数组或者对象 第一个参数 要遍历的数组或对象 第二个参数 处理函数
var obj={
name:"zhangsan",
age:12
}
$.each(obj,function(index,item){
console.log(index,item)
})
2.toArray 将类数组对象转换为数组
console.log($('.child').toArray())
3.map() 将一个数组中的元素转换到另一个数组中
var arr=$.map([0,1,2],function(item){
return item+4
})
console.log(arr)