开发工程师必备————【Day21】前端开发之jQuery

皮糖小王子

已于 2022-09-01 12:20:59 修改

阅读量201

点赞数

分类专栏：前端文章标签： jquery javascript 前端

于 2022-08-28 23:40:28 首次发布

本文链接：https://blog.csdn.net/DiligentGG/article/details/126576305

版权

前端专栏收录该内容

5 篇文章 0 订阅

订阅专栏

今日内容概要

JS获取用户输入值
JS类属性操作
JS事件绑定
JS事件案例
jQuery类库
jQuery常见操作

JS获取用户输入

获取值主要是去在前端方面做一些简单的数据显示与判断，通常都是使用input、option、textarea等标签。
1.普通获取（输入，选择）
基本语法：
标签对象.value
let 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

事件关键字	功能	应用场景
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>Title</title>
</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>Title</title>
</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'); //<option></option>
       //3.添加内部文本
       opEle.innerText = pro  //<option>省份信息</option>
       //4.添加value属性
       opEle.setAttribute('value',pro)//<option value='省份信息'>省份信息</option>
       //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');//<option></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>