Day 53 前端开发 jQuery

文章目录

Day 53 前端开发 jQuery

1、JS操作扩展

1.1、JS获取用户输入

获取用户输入选择
通过标签点 value 获取属性值

document.getElementById('d1').value

'1241414'
1
2
3

获取用户上传的文件数据
通过标签点 file 获取文件数组通过[0] 取值获取文件对象

document.getElementById('d5').files[0]

File {name: '1825659-20191014121946473-388162006.jpg', lastModified: 1658977320884, lastModifiedDate: Thu Jul 28 2022 11:02:00 GMT+0800 (中国标准时间), webkitRelativePath: '', size: 99607, …}
1
2
3

1.2、JS类属性操作

获取标签所有class的属性值
classList

let div1Ele = document.getElementsByClassName('c1')[0]  // 存储classname 含有c1的第一个标签
div1Ele.classList //获取该标签 所有类属性值 数组
1
2

添加标签 class属性值
classList.add()

div1Ele.classList.add('c5')
1

判断标签 class属性值是否存在
classList.contains()

div1Ele.classList.contains('c5') //返回值为布尔值

true
1
2
3

删除标签 classs属性值
classList.remove()

div1Ele.classList.remove('c3')
1

当该属性值不存在时添加该属性值存在便删除该属性值

div1Ele.classList.toggle('c3')  //存在即删除 并返回False
false

//不存在 尾部追加 返回True
1
2
3
4

1.3、 JS样式操作

通过 style关键字来修改标签样式
style

改变标签背景颜色

pEle.style.backgroundColor = 'red'
1

2、事件

事件可以简单的理解为时给html 标签绑定了一些额外的功能（能够触发js代码的运行）

事件关键字	功能	应用场景
`onclick`	当用户点击某个对象时调用的事件句柄
`ondblclick`	当用户双击某个对象时调用的事件句柄
`onfocus`	元素获得焦点
`onblur`	元素失去焦点	用于表单验证，用户离开输入框时，代表输入完了我们可以对他进行验证
`onchange`	域的内容被改变	通常用于表单元素当元素内容被修改时触发（select省市联动）
`onkeydown`	某个键盘按键被按下	当用户在最后一个输入框按下回车键时表单提交
`onkeypress`	某个键盘按键被按下并松开
`onkeyup`	某个键盘按键被松开
`onload`	一张页面或一副图像完成加载
`onmousedown`	鼠标按钮被按下
`onmousemove`	鼠标被移动
`onmouseout`	鼠标从某元素移开
`conmouseover`	鼠标移动到某元素之上
`onselect`	在文本框中的文本被选中时触发
`onsubmit`	确认按钮被点击使用对象是form

2.1、绑定事件

绑定事件的两种方式
建议使用方式二可以批量绑定

// 方式一：通过添加属性绑 执行的函数
<input type="button" value="开关" onclick="func1()">
<script>
function func1(){
    alert('bong!!')
}
script>

//方式二：通过 标签.属性 绑定执行的函数 可以查找到多个标签 批量绑定
<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
9
10
11
12
13
14
15
16
17
18

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

let btnEle = document.getElementById('d1')
    btnEle.onclick = function (this){
        alert('peng!!')
        console.log(this)
    }
1
2
3
4
5

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

<script>
windowd.onload = function(){
   页面 js代码
}
script>
1
2
3
4
5

2.2、事件实操

当用户点击某个对象时调用的事件句柄
ondblclick
判断用户输入的账号密码不能为空做提示

<body>
<p>账号：
  <input type="text" id="username">
  <span class="errors" style="color: rgba(220,20,60,0.76)"></span>
</p>

<p>密码：
  <input type="password" id="password">
  <span class="errors" style="color:rgba(220,20,60,0.76) "></span>
</p>

<button id="btn">提交</button>

<script>
  //存储按钮标签
  let btnEle = document.getElementById('btn')
  // 绑定事件
  btnEle.onclick = function (){
    let username = document.getElementById('username').value;
    let password = document.getElementById('password').value;
    //判断用户输入是否为空
    if (username.length ===0){
      //存储 输入框 提示标签
      let span1Ele = document.getElementsByClassName('errors')[0]
      //载入提示
      span1Ele.innerText = '账号不能为空'
    }
    if (password.length ===0){
      let span2Ele = document.getElementsByClassName('errors')[1]
      span2Ele.innerText = '密码不能为空'

    }
  }
</script>
</body>
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

开关控制色块停止或启动跳动

<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

省市联动
onchange

<body>
省份：<select name="" id="province">


</select>

市区：<select name="" id="city">

</select>

<script>
   let seEle1 = document.getElementById('province')
   let seEle2 = document.getElementById('city')
    let data = {
        "上海": ["青浦区", "浦东新区"],
        "浙江": ["杭州", "宁波"],
        "河北省": ["廊坊", "邯郸"],
        "北京": ["朝阳区", "海淀区"],
        "山东": ["威海市", "烟台市"]
    }

    //循环 获取所有省信息
    for (let pi in data){
        //创建option标签
        let opEle = document.createElement('option')
        opEle.innerText = pi
        opEle.setAttribute('value',pi)
        seEle1.append(opEle)
    }

    //给省份 的下拉框绑定文本域变化事件
   seEle1.onchange = function (){
            let pname = this.value
       seEle2.innerHTML=null
            //根据省份获取对应的市区
        let cityList = data[pname]
       for (let ci=0;ci<cityList.length;ci++){
          let opEle2 = document.createElement('option')
           opEle2.innerText= cityList[ci]
           opEle2.setAttribute('value',ci)
           seEle2.append(opEle2)
       }
   }
</script>
</body>
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

3、jQuery 基本使用

jQuery() >>> $()

3.1、选择器

id选择器

$("#d1")
1

表爱你选择器

$("div")
1

class选择器：

$(".c1")
1

组合选择器

$("#d1,.c1,div")
1

层级选择器
x和y可以为任意选择器

$("x y")   //x所有的后代
$("x > y");// x所有的子代  儿子
$("x + y")// 找到所有紧挨在x后面的y
$("x ~ y")// x之后所有的兄弟y
1
2
3
4

3.2、jQUery与js查找到的标签区别

结果都是数组但是功能有却别

如果使用索引取值那么都是标签对象

标签对象是无法调用jQuery提供的方法的
标签对象如果想转换成jQuery对象需要使用 $()

转换成jQuery对象的目的是为了使用jQuery对象需要使用 $()

$('div')
//结果都是数组 功能不同
jQuery.fn.init(3) [div#d1, div.c1, div#d2, prevObject: jQuery.fn.init
$('div')[0]
//拿到的是标签对象 不能使用jQuery方法
<div id="d1" value="1234" style="color: red;">哈哈哈</div>

//对象转为jQuery对象 
$($('div')[0])
1
2
3
4
5
6
7
8
9

3.3、基本筛选器

$('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

3.4、表单筛选器

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

$(':checked')
$('input:checked')
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

相关阅读:
Java版分布式微服务云开发架构 Spring Cloud+Spring Boot+Mybatis 电子招标采购系统功能清单
 UVM概述
 别再问我Python打包成exe了！（终极版）
【软件安装】Windows系统中使用miniserve搭建一个文件服务器
 leetcode 665. Non-decreasing Array 非递减数列(中等)
2024.3.9|第十五届蓝桥杯模拟赛（第三期）
「Netflix Hollow系列」深入分析Hollow生产消费模型
 java中关于文件读写的各种类及其作用
 Shiro反序列化分析
 Linux磁盘挂载解挂硬盘
原文地址：https://blog.csdn.net/weixin_71967396/article/details/126569504

Day 53 前端开发 jQuery