开发工程师必备————【Day21】前端开发之jQuery
今日内容概要
- JS获取用户输入值
- JS类属性操作
- JS事件绑定
- JS事件案例
- jQuery类库
- jQuery常见操作
JS获取用户输入
获取值主要是去在前端方面做一些简单的数据显示与判断，通常都是使用input、option、textarea等标签。
1.普通获取（输入，选择）
基本语法：
标签对象.valuelet i1Ele = document.getElementByID('d1') undefined i1Ele.value 'jason'
2.获取文件数据
基本语法一：
标签对象.value(只能获取到文件路径，没有用)
基本语法二：
标签对象.files(结果是一个数组，可以通过索引获取文件对象)let i1Ele = document.getElementByID('d3') undefined i1Ele.files FileList {0:File,length:1} nameEle.files[0] File {name:'01 前端简介.mp4',lastModified: 1659779888878, lastModifiedDate: Sat Aug 06 2022 17:58:08 GMT+0800 (中国标准时间), webkitRelativePath: '', size: 122815290, …} nameEle.files[0]['name'] '01 前端简介.mp4'
JS类属性操作
1.类属性操作
- 标签对象.ClassName —— 获取到所有的样式类名(字符串)
- 标签对象.ClassList —— 查看所有的类属性(列表的形式返回)
let div1Ele = document.getElementsByClassName('c1')[0] // 存储classname 含有c1的第一个标签 div1Ele.classList //获取该标签 所有类属性值 数组
- 标签对象.ClassList.contains() —— 判断类属性是否存在，返回true或false
div1Ele.classList.contains('c5') //返回值为布尔值 true
- 标签对象.ClassList.add() —— 添加类属性
div1Ele.classList.add('c5')
- 标签对象.ClassList.remove() —— 移除类属性
div1Ele.classList.remove('c3')
- 标签对象.ClassList.toggle() —— 如果类属性存在就删除，如果类属性不存在就添加
div1Ele.classList.toggle('c3') //存在即删除 并返回False false //不存在 尾部追加 返回True
2.JS样式操作
标签对象.style.属性名 = 设置标签对象.style.backgroundColor = 'red'
JS事件绑定
事件可以简单的理解为是给html标签绑定了一些额外的功能(能够触发js代码的运行)
事件关键字 功能 应用场景 onclick 当用户点击某个对象时调用的事件句柄 ondblclick 当用户双击某个对象时调用的事件句柄 onfocus 元素获得焦点 onblur 元素失去焦点 用于表单验证，用户离开输入框时，代表 输入完了 我们可以对他进行验证 onchange 域的内容被改变 通常用于表单元素 当元素内容被修改时触发 （select省市 联动） onkeydown 某个键盘按键被按下 当用户在最后一个输入框按下回车键时 表单提交 onkeypress 某个键盘按键被按下并松开 onkeyup 某个键盘按键被松开 onload 一张页面或一副图像完成加载 onmousedown 鼠标按钮被按下 onmousemove 鼠标被移动 onmouseout 鼠标从某元素移开 conmouseover 鼠标移动到某元素之上 onselect 在文本框中的文本被选中时触发 onsubmit 确认按钮被点击 使用对象是form
2.绑定事件的两种方式
方式一：通过添加属性绑 执行的函数<input type="button" value="开关" onclick="func1()"> <button id="d1">按我button> <script> function func1(){ alert('123') } script>方式二：通过 标签.属性 绑定执行的函数 可以查找到多个标签 批量绑定
<input type="button" value="开关" onclick="func1()"> <button id="d1">按我button> <script> let btnEle = document.getElementById('d1') btnEle.ondblclick = function(this){ alert('peng!!') } script>
3.事件中的关键字this
this指代的是当前被操作的标签对象let btnEle = document.getElementById('d1') btnEle.onclick = function (this){ alert('321') console.log(this) }
等待文档加载完毕之后再执行一些代码
windowd.onload<script> windowd.onload = function(){ 页面 js代码 } script>
JS事件案例
1.校验用户输入
DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Titletitle> head> <body> <p> <input type="text" id="username"> <span class="errors" style="color: red">span> p> <p> <input type="text" id="password"> <span class="errors" style="color: red">span> p> <button id = "btn">提交button> <script> //1.查找按钮标签 let btnEle = document.getElementById('btn') //2.绑定单级事件 btnEle.onclick = function (){ //3.获取用户输入的用户名和密码 let usernameVal = document.getElementById('username').value; let passwordVal = document.getElementById('password').value; //4.判断用户名和密码是否合法 if (usernameVal === 'jason'){ //4.1查找获取用户名的input框下面的span标签 let span1Ele = document.getElementsByClassName('errors')[0]; //4.2给span标签添加内部文本 span1Ele.innerText = '用户名不能是jason' } //5.判断密码是否为空 if(passwordVal.length === 0){ //5.1查找获取用户名的input框下面的span标签 let span1Ele = document.getElementsByClassName('errors')[1]; //5.2给span标签添加内部文本 span1Ele.innerText = '密码不能为空！' } } script> body> html>
2.开关 控制 色块停止 或启动跳动
<input type="button" value="开关" onclick = func1()> <script> var key = null; function func1(){ div1Ele = document.getElementsByClassName('c1')[0] function func2() { div1Ele.classList.toggle('c2') } if (!key) { t1 =setInterval(func2, 1000) key = true } else { clearInterval(t1) key = false } } script>3.省市联动
DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Titletitle> head> <body> 省份：<select name="" id="province"> select> 市区：<select name="" id="city"> select> <script> let data = { "山西":["太原","吕梁","运城","大同"], "北京":["朝阳区","海淀区","丰台区","大兴区"], "上海":["浦东新区","青浦区","虹口区","闵行区"], }; //提前找好select标签 let proEle = document.getElementById('province'); let cityEle = document.getElementById('city'); //1.循环获取所有的省信息 for(let pro in data){ //2.创建option标签 let opEle = document.createComment('option'); // //3.添加内部文本 opEle.innerText = pro // //4.添加value属性 opEle.setAttribute('value',pro)// //5.将上述的option标签添加到第一个select标签内 proEle.append(opEle) } //给省份的下拉框绑定文本域变化事件 proEle.onchange = function (){ //每次给市区下拉框添加市区信息之前，应该先清空上次加载的数据 cityEle.innerHTML = '' //1.获取用户选择的省份信息 let currentPro = this.value; //2.根据省份获取对应的市区列表数据 let targetCityList = data[currentPro]; //3.循环获取所有的市信息 for(let i=0;i<targetCityList.length;i++){ //4.创建option标签 let opEle = document.createComment('option');// //5.添加内部文本 opEle.innerText = targetCityList[i] //6.添加value属性 opEle/setAttribute('value',targetCityList[i]) //7.添加到第二个select标签内 cityEle.append(opEle) } } script> body> html>
jQuery类库
兼容多浏览器的JavaScript库
极大地简化JavaScript编程。它的宗旨就是：Write less, do more
注意:使用jQuery必须要先导入(很容易忘)
本质其实就是一个js文件
导入jQuery的两种方法：
- 本地导入
提前下载文件并导入<script src="jquery-3.6.1.js"></script>
- 网络CDN服务
网址拷贝：https://www.bootcdn.cn/jquery/
只要计算机能够联网就可以直接导入<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
jQuery基本使用
1.前戏之js与jquery对比
- js代码实现p标签颜色样式改变
let p1Ele = document.getElementsByTagName('p')[0] p1Ele.style.color = 'red' let p1Ele = document.getElementsByTagName('p')[1] p1Ele.style.color = 'orange'
- jQuery代码实现p标签颜色样式改变
$('p').first().css('color','black') $('p').first().css('color','black').next().css('color','green')
2.jQuery经典用法
jQuery() >>> $()
3…选择器
- id选择器
$("#id")
- 标签选择器
$("tagName")
- class选择器
$("className")配合使用：
找到有c1 class的div标签 $("div.c1")
- 组合选择器
$("#id,.className,tagName")
- 层级选择器
x和y可以为任意选择器 $("x y");// x的所有后代y（子子孙孙） $("x > y");// x的所有儿子y（儿子） $("x + y")// 找到所有紧挨在x后面的y $("x ~ y")// x之后所有的兄弟y
4…jQuery选择器查找标签之后的结果与js有何区别
（1）jquery与js获取标签：$('p') 得到一个对象数组： jQuery.fn.init(2) [p, p, prevObject: jQuery.fn.init(1)] document.getElementsByTagName('p') 得到一个纯数组： HTMLCollection(2) [p, p] 两者之间的转换形式： js转jquery：$(document.getElementsByTagName('p'))
（2）结果集都是数组但是功能有区别
- 如果使用索引取值 那么都是标签对象
标签对象是无法调用jQuery提供的方法的- 标签对象如果想转换成jQuery对象需要使用 $()
转换成jQuery对象的目的是为了使用jQuery提供的更多方法
5.举个栗子
$('p')[0].css('color','red') 错误操作：$('p')为jquery代码，后面索引取值后变为标签对象。 不再是jquery对象，不能用.css修改样式。 修改方法一：$('p')[0].style.color = 'red' 修改方法二：$('p').first().css('color','red')同理jquery对象也不能使用.style修改样式。 错误例子：$('p').first().style.color = 'green'小例子（正确用法）： $($('p')[0]).css('color','orange')
基本筛选器(了解)
$('div:first') //第一个 $('div:last') //最后一个 $('div:eq(index)') //通过索引 取值 $('div:even') //匹配所有索引值为偶数的元素 从0开始计数 $('div:odd') // 匹配所欲索引值为计数得元素，从0 开始 $('div:gt(index)') //匹配所有大于给定索引值得元素 $('div:lt(index)') //匹配所有小于给定索引值得元素 $('div:not(元素选择器)') //筛选掉所欲满足not条件得标签 $('div:has(元素选择器)') //选取所有包含一个或多个标签在其内得标签（指得是从后代元素找）
表单筛选器
可以看成是属性选择器优化而来
$(':checked') $('input:checked')
仅限于表单中写：
eg：$('input[type="text"]') 简写：$(':text')$(':text') $(':password') $(':file') $(':radio') $(':checkbox') $(':submit') $(':reset') $(':button') $(':enabled') $(':disabled') $(':checked') $(':selected')
作业：
2.尝试编写JS时间案例
页面定时器案例
有一个input框 两个按钮 一个开始 一个结束
1.点击开始按钮 input内展示当前时间并按秒数刷新
2.点击结束按钮 input内展示停止
ps:写完之后测试有无bug 连续多次点击开始按钮 再试试能不能结束
思考如何解决
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>定时器</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
</head>
<body>
<input type="text" id="d1">
<input type="button" id="start" value="开始">
<input type="button" id="end" value="结束">
<script>
let inputEle = document.getElementById('d1');
//1.先查找开始按钮
let starEle = document.getElementById('start');
let endEle = document.getElementById('end');
//将存储循环定时任务的变量定位为全局变量
let a = null;
//将展示时间的代码单独封装成一个函数
function showTime(){
//3.获取当前时间
let currentTimeObj = new Date();
//4.转换成格式化时间，便于用户查看，将上述时间添加到input框中
inputEle.value = currentTimeObj.toLocaleString();
}
//2.给开始按钮绑定一个点击事件
starEle.onclick = function (){
if(!a) {
a = setInterval(showTime, 1000)
}
}
//给结束按钮绑定一个点击事件
endEle.onclick = function (){
//结束循环定时任务
clearInterval(a)
a = null;
}
</script>
</body>
</html>
搜索框案例
input内有默认的文本值 用户一旦选择该input想做内容修改
就提前把内容清空
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
</head>
<body>
<input type="text" placeholder="赶紧补作业" id="d1">
<script>
let iEle = document.getElementById('d1')
iEle.onfocus = function (){
this.removeAttribute('placeholder')
}
iEle.onblur = function (){
this.setAttribute('placeholder','作业补完啦~')
}
</script>
</body>
</html>