JavaWeb 学习笔记 day02 JavaScript续 JQuery

最新推荐文章于 2024-07-17 15:26:15 发布

Ghost1590

最新推荐文章于 2024-07-17 15:26:15 发布

阅读量122

点赞数

分类专栏： web 文章标签： javascript css jquery js

本文链接：https://blog.csdn.net/yu1590/article/details/119685091

版权

web 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

JavaWeb 学习笔记 day02

JavaScript
JQuery

JavaScript

JavaScript 中的事件

onload 加载完成事件：页面加载完成之后，常用于做页面 js 代码初始化操作
onclick 单击事件：常用于按钮的点击响应操作。
onblur 失去焦点事件：常用用于输入框失去焦点后验证其输入内容是否合法。
onchange 内容发生改变事件：常用于下拉列表和输入框内容发生改变后操作
onsubmit 表单提交事件：常用于表单提交前，验证所有表单项是否
onmouseover 和 onmouseout 事件：鼠标光标移动上或移开

DOM 模型

简介：DOM 全称是 Document Object Model 文档对象模型，就是把文档中的标签，属性，文本，转换成为对象来管理。

Document 对象的理解：

第一点：Document 它管理了所有的 HTML 文档内容。
第二点：document 它是一种树结构的文档。有层级关系。
第三点：它让我们把所有的标签都对象化
第四点：我们可以通过 document 访问所有的标签对象。

Document 对象中的方法介绍

document.getElementById(elementId) 通过标签的 id 属性查找标签 dom 对象，elementId 是标签的 id 属性值
document.getElementsByName(elementName) 通过标签的 name 属性查找标签 dom 对象，elementName 标签的 name 属性值
document.getElementsByTagName(tagname) 通过标签名查找标签 dom 对象。tagname 是标签名
document.createElement( tagName) 方法，通过给定的标签名，创建一个标签对象。tagName 是要创建的标签名

原生 JS 实现的小 Demo

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>07-表格隔行变色.html</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<style type="text/css">
table {
	border: 1px red solid;
	width: 500px;
	margin: auto;
}

td {
	border: 1px blue solid;
	margin: 10px;
	padding: 10px;
	text-align: center;
}

th {
	background-color: maroon;
}

.one {
	background-color: blue;
}

.two {
	background-color: green;
}

.over {
	background-color: aqua;
}
</style>

    <script type="text/javascript">
        window.onload = function () {
            let trs = document.getElementsByTagName("tr");
            var oldClass = "";
            for (let i = 1; i < trs.length; i++) {
                if (i % 2 == 0) {
                    trs[i].className = "two";
                } else {
                    trs[i].className = "one";
                }

                trs[i].onmouseover = function () {
                    oldClass =  this.className;
                    this.className = "over";
                }
                trs[i].onmouseout = function () {
                    this.className = oldClass;
                }
            }


        }

    </script>

</head>

<body>
	<table>
		<tr>
			<th>姓名</th>
			<th>年龄</th>
			<th>地址</th>
		</tr>
		<tr class="one">
			<td>高杰</td>
			<td>18</td>
			<td>闵行</td>
		</tr>
		<tr class="two">
			<td>李刚</td>
			<td>16</td>
			<td>上海</td>
		</tr>
		<tr>
			<td>赵士龙</td>
			<td>22</td>
			<td>东莞</td>
		</tr>
		<tr>
			<td>鲁宾</td>
			<td>29</td>
			<td>北京</td>
		</tr>
		<tr>
			<td>刘鹏</td>
			<td>13</td>
			<td>幼儿园</td>
		</tr>
	</table>
</body>
</html>

JQuery

简介：就是 JavaScript 和查询（Query），它就是辅助 JavaScript 开发的 js 类库。

jQuery 核心函数

简介：$ 是 jQuery 的核心函数，能完成 jQuery 的很多功能。$ ()就是调用$这个函数。

传入参数为 [ 函数 ] 时：表示页面加载完成之后。相当于 window.onload = function(){}
传入参数为 [ HTML 字符串 ] 时：会对我们创建这个 html 标签对象
传入参数为 [ 选择器字符串 ] 时： $(“#id 属性值”); id 选择器，根据 id 查询标签对象
$(“标签名”); 标签名选择器，根据指定的标签名查询标签对象
$(“.class 属性值”); 类型选择器，可以根据 class 属性查询标签对象
传入参数为 [ DOM 对象 ] 时：会把这个 dom 对象转换为 jQuery 对象

JQuery 对象与 DOM 对象

Dom 对象
① 通过 getElementById()查询出来的标签对象是 Dom 对象
② 通过 getElementsByName()查询出来的标签对象是 Dom 对象
③ 通过 getElementsByTagName()查询出来的标签对象是 Dom 对象
④ 通过 createElement() 方法创建的对象，是 Dom 对象
jQuery 对象
① 通过 JQuery 提供的 API 创建的对象，是 JQuery 对象
② 通过 JQuery 包装的 Dom 对象，也是 JQuery 对象
③ 通过 JQuery 提供的 API 查询到的对象，是 JQuery 对象
本质区别：jQuery 对象是 dom 对象的数组 + jQuery 提供的一系列功能函数。
相互转化：
① JQuery --> DOM ：通过jQuery 对象[下标]取出相应的 DOM 对象
② DOM --> JQuery：通过调用核心函数 $(DOM对象)

jQuery 选择器

由于选择器多种多样，用法过于繁琐，建议到官方帮助文档中查询，此处仅提供分类。

基本选择器
层级选择器
过滤选择器

Ghost1590

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaWeb 学习笔记 day02 JavaScript续 JQuery

JavaWeb 学习笔记 day02JavaScriptJavaScript 中的事件DOM 模型Document 对象中的方法介绍原生 JS 实现的小 DemoJQueryjQuery 核心函数JQuery 对象与 DOM 对象jQuery 选择器JavaScriptJavaScript 中的事件onload 加载完成事件：页面加载完成之后，常用于做页面 js 代码初始化操作onclick 单击事件：常用于按钮的点击响应操作。onblur 失去焦点事件：常用用于输入框失去焦点后验证其输入
复制链接

扫一扫