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

    今日内容概要

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

    JS获取用户输入

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

    let i1Ele = document.getElementByID('d1')
undefined
i1Ele.value
'jason'

    • 1
    • 2
    • 3
    • 4

    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'

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8

    JS类属性操作

    1.类属性操作

    • 标签对象.ClassName —— 获取到所有的样式类名(字符串)
    • 标签对象.ClassList —— 查看所有的类属性(列表的形式返回)
    let div1Ele = document.getElementsByClassName('c1')[0]  // 存储classname 含有c1的第一个标签
div1Ele.classList //获取该标签 所有类属性值 数组

    • 1
    • 2
    • 标签对象.ClassList.contains() —— 判断类属性是否存在，返回true或false
    div1Ele.classList.contains('c5') //返回值为布尔值

true

    • 1
    • 2
    • 3
    • 标签对象.ClassList.add() —— 添加类属性
    div1Ele.classList.add('c5')

    • 1
    • 标签对象.ClassList.remove() —— 移除类属性
    div1Ele.classList.remove('c3')

    • 1
    • 标签对象.ClassList.toggle() —— 如果类属性存在就删除，如果类属性不存在就添加
    div1Ele.classList.toggle('c3')  //存在即删除 并返回False
false

//不存在 尾部追加 返回True

    • 1
    • 2
    • 3
    • 4

    2.JS样式操作
    标签对象.style.属性名 = 设置

    标签对象.style.backgroundColor = 'red'

    • 1

    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>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7

    方式二：通过 标签.属性 绑定执行的函数 可以查找到多个标签 批量绑定

    <input type="button" value="开关" onclick="func1()">
<button id="d1">按我button>
<script>
let btnEle = document.getElementById('d1')
btnEle.ondblclick = function(this){
   alert('peng!!')
}
script>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8

    3.事件中的关键字this
    this指代的是当前被操作的标签对象

    let btnEle = document.getElementById('d1')
   btnEle.onclick = function (this){
       alert('321')
       console.log(this)
}

    • 1
    • 2
    • 3
    • 4
    • 5

    等待文档加载完毕之后再执行一些代码
    windowd.onload

    <script>
windowd.onload = function(){
  页面 js代码
}
script>

    • 1
    • 2
    • 3
    • 4
    • 5

    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>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42

    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>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19

    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>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59

    jQuery类库

    兼容多浏览器的JavaScript库
    极大地简化JavaScript编程。它的宗旨就是：Write less, do more

    注意:使用jQuery必须要先导入(很容易忘)
    本质其实就是一个js文件

    导入jQuery的两种方法：

    • 本地导入
      提前下载文件并导入
    <script src="jquery-3.6.1.js"></script>

    • 1
    • 网络CDN服务
      网址拷贝：https://www.bootcdn.cn/jquery/
      只要计算机能够联网就可以直接导入
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>

    • 1

    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'


    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • jQuery代码实现p标签颜色样式改变
    $('p').first().css('color','black')

$('p').first().css('color','black').next().css('color','green')

    • 1
    • 2
    • 3

    2.jQuery经典用法

    jQuery()  >>>  $()

    • 1

    3…选择器

    • id选择器
    $("#id")

    • 1
    • 标签选择器
    $("tagName")

    • 1
    • class选择器
    $("className")

    • 1

    配合使用：

    找到有c1 class的div标签
$("div.c1")

    • 1
    • 2
    • 组合选择器
    $("#id,.className,tagName")

    • 1
    • 层级选择器
    x和y可以为任意选择器
$("x y");// x的所有后代y（子子孙孙）
$("x > y");// x的所有儿子y（儿子）
$("x + y")// 找到所有紧挨在x后面的y
$("x ~ y")// x之后所有的兄弟y

    • 1
    • 2
    • 3
    • 4
    • 5

    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'))

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10

    （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')

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    同理jquery对象也不能使用.style修改样式。
错误例子：$('p').first().style.color = 'green'

    • 1
    • 2
    小例子（正确用法）：
$($('p')[0]).css('color','orange')

    • 1
    • 2

    基本筛选器(了解)

    $('div:first') //第一个
$('div:last') //最后一个
$('div:eq(index)') //通过索引 取值
$('div:even') //匹配所有索引值为偶数的元素 从0开始计数
$('div:odd')  // 匹配所欲索引值为计数得元素，从0 开始
$('div:gt(index)') //匹配所有大于给定索引值得元素
$('div:lt(index)')  //匹配所有小于给定索引值得元素
$('div:not(元素选择器)') //筛选掉所欲满足not条件得标签
$('div:has(元素选择器)')  //选取所有包含一个或多个标签在其内得标签（指得是从后代元素找）

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9

    表单筛选器

    可以看成是属性选择器优化而来

    $(':checked')
$('input:checked')

    • 1
    • 2

    仅限于表单中写：

    eg：$('input[type="text"]')
简写：$(':text')

    • 1
    • 2
    $(':text')
$(':password')
$(':file')
$(':radio')
$(':checkbox')
$(':submit')
$(':reset')
$(':button')
$(':enabled')
$(':disabled')
$(':checked')
$(':selected')

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12

    作业：

    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>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    搜索框案例
	input内有默认的文本值  用户一旦选择该input想做内容修改
    就提前把内容清空

    • 1
    • 2
    • 3
    <!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>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
  • 相关阅读:
    最新最全面的Spring详解（三）——Resources，验证、数据绑定和类型转换与Spring表达式语言（SpEL）
    uniapp app一键登录
    CPU vs GPU 的区别详解
    JavaScript学习笔记（五）
    比特币上的 zk-SNARKs
    淘宝API接口，item_get-获得淘宝商品详情（淘宝商品详情 API 返回值说明）
    Web服务器实验案例
    【owt】vs2022 + v141 ： 查看WINDOWSSDKDIR
    导外库失败显示错误：Failed to resolve
    mt4量化交易接口：分享日常量化选股方法
  • 原文地址：https://blog.csdn.net/DiligentGG/article/details/126576305