一. 前端使用技巧：
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： 表示下拉选项的数量。
扫描二维码关注公众号，回复：
4197855 查看本文章
* 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.修改元素内容
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用来表示选中与不选中。