DOM标签操作与事件与jQuery查找标签
DOM之操作标签
创建标签对象
创建空标签对象。
var pEle = document.createElement('p') // 创建p标签
标签对象的属性
获取或创建了标签对象后，可以直接给点+属性名的方式设置标签属性值。如：
标签对象.id = 'p1' // 把标签的id属性设为'p1'
标签对象.style = 'color:red' // 把标签的内容颜色变为红色
标签对象.value // 表单标签中可以获取用户输入的数据
标签对象.files // 获取用户上传的文件，结果是一个数组，可以通过索引获取具体文件对象
上述方法只能设置标签默认已有的属性，无法设置标签自定义的一些属性，但是使用Attribute方法就可以：
// 添加自定义属性
标签对象.setAttibute("任意属性名", "值")
// 获取标签属性的值
标签对象.getAttibute("属性名")
// 删除标签属性
标签对象.removeAttibute("属性名")
innerText与innerHTML
标签对象有两个关于标签内部内容的属性：innerText与innerHTML。
标签对象.innerText
标签对象.innerHTML
| 不同情况 | 区别 |
|---|---|
| 获取值的时候 | innerText只会获取文本内容； innerHTML获取文本和标签 |
| 设置值的时候 | innerText不识别标签语法 innerHTML识别标签语法 |
标签内部追加内容
标签对象.append("内容") // 直接追加内容
标签对象.append(其他标签对象) // 标签内部结尾追加标签
属性操作
class属性操作
| 方法 | 描述 |
|---|---|
| 标签对象.classList | 查看所有的类属性 |
| 标签对象.classList.add("值") | 添加class属性的值 |
| 标签对象.classList.remove("值") | 移除class属性的值 |
| 标签对象.classList.contains("值") | 判断是否含有某个class属性的值 |
| 标签对象.classList.toggle("值") | 有则移除这个class值，无则添加这个class值 |
样式操作
改变标签的样式需要更改style属性的值，style属性.css属性也可以更改css样式。
标签对象.style.color = 'red' // 设置标签内容的颜色为red
标签对象.style.fontSize = '18px' // 设置标签内容大小为18px
注意：style里的属性值设置时没有-，如：font-size需要写成fontSize。
事件
在JS中，事件指的是达到某个条件，自动触发的功能，比如：单击输入框实现某些功能。
常用事件
| 事件 | 描述 |
|---|---|
| 鼠标事件 | |
| onclick | 用户单击对象 |
| ondblclick | 用户双击对象 |
| onmousedown | 鼠标按钮被按下 |
| onmousemove | 鼠标被移动 |
| onmouseout | 用户从对象上移开鼠标 |
| onmouseover | 鼠标移到对象上 |
| 焦点事件 | |
| onfocus | 对象获得焦点，如：输入框在输入时 |
| onblur | 对象失去焦点，如：离开正在进行输入的输入框 |
| onselect | 在文本框中的文本被选中时发生 |
| 键盘事件 | |
| onkeydown | 用户按下键盘按键 |
| onkeyup | 用户松开键盘按键 |
| onkeypress | 用户按下键盘按键并松开 |
| 其他事件 | |
| onchange | 对象内容被改变 |
| onsubmit | 确认按钮被点击，使用的对象是form |
| onload | 浏览器已完成页面的加载 |
事件绑定
方式一：html属性直接绑定
<div id="d1" onclick="changeColor(this);">点我</div>
<script>
function changeColor(ths) {
ths.style.backgroundColor = "green";
}
</script>
如果需要对对象本身进行一些操作就需要传入this，this表示触发事件的当前对象。
函数定义里的形参不能用this，需要用其他名称。
方式二：JS中获取标签对象绑定
<div id="d1">点我</div>
<script>
var d1Ele = document.getElementById("d1")
d1Ele.onclick = function changeColor() {
this.style.backgroundColor = "green";
}
</script>
事件案例
搜索框的聚焦与失焦
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
</head>
<body>
<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>
</body>
</html>
根据省份选城市
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
</head>
<body>
<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>
</body>
</html>
jQuery简介
基本介绍
jQuery是一个轻量级的、兼容多浏览器的JavaScript库。
jQuery使用户能够更方便地处理HTML Document、Events、实现动画效果、方便地进行Ajax交互，能够极大地简化JavaScript编程。它的宗旨就是：“Write less, do more.”
下载与导入
jQuery需要下载导入或者通过网址引用才可以使用。
下载地址：jQuery-3.5.1下载
其他版本下载：jQuery下载所有版本（实时更新） (jq22.com)
官网jQuery压缩版引用地址:
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
查找标签
jQuery中的选择器都是基于CSS选择器的。
基本选择器
| 基本选择器 | 描述 |
|---|---|
| $('#id') | id选择器 |
| $('.class') | class选择器 |
| $('tagName') | 标签选择器 |
| 例子 | 描述 |
|---|---|
| $('div#d1') | 选择div标签中id值为d1的 |
| $('div,#d1') | 同时选择div标签、id值为d1的 |
| $("div p") | div标签后代中的p标签 |
| $("div > p") | div标签为儿子的p标签 |
属性选择器
| 属性选择器 | 描述 |
|---|---|
| $("[属性]") | 选中有这项属性的标签 |
| $("[属性=值]") | 选中有这项属性的标签，并且值也要等于 |
| $("[属性!=值]") | 选中有这项属性的标签，并且值不等于 |
| 例子 | 描述 |
|---|---|
| $('input[type="text"]') | 选中input中type值为text的标签 |
属性筛选器
属性选择器中有着专门针对form表单内的标签的简化选择方法。
| 原写法 | 简化 |
|---|---|
| input标签中的type属性 | |
| $('input[type="text"]') | $(':text') |
| $('input[type="password"]') | $(':password') |
| ... | |
| 其他属性 | |
| $('[checked="checked"]') | $(':checked') |
| $('[selected="selected"]') | $(':selected') |
| ... |
注意：$(':checked')会同时找到option标签中的属性，而$(':selected')只会找到option标签中的属性。
基本筛选器
| 基本筛选器 | 描述 |
|---|---|
| :first | 第一个 |
| :last | 最后一个 |
| :eq(index) | 索引index位置的那个元素 |
| :even | 匹配所有索引值为偶数的元素，从 0 开始计数 |
| :odd | 匹配所有索引值为奇数的元素，从 0 开始计数 |
| :gt(index) | 匹配所有大于给定索引值的元素 |
| lt(index) | 匹配所有小于给定索引值的元素 |
| :not(元素选择器) | 移除所有满足not条件的标签 |
| :has(元素选择器) | 选取(含有元素选择器选中的标签)的标签 |
| 例子 | 描述 |
|---|---|
| $('p:first') | 选取第一个p标签 |
| $('p:eq(2)') | 选取第三个p标签(索引从0开始的) |
| $('div:not(.d1)') | 选中div中class值不等于d1的标签 |
| $('ul:has(#d1)') | 选取内部含有id是d1的ul标签 |
筛选器方法
| 方法 | 描述 |
|---|---|
| $().next() | 同级别往下查找一个 |
| $().nextAll() | 同级别往下查找所有 |
| $().nextUntil("选择器") | 同级别往下查找所有，直到满足选择器条件 |
| $().prev() | 同级别往上查找一个 |
| $().prevAll() | 同级别往上查找所有 |
| $().prevUntil("选择器") | 同级别往上查找所有，直到满足选择器条件 |
| $().parent() | 查找一个父标签 |
| $().parents() | 查找所有父标签(一直向上一个级别查找) |
| $().parentsUntil("选择器") | 查找所有父标签，直到满足选择器条件 |
| $().children() | 查找儿子标签 |
| $().siblings() | 同级别上下所有标签(兄弟标签) |
DOM标签操作与事件与jQuery查找标签的更多相关文章
- Dom对象总结介绍&事件介绍&增删查找标签
1.dom有5个属性,属性内容如下 下面开始介绍Dom属性,一共有5个属性 1.document object:文档对象 2.element object:标签对象 3.test object:文本对 ...
- 前端09 /jQuery标签操作、事件、补充
前端09 /jQuery标签操作.事件.补充 目录 前端09 /jQuery标签操作.事件.补充 1.标签内文本操作 1.1 html标签元素中的所有内容 1.2 text 标签元素的文本内容 2.文 ...
- 前端08 /jQuery标签操作、事件
前端08 /jQuery标签操作.事件 目录 前端08 /jQuery标签操作.事件 1.标签内文本操作 1.1 html标签元素中的所有内容 1.2 text 标签元素的文本内容 2.文档标签操作 ...
- JQuery查找标签
JQuery查找标签 一.基本标签 1 id选择器: $("#id(名称)") $("#cent") 2 标签选择器: $("tabName(便签名称 ...
- jQuery查找标签--选择器,筛选器,模态对话框, 左侧菜单栏
查找标签 选择器: 基本选择器(同css) id选择器 $("#id") 标签选择器 $('tagName') class选择器 $(".className") ...
- jQuery 查找标签
1 基本选择器 2 基本筛选器 3 属性选择器 4 间接选择 1 基本选择器 //id选择器: $("#id") //标签选择器: $("tagName") / ...
- 未渲染的dom结构，绑定事件，jquery
使用事件委托 $(document).on('click','selector',function(){ ... }); 示例 $(document).on("click", &q ...
- jQuery对DOM的操作
"jQuery中非常重要的部分,就是对DOM的操作!" "jQuery中非常重要的部分,就是对DOM的操作!" "jQuery中非常重要的部分,就是对 ...
- 如何用按钮的click事件去触发a标签的click事件
在jQquery中,可以用如下方式触发input.a标签的click事件: <input id="my_input" /> <a id="my_a&qu ...
随机推荐
- C2678 二进制“<”: 没有找到接受“const ***”类型的左操作数的运算符解决办法
正确代码如下:#include<iostream> #include<string> #include<map> using namespace std; /*仿函 ...
- Linux_连接工具_SecureCRT的使用教程
什么是SecureCRT? SecureCRT是一款支持 SSH2.SSH1.Telnet.Telnet/SSH.Relogin.Serial.TAPI.RAW 等协议的终端仿真程序,最吸引我的是,S ...
- LeetCode刷题知识点总结——二叉树
二叉树 一.二叉树理论基础 1.满二叉树:如果一棵二叉树只有度为0的结点和度为2的结点,并且度为0的结点在同一层上,则这棵二叉树为满二叉树.通俗话理解:从底层开始到顶部的所有节点都全部填满的二叉树.深 ...
- c语言实现双链表的基本操作—增删改查
//初始化 Node*InitList() { Node*head=(Node*)malloc(sizeof(Node)); if(NULL==head) { printf("内存分配失败! ...
- Map的key是否可重复
我们都知道Map的一大特性是key唯一不可重复,可是真的是这样的吗? 我们来试验一下: 运行结果: 我们可以看到在map里有两个同样的person作为key,打破了map的key不可重复的特性. 我们 ...
- jquery版本的ajax请求
首先引入 <script src="https://code.jquery.com/jquery-3.6.0.js"></script> $ 和 jqu ...
- 元素偏移量 offset 系列
offset 概述 offset翻译过来就是偏移量,我们使用offset系列相关属性可以动态的得到该元素的位置(偏移).大小等. 获得元素距离带有定位父元素的位置 获得元素自身的大小(宽度高度) 注意 ...
- 面渣逆袭：Spring三十五问，四万字+五十图详解
大家好,我是老三啊,面渣逆袭 继续,这节我们来搞定另一个面试必问知识点--Spring. 有人说,"Java程序员都是Spring程序员",老三不太赞成这个观点,但是这也可以看出S ...
- 使用 Bitnami PostgreSQL Docker 镜像快速设置流复制集群
bitnami-docker-postgresql 仓库 源码:bitnami-docker-postgresql https://github.com/bitnami/bitnami-docker- ...
- vulnhub DC:1渗透笔记
DC:1渗透笔记 靶机下载地址:https://www.vulnhub.com/entry/dc-1,292/ kali ip地址 信息收集 首先扫描一下靶机ip地址 nmap -sP 192.168 ...