菁英数字科技（猩码）-猩码学苑-专注软件开发人才菁英教育

标题: jQuery的使用_汪刚_20230524 [打印本页]

作者: 霁后彩虹O 时间: 2023-5-24 22:56
标题: jQuery的使用_汪刚_20230524
今日学习内容：

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对象’)

欢迎光临菁英数字科技（猩码）-猩码学苑-专注软件开发人才菁英教育 (http://www.xingmaxueyuan.com/)