Web ?前端 ?注意知识点

发布时间：2023-09-06 02:23责任编辑：傅花花关键词：Web 前端

一. 前端使用技巧：

　　1. button的用法。在使用按钮时可以自由在内设置style属性，来改变形态。可以给予type=sbumit提交属性。

　　2. 各种使用符号：

1 # <!--小于 ?大于 ?& ?版权所有标志 ??注册商标 ??TM-->2 　　<div>&lt;</div>3 　　<div>&gt;</div>4 　　<div>&amp;</div>5 　　<div>&copy;</div>6 　　<div>&reg;</div>7 　　<div>&trade;</div>

　　3. <img>标签：

1 　　　　 ??# <!--本地引入 ?相对路径 ???alt图像的替代文本-->2 ???　　　　 <img src="img/a.jpg" alt="小男孩的图片">

　　4. <a>标签：

1 　　　　 ???# <!--超链接-->2 　　　　 ???<a href="http://www.baidu.com">百度</a>3 ???　　　　 <a href="http://www.baidu.com" target="_blank">新的打开</a>4 ???　　　　 <a href="#">返回顶部</a>5 ???????　　　　 ?????<!--用于刷新或点击-->6 ??　　　　 ?<a href="javascript:void (0)">死链接</a>

　　5. input标签的类型与属性：

 ????1 　　 ????# <!--submit 把表单数据提交到 ?web服务器 ??reset重置--> ????2 ????????<input type="submit" value="提交"> <input type="reset"value="重置">

　　6. 在select 下拉框中：

　　　　* option：表示下拉选项的数量。

　　　　* selected：表示下拉框的选中。

　　7. <a>标签的四种状态：

　　　　* link : 未访问过的样式。

　　　　* visited：访问过后的样式。

　　　　* hover：划过的样式。

　　　　* active：激活的样式。

　　8. align标签的使用：

　　　　在表格或布局中，可以给予align标签为左或者右的属性，会自由想左或者右浮动。

　　9. outline:none; 用来清除背景与边框之间细微的颜色。

　　10。四大定位属性：

　　　　* static：默认属性

　　　　* relative：相对定位

　　　　* absdute：绝对定位

　　　　* fixed：固定定位

　　11. javaScript的两种打印：

　　　　* console.log(str)：控制台打印

　　　　* alert( " 陌影 " )：弹窗打印

　　12. js修改文本的两种方式：

 1 ????????????# // 获取元素赋值给变量 2 ???????????# // 声明符 ?变量 ??访问作用 ??获取ID名为text的元素 3 ????????????var ?Text = document.getElementById(‘text‘); 4 ????????????# // 打印纯文本信息，会把标签过滤掉 ?复给str 5 ????????????var str = Text.innerText; 6 ????????????# // 打印信息 7 ????????????console.log(str) 8 ????????????#// 更改文本信息 9 ????????????Text.innerText=‘哈哈‘10 11 ?????????????# ?// innerHTML 打印，包括标签和文本信息a12 ????????????var str1 = Text.innerHTML;13 ???????????# ??// 打印信息14 ????????????console.log(str1)15 ????????????# ?// 更改信息16 ????????????Text.innerHTML = ‘轩辕‘

　　13. js的六大事件：

　　　　* onclick：单击事件

　　　　* ondblclick：双击事件

　　　　* onmouseenter：鼠标划入事件

　　　　* onmouseleave：鼠标划出事件

　　　　* onresize：窗口变化

　　　　* onchange：改变下拉框

 1 ?????<a href="javascript:void(0)" class="btn">按钮</a> 2 ?????<label for="add">请选择地区</label> 3 ?????<select name="add" id="add"> 4 ?????????<option value="1">轩辕</option> 5 ?????????<option value="1">慕容</option> 6 ?????????<option value="1">欧阳</option> 7 ?????????<option value="1">上官</option> 8 ?????</select> 9 ?????<!--获取按钮-->10 ?????<script>11 ?????????var btn = document.querySelector(‘.btn‘)12 ?????????btn.onclick = function () {13 ?????????????console.log(‘单击‘);14 ?????????};15 ?????????btn.onbdlclick = function () {16 ?????????????console.log(‘双击666‘);17 ?????????};18 ?????????btn.onmouseenter = function () {19 ?????????????console.log(‘移入‘);20 ?????????};21 ?????????btn.onmouseleave = function () {22 ?????????????console.log(‘移出‘);23 ?????????};24 ?????????var add = document.getElementById(‘add‘);25 ?????????????add.onchange = function () {26 ?????????????????console.log(‘下拉变化‘);27 ?????????????};28 ?????????window.onresize = function () {29 ?????????????console.log(‘窗口变化‘);30 ?????????};31 ?????</script>

　　14. this 表示当前的元素或标签。

　　15. 标签分两种，一种是合法标签，一种是自定义标签。示例：

1 <button class="btn btn-primary" id="submit" data-user-id="{{ user.id }}">修改</button>2 # jQ 获取标签内的自定义数据3 var user_id = $(this).attr("data-user-id");

　　16. 在js中查看元素的类型：typeof( );

　　　 js中返回元素的长度用：length( );

　　17. 利用js进行css的属性样式修改：

1 ??????<div id="box"></div>2 ??????<script>3 ??????????var box = document.getElementById(‘box‘);4 ??????????????box.style.width = "200px";5 ??????????????box.style.height = "120px";6 ??????????????box.style.marginTop = "20px";7 ??????????????box.style.marginLeft = "auto";8 ??????</script>

　　18. 利用js进行属性操作：

 1 ???????<div id="box" class="box1" name="轩辕"></div> 2 ?3 ???????<script> 4 ??????????# ?// 操作标签属性 5 ???????????var box = document.getElementById(‘box‘); 6 ???????????alert(box.id); 7 ???????????# // 修改ID 8 ???????????box.id = "add"; 9 ???????????alert(box.className);10 ???????????# // 修改class11 ???????????box.className = ‘a‘;12 ???????????# // setAttribute在这里是设置的意思13 ???????????box.setAttribute(‘hello‘,‘晚上好‘);14 ???????????# // 修改标签属性值15 16 ???????</script>

　　19. js中简单的数据类型：

 1 ????<script> 2 ?????????# <!--基本的数据类型--> 3 ???????# // string 4 ???????var name = ‘hallo‘; 5 ???????alert (typeof name) 6 ?7 ????????# // 数字 8 ????????var age = 18; 9 ???????alert(typeof age);10 11 ???????# // 布尔12 ????????var a = false;13 ????????alert(typeof a);14 15 ???????# ?// undefined 未定义16 ????????var b;17 ????????alert(typeof b);18 19 ????????# // 空数据20 ????????var c = null;21 ????????alert(typeof c);22 23 ????????# // 对象数据24 ????????var arr= [1,2,3,4,5];25 ????????alert(typeof arr);26 27 ????????var arr1 ={gander:"nan","age":18};28 ????????alert(typeof arr1);29 30 ????????# // 在这里加括号的作用是调用，函数不算数据类型31 ????????var box = function () {32 ????????????alert("gander"+"的");33 ????????}();34 ????????alert(typeof box);35 ????</script>

　　20. js配合button修改标签内容：

 1 ????????<h1>我的第一段 JavaScript</h1> 2 ????????<p id="demo"> 3 ????????JavaScript 能改变 HTML 元素的内容。 4 ????????</p> 5 ????????<script> 6 ????????function myFunction() 7 ????????{ 8 ????????????x=document.getElementById("demo"); ?// 找到元素 9 ????????????x.innerHTML="Hello JavaScript!"; ???// 改变内容10 ????????}11 ????????</script>12 ????????<button type="button" onclick="myFunction()">点击这里</button>\

　　21. js配合button修改元素：

 1 ????????<p id="demo"> 2 ????????JavaScript 能改变 HTML 元素的样式。 3 ????????</p> 4 ????????<script> 5 ????????function myFunction() 6 ????????{ 7 ????????????x=document.getElementById("demo") // 找到元素 8 ????????????x.style.color="#ff0000"; ?????????// 改变样式 9 ????????}10 ????????</script>11 ????????<button type="button" onclick="myFunction()">点击这里</button>

22. js语法：

 1 ??????????<p id="demo"></p> 2 ??????????<script> 3 ??????????var x, y, z; 4 ??????????x = 5 5 ??????????y = 6; 6 ??????????z = (x + y) * 10; 7 ??????????document.getElementById("demo").innerHTML = z; 8 ???????9 ?---------------------------------------------------------------------------------------------------------------------10 ?11 ?????????<h1>我的 Web 页面</h1>12 ?????????<p id="demo">一个段落。</p>13 ?????????<div id="myDIV">一个 DIV。</div>14 ?????????<script>15 ?????????document.getElementById("demo").innerHTML="你好 Dolly";16 ?????????document.getElementById("myDIV").innerHTML="你最近怎么样?";17 ?????????</script>18 19 ????????# 函数可传参，调用20 ????????<p id="demo"></p>21 ????????<script>22 ????????var x = function (a, b) {return a * b};23 ????????document.getElementById("demo").innerHTML = x(4, 3);24 25 ????????#函数的调用26 ????????<p id="demo"></p>27 ????????<script>28 ????????function myFunction(a, b) {29 ????????????return a * b;30 ????????}31 ????????document.getElementById("demo").innerHTML = myFunction(10, 2);32 ????????</script>33 34 ????????# 函数可作为值调用但需要有retuen键35 ????????<script>36 ????????function myFunction(a, b) {37 ????????????return a * b;38 ????????}39 ????????var x = myFunction(4, 3);40 ????????document.getElementById("demo").innerHTML = x;41 ????????</script>

　　23. <s> 标签可作为删除键用：

1 ????????<p><s>我的车是蓝色的。</s></p>2 ????????<p>我的新车是银色的。</p>

【js语法修改内容】：

1.修改元素内容

 1 ????????<h1 id="header">Old Header</h1> 2 ?3 ????????<script> 4 ????????var element=document.getElementById("header"); 5 ????????element.innerHTML="New Header"; 6 ????????</script> 7 ????2.修改图片内容 8 ????????<img id="image" src="smiley.gif"> 9 10 ????????<script>11 ????????document.getElementById("image").src="landscape.jpg";12 ????????</script>

【js语法】：

1 ????1.修改元素的变量2 ????????<button onclick="getElementById(‘demo‘).innerHTML=Date()">现在的时间是?</button>3 ????????<p id="demo"></p>4 5 ????2.修改自身的变量(this自身元素的作用就是利用)6 ????????<body>7 ????????<button onclick="this.innerHTML=Date()">现在的时间是?</button>8 ????????</body>

【javascript:void(0) 含义】：

1 ????1.超链接2 ????????<body>3 ????????<a href="javascript:void(0)">单此处什么也不会发生</a>4 ????????</body>5 6 ????2.用于警告，弹窗7 ????????<body>8 ????????<a href="javascript:void(alert(‘Warning!!!‘))">点我!</a>9 ????????</body>

【事件】：

 1 ????1.从事件处理器调用一个函数 2 ????????<script> 3 ????????function changetext(id){ 4 ????????????id.innerHTML="Ooops!"; 5 ????????} 6 ????????</script> 7 ????????</head> 8 ????????<body> 9 10 ????????<h1 onclick="changetext(this)">点击文本!</h1>11 12 ????????</body>13 14 ????2.移入移出时触发15 ????????<body>16 ????????<div onmouseover="mOver(this)" onmouseout="mOut(this)" style="width:120px;height:20px;padding:40px;">Mouse Over Me</div>17 ????????<script>18 ????????function mOver(obj){19 ????????????obj.innerHTML="Thank You"20 ????????}21 ????????function mOut(obj){22 ????????????obj.innerHTML="Mouse Over Me"23 ????????}24 ????????</script>25 26 ????3.点击触发事件27 ????????<div onmousedown="mDown(this)" onmouseup="mUp(this)" style="width:90px;height:20px;padding:40px;">Click Me</div>28 ????????<script>29 30 ????????function mDown(obj)31 ????????{32 ????????obj.style.backgroundColor="#1ec5e5";33 ????????obj.innerHTML="Release Me"34 ????????}35 36 ????????function mUp(obj)37 ????????{38 ????????obj.style.backgroundColor="#D94A38";39 ????????obj.innerHTML="Thank You"40 ????????}41 ????????</script>

【计时事件】：

 1 ????1.定时器 2 ????????<p>单击按钮每3秒出现一个“Hello”警告框。</p> 3 ????????<p>再次点击警告框，经过3秒出现新的警告框，这将一直执行 ...</p> 4 ????????<button onclick="myFunction()">点我</button> 5 ????????<script> 6 ????????function myFunction(){ 7 ????????????setInterval(function(){alert("Hello")},3000); 8 ????????} 9 ????????</script>10 11 ????2.显示一个时钟12 ????????<p>在页面显示一个时钟</p>13 ????????<p id="demo"></p>14 ????????<script>15 ????????setInterval(function(){myTimer()},1000);16 ????????function myTimer(){17 ????????????var d=new Date();18 ????????????var t=d.toLocaleTimeString();19 ????????????document.getElementById("demo").innerHTML=d;20 ????????}21 ????????myTimer();22 ????????</script>

【date时间对象】：

1.时间对象的命令

 1 ????????toDateString() ???把 Date 对象的日期部分转换为字符串。 2 ????????toISOString() ???使用 ISO 标准返回字符串的日期格式。 3 ????????toJSON() ???以 JSON 数据格式返回日期字符串。 4 ????????toLocaleDateString() ???根据本地时间格式，把 Date 对象的日期部分转换为字符串。 5 ????????toLocaleTimeString() ???根据本地时间格式，把 Date 对象的时间部分转换为字符串。 6 ????????toLocaleString() ???据本地时间格式，把 Date 对象转换为字符串。 7 ????????toString() ???把 Date 对象转换为字符串。 8 ????????toTimeString() ???把 Date 对象的时间部分转换为字符串。 9 ????????toUTCString() ???根据世界时，把 Date 对象转换为字符串。10 ????????UTC() ???根据世界时返回 1970 年 1 月 1 日 到指定日期的毫秒数。

36. 在checkbox复选框中checked用来表示选中与不选中。

Web ?前端 ?注意知识点

原文地址：https://www.cnblogs.com/moying-wq/p/10006891.html

Web ?前端 ?注意知识点

知识推荐