前端学习笔记

今日内容概要

  • JS获取用户输入
  • JS事件绑定
  • JQuery类库

今日内容详细

JS获取用户输入

直接通过标签对象.value获取

let iEle = document.getElementById("i1");
console.log(iEle.value);
let sEle = document.getElementById("s1");
console.log(sEle.value);
let tEle = document.getElementById("t1");
console.log(tEle.value);

获取文件数据的时候:

标签对象.value只能获取到文件路径,而标签对象.files结果是一个数组,可以通过索引获取具体文件对象。

标签对象.files
标签对象.files[0]

JS类属性操作

标签对象.classList  //查看所有的类属性

标签对象.classList.remove(cls)  //删除指定类
标签对象.classList.add(cls)  //添加类
标签对象.classList.contains(cls)  //存在返回true,否则返回false
标签对象.classList.toggle(cls)  //存在就删除,否则就添加

JS样式操作

语法:标签对象.style.标签样式属性名

divEle.style.backgroundColor="red"
divEle.style.height = '800px'
divEle.style.backgroundImage

JS事件绑定

事件就是给html标签绑定了一些额外的功能,用户在html页面操作达到某个条件会自动触发功能。eg:用户点击某个标签弹出警告框,双击某个标签提示信息。

方法 说明
onclick 当用户点击某个对象时调用的事件句柄
ondblclick 当用户双击某个对象时调用的事件句柄
onfocus 元素获得焦点。应用:输入框
onblur 元素失去焦点。应用:用于表单验证,用户离开某个输入框时,代表已经输入完了,我们可以对它进行验证.
onchange 域的内容被改变。应用:通常用于表单元素,当元素内容被改变时触发.(select联动)
onkeydown 某个键盘按键被按下。 应用: 当用户在最后一个输入框按下回车按键时,表单提交.
onkeypress 某个键盘按键被按下并松开
onkeyup 某个键盘按键被松开
onload 一张页面或一幅图像完成加载
onmousedown 鼠标按钮被按下
onmousemove 鼠标被移动
onmouseout 鼠标从某元素移开
onmouseover 鼠标移到某元素之上
onselect 在文本框中的文本被选中时发生
onsubmit 确认按钮被点击,使用的对象是form

给标签绑定事件

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

事件中的关键字this

let btnEle = document.getElementById('d1')
btnEle.onclick = function (){
    alert(321)
    console.log(this)
}
this指代的是当前被操作的标签对象

window.onload

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

window.onload = function() {
    页面js代码
}

JS事件案例

1.校验用户输入
点击事件  onclick


<!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.省市联动
文本域变化事件	 onchange

<!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>
<!--    <script src="jQuery3.6.js"></script>-->
</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.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[i])
            // 7.添加到第二个select标签内
            cityEle.append(opEle)
        }
    }
</script>

</body>
</html>

jQuery类库

jQuery是一个轻量级的、兼容多浏览器的JavaScript库。

jQuery使用户能够更方便地处理HTML Document、Events、实现动画效果、方便地进行Ajax交互,能够极大地简化JavaScript编程。它的宗旨就是:“Write less, do more.“

下载使用:

下载地址:https://jquery.com/
jQuery必须先导入才可以使用(html页面上得写导入语句>>>:容易忘)
jQuery本身就是一个js文件,里面写了一些js代码而已。

导入方式

1.本地jQuery文件
不会收到网络影响:直接在本地导入,在html页面上得写导入语句。

2.CDN加速服务

<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>

需要确保有互联网:min.js压缩之后的文件,容量更小;.js没有压缩的文件,容量稍大。

基本使用:将页面上的两个p标签文本内容一个变成红色 一个变成绿色

// 原生的js代码
   let p1Ele = document.getElementsByTagName('p')[0]
   let p2Ele = document.getElementsByTagName('p')[1]
   p1Ele.style.color = 'red'
   p2Ele.style.color = 'green'
// jQuery代码
   $('#d1').css('color','red').next().css('color','green')

jQuery查找标签

基本选择器

基本选择器 说明
$('#d1') id选择器
$('.c1') class选择器
$('p') 标签选择器

组合案例:

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

层级选择器

x和y可以为任意选择器

层级选择器 说明
$("x y") x的所有后代y(子子孙孙)
$("x > y") x的所有儿子y(儿子)
$("x + y") 找到所有紧挨在x后面的y
$("x ~ y") x之后所有的兄弟y

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

结果集都是数组但是功能有区别

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

标签对象是无法调用jQuery提供的方法的

2.标签对象如果想转换成jQuery对象需要使用$()

转换成jQuery对象的目的是为了使用jQuery提供的更多方法

$('p')[0].css('color','red')  //报错

$('p')[0].style.color = 'red'  //可以

$('p').first().css('color','red')  //可以

$('p').first().style.color = 'green'  //报错

$($('p')[0]).css('color','orange')  //可以

基本筛选器

基本筛选器 说明
:first 第一个
:last 最后一个
:eq(index) 索引index位置的那个元素
:even 匹配所有索引值为偶数的元素,从 0 开始计数
:odd 匹配所有索引值为奇数的元素,从 0 开始计数
:gt(index) 匹配所有大于给定索引值的元素
lt(index) 匹配所有小于给定索引值的元素
:not(元素选择器) 移除所有满足not条件的标签
:has(元素选择器) 选取所有包含一个或多个标签在其内的标签(指的是从后代元素找)

案例:

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

属性选择器

属性选择器 说明
$('[name]') 查找有name属性的标签
$('[name="jason"]') 查找name属性为jason的标签
$('div[name="jason"]') 查找name属性为jason的div标签

表单筛选器:专门针对form表单内的标签

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

原写法 简化
$('input[type="text"]') $(':text')
$('[checked="checked"]') $(':checked') 会将option也找到
:text   //匹配所有普通文本框
:password  //匹配所有密文展示框
:file  //匹配所有文件域
:radio  //匹配所有单选框
:checkbox  //匹配所有多选框

:submit  //匹配所有提交按钮,匹配 type="submit" 的input或者button
:reset  //匹配所有重置按钮
:button  //匹配所有按钮

:enabled  //匹配所有可用元素
:disabled  //匹配所有不可用元素
:checked  //匹配所有选中的被选中元素(复选框、单选框等,select中的option)
:selected  //匹配select中的option
posted @   空白o  阅读(27)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· [翻译] 为什么 Tracebit 用 C# 开发
· 腾讯ima接入deepseek-r1,借用别人脑子用用成真了~
· Deepseek官网太卡,教你白嫖阿里云的Deepseek-R1满血版
· DeepSeek崛起:程序员“饭碗”被抢,还是职业进化新起点?
· RFID实践——.NET IoT程序读取高频RFID卡/标签
点击右上角即可分享
微信分享提示