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 ...
随机推荐
- ES6-11学习笔记--const
新声明方式:const 1.不属于顶层对象 window 2.不允许重复声明 3.不存在变量提升 4.暂时性死区 5.块级作用域 以上特性跟let声明一样,特性可看 let 的学习笔记:链接跳转 ...
- Java 请求转发和重定向的区别以及JavaWeb三大作用域
三大作用域以及转发和重定向 学习总结 1. 转发和重定向 转发 重定向 转发和重定向的区别: 什么时候用转发什么时候用重定向 三大作用域 作用域类型 作用域方法 如何选择作用域 总结 学习总结 1. ...
- DOM节点的使用（常用方法+代码）
DOM节点的应用 学习总结 1. 什么是 DOM 2. HTMLDOM 3. 元素获取 元素获取方式 元素节点的属性操作 4. Node 对象的属性和方法 常用属性 常用方法 5. 事件处理 事件驱动 ...
- iframe引入微信公众号文章
微信在文章页面设置了响应头""frame-ancestors 'self'"阻止了外部页面将其嵌套的行为,文章的图片也设置了防盗链的功能,这就导致了直接在iframe中引 ...
- Exchange统计邮箱数量
以Exchange管理员身份登录,打开PowerShell控制台. 1.查询Exchange组织邮箱数量 键入以下命令. Get-Mailbox | Measure-Objcet 2.查询某数据库邮箱 ...
- Ubuntu系统报错The system is running in low-graphics mode
Ubuntu系统报错:The system is running in low-graphics mode 我遇到过两次这种请况,这次解决了.很nice! 在csdn上搜到的大部分操作是: 鼠标进入系 ...
- MySQL---drop, delete, truncate的区别
drop, delete, truncate的区别 删除内容 drop直接删除整个表, 包含表结构和数据; truncate删除表中数据, 表结构及其列, 约束, 索引等不变, 再插入时自增id又从1 ...
- LC-1
Two Sum Given an array of integers nums and an integer target, return indices of the two numbers suc ...
- drf过滤和排序及异常处理的包装
过滤和排序(4星) 查询所有才需要过滤(根据过滤条件),排序(按某个规律排序) 使用前提: 必须继承的顶层类是GenericAPIView 内置过滤类 内置过滤类使用,在视图类中配置,是模糊查询 使用 ...
- Python实现双X轴双Y轴绘图
诈尸人口回归.这一年忙着灌水忙到头都掉了,最近在女朋友的提醒下终于想起来博客的账号密码,正好今天灌水的时候需要画一个双X轴双Y轴的图,研究了两小时终于用Py实现了.找资料的过程中没有发现有系统的文章, ...