Web 前端 注意知识点
一. 前端使用技巧：
1. button的用法。在使用按钮时可以自由在内设置style属性，来改变形态。可以给予type=sbumit提交属性。
2. 各种使用符号：
1 # <!--小于 大于 & 版权所有标志 注册商标 TM--> 2 <div><</div> 3 <div>></div> 4 <div>&</div> 5 <div>©</div> 6 <div>®</div> 7 <div>™</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 打印，包括标签和文本信息a 12 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 # // 修改class 11 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.修改元素内容
<h1 id=”header”>Old Header</h1>
<script>
var element=document.getElementById(“header”);
element.innerHTML=”New Header”;
</script>
2.修改图片内容
<img id=”image” src=”smiley.gif”>
<script>
document.getElementById(“image”).src=”landscape.jpg”;
</script>
【js语法】：
1.修改元素的变量
<button onclick=”getElementById(‘demo’).innerHTML=Date()”>现在的时间是?</button>
<p id=”demo”></p>
2.修改自身的变量(this自身元素的作用就是利用)
<body>
<button onclick=”this.innerHTML=Date()”>现在的时间是?</button>
</body>
【javascript:void(0) 含义】：
1.超链接
<body>
<a href=”javascript:void(0)”>单此处什么也不会发生</a>
</body>
2.用于警告，弹窗
<body>
<a href=”javascript:void(alert(‘Warning!!!’))”>点我!</a>
</body>
【事件】：
1.从事件处理器调用一个函数
<script>
function changetext(id){
id.innerHTML=”Ooops!”;
}
</script>
</head>
<body>
<h1 onclick=”changetext(this)”>点击文本!</h1>
</body>
2.移入移出时触发
<body>
<div onmouseover=”mOver(this)” onmouseout=”mOut(this)” style=”width:120px;height:20px;padding:40px;”>Mouse Over Me</div>
<script>
function mOver(obj){
obj.innerHTML=”Thank You”
}
function mOut(obj){
obj.innerHTML=”Mouse Over Me”
}
</script>
3.点击触发事件
<div onmousedown=”mDown(this)” onmouseup=”mUp(this)” style=”width:90px;height:20px;padding:40px;”>Click Me</div>
<script>
function mDown(obj)
{
obj.style.backgroundColor=”#1ec5e5″;
obj.innerHTML=”Release Me”
}
function mUp(obj)
{
obj.style.backgroundColor=”#D94A38″;
obj.innerHTML=”Thank You”
}
</script>
【计时事件】：
1.定时器
<p>单击按钮每3秒出现一个“Hello”警告框。</p>
<p>再次点击警告框，经过3秒出现新的警告框，这将一直执行 …</p>
<button onclick=”myFunction()”>点我</button>
<script>
function myFunction(){
setInterval(function(){alert(“Hello”)},3000);
}
</script>
2.显示一个时钟
<p>在页面显示一个时钟</p>
<p id=”demo”></p>
<script>
setInterval(function(){myTimer()},1000);
function myTimer(){
var d=new Date();
var t=d.toLocaleTimeString();
document.getElementById(“demo”).innerHTML=d;
}
myTimer();
</script>
【date时间对象】：
1.时间对象的命令
toDateString() 把 Date 对象的日期部分转换为字符串。
toISOString() 使用 ISO 标准返回字符串的日期格式。
toJSON() 以 JSON 数据格式返回日期字符串。
toLocaleDateString() 根据本地时间格式，把 Date 对象的日期部分转换为字符串。
toLocaleTimeString() 根据本地时间格式，把 Date 对象的时间部分转换为字符串。
toLocaleString() 据本地时间格式，把 Date 对象转换为字符串。
toString() 把 Date 对象转换为字符串。
toTimeString() 把 Date 对象的时间部分转换为字符串。
toUTCString() 根据世界时，把 Date 对象转换为字符串。
UTC() 根据世界时返回 1970 年 1 月 1 日 到指定日期的毫秒数。
【定时器】：
1.
setTimeout(function () {
console.log(1);
},2000); // 1000毫秒 = 1s
setInterval(function () {
console.log(2);
});
// 格式： setTimeout（函数，时间）；
简易格式：
function fn() {
console.log(3);
}
setTimeout(fn,2000);
JavaScript 进阶二.函数
【时间模型】：
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<title>Title</title>
<style>
</style>
</head>
<body>
<div id=”body”></div>
<script>
// 获取当前时间
var data=new Date();
alert(data);
// var strap = data.getTime(); // 获取时间轴时间
var year = data.getFullYear();
var month = data.getMonth()+1; // 获取月份，取值为0-11之间的整数，所以要得正常月份需要在后面 +1
var date = data.getDate(); // 获取周几 取值为 0-6之间的整数 所以需要在后面 +1
var hours = data.getHours();
var minutes = data.getMinutes();
var seconds = data.getSeconds();
document.body.innerHTML = year + ‘年’+ month + ‘月’ + date + ‘日’ + hours + ‘时’ + minutes + ‘分’ + seconds + ‘秒’;
</script>
</body>
</html>
【定时器】：
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<title>Title</title>
<style>
</style>
</head>
<body>
<script>
setTimeout(function () {
// 延迟定时器 2000毫秒后执行一次
console.log(1);
},2000); // 1000毫秒 = 1s
setInterval(function () {
// 隔1000毫秒后一直不停的在执行
console.log(2);
});
// 格式： setTimeout（函数，时间）；
function fn() {
console.log(3);
}
setTimeout(fn,2000);
</script>
</body>
</html>
【清除计时器】：
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<title>Title</title>
<style>
span{
color: red;
font-size: 20px;
}
div{
width: 500px;
height: 50px;
line-height: 50px;
text-align: center;
}
</style>
</head>
<body>
<div id=”box”>
<p> 还有<span id=”timer”>5s</span>就开始！ </p>
</div>
<script>
var oTime = document.getElementById(‘timer’);
var num = 5;
var time;
time = setInterval(function () {
num –; // 逐渐往下减
oTime.innerHTML = num +’s’; //打印
if(num === 1){
clearInterval(time);
// clearTimeout(time), 前面用哪个定时器后面就跟哪个，要一一对应
window.location.href = ‘http://www.baidu.com’;
// 去某个地方的固定写法
}
},1000);
</script>
</body>
</html>
【有名函数 匿名函数】：
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<title>Title</title>
<style>
div{
width: 100px;
height: 100px;
background: #5d49ff;
margin: 5px;
}
</style>
</head>
<body>
<div id=”box1″></div>
<div id=”box2″></div>
<script>
var oBox1 = document.getElementById(‘box1’);
var oBox2 = document.getElementById(‘box2’);
// oBox1.onclick = function () {
// console.log(1); // 点击会打印1
// };
// oBox2.onclick = function () {
// console.log(1);
// };
function fn() {
console.log(1); // 设置值，可以直接调用
}
oBox1.onclick = fn; // 如果加括号会自动执行， 一般不用
oBox2.onclick = fn;
</script>
</body>
</html>
【函数定义 函数表达式】：
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<title>Title</title>
<style>
</style>
</head>
<body>
<script>
fn();
function fn() {
alert(1);
}; //函数定义 可以在定义前加括号执行，也可以在定义后加括号执行
// fn();
var fn = function () {
alert(1); // 通过var 的函数。只能在后面运行
}; // 效果一样
fn();
// 函数表达式
!function () {
alert(6)
}();
+function () {
alert(8)
}();
(function () {
alert(9)
})();
(function () {
alert(999) //国外使用方法，国内一般不用
}());
</script>
</body>
</html>
【实参 形参 不定参】：
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<title>Title</title>
<style>
</style>
</head>
<body>
<script>
var s=55;
fn(s); // 形参 相当于局部变量，命名规则和var相同
function fn(x){
alert(x);
};
fn(666); // 实参 执行时，直接加括号插入参数执行
sum(1,2,3,4,5,6);
function sum(x,y,z) { // 一一对应，所以会打印出6
console.log(x+y+z);
}
sum(1,2,3);
function sum(x,y,z,q,w,e) {
console.log(q);
// x = x||6;
// y = y||0;
// z = z||0;
q = q || 666; // 设置未传入实参的形参变量
w = w || 0;
e = e || 0;
console.log(x+y+z+q+w+e);
}
// 不定参
sum(1,2,3,4,5,6,7,8,9);
function sum() {
console.log(arguments.length);
console.log(arguments[2]);
var x = 0;
for(var i = 0; i< arguments.length; i++){
x += arguments[i];
}
console.log(x);
}
// 每个函数都默认返回 undefined
function fn() {
alert(666); // 执行完以后返回值
return(999);
}
var m = fn();
alert(m);
</script>
</body>
</html>
【作用域】：
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<title>Title</title>
<style>
</style>
</head>
<body>
<script>
alert(a);
function a() {
alert(2);
}
a();
alert(a);
/*
1 找
a = function a() {
alert(2);
}
2 执行
alert(a); ===》 转变为函数块
a(); 函数调用 是新的作用域 只要是作用域 解析时就要分两步
1 找 (没有var 和 函数 ， 继续往下执行)
2执行
alert（2）； ===》2
alert（a）； ===》函数块
*/
var a = 1;
function fn() {
alert(2);
a = 3;
// var a =3; 当子域找不到值时 会修改父级的
}
fn();
alert(a);
/*
1 找
a = undefined ===> a =1;
fn = function fn() {
alert(2);
a = 3;
}
2 执行
a = 1;
fn();
1 找
a = undefined; ===>3
2 执行
alert(2); ===>2
a = 3; 找不到修改父级 如果是 var a=3; 则执行外边的var这属于局部变量与 全局变量的关系
alert(a); ===>3
*/
</script>
</body>
</html>
【敌军还有30秒到达战场–作业】：
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<title>Title</title>
<style>
div{
width: 100%;
height:100px;
line-height: 100px;
text-align: center;
font-size: 30px;
}
span{
color: red;
font-size: 35px;
}
p{
color: red;
font-size: 50px;
}
</style>
</head>
<body>
<div id=”box”>敌军还有 <span id=”box2″>5</span>秒到达战场 </div>
<div id=”box1″></div>
<script>
var oBox = document.getElementById(‘box’);
var aTime = document.getElementById(‘box1’);
var wart = document.getElementById(‘box2’);
var num = 5;
var time;
time = setInterval(function () {
num –;
wart.innerHTML = num;
if (num === 0){
oBox.innerHTML = “<p>全军出击！！！<p>”;
clearInterval(time);
}
},1000);
function btime() {
var data=new Date();
var year = data.getFullYear();
var month = data.getMonth()+1;
var date = data.getDate();
var hours = data.getHours();
var minutes = data.getMinutes();
var seconds = data.getSeconds();
hours = toTwo(hours);
minutes = toTwo(minutes);
seconds = toTwo(seconds);
function toTwo(n){
if (n<10){
n = ‘0’ + n;
}
return n;
}
aTime.innerHTML = year + ‘年’ + month + ‘月’ + date +
‘日’ + hours + ‘时’ + minutes + ‘分’ + seconds + ‘秒’;
};
btime();
setInterval(btime,1000);
</script>
</body>
</html>