webAPI: 密码框的密码显示和隐藏的功能
本帖最后由 clearwater 于 2020-3-3 11:15 编辑与问题没有直接性的回复－－－路过、支持、点赞、感谢分享、我也不懂、我也正在学，请不要回复。
以下三个问题，没有相关性，都是我存的零碎的问题一起请教大伙。
1、下面的代码出自至某前端视频教程。这是仿京东的密码登录框，点击小眼睛，密码显示；再点小眼睛，密码隐藏。
我基本上都看懂了，跟着抄也做出来了。－－－教程的代码附在最后面。
但是我有一个问题：35-37行中，为什么要加一个'label'的标签，把图片包起来呢？它在这里起到什么作用？我把label去掉，功能照旧。
（我以前学的这个label的标签，是把光标定位到input里。但是这里我没有看出是起到啥作用。）
链接: https://pan.baidu.com/s/1dDrEvcsMXtdb9D7HtbT4Dg 提取码: mjyj （度盘里放的是代码和图片，代码和下面附的是一样的，多了图片）
2、该套视频教程中老师建议CSS属性值用双引号，JS属性值用单引号。为啥要这样区分？我的意思是都用双引号不行或不好吗？不好在哪？
3、我还没学到框架这块，不过我想过这个问题了，借这个机会请大神简单、通俗点一下。不用介绍太复杂或太详细，因为我还没学到这块，相关的术语或语法我也听不懂。
国外用vue的多不多？ 假如我用vue的话，和一个老外朋友共同写一个网站，会不会无法共同协作？
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.box {
position: relative;
width: 400px;
border-bottom: 1px solid #ccc;
margin: 100px auto;
}
.box input {
width: 370px;
height: 30px;
border: 0;
outline: none;
}
.box img {
position: absolute;
top: 2px;
right: 2px;
width: 24px;
}
</style>
</head>
<body>
<div class="box">
<label for="">
<img src="images/close.png" alt="" id="eye">
</label>
<input type="password" name="" id="pwd">
</div>
<script>
// 1. 获取元素
var eye = document.getElementById('eye');
var pwd = document.getElementById('pwd');
// 2. 注册事件 处理程序
var flag = 0;
eye.onclick = function() {
// 点击一次之后， flag 一定要变化
if (flag == 0) {
pwd.type = 'text';
eye.src = 'images/open.png';
flag = 1; // 赋值操作
} else {
pwd.type = 'password';
eye.src = 'images/close.png';
flag = 0;
}
}
</script>
</body>
</html> 现在都流得HTML5了, 精简了很多标签. 本帖最后由 幼稚鬼 于 2020-3-3 10:01 编辑
问题1： label标签用于包裹元素或关联指定元素，包裹用法：
<label>男<input type="radio"/></label>
<label>女<input type="radio"/></label>
当在页面中点击文字“男”、“女”，会触发同一个label包裹的单选框进行选中。
关联元素：不用包裹指定元素就能关联触发，用for="目标元素ID"，例子看这个 https://www.w3school.com.cn/tags/tag_label.asp
问题2： 我想老师推荐css用双引号，而js用单引号的原因，前者是出于规范和减少引号冲突的目的，比如
div:after{
content: "I Said Don't Touch Me";
}
里面的句子出现了单引号，如果再用单引号包裹又会出现你上个帖子的问题。
js虽然也有同样的问题，但一般用于修改页面元素、css样式，其中css样式又有用到引号，一单一双包裹就不容易冲突，案例如下：
var divElem = document.getElementById('test');
divElem.setAttribute('style','font-family:"微软雅黑";color: #fff; ');
js设置某个元素的"style"属性，里面有可能用到双引号，这样就不用容易冲突，也减少考虑符号转义问题。 1.label 元素不会向用户呈现任何特殊效果，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。你的label标签for属性要取绑定下面的一个id值才有存不存在的意义
2.js属性值和css属性用不同的引号，一是为了更直观的区分，二就是养成习惯，操作复杂时不容易产生语法错误
3.国内主要用vue ，国外没多少用，不过还是有的，合作出一个项目文档就好了。 第一个问题 猜测是为了点击小眼睛时让光标继续保持在input里不然你点了小眼睛 焦点会失焦，键盘会收起
第二个问题 这只是一种统一规范，是大厂们或者什么人一起制定的，但是其实浏览器对你单引号还是双引号无所谓，你爱怎么写怎么写，不过你单双引号随便写很混乱的话就感觉很low、
第三个问题 国外用的也挺多的 如果老外也是vue那不存在协同问题 只存在你听不听得懂他说话。另外一个项目用什么框架肯定是提前商量好的然后使用相同的 不可能你用vue老外用react 你把35行改成
<label for="pwd">
再试试就懂了 本帖最后由 clearwater 于 2020-3-3 11:27 编辑
@幼稚鬼
@打工仔-知恩
@linguo2625469
非常感谢三位大神的帮助。在2-3天内，给各位各评一个热心。（今天早上一下子我都用光了好多，不知还有没有能量，所以估计要等明天才开始评分。）
我手上有多少能量，先回答先评，后面的不要误会。
另外，由于这几天，我给别人有时候只给一个热心，有时只给一个CB，所以论坛系统还给我的热心和CB币出现的时间也不是对等，所以万一我手上有成对的CB和热心，我就给成对的；假如没有，我就只给热心，希望各位不要介意，或误会。和答案优质与否，无关。
P.S. @幼稚鬼
等给本楼的人都评好分之后，我再给您补两个CB币，上帖我手滑，点错了。
这不是清水吗 好久不见
你之前的帖子我也参与过耶
本帖最后由 打工仔-知恩 于 2020-3-3 18:53 编辑clearwater 发表于 2020-3-3 11:14
@幼稚鬼
@打工仔-知恩
@linguo2625469
没事 评不评分什么的不重要，主要是能一起学习，进步就行了:victory:
页:
[1]