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 ...
随机推荐
- webpack系列——webpack3导入jQuery的新方案
本文的目的 拒绝全局导入jQuery!! 拒绝script导入jQuery!! 找到一种只在当前js组件中引入jQuery,并且使用webpack切割打包的方案! 测试环境 以下测试在webpack3 ...
- PC端免费高效的同声翻译
疫情期间上网课,对于英语听力较差或者需要观看英文视频,但实际上并没有双语字幕的这种情况下需要找一个实时的翻译工具.虽然说手机上此类软件比较多,但电脑上没有特别合适的应用可以做为一个免费实时翻译.哪怕是 ...
- 在tomcat布置项目
1.将项目打成war包复制到tomcat-webapps 2.修改tomcat端口号 3.指定jdk 一.找到tomcat目录/bin 文件夹下的 catalina.bat文件 二.在文件中找到 ec ...
- 虚拟机上 安装 CentoOS 7.5 1804 过程记录
1.准备安装镜像 在开始安装CentOS之前,必须下载安装ISO映像.镜像可从CentOS网站https://www.centos.org/download/.提供以下基本类型的镜像: DVD ISO ...
- JAVASE Scanner
package com.huang.boke.flowPath;import java.util.Scanner;public class test01 { public static void ma ...
- 使用SQL的FOR XML PATH('')将字段用逗号隔开
FOR XML PATH('') 将查询结果显示为XML 经常用来将查询结果按逗号分隔后显示至某一字段 select * from Area结果 添加FOR XML PATH('')后 select ...
- Python Django项目日志查询系统
该项目适合中小型公司日志查询工作.大型公司可以使用elk等.该系统其实就是调用了absible命令去查日志,然后把输出的信息输到页面查看. 日志查询系统 维护手册 作者:陈土锋 日期:2020年6月1 ...
- I/O 引脚
我们以网卡举例 引脚,芯片,pcb板之间的关系非常紧密 1.引脚,又叫管脚,英文叫Pin. 就是从集成电路(芯片)内部电路引出与外围电路的接线,所有的引脚就构成了这块芯片的接口.引线末端的一段,通过软 ...
- oracle三个连接配置文件 listener.ora、sqlnet.ora、tnsnames.ora
关于PLSQL连接ORACLE配置字符串 首先要讲一下下面的一些知识 1.ORACLE_SID:(ORACLE SYSTEM IDENTIFIER) Oracle实例是由SGA和一组后台进程组成的,实 ...
- Vue基础开发入门之简单语法知识梳理（思维导图详解）
基于个人写的以下关于Vue框架基础学习的三篇随笔,在此基础上,做一个阶段性的知识总结,以此来检验自己对Vue这一段时间学习的成果,内容不多,但很值得一看.(思维导图详解)