一、初始jquery
1. 什么是jquery
jQuery是一个快速、简洁的JavaScript框架。
jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。
它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。
可以将jQuery库下载到本地，然后引入本地的jQuery库。
可以直接引入外网资源
2. 快速体验
操作dom元素，给它添加点内容，加背景色，加颜色，加边框，加点击事件
过去是这样操作：
letdom1=document.getElementById('dom1')dom1.innerHTML='HelloWorld'dom1.style.backgroundColor='lightblue'dom1.style.color='red'dom1.style.border='1px solid black'dom1.onclick=function(){this.innerHTML='你好世界'}
现在我们有了jquery：
//$('#dom2') 用于获取dom2元素，并转为jquery对象//html()方法 用于设置dom元素的内容，等价于 innerHTML//css()方法 用于设置dom元素的样式，该方法有两种用法：//1.css('样式属性','属性值') 只能设置一个样式属性//2.css({样式属性:'属性值'}) 可以同时设置多个样式属性//click()方法 用于给dom元素添加点击事件，等价于 onclick$('#dom2').html('HelloWorld')// .css('backgroundColor','lightblue').css('color','red').css('border','1px solid black').css({backgroundColor:'lightblue',color:'red',border:'1px solid black'}).click(function(){$(this).html('你好世界')})
jquery对象的方法，可以反复点出新的方法，继续操作dom对象，它的设计原理是这样的：
letobj={a(){console.log('我是a');//在方法的末尾，返回了调用该方法的对象returnthis},b(){console.log('我是b');returnthis},c(){console.log('我是c');returnthis}}obj.a()obj.b()obj.c()console.log('-'.repeat(30));obj.a().b().c().a()
3. jquery选择器
选择器的作用是：根据特点的字符串规则获取dom元素。
//全局选择器$('*').css('font-size','20px')//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')
总结：jquery选择器的语法就是css选择器的语法
4. jquery获取元素的方法
letfive=$('#five')five.css('text-align','center')//prev()方法，用于获取前一个兄弟元素，该方法里面可以传选择器five.prev().css('color','red')// five.prev('div').css('color','red')five.prev().prev().css('color','green')//next()方法，用于获取后一个兄弟元素，该方法里面可以传选择器// five.next().css('color','blue')five.next('div').css('color','blue')//$('#five').next('div') === $('#five+div')$('#five+div').css('background','lightgray')//siblings()方法，用于获取同级的所有兄弟元素five.siblings().css('font-weight','bold')//$('#five~li')选择器：表示获取#five同级的下面的所有的li标签$('#five~li').css('font-size','20px')//parent()方法，用于获取父级元素five.parent().css('border','1px dashed black')five.parent().parent().css('border','1px solid orange')//parents()方法，用于获取所有的父级元素，该方法里面可以传选择器来获取指定的父级five.parents('#root').css('border-radius','10px')//children()方法，用于获取子元素five.parents('#root').children('.a').css('color','#ff5577')//find()方法，用于获取后代元素five.parents('#root').find('.a').css('background','#77ff98')//first()方法，用于获取第1个元素five.parents('#root').find('.a').first().css('font-size','20px')//first选择器的写法// five.parents('#root').find('.a:first').css('font-size','20px')//last()方法，用于获取最后一个元素five.parents('#root').find('.a').last().css('font-size','25px')//last选择器的写法// five.parents('#root').find('.a:last').css('font-size','25px')//eq()方法，用于获取指定下标的元素five.parents('#root').find('.a').eq(2).css('text-align','center')//eq选择器的写法// five.parents('#root').find('.a:eq(2)').css('text-align','center')
5. 显示和隐藏方法
show()方法显示，hide()方法隐藏。内部其实就是对 style.display 属性进行设置
$('#box').show()
show()方法可以传参数，fast(快速),slow(慢速),normal(正常速度)
show()方法的参数，也可以是指定的毫秒数
show()方法的第二个参数，是完全显示后的回调函数。
$('#box').show(1000,function(){console.log('完全显示后的回调函数');})
css()方法，传两个参数是对指定的样式赋值，只传一个参数是获取指定的样式值。
toggle()方法，实现显示和隐藏切换。
slideDown()方法，是下拉显示
slideUp()方法，是上拉隐藏
slideToggle()方法，内部是对 下拉显示 和 上拉隐藏 的封装
fadeIn()是淡入 fadeOut()是淡出
fadeToggle() 实现淡入和淡出切换
6.js对象和jquery对象之间的转换
将js对象转为jquery对象，方式是:$(js对象)。
将js对象转为jquery对象的目的是：我们需要用jquery给我们提供的各种方法。
jquery对象，是一个类似于数组的对象，可以通过[索引] 或者 get(索引)的方式，返回指定的DOM对象。
将jquery对象转为js对象的目的是：我们需要用js对象给我们提供的各种属性。
val()方法 === value属性
