首页 > 其他分享> > 【前端】第05回 JS操作与jQuery

【前端】第05回 JS操作与jQuery

2022-08-27 15:06:02 作者：互联网

1. JS操作
2. 事件
3. jQuery类库
- 3.1 jQuery 简介
- 3.2 jQuery基本使用

1. JS操作

1.1 JS获取用户输入

1.普通数据(输入，选择)
    标签对象.value
2. 文件数据(上传)
    标签对象.files
    标签对象.files[0]

<input type="text" name="" id="d1">
<input type="radio" name="gender" value="male" id="d2">男
<input type="radio" name="gender" value="female" id="d3">女

<select name="" id="d4">
    <option value="111">111</option>
    <option value="222">222</option>
    <option value="333">333</option>
</select>

<input type="file" name="file" id="d5">

1.2 JS类属性操作

标签对象.classList   获取所有标签值
标签对象.className  获取所有样式类名（字符串）
标签对象.classList.contains()  存在返回true ,否则返回false
标签对象.classList.add()  添加类
标签对象.classList.remove()  删除类
标签对象.classList.toggle()  存就删除类，否则添加

1.3 JS样式操作

标签对象.style.标签样式属性名
eg: backgroundColor
    backgroundImage

2. 事件

2.1 事件理解

HTML4.0的新特性，事件可以理解为是给html标签绑定一些额外的功能（能够触发js代码的运行）

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

2.2 绑定事件的两种方式

// 方式1：提前写好函数，标签内部指定
function func1(){
   alert(123）
}
// 方式2：先查找标签，然后批量绑定
let btnELe = document.getElementById('d1')
btnEle.onclick = function() {
   alert(321）
}

方式1案例

<body>
<input type="button" value="快来点我" onclick="func1()">
<button>快来按我</button>
<script>
    function func1(){
      alert(123)
    }
</script>
</body>

方式2案例

<input type="button" value="快来点我" onclick="func1()">
<button id="d1">快来按我</button>
<script>
   let btnEle = document.getElementById('d1')
   btnEle.onclick = function (){
     alert(321)
   }
</script>

2.3 事件中的关键字this

<input type="button" value="快来点我" ondblclick="func1()">
<button id="d1">快来按我</button>
<script>
   // 绑定事件的方式1:提前写好函数 标签内部指定
    function func1(){
      alert(123)
      console.log(this)
    }
   // 绑定事件的方式2:先查找标签 然后批量绑定
   let btnEle = document.getElementById('d1')
   btnEle.onclick = function (){
     alert(321)
     console.log(this)
   }

2.4 window.onload

window.onload事件在文件加载过程结束的时候触发。此时，文档中的所有对象都位于DOM中，并且所有图像，脚本，链接和子框架都已完成加载。.onload()函数存在覆盖现象。

2.5 校验用户输入案例

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

2.6 省市联动案列

给标签绑定事件，要注意这个标签有没有功能，要不要执行，可能会冲突也可能不执行或全部执行
<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.createElement('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.createElement('option');  //<option></option>
        // 5.添加内容文本
        opEle.innerText = targetCityList[i]
        // 6.添加value属性
        opEle.setAttribute('value',targetCityList)
        // 7.添加到第二个select标签内
        cityEle.append(opEle)
      }
    }

</script>
</body>

3. jQuery类库

3.1 jQuery 简介

jQuery

jQuery是一个轻量级、兼容多浏览器的JavaScript库
jQuery使用户能够更方便地处理HTML Document、Events、实现动画效果、方便地进行Ajax交互，能够极大地简化JavaScript编程。它的宗旨就是：“Write less, do more.“(少写，多做)

jQuery的优势

一款轻量级的JS框架。jQuery核心js文件才几十kb，不会影响页面加载速度。
链式表达式。jQuery的链式操作可以把多个操作写在一行代码里，更加简洁。
事件、样式、动画支持。jQuery还简化了js操作css的代码，并且代码的可读性也比js要强。
跨浏览器兼容。jQuery基本兼容了现在主流的浏览器，不用再为浏览器的兼容问题而伤透脑筋。

jQuery导入

使用jQuery必须要先导入，本质其实就是一个js文件
本地导入：提前下载文件并导入
网路CDN服务：只要计算机能够联网就可以直接导入 bootcdn
网址：https://www.bootcdn.cn/

<script 
src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jq 
uery.js"></script>
注意: 使用CDN的jQuery前提必须要有网络

优点：好处在于无需下载文件，直接走网络请求使用
缺点: 不好的地方在于必须要有网才可以使用

3.2 jQuery基本使用

标签：jQuery,05,标签,绑定,JS,let,document
来源： https://www.cnblogs.com/cainiaozhy/p/16629375.html

【前端】 第05回 JS操作与jQuery