（一）什么是JQuery？
jQuery是一个快速、简洁的JavaScript框架。
jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。
它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。
可以将jQuery库下载到本地，然后引入本地的jQuery库。
可以直接引入外网资源
（二）原生JS
//操作dom元素，给他添加点内容，加背景色，加颜色，加边框，加点击事件
//原生js
let dom1 = document.getElementById('dom1')
dom1.innerHTML = "啊哈哈，我是dom1"
dom1.style.backgroundColor = 'lightBlue'
dom1.style.color = 'white'
dom1.style.border = '1px solid black'
dom1.onclick = function(){
alert('哈哈！我是dom1')
}
//jquery
//$ => jQuery对象
//$(选择器)，获取dom元素，注意：这里返回的是被jQuery封装过后的元素
//html()方法，操作dom的html元素
//css()方法，操作dom的样式
//click()方法，设置点击事件
$('#dom2').html('哈哈！我是dom2').css({
backgroundColor:'lightBlue',
color:'white',
border:'1px solid black'
}).click(function(){
alert('哈哈！我是dom2')
})
（三）JQuery选择器
选择器的作用是：根据特点的字符串规则获取dom元素。
//全局选择器
$('*').css('font-size','20px')
//id选择器
注意：如果id值相同，只能获取第一个元素
$('#root').css({border:'1px solid black',margin:'0 auto',width:'1000px'})
//类选择器
$('.a').css('color','red')
//标签选择器
$('p').css('text-decoration','underline')
//层级选择器
//子选择器
$('#root>.a').css('text-align','center')
//后代选择器
$('#root .a').css('background','green')
//结构伪类选择器
$('ul>li:odd').css('text-align','right')$('ul>li:even').css('text-align','left')
//属性选择器
$('p[name="b"]').css('color','orange')
//在css中选择器怎么写，在JQuery中选择器就怎么写
//jQuery就是通过各种选择器，获取对应的dom元素,如果获取的是多个dom元素，不需要遍历元素就可以操作元素
（四）JQuery获取元素的方法
//使用jquery选择器返回的对象是一个集合
let five = $('#five')
five.css('text-align','center')
（1）prev()方法，返回的是上一个元素
five.prev().css('color','red')
five.prev().prev().css('color','green')
（2）prevAll()方法，返回的是同级的上面所有元素
//注意：方法里面还可以继续添加选择器，针对指定的元素
five.prevAll('li').css('background-color','pink')
（3）next()方法，用于获取下一个元素
five.next('div').css('color','blue')
//相邻的下一个li元素
//$('#five+li').css('color','blue')
five.next().next().css('color','green')
（4）nextAll()方法，返回同级的下面所有元素
five.nextAll('li').css('background-color','lightblue')
（5）siblings()方法，用于获取同级的所有兄弟元素
five.siblings().css('font-weight','bold')
//$('#five~li')选择器：表示获取#five同级的下面的所有的li标签
$('#five~li').css('font-size','20px')
（6）parent()方法，用于获取父级元素
five.parent().css('border','1px dashed black')
five.parent().parent().css('border','1px solid orange')
（7）parents()方法，用于获取所有的父级元素，该方法里面可以传选择器来获取指定的父级
five.parents('#root').css('border-radius','10px')
（8）children()方法，用于获取子元素
//a.children('p').css('font-size','30px') 等价于 $('#a>p').css('font-size','30px')
five.parents('#root').children('.a').css('color','#ff5577')
（10）find()方法，用于返回所有的后代元素
five.parents('#root').find('.a').css('background','#77ff98')
等价于
//$('#a p').css('font-size','30px')
（11）first()方法，用于返回第1个元素
five.parents('#root').find('.a').first().css('font-size','20px')
等价于
//a.find('div').find('p:first-child(1)').css('color','red')
等价于
//a.find('div').find('p:last-child').css('color','blue')
（12）last()方法，用于获取最后一个元素
five.parents('#root').find('.a').last().css('font-size','25px')
（13）eq()方法，用于获取指定下标的元素
five.parents('#root').find('.a').eq(2).css('text-align','center')
等价于
//a.find('div').find('p:nth-child(3)').css('color','green')
（五）显示和隐藏方法
（1）显示按钮点击事件
$('#show').click(function(){
//show()方法，显示元素
//show()方法的第一一个参数上是显示时间，fast（快速），slow（慢速），normal（正常速度）
//show()方法的第二个参数是显示后的回调函数
$('.a').show(1000,function(){
console.log('我显示了');
})
})
（2）隐藏按钮点击事件
$('#hide').click(function(){
//hide（）方法，隐藏元素
$('.a').hide(1000,function(){
console.log('我隐藏了');
})
})
（3）显示/隐藏按钮点事件
$('#toggle').click(function(){
//toggle()方法是show（）和hide（）方法的集合
$('.a').toggle(1000) })
（4）下拉显示按钮点击事件
$('#slideDown').click(function(){
$('.a').slideDown(1000)
})
（5）上拉隐藏按钮点击事件
$('#slideUp').click(function(){
$('.a').slideUp(1000)
})
（6）下拉显示/上拉隐藏
$('#slideToggle').click(function(){
$('.a').slideToggle(1000)
})
（7）淡入
$('#fadeIn').click(function(){
$('.a').fadeIn(2000,function(){
console.log('完全显示');
})
})
（8）淡出
$('#fadeOut').click(function(){
$('.a').fadeOut(2000,function(){
console.log('完全隐藏');
})
})
（9）淡出/淡入
$('#fadeToggle').click(function(){
$('.a').fadeToggle(2000)
})
（10）显示
$('#block').click(function(){
$('.a').css({
display:'block'
})
})
（11）隐藏
$('#none').click(function(){
$('.a').css({
display:'none'
})
})
（六）js对象和jquery对象之间的转换
将js对象转换为jquery对象，方式是:$(js对象)
将js对象转为jquery对象的目的是：我们需要用jquery给我们提供的各种方法。
jquery对象，是一个类似于数组的对象，可以通过[索引] 或者 get(索引)的方式，返回指定的DOM对象。
将jquery对象转为js对象的目的是：我们需要用js对象给我们提供的各种属性。
val()方法 === value属性
