Python攻城师的成长————DOM操作标签、事件绑定、jQuery框架_dom上的下一集按钮,触发click事件 python-CSDN博客

本文链接：https://blog.csdn.net/fonnt/article/details/124501730

本文介绍了Python中的DOM操作，包括动态添加标签、获取值和属性操作，详细讲解了事件绑定的三种方式，并通过实例演示了事件绑定的应用。此外，还探讨了jQuery框架的基本使用，包括查找标签和筛选器方法，强调了其在提高开发效率上的优势。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

今日学习目标

熟悉学习DOM操作标签、事件绑定、jQuery框架的内容。

学习内容

DOM操作标签
事件绑定
jQuery框架

一、DOM操作标签

动态添加标签

方法	用法
document.createElement()	创建标签
标签对象.innerText	设置文本内容
标签对象.innerHTML	设置文本内容和标签
标签对象.append(aEle)	内部追加标签
标签对象.setAttribute(‘属性名’,‘属性值’)	设置属性
标签对象.getAttribute(属性名)	获取指定属性
标签对象.removeAttribute(属性名)	移除指定属性

举例：

var aEle = document.createElement('a')  # 创建a标签
aEle.href = 'https://www.sogo.com/'  # 设置href属性
aEle.innerText = '点我去搜狗'  # 设置文本内容
var divEle = document.getElementById('d1')  # 查找标签
divEle.append(aEle)  # 内部追加标签

标签默认属性设置
比如 id、class等设置的时候可以直接通过点的方式
```
divEle.id = 'd1'
```
标签自定义属性设置
比如 username password 等设置的时候需要使用setAttribute
```
divEle.setAttribute('username','jason')
```

总结：
setAttribute()既可以设置自定义属性也可以设置默认属性
所以一般情况下都是使用setAttribute()去设置所有属性

innerText与innerHTML区别

获取值的时候

innerText只会获取文本内容
innerHTML获取文本和标签

设置值的时候

innerText不识别标签语法 
innerHTML识别标签语法

获取值操作

获取值主要是去在前端方面做一些简单的数据显示与判断，通常都是使用input、option、textarea等标签。

获取普通值数据
标签对象.value
获取文件数据
标签对象.value # 只能获取到文件路径没啥用
标签对象.files # 结果是一个数组可以通过索引获取具体文件对象

属性操作

类属性操作
标签对象.classList # 查看所有的类属性
标签对象.classList.add() # 添加类属性
标签对象.classList.remove() # 移除类属性
标签对象.classList.contains() # 判断是否含有某个类属性
标签对象.classList.toggle() # 有则移除无则添加
样式操作
标签对象.style.属性名
```
divEle.style.height = '800px'
```

二、事件绑定

事件简介

达到某个条件自动触发的功能

如何给标签绑定事件

1.在DOM元素中直接绑定；

2.在JavaScript代码中绑定；

3.绑定事件监听函数；
在DOM元素中直接绑定
这里的DOM元素可以理解为HTML标签。JavaScript支持在HTML标签中直接绑定事件，语法如下：

onXX = “JavaScript Code”;

其中：

onXX为事件名称。例如：鼠标单击事件onclick、鼠标双击事件ondouble等。

JavaScript Code为处理事件的JavaScript代码，一般是函数。
例如，单击一个按钮，弹出一个警告框的代码有如下两种写法
1.原生函数
```
<button οnclick="alert('警告框')">点击我，弹出警告框</button>
```
2.自定义函数
```
<button οnclick="myAlert()">点击我，弹出警告框</button>
<script>
    function myAlert() {
  	      alert("警告框");
    }
</script>
```

在JavaScript代码中绑定

在JavaScript代码中（即< script>标签或js文件内）绑定事件可以使JavaScript代码与HTML分离、文档结构清晰、便于管理和开发。

在JavaScript代码中绑定事件，语法如下：

elementObject.onXX = function () {
  // 事件处理代码
}

其中：

elementObject为DOM对象，即DOM元素。

onXX为事件名称。例如：鼠标单击事件onclick、鼠标双击事件ondouble等。

例如，为一个id="demo"的按钮绑定一个onclick事件，显示它的name属性

1.匿名函数绑定

<button id="demo" name="button">点击我，弹出name值</button>
<script>
     document.getElementById("demo").onclick = function () {
             alert(this.name);
     }
</script>

2.函数名绑定

<button id="demo" name="button">点击我，弹出name值</button>
<script>
    var demo = document.getElementById("demo");
    function showName() {
       alert(demo.name);
    }
   demo.onclick = showName();// 错误的绑定方式，这种方式是先调用一次showName函数，然后再将showName函数的返回  值绑定给onclick事件，如果函数返回值是一个函数对象，那么这个返回值就是onclick的事件处理函数；否则将忽略该返回值
   demo.onclick = showName;// 正确的绑定方式，showName指向一个函数对象（一个函数句柄），与匿名函数（一个匿名函数即一个匿名函数对象）绑定效果相同。
</script>

绑定事件监听函数

绑定事件的另一种方法是用addEventListener() 或 attachEvent()来绑定事件监听函数。
addEventListener()函数语法：
```
elementObject.addEventListener(eventName, handle, useCapture);
```
参数说明
- elementObject
  DOM对象（即DOM元素）。
- eventName
  事件名称（注意：这里的事件名称没有on，如鼠标点击事件click）。
- handle
  事件句柄函数，即用来处理事件的函数。
- useCapture
  Boolean类型，是否使用捕获，一般用false，与事件流相关。
attachEvent()函数语法：
```
elementObject.attachEvent(eventName, handle);
```
参数说明
- elementObject
  DOM对象（即DOM元素）。
- eventName
  事件名称（注意：这里的事件名称有on，如鼠标点击事件onclick）。
- handle
  函数名(不带小括号)，即用来处理事件的函数。

注意

addEventListener()是标准的绑定事件监听函数的方法，是W3C所支持的，Chrome、Firefox、Opera、Safari、IE9及其以上版本都支持该函数；但是，IE8及其以下版本不支持改函数，它使用attacheEvent()来绑定事件监听函数。所以，这种绑定方法，必须要处理浏览器兼容问题。

总结

在JavaScript中，有三种常用的事件绑定的方法：

1.在DOM元素中直接绑定；

2.在JavaScript代码中绑定；

3.绑定事件监听函数。
除了直接第一种直接在DOM元素中绑定函数外，其余两种绑定方法都是通过使用函数句柄或匿名函数进行绑定。使用函数句柄绑定事件函数时，如果函数返回值不是一个“函数对象”，那么函数名后面一定不要带有()，函数名后面跟上一对小括号表示执行该函数。
事件函数中有一个固定的关键字 this指代当前被操作对象本身

事件案例

数据校验

获取用户名和密码校验是否符合并暂时相应提示

<p>username:
  <input type="text" id="username">
    <span style="color: red" id="username_error"></span>
</p>
<p>password:
    <input type="text" id="password">
    <span style="color: red" id="password_error"></span>
</p>
<input type="button" value="提交" id="btn">
<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'){
            // 给用户名下面的span标签设置文本内容
            let userSpanEle = document.getElementById('username_error')
            userSpanEle.innerText = '用户名不能是jason!!!'
        }
        if (passWordVal === '123'){
            // 给密码下面的span标签设置文本内容
            let userSpanEle = document.getElementById('password_error')
            userSpanEle.innerText = '密码不能是123!!!'
        }
    }
</script>

搜索框案例

<input type="text" id="d1" value="默认搜索的内容">
<script>
// 1.查找input标签对象
var inputEle = document.getElementById('d1')
// 2.绑定一个聚焦事件
inputEle.onfocus = function () {
    // 3.清空value值
    this.value = ''
}
// 4.绑定一个失焦事件
inputEle.onblur = function () {
    // 5.添加一个全新的value值
    this.value = '小霸王游戏机'
}
</script>

省市联动

<p>省市:
<select name="" id="pro">

</select>
</p>

<p>市区:
<select name="" id="city">

</select>
</p>
<script>
let proEle = document.getElementById('pro');
let cityEle = document.getElementById('city');
// 1.自定义数据(以后有现成的组件实现)
let data = {
    "河北": ["廊坊", "邯郸"],
    "北京": ["朝阳区", "海淀区"],
    "山东": ["威海市", "烟台市"],
    "安徽": ["合肥市", "芜湖市"],
    "上海": ["静安", "黄埔"],
    "深圳": ["龙湖", "罗湖"]
};
// 2.获取自定义对象中所有的key并添加到省市下拉框中
for (let proVal in data) {
    // 2.1.创建option标签
    opEle = document.createElement('option');
    opEle.innerText = proVal;
    opEle.value = proVal
    // 2.2.添加到第一个下拉框中
    proEle.append(opEle)
}
// 3.文本域变化事件
proEle.onchange = function () {
    // 3.0.先清空市区下拉框中的内容
    cityEle.innerHTML = '';
    let currentPro = this.value;
    let currentCityList = data[currentPro];
    // 3.1.循环获取市区数据
    for (let i=0;i<currentCityList.length;i++){
        // 3.2.创建option标签
        opEle = document.createElement('option');
        opEle.innerText = currentCityList[i];
        opEle.value = currentCityList[i]
        // 2.2.添加到第一个下拉框中
        cityEle.append(opEle)
    }
}
</script>

二、 jQuery框架

简介

兼容多浏览器
IE浏览器:很多时候针对IE浏览器前端需要重新写一份代码操作
封装了js代码
核心代码也就几十KB 加载速度快极大的提升编写效率
宗旨
“Write less, do more.”
Ajax交互
异步提交局部刷新(django部分再学)

版本区别
1.x:兼容IE678
2.x:不兼容IE678
3.x:不兼容IE678 学习直接使用最新版即可
下载使用方式
下载地址:https://jquery.com/
jQuery必须先导入才可以使用(html页面上得写导入语句>>>:容易忘)
jQuery本身就是一个js文件里面写了一些js代码而已
导入方式

1.本地jQuery文件
不会收到网络影响
2.CDN加速服务
需要确保有互联网
min.js 压缩之后的文件容量更小
.js 没有压缩的文件容量稍大

基本使用举例
jQuery框架与基础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')

查找标签

基本选择器

$('#d1')  # id选择器  
$('.c1')  # class选择器  
$('p')  # 标签选择器
$('div#d1')
$('div,#d1,.c1')
$("x y")		// x的所有后代y（子子孙孙）
$("x > y")	// x的所有儿子y（儿子）
$("x + y")	// 找到所有紧挨在x后面的y
$("x ~ y")	// x之后所有的兄弟y

基本筛选器

$('ul li:first')
$('ul li:last')
$('ul li:not(li)')
$('ul:has(#d1)')  # 查看内部含有id是d1的ul标签

属性选择器

$('[name]')
$('[name="jason"]')
$('div[name="jason"]')

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

$('input[type="text"]')	 筛选器简化	$(':text')
$(':checked') 会将option也找到
$(':selected')  只会找到option标签

筛选器方法

同级别往下查找

$("#id").next()
$("#id").nextAll()
$("#id").nextUntil("#i2")

同级别网上查找

$("#id").prev()
$("#id").prevAll()
$("#id").prevUntil("#i2")

查找父标签

$("#id").parent()
$("#id").parents() 
$("#id").parentsUntil()

查找儿子和兄弟

$("#id").children();// 儿子们
$("#id").siblings();// 兄弟们(同级别上下所有标签)

补充：

链式操作
```
$('#d1').parent().parent().parent()
$('#d1').parent().parent().next().parents()
```
一个对象操作完毕之后还可以继续点击相同或不同的方法操作其他标签
核心:
对象在调用完一个方法之后返回的还是一个对象