今日学习内容：
1.jQuery的简介
jQuery是js的一个库，封装了我们开发过程中常用的一些功能，方便我们来调用，提高了我们的开发效率。
Js库是把我们常用的功能放到一个单独的文件中，我们用的时候，直接引用到页面里面来就可以了。
animate.js(JQurey.js)是我们自己封装的库，而jQuery是别人帮我们封装好的库。
2.学习jQuery，主要是学什么呢？
目前这个阶段，主要学习如何来使用jQuery操作DOM，其实就是学习jQuery封装好的那些功能方法，这些方法叫做API（Application Programming Interface应用程序编程接口）。
这些API的共同特点是：几乎全都是方法。所以，在使用jQuery的API时，都是方法调用，也就是说要加小括号()，小括号里面是相应的参数，参数不同，功能不同。
3.本地下载使用
①.需要下载到本地
不需要联网
②.在线引入地址（CDN），将其加入src中
不需要下载，需要网络，容易受网络限制
我们一旦导入了jquery文件，全局就有一个$对象
对应的还有一个jQuery的对象
同版本两个文件的区别：
min：压缩版，压缩过后，体积会更小
压缩指的是：把注释、空格、换行全部去掉，把变量名称尽可能的换成更加简短的字符。
压缩的主要目的：就是让文件变的更小。
平时开发过程中，这两个文件使用哪个都可以；但是，项目上线的时候，推荐使用压缩版。
4.jQuery的写法
1.原生js写法
const box = document.querySelector(‘.box’)
console.log(box)
box.style.width = ‘200px’
box.style.height = ‘200px’
box.style.background = ‘red’
2.jq写法
const box = $(‘.box’)
console.log(box)
box.css(‘width’, ‘100px’)
box.css(‘height’, ‘200px’)
box.css(‘background’, ‘green’)
3.jq写法2
$(‘.box’)
.css(‘width’, ‘100px’)
.css(‘height’, ‘200px’)
.css(‘background’, ‘blue’)
4.jq写法3
$(‘.box’).css({
width: 100,
height: 100,
background: ‘orange’,
})
5.jQuery的入口函数
$() 这个函数
推荐使用第一种，因为更简单
1.$(function () {
console.log(1)
})
2.$(document).ready(function () {
console.log(2)
})
$(function () {
const box = $(‘.box’)
console.log(box)
})
原生js的写法
window.onload = function () {
console.log(document.querySelector(‘.box’))
}
6.获取元素
①. $() 用法:传递一个选择器，得到对应的元素对象
类选择器
console.log($(‘.box’))
id选择器
console.log($(‘#dv’))
组合选择器
console.log($(‘p.txt’))
得到所有的input元素
console.log($(‘input’))
console.log($('input[type=text]'))
console.log($(‘input[type=password]’))
7.jQuery中css用法
css()第一种使用
接受两个参数（写操作）
属性名；值
$('p').css('color', 'red')
$(‘p’).css(‘fontSize’, ‘30px’)
css()第二种使用
接受一个参数（读操作）
属性名
结果就是对应的字符串类型的值
console.log($(‘p’).css(‘width’)) //400px
css()
第三种使用
接受一个对象作为参数
8.jQuery中的事件注册
click() 方法
接受一个回调函数作为参数
鼠标进入和离开事件
jq对象，只能使用jq的方法
DOM对象，只能使用DOM中属性或方法
DOM转成jq对象 $(this)
1.原生js的DOM对象
DOM对象只能使用js中提供的属性和方法
2.jq对象
jq对象只能使用jq中的方法
3.对象的转换
* jq对象转成DOM对象
1.jq对象.get(0)
2.jq对象[0]
* $(‘button’).get(0).onclick = function () {
console.log(‘jq对象’)
* DOM对象转成jq对象
1.$(DOM对象)
* $(‘button’)[0].onclick = function () {
console.log(‘jq对象’)
|
