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 ...
随机推荐
- RESTful API/Web API
Microsoft REST API Guidelines Are Not RESTful White House Web API Standards Microsoft REST API Guide ...
- flex布局中父容器属性部分演示效果
如图可见flex的属性分为父容器和子容器的属性共12个.关于这些属性具体代表什么意思,网上有很多教程的文章,自觉不能写得比别人更好,所以这里主要写了一些例子关于父容器属性效果的演示,希望可以帮助大家理 ...
- 小白上学のcanvas零基础
<canvas> 元素 <canvas> 看起来和 <img> 元素很相像,唯一的不同就是它并没有 src 和 alt 属性.实际上,<canvas> ...
- 解决使用 swiper 常见的问题
使用 swiper 的过程中个人总结 1. swiper插件使用方法, 直接查看文档 swiper基础演示 swiper API文档 2.swiper近视初始化时, 其父级元素处于隐藏状态(displ ...
- ES6-11学习笔记--const
新声明方式:const 1.不属于顶层对象 window 2.不允许重复声明 3.不存在变量提升 4.暂时性死区 5.块级作用域 以上特性跟let声明一样,特性可看 let 的学习笔记:链接跳转 ...
- ssm项目框架搭建（增删改查案例实现）——（SpringMVC+Spring+mybatis项目整合）
Spring 常用注解 内容 一.基本概念 1. Spring 2. SpringMVC 3. MyBatis 二.开发环境搭建 1. 创建 maven 项目 2. SSM整合 2.1 项目结构图 2 ...
- phpshe xml注入
*php商城系统 xml注入* **页面样式* *Xml原理参考:* https://www.cnblogs.com/20175211lyz/p/11413335.html *漏洞函数simplexm ...
- Java连接数据库报错：com.mysql.cj.jdbc.exceptions.CommunicationsException: Communications link failure
解决方案 连接Mysql报错 The last packet sent successfully to the server was 0 milliseconds ago. The driver ha ...
- 帝国cms插件 一键替换数据表中已发表文章的内容关键字
你是不是也在优化网站,是不是网站发展了一段时间之后才来做优化的,这样当然就会导致已经发表文章里的内容关键字,不能得到替换了! 小编根据后台替换内容关键字的程序,重写了一段 通过运行单个页面就能直接替换 ...
- Gitlab图床配置
注意,使用图床,如果文件在外网打开,图片不会正常显示,因为图片存储在内部的Gitlab服务器上 自行搜索Picgo安装配置,需要安装node.js 项目链接:D-W-X/picgo-plugin- ...