JS事件与jQuery

JS操作

获取值与类属性操作

1.获取普通数据(输入、选择)
标签对象.value

2.文件数据(上传)
标签对象.files
标签对象.files[0]

3.class的操作
标签对象.className					 获取所有样式类名(字符串)
标签对象.classList.remove(cls)		  删除指定类
标签对象.classList.add(cls)			  添加类
标签对象.classList.contains(cls)	   存返回值true，否则返回false
标签对象.classList.toggle(cls)		  存在就删除，不存在就添加

标签样式操作

1.指定css操作
标签对象.style.标签样式属性名

2.标签样式属性名
backgroundColor		动态修改颜色
backgroundImage		动态修改图片

JS事件绑定

1.html4.0版本之后的新特性，能使html事件触发浏览器中的动作，可以简单的理解为是给html标签绑定了一些额外的功能，当用户点击某个html元素时运行js代码

2.常用事件
onclick			当用户点击对象时执行
ondblclick		 当用户双击对象时执行

onfocus			元素获得焦点
onblur			元素失去焦点
onchange		域的内容被改变

onkeydown		某个键盘按键被按下
onkeypress		某个键盘按键被按下并松开
onkeyup			某个键盘按键被松开
onload			一张页面或一副图像完成加载
onmousedown		鼠标按钮被按下
onmousemove		鼠标被移动
onmouseout		鼠标从某元素移开
onmouseover		鼠标移到某元素之上

inselect		在文本框中的文本被选中时发生
onsubmit		确认按钮被点击，使用的对象是from

3.绑定事件的两种方法
<input type="button" value="确认" ondblclick="func()">
<button id="d1">按键</button>
<script>
    // 方式1:提前写好函数，标签内部指定
    function func(){
        alert(123)
    }
    // 方式2:先查找标签，在绑定
    let btnEle = document.getElementById('d1')
    btnEle.onclick = function (){
        alert(233)
    }
</script>

4.事件中的关键字this
let btnEle = document.getElementById('d1')
btnEle.onclick = function (){
    alert(233)
    console.log(this)
}  // this代指当前被操作的标签对象

5.当我们给页面上的元素绑定事件时，必须要等待文档加载完毕，在执行一些绑定事件的代码，因为我们无法绑定不存在的元素
<script>
    // 等待文档加载完毕之后再执行代码
    window.onload = function (){
       页面js代码
    }
</script>

JS事件案例之效验用户数据

<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>
    // 查找按钮标签
    let btnEle = document.getElementById('btn');
	//  绑定单击事件
    btnEle.onclick = function (){
        // 用户单击后获取用户名和密码
        let nameVal = document.getElementById('username').value;
        let pwdVal = document.getElementById('password').value;
        // 判断用户名是否合法
        if(nameVal === 'barry'){
            // 查找获取用户名的input框下面的span标签
            let span1Ele = document.getElementsByClassName('errors')[0];
            // 给span标签添加内部文本
            span1Ele.innerText = '用户名不能是barry'
        }
        // 判断密码是否为空
        if(pwdVal.length === 0){
            // 查找获取用户密码的input框下面的span标签
            let span1Ele = document.getElementsByClassName('errors')[1];
            // 给span标签添加内部文本
            span1Ele.innerText = '密码不能为空'
        }
    }
</script>

JS事件案例之省市联动

'文本域变化事件	 onchange'
<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');
    // 循环获取所有省份信息
    for(let pro in data){
        // 创建option标签
        let opEle = document.createElement('option');
        // 给option标签内部添加文本
        opEle.innerText = pro
        // 添加value属性
        opEle.setAttribute('value', pro)
        // 将option标签添加到select标签内
        proEle.append(opEle)
    }
    // 给省份下拉框绑定文本域变化事件
    proEle.onchange = function () {
        // 每次给市区下拉框添加市区数据前，应该先清空上一次的数据
        cityEle.innerHTML = '';
        // 获取用户选择的省份信息
        let currentPro = this.value;
        // 根据省份获取对应的市区列表数据
        let targetCiyList = data[currentPro];
        // 循环获取所有市区信息
        for (let i=0;i<targetCiyList.length;i++){
            // 创建option标签
            let opEle = document.createElement('option');
            // 给option标签内部添加文本
            opEle.innerText = targetCiyList[i]
            // 添加value属性
            opEle.setAttribute('value', targetCiyList[i])
            // 将option标签添加到select标签内
            cityEle.append(opEle)
        }
    }
</script>
</body>

jQuery

jQuery简介

1.jQuery是一个轻量级、兼容多浏览器的JavaScript库，极大的简化了JavaScript编程，它的总之就是:Write less, do more

2.使用jQuery必须要先导入
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

3.本地导入
提前下载文件在导入
3.1网络CDN服务
只要计算机能联网就可以直接导入

4.下载地址:https://jquery.com/download/
也可以使用一些免费的CDN(bootcdn):https://www.bootcdn.cn/jquery/

jQuery常见选择器

1.基本语法
$(selector).action()

2.基本选择器
2.1id选择器
$("#id")
2.2标签选择器
$("tagName")
2.3标签选择器
$(".className")
2.4配合使用
$("div.c1")  // 找到有c1、class类的div标签
2.5使有元素选择器
$("*")
2.6组合选择器
$("#id, .className, tagName")
2.7层级选择器
x和y可以为任意选择器
$("s y");  // x的所有后代y
$("x > y");  // x的所有儿子y
$("x + y");  // 找到所有紧挨在x后面的y
$("x ~ y");  // x之后所有的兄弟y

3.jQuery选择器查找标签之后的结果与js有何区别
结果集都是数组但是功能有区别
3.1如果使用索引取值，那么都是标签对象，标签对象无法调用jQuery提供的方法
3.2标签对象如果想转换成jQuery对象需要使用$(),转换成jQuery对象才可以使用jQuery提供的更多方法

基本筛选器

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

表单筛选器

'可以看成是属性选择器优化而来'
$('input[type="text"]')>>>$(':text')

:text
:password
:file
:radio
:checkbox

:submit
:reset
:button
    
:enabled
:disabled
:checked
:selected

posted @   无言以对啊  阅读(32)  评论(0)  编辑  收藏  举报
相关博文：
· jQuery
· JS数据类型、流程控制、函数与BOM与DOM操作
· 【前端】 第05回 JS操作与jQuery
· 【2022.8.26】前端开发（5）
· js事件与jQuery
阅读排行：
· 全程不用写代码，我用AI程序员写了一个飞机大战
· MongoDB 8.0这个新功能碉堡了，比商业数据库还牛
· 记一次.NET内存居高不下排查解决与启示
· DeepSeek 开源周回顾「GitHub 热点速览」
· 白话解读 Dapr 1.15：你的「微服务管家」又秀新绝活了
点击右上角即可分享
微信分享提示

目录导航