44、JS获取用户输入值、JS事件绑定、jQuery类库、jQuery常见操作、练习学习掌握：JS获取用户输入值、类属性

JS获取用户输入

普通数据输入

只获取用户输入或选择的数据--标签对象.value

<body>
<p><input type="text" id="d1" ></p>
<p><input type="password" id="d2"></p>
<p><input type="radio" value="male" id="d3"></p>
<p><input type="radio" value="female" id="d4"></p>
<p><input type="button" id="d6" ></p>
<p><input type="file" id="d8"></p>

<select name=""  id="d7">
    <option value="游泳">游泳</option>
    <option value="健身">健身</option>
    <option value="看书">看书</option>
</select>
</body>

let iEle= document.getElementById('d1') 
let iEle= document.getElementById('d1') 

iEle.value  //'jason'
let iEle= document.getElementById('d3') 
iEle.value  //'male'
let iEle= document.getElementById('d6') 
iEle.value  //''
let iEle= document.getElementById('d7') 
iEle.value  //'游泳'

文件数据(上传)

关于获取用户上传的文件，不能用.value的用法获取，而是用：标签对象.files 获取数据（字典）；也可以通过索引：标签对象.files [0]来获取详细信息

let iEle = document.getElementById('d8')

iEle.value  //'C:\fakepath\00.PNG'
iEle.files  //FileList {0: File, length: 1}0: File {name: '00.PNG', lastModified: 1660033131554, lastModifiedDate: Tue Aug 09 2022 16:18:51 GMT+0800 (中国标准时间), webkitRelativePath: '', size: 14093, …}length: 1[[Prototype]]: FileList
iEle.files[0]  //File {name: '00.PNG', lastModified: 1660033131554, lastModifiedDate: Tue Aug 09 2022 16:18:51 GMT+0800 (中国标准时间), webkitRelativePath: '', size: 14093, …}

JS属性操作

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>属性class</title>
  <style>
        .c1 {
            height: 400px;
            width: 400px;
            border-radius: 50%;
            border: 3px solid black;
        }
        .c2 {
            background-color: red;
        }
        .c3 {
            background-color: orange;
        }
    </style>
</head>
<body>
<div class="c1 c2 c3"></div>
</body>
</html>

className

标签对象.className:获取所有样式类名(字符串)

let dEle = document.getElementsByTagName("div")[0]
dEle  //<div class=•"c1 c2 c3">•</div>•
dEle.className  //'c1 c2 c3'

classList

标签对象.classList:获取所有样式的类名(列表)

dEle.classList
DOMTokenList(3)  //['c1', 'c2', 'c3', value: 'c1 c2 c3']

classList.add(cls)

标签对象.classList.add(cls):添加类

dEle.classList.add('c4')
dEle.classList  // ['c1', 'c2', 'c3', 'c4', value: 'c1 c2 c3 c4']

classList.remove(cls)

标签对象.classList.remove(cls):删除类

dEle.classList.remove('c4')
dEle.classList  // ['c1', 'c2', 'c3', value: 'c1 c2 c3']

classList.contains(cls)

标签对象.classList.contains(cls):存在返回true,否则返回false

dEle.classList.contains('c7')  //false
dEle.classList.contains('c2')  //true

classList.toggle(cls)

标签对象.classList.toggle(cls):存在就删除，否则就添加

dEle.classList.toggle('c3')  //false
dEle.classList  // ['c1', 'c2', value: 'c1 c2']
dEle.classList.toggle('c3')  //true
dEle  //<div class=•"c1 c2 c3">•</div>•

JS的样式操作

标签对象.style.标签样式属性名

let pEle = document.getElementsByTagName('p')[0]
pEle  //<p>•今天怎么样•</p>•
pEle.style.backgroundColor = 'red'

事件

事件可以理解为：给HTML标签添加了一些额外的功能，并且能够触发JS的代码运行

事件	含义
onclick	当用户点击某个对象时调用的事件句柄。
ondblclick	当用户双击某个对象时调用的事件句柄
onchange	文本域变化事件，域的内容被改变。
onfocus	元素获得焦点。
onblur	元素失去焦点。
onkeydown	某个键盘按键被按下。
onkeypress	某个键盘按键被按下并松开。
onkeyup	某个键盘按键被松开。
onload	一张页面或一幅图像完成加载。
onmousedown	鼠标按钮被按下。
onmousemov	鼠标被移动。
onmouseout	鼠标从某元素移开。
onmouseover	鼠标移到某元素之上。
onselect	在文本框中的文本被选中时发生。
onsubmit	确认按钮被点击，使用的对象是form。

事件绑定的方式

方式一：

提前写好函数，标签内部指定

<body>
    <标签名     事件= "函数名()">

    <script>
    function 函数名(){
        函数体
    }
    </script>
</body>

实例

<body>
  <button id = 'd1' onclick="func1()">点击一下</button>

  <script>
    function func1(){
      alert("可以看见吗")
    }
  </script>
</body>

方式二：

先查找标签，然后在批量绑定(推荐)

<script>
    标签对象.事件名= function (){
        函数体代码
    }
</script>

实例

  <script>
    let btnEle = document.getElementById('d2')
    btnEle.onclick = function (){
      alert("可得见不")
    }
  </script>

事件中的关键字this

表示触发事件的当前元素。在方式一种，this指代document文档；在方式二中this指代当前被草做的标签对象

<body>
  <button id = 'd1' onclick="func1()">点击一下</button>
  <button id = 'd2'>点我一下</button>
  <script>
    function func1(){
      alert("可以看见吗")
      console.log(this)  // Window {window: Window, self: Window, document: document, name: '', location: Location, …}
    }

 
    let btnEle = document.getElementById('d2')
    btnEle.onclick = function (){
      alert("可得见不")
      console.log(this)  //<button id="d2">点我一下</button>
    }
  </script>
</body>

window.onload

当我们给页面上的元素绑定事件的时候，必须等到文档加载完毕，；window.onload等待文档加载完毕之后再执行一些代码

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        window.onload = function () {

        }
    </script>
</head>

JS事件案例

1.校验用户输入

<!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.min.js"></script>
</head>
<body>
<p>username:
    <input type="text" name="name" id = 'username'>
    <span name = 'errors' style="color: red;"></span>
</p>
<p>pwd:
    <input type="password" name="pwd" id = 'password'>
    <span name = 'errors' style="color: red;"></span>
</p>
<button id="btn">提交</button>
<script>
    let btnEle = document.getElementById("btn")
    // 单击事件
    btnEle.onclick = function (){
        let userNameVal = document.getElementById("username")
        //判断name是否为空
        if (userNameVal.value === 'jason'){
            let errInfo = document.getElementsByTagName("span")[0]
            errInfo.innerText = '用户名不能为jason';
        }
        let passWordVal = document.getElementById("password")
        //判断密码是否为空
        if (passWordVal.value.length === 0) {
            let errInfo1 = document.getElementsByTagName("span")[1]
            errInfo1.innerText = '密码不能为0';
        }
    }
</script>
</body>
</html>

2.省市联动

<!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.min.js"></script>
</head>
<body>

<span>
    省份：<select name="" id="province"></select>
    市级：<select name="" id="city"></select>
</span>
    <script>
           let data = {
                "河北": ["廊坊", "邯郸"],
                "北京": ["朝阳区", "海淀区"],
                "山东": ["威海市", "烟台市"],
                "安徽": ["芜湖", "合肥"],
                "上海": ["浦东新区", "青浦区"],
                "深圳": ["宝安", "龙华"]
            };
           let seleProvince = document.getElementById("province")
           let seleCity = document.getElementById("city")
           //思路：循环打印data的字典数据到option标签
           for( let provinceFor in data){
               //创建option标签
               let optionProvince = document.createElement("option")
               //添加文本
               optionProvince.innerText = provinceFor
               //添加到节点中
               seleProvince.append(optionProvince)
           }
           seleProvince.onchange = function () {
               // 每次给市区下拉框添加市区信息之前 应该先清空上一次加载的数据
               seleCity.innerHTML = ''
               //思路：将选中的省的市级添加到新的option标签中
               let currentPro = seleProvince.value  //选中的省份
               let cityList = data[currentPro]  //省份对应的市级
               for(let i=0;i<cityList.length;i++){
                   //创建option标签
                   let optionCity = document.createElement("option")
                   //添加文本
                   optionCity.innerText = cityList[i]
                   //添加到节点中
                   seleCity.append(optionCity)

               }

           }
    </script>
</body>
</html>

jQuery简介

1.jQuery是一个轻量级的、兼容多浏览器的JavaScript库
2.jQuery使用户能够更方便地处理HTML Document、Events、实现动画效果、方便地进行Ajax交互，能够极大地简化JavaScript编程。它的宗旨就是：“Write less, do more.“
3.jQuery的链式操作可以把多个操作写在一行代码里，更加简洁。
4.使用jQuery必须要先导入(很容易忘)，它的本质就是一个JS文件
    4.1 本地导入：提前下载问价并导入
    4.2 网络CDN服务，只要计算机能够联网就可以直接导入(稳定、快速、免费的前端开源项目CDN加速服务：https://www.bootcdn.cn/)

jQuery基本使用

jQuery基本语法

$('selector').action()
最开始：jQuery()  =>  $()

JS与jQuery语法对比

//js
let pEle = document.getElementsByTagName("p")[0]
pEle.style.color='red' //'red'
let pEle = document.getElementsByTagName("p")[1]
pEle.style.color= 'blue'  //'blue'

//jQuery
$('p').first().css('color','red').next().css('color','blue')

基本选择器

id选择器

$("#id")

标签选择器

$("tagName")

class选择器

$(".className")

所有元素选择器

$("*")

配合使用

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

组合选择器

$("#id, .className, tagName")

层级选择器

$("x y")  // x的所有后代y（子子孙孙）
$("x > y")  // x的所有儿子y（儿子）
$("x + y")  // 找到所有紧挨在x后面的y 
$("x ~ y")  // x之后所有的兄弟y

属性选择器

[attribute]
[attribute=value]// 属性等于
[attribute!=value]// 属性不等于

jQuery选择器查找标签之后的结果与JS有何区别

jQuery选择器与JS查找标签之后的结果集都是数组，但是功能有区别

$('p')  // S.fn.init(2) [p, p, prevObject: S.fn.init(1)]
document.getElementsByTagName('p')  //HTMLCollection(2) [p, p]

1.如果使用索引取值，那么都标签对象，标签对象是无法调用jQuery提供的方法的

$('p')[0]  //<p style=•"color:• red;•">•今天周五•</p>•
document.getElementsByTagName('p')[0]  //<p style=•"color:• red;•">•今天周五•</p>•

$('p')[0].css('color','red')//VM1235:1 Uncaught TypeError: $(...)[0].css is not a function
$('p')[0].style.color = 'red'  //'red'
$('p').first().style.color = 'green'   //VM1626:1 Uncaught TypeError: Cannot set properties of undefined (setting 'color')

2.标签对象如果想转换成jQuery对象需要使用：$() ;转换成jQuery对象的目的是为了使用jQuery提供的更多方法

$(document.getElementsByTagName('p')[0]) //S.fn.init [p]0: plength: 1[[Prototype]]: Object(0)
$(document.getElementsByTagName('p'))  //S.fn.init(2) [p, p]

$($('p')[0]).css('color','orange')  //jQuery.fn.init [p]

基本筛选器

筛选器	含义	例子
:first	第一个	$("li:first"))
:last	最后一个	$("li:last")
:eq(index)	索引等于index的那个元素	$("li:eq(4)")
:even	匹配所有索引值为偶数的元素，从 0 开始计数	$("li:even")
:odd	匹配所有索引值为奇数的元素，从 0 开始计数	$("li:odd")
:gt(index)	匹配所有大于给定索引值的元素	$("li:gt(4)")
:lt(index)	匹配所有小于给定索引值的元素	$("li:lt(4)")
:not(元素选择器)	移除所有满足not条件的标签	$("li:not(.c1)"
:has(元素选择器)	选取所有包含一个或多个标签在其内的标签(指的是从后代元素找)	$("div:has(.c1)")

例子

$("div:has(h1)")// 找到所有后代中有h1标签的div标签
$("li:not(.c1)")// 找到所有不包含c1样式类的li标签
$("li:not(:has(a))")// 找到所有后代中不含a标签的li标签

表单筛选器

表单筛选器可以看成是属性选择器优化而来 eg： $('input[type="text"]')$ (":Text")

表单筛选器	举例
:text	$(":Text")
:password	$(":password")
:file	$(":file")
:radio	$(":radio")
:checkbox	$(":checkbox")
:submit	$(":submit")
:reset	$(":reset")
:button	$(":button")

表单对象属性

:checked

当下拉列表设置默认值的时候，通过$(":checked")筛选的时候，也会被查找出来


$(":checked")  //[input.c, input.c, input.c, option, prevObject: jQuery.fn.init(1)]

:selected

$(":selected")只能查找下拉列表被设置默认

$(":selected")  // [option, prevObject: jQuery.fn.init(1)]

:disabled

<p><input type="text" class="c" disabled value="不能输入吧">1</p>

$(":disabled")  //S.fn.init [input.c, prevObject: S.fn.init(1)]

作业

页面定时器案例

有一个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.min.js"></script>
</head>
<body>

  <input type="text" id ="d3">
  <div>
    <button id = "d1">开始</button>
    <button  id = "d2">结束</button>
  </div>

  <script>
    let startBtn = document.getElementById("d1")
    let endBtn = document.getElementById("d2")
    let showTimeInput = document.getElementById('d3')
      //获取时间
      function getTime(){
      var d1 = new Date();
      var year = d1.getFullYear();
      var month = d1.getMonth() + 1;  //注意月份是从0~11
      var day = d1.getDate();
      var hour = d1.getHours();
      var second = d1.getSeconds()< 10?"0"+d1.getSeconds():d1.getSeconds();
      var minute = d1.getMinutes() < 10?"0"+d1.getMinutes():d1.getMinutes();  //三元运算
      var strTime = `${year}-${month}-${day} ${hour}:${minute}:${second}`;
      //添加
          return strTime
      }
      function showTime(){
        showTimeInput.value= getTime()
      }
    var id1_list = []
    startBtn.onclick = function (){
      id1_list.push(setInterval(showTime, 1000))
    }
    endBtn.onclick= function (){

        for (i=0;i<id1_list.length;i++){
            console.log(id1_list[i])
            clearInterval(id1_list[i])
        }
        showTimeInput.value=''
    }
  </script>
</body>
</html>

搜索框案例

input内有默认的文本值用户一旦选择该input想做内容修改就提前把内容清空

<!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.min.js"></script>
</head>
<body>
请输入你想要搜索的内容：<input type="text" id = 'd1' >


<script>
  let inSearch = document.getElementById("d1")

  inSearch.onfocus = function () {
    inSearch.value = ''
  }
  inSearch.onblur = function (){
    inSearch.value='星火英语'
  }
</script>
</body>
</html>