实习日记--day10

最新推荐文章于 2023-06-05 19:42:38 发布

xpz的三级包

最新推荐文章于 2023-06-05 19:42:38 发布

阅读量998

点赞数 2

文章标签：实习前端 JavaScript

本文链接：https://blog.csdn.net/qq_40115021/article/details/94654676

版权

前端学习

JavaScript

JavaScript

好记性不如烂笔头。
这东西跟Java没有关系
这东西跟Java没有关系
这东西跟Java没有关系
（重要的事情说三遍）
只是当年Java太火了，所以发明这门语言的公司（Netscape）的管理层希望它的外观和Java一样，能蹭蹭热度，所以就起了这个名字，但实际上它的风格完全不像Java。

JS为什么能让网页动起来

1）JavaScript 能够改变页面中的所有 HTML 元素
2）JavaScript 能够改变页面中的所有 HTML 属性
3）JavaScript 能够改变页面中的所有 CSS 样式
4）JavaScript 能够对页面中的所有事件做出反应

查找HTML元素

要想用JS改变HTML中的元素，首先就要确定你要修改哪些元素，那么怎么确定这些元素呢？计算机怎么知道你想要修改的元素在哪呢？JS中提供了三种方法让你查找HTML中的元素：

通过id找到HTML元素
通过标签名找到HTML元素
通过类名找到HTML元素

1）通过id找到HTML元素
实例：
查找id="main"的元素：

var x=document.getElementById("main");

2）通过标签名找到HTML元素
实例：
查找 id=“main” 的元素，然后查找 id=“main” 元素中的所有 <p> 元素：

var x=document.getElementById("main");
var y=x.getElementsByTagName("p");

3)通过类名找到HTML元素
实例：
查找 class=“main” 的元素：

var x=document.getElementsByClassName("main");

改变HTML

在找到我们想要修改的HTML元素之后，我们就可以来修改我们想要修改的HTML元素了，那么具体改如何进行呢？

改变HTML输出流

在JS 中，document.write() 可用于直接向 HTML 输出流写内容。
实例：
显示当前日期

<script>
document.write(Date());
</script>

在这里插入图片描述运行结果如下：

改变 HTML 内容

修改 HTML 内容的最简单的方法是使用 innerHTML 属性。
实例：
改变 <p>元素的内容：

<p id="p1">Hello World!</p>

<script>
document.getElementById("p1").innerHTML="新文本!";
</script>

在这里插入图片描述
运行结果如下，可以看到原来写在p标签中的内容被新的内容给覆盖掉了

实例：
改变

元素的内容：

<h1 id="header">旧标题</h1>
<script>
var element=document.getElementById("header");
element.innerHTML="新标题";
</script>
<p>"旧标题" 被 "新标题" 取代。</p>

在这里插入图片描述
运行结果如下：

同样地原来p标签中的内容被覆盖成为了JS代码中新的内容

改变HTML的样式

<p id="p1">Hello World!</p>
<p id="p2">Hello World!</p>
<script>
document.getElementById("p2").style.color="blue";
document.getElementById("p2").style.fontFamily="Arial";
document.getElementById("p2").style.fontSize="larger";
</script>
<p>以上段落通过脚本修改。</p>

在这里插入图片描述
运行结果如下图所示，可以看到第二个段落的样式变成了JS代码设置的样式

事件的响应

常见HTML事件

当网页已加载时
当图像已加载时
当用户点击鼠标时
当鼠标移动到元素上时
当输入字段被改变时
当提交 HTML 表单时
当用户触发按键时

点击文本

<h1 onclick="this.innerHTML='Hello!'">点击文本!</h1>

在这里插入图片描述
运行结果如下：
点击文本后
如果事件处理比较复杂，那么我们可以把上面这个例子用JS函数来实现

<script>
function changetext(id){
	id.innerHTML="Hello!";
}
</script>
</head>
<body>
<h1 onclick="changetext(this)">点击文本!</h1>

在这里插入图片描述
运行结果和上面的一致。

点击按钮

1）点击按钮改变颜色

<h1 id="id1">这是一个标题</h1>
<button type="button" onclick="document.getElementById('id1').style.color='red'">
点我!</button>

在这里插入图片描述
运行结果如下：

点击按钮后，可以看到标题的样式发生了相应的改变

2）点击按钮显示或隐藏文字

<p id="p1">这是一个文本。 这是一个文本。 这是一个文本。 这是一个文本。 这是一个文本。 这是一个文本。 这是一个文本。</p>
<input type="button" value="隐藏文本" onclick="document.getElementById('p1').style.visibility='hidden'" />
<input type="button" value="显示文本" onclick="document.getElementById('p1').style.visibility='visible'" />

在这里插入图片描述运行结果如下图
点击隐藏文本后

再点击显示文本后

分配事件

<p>点击按钮执行 <em>displayDate()</em> 函数.</p>
<button id="myBtn">点这里</button>
<script>
document.getElementById("myBtn").onclick=function(){displayDate()};
function displayDate(){
	document.getElementById("demo").innerHTML=Date();
}
</script>
<p id="demo"></p>

在这里插入图片描述
运行结果如下图所示：

点击按钮后

这段代码中的"document.getElementById(“demo”).innerHTML=Date();"
可以作为调用JS函数调用的一个模板来使用，当你想要在网页的一个地方输出调用函数后的返回值时，就可以设置getElementById()的参数来查找到相应元素，然后在等号后面设置你想要调用的函数名即可。
书读百遍，其义自见。