一. 前端使用技巧：
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.修改元素内容
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用来表示选中与不选中。
原文地址：https://www.cnblogs.com/moying-wq/p/10006891.html
时间： 2024-11-02 21:46:34