JS初学2.0

最新推荐文章于 2024-07-12 16:27:40 发布

Xinxin Xiangrong

最新推荐文章于 2024-07-12 16:27:40 发布

阅读量376

点赞数

文章标签： javascript 前端

本文链接：https://blog.csdn.net/m0_63195227/article/details/123037097

版权

本周对与游客页面进行了制作，后序发布制作过程中未解决的问题

案例之一–显示隐藏密码

分析–当鼠标点击眼睛图标时所输入的密码会显示出来
密码框

<div class="box">
	<label for=""><label>
	<input type="password" name="" id="">
</div>
.box input{
	width:370px;
	border：0；
	height:30px;
	}

.box{
	width:400px;
	border-bottom：1px solid #ccc；
	margin:100px auto;
	}

<script>
	var eye=document.getElementById('eye');
	var pwd=document.getElementById('eye');
	var flag=0;
	eye.onclick=function(){
		//利用flag变量使得再次点击眼睛时可以变为黑点
		if（flag==0）{
			pwd.type='text';
		}else{
			pwd.type='password';
		}

有关DOM的笔记
请添加图片描述
JavaScript 能改变页面中的所有 HTML 元素

JavaScript 能改变页面中的所有 HTML 属性

JavaScript 能改变页面中的所有 CSS 样式

JavaScript 能删除已有的 HTML 元素和属性

JavaScript 能添加新的 HTML 元素和属性

JavaScript 能对页面中所有已有的 HTML 事件作出反应

JavaScript 能在页面中创建新的 HTML 事件

1.获取元素

根据ID获取-- getElementByld()
根据标签名获取–getElementsByTagName
通过HTML5新增
特殊元素获取

2.事件基础

事件源
事件类型
事件处理程序

（1）事件被触发的对象
（2）如何触发–eg 鼠标点击or经过
（3）一个函数的赋值方法

eg–创建按钮获取对象数组

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<button>我是按钮</button>
<script>
    var btn = document.getElementsByTagName("button");
    console.log(btn);
</script>
</body>
</html>

文件
document

document对象是在浏览器打开后自动创建的，是整个页面的文档对象
getElementById 通过id属性值获取标签的对象
getElementByTagName 通过标签名返回一个数组
getElementByClassName 通过class属性返回一个数组
getElementByName 通过name属性返回一个数组
createElement(“标签名”) 创建指定名字的标签
innerHTML 设置标签体内容
appendChild() 追加子标签
getAttribute(“属性名”) 返回指定属性的值
setAttribute(“属性名”,“属性值”)

鼠标悬停变色

var color="";
var trs = document.getElementByTagName("tr");
for(var i=0;i<trs.length;i++){
      //悬停事件
      trs[i].onmouseover=function(){
           //记录原来的颜色
           color = this.bgColor; 
           this.bgColor="FA012A";
      }   
      //鼠标移出
      trs[i].onmouseout=function(){
           this.bgColor=color;
      }
}

Xinxin Xiangrong

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS初学2.0

本周对与游客页面进行了制作，后序发布制作过程中未解决的问题案例之一–显示隐藏密码分析–当鼠标点击眼睛图标时所输入的密码会显示出来密码框<div class="box"> <label for=""><label> <input type="password" name="" id=""></div>.box input{ width:370px; border：0； height:30px; }.box{ width:
复制链接

扫一扫