python 前端 JavaScript
JavaScript
一. JavaScript
- Javascript 在开发中绝大多数情况是基于对象的.也是面向对象的.
a. JavaScript的引入方式
|
1
2
3
4
5
6
7
|
#直接编写 <script> alert('hello yuan') </script> #导入文件 <script src="hello.js"></script> |
二. BOM对象
a. window对象
所有浏览器都支持 window 对象。
概念上讲.一个html文档对应一个window对象.
功能上讲: 控制浏览器窗口的.
使用上讲: window对象不需要创建对象,直接使用即可.
方法
|
1
2
3
4
5
6
7
8
9
10
|
alert() 显示带有一段消息和一个确认按钮的警告框。confirm() 显示带有一段消息以及确认按钮和取消按钮的对话框。prompt() 显示可提示用户输入的对话框。open() 打开一个新的浏览器窗口或查找一个已命名的窗口。close() 关闭浏览器窗口。setInterval() 按照指定的周期（以毫秒计）来调用函数或计算表达式。clearInterval() 取消由 setInterval() 设置的 timeout。setTimeout() 在指定的毫秒数后调用函数或计算表达式。clearTimeout() 取消由 setTimeout() 方法设置的 timeout。scrollTo() 把内容滚动到指定的坐标。 |
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Title</title>
6 <style>
7 #id1{
8 width:200px;
9 height:50px;
10 }
11 </style>
12
13 </head>
14 <body>
15
16 <input type="text" id="id1" onclick="begin()">
17 <button onclick="end()">停止</button>
18
19 <script>
20
21 function showTime() {
22 var current_time=new Date().toLocaleString();
23 var ele=document.getElementById("id1")
24 ele.value=current_time
25 }
26
27 var clock1;
28 function begin() {
29 if(clock1==undefined){
30 showTime();
31 clock1=setInterval(showTime,1000)
32 }
33 }
34
35 function end() {
36 clearInterval(clock1);
37 clock1=undefined
38 }
39
40
41 </script>
42
43
44 </body>
45 </html>
46
47 setInterval clearInterval 时间框
1 #打印hello
2 window.alert("hello")
3
4 #用户选择true或false
5 obj = window.confirm("hello word")
6 console.log(obj)
7
8 #接收用户文本内容
9 obj = window.prompt("please input content")
10 console.log(obj)
11
12 #open() 打开和一个新的窗口 并 进入指定网址
13 #参数1 什么都不填 就是打开一个新窗口.
14 #参数2.填入新窗口的名字(一般可以不填).
15 #参数3: 新打开窗口的参数.
16 open('http://www.baidu.com','','width=200,resizable=no,height=100');
17
18
19 windows 方法例子
20
21 alert confirm prompt open 例子
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title></title>
6 </head>
7 <body>
8
9
10 <script>
11 function f() {
12 console.log("hello...")
13 }
14
15 setTimeout(f,1000)
16
17 </script>
18 </body>
19 </html>
b. history
History 对象包含用户（在浏览器窗口中）访问过的 URL。
History 对象是 window 对象的一部分，可通过 window.history 属性对其进行访问。
方法
|
1
2
3
|
back() 加载 history 列表中的前一个 URL。forward() 加载 history 列表中的下一个 URL。go() 加载 history 列表中的某个具体页面。 |
1 -----------history1文件------
2
3 <a href="history2.html">clink</a>
4 <button onclick="history.forward()">button</button>
5
6 -----------history2文件--------
7
8 <button onclick="history.back()">back</button>
9
c. Location
Location 对象包含有关当前 URL 的信息。
Location 对象是 Window 对象的一个部分，可通过 window.location 属性来访问。
方法
|
1
2
3
|
location.reload() #刷新页面location.assign(URL) #跳转页面，相当于链接，可以回退location.replace(newURL) #跳转页面，覆盖当前页面 |
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title></title>
6 </head>
7 <body>
8
9 <button onclick="f()">click</button>
10
11 <script>
12
13 function f() {
14 location.reload()
15 }
16
17 </script>
18 </body>
19 </html>
四. DOM对象(DHTML)
a. 什么是DOM？
|
1
2
3
4
5
6
7
8
9
10
11
|
#DOM 是 W3C（万维网联盟）的标准。DOM 定义了访问 HTML 和 XML 文档的标准：#"W3C 文档对象模型（DOM）是中立于平台和语言的接口，它允许程序和脚本动态地访问和更新文档的内容、结构和样式。"#W3C DOM 标准被分为 3 个不同的部分： #核心 DOM - 针对任何结构化文档的标准模型 #XML DOM - 针对 XML 文档的标准模型 #HTML DOM - 针对 HTML 文档的标准模型#什么是 XML DOM？ －－－－>XML DOM 定义了所有 XML 元素的对象和属性，以及访问它们的方法。#什么是 HTML DOM？－－－－>HTML DOM 定义了所有 HTML 元素的对象和属性，以及访问它们的方法。 |
b. DOM 节点
|
1
2
3
4
5
6
7
|
#根据 W3C 的 HTML DOM 标准，HTML 文档中的所有内容都是节点(NODE)： #整个文档是一个文档节点(document对象) #每个 HTML 元素是元素节点(element 对象) #HTML 元素内的文本是文本节点(text对象) #每个 HTML 属性是属性节点(attribute对象) #注释是注释节点(comment对象) #画dom树是为了展示文档中各个对象之间的关系，用于对象的导航。 |
节点(自身)属性:
|
1
2
3
4
5
|
attributes #节点（元素）的属性节点nodeType #节点类型nodeValue #节点值nodeName #节点名称innerHTML #节点（元素）的文本值 |
导航属性:
|
1
2
3
4
5
6
|
parentElement #父节点标签元素children #所有子标签firstElementChild #第一个子标签元素lastElementChild #最后一个子标签元素nextElementtSibling #下一个兄弟标签元素previousElementSibling #上一个兄弟标签元素 |
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Title</title>
6 </head>
7 <body>
8 <div class="div1">
9 <p class="p1">hello p</p>
10 <div class="div1">hello div</div>
11 </div>
12
13 <script>
14 var ele = document.getElementsByClassName("p1")[0];
15 console.log(ele);
16 console.log(ele.nodeName);
17 console.log(ele.nodeType);
18 console.log(ele.nodeValue);
19 console.log(ele.innerText)
20 </script>
21 </body>
22 </html>
23
24 节点(自身)属性 演示
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Title</title>
6 </head>
7 <body>
8 <div class="div1">
9 <p class="p1">hello p</p>
10 <div class="div2">hello div</div>
11 </div>
12
13 <script>
14 var ele = document.getElementsByClassName("p1")[0];
15 var ele2 = ele.parentNode; #父亲标签
16 console.log(ele2.nodeName);
17 var ele3 = ele.nextElementSibling; #兄弟标签
18 console.log(ele3.nodeName);
19 console.log(ele3.innerHTML)
20 </script>
21 </body>
22 </html>
23
24 导航属性 演示
c. 节点查找
直接查找
|
1
2
3
4
|
document.getElementById(“idname”)document.getElementsByTagName(“tagname”)document.getElementsByName(“name”)document.getElementsByClassName(“name”) |
局部查找
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Title</title>
6 </head>
7 <body>
8 <div id="div1">
9
10 <div class="div2">i am div2</div>
11 <div name="yuan">i am div2</div>
12 <div id="div3">i am div2</div>
13 <p>hello p</p>
14 </div>
15
16 <script>
17
18 var div1=document.getElementById("div1");
19
20 var ele= div1.getElementsByTagName("p");
21 alert(ele.length);
22
23 var ele2=div1.getElementsByClassName("div2");
24 alert(ele2.length);
25 </script>
26 </body>
27 </html>
28
29 局部查找只支持两种
d. DOM Event(事件)
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
|
onclick 当用户点击某个对象时调用的事件句柄。ondblclick 当用户双击某个对象时调用的事件句柄。onfocus 元素获得焦点。 练习：输入框onblur 元素失去焦点。 应用场景：用于表单验证,用户离开某个输入框时,代表已经输入完了,我们可以对它进行验证.onchange 域的内容被改变。 应用场景：通常用于表单元素,当元素内容被改变时触发.（三级联动）onkeydown 某个键盘按键被按下。 应用场景: 当用户在最后一个输入框按下回车按键时,表单提交.onkeypress 某个键盘按键被按下并松开。onkeyup 某个键盘按键被松开。onload 一张页面或一幅图像完成加载。onmousedown 鼠标按钮被按下。onmousemove 鼠标被移动。onmouseout 鼠标从某元素移开。onmouseover 鼠标移到某元素之上。onmouseleave 鼠标从元素离开onselect 文本被选中。onsubmit 确认按钮被点击。 |
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title></title>
6 </head>
7 <body>
8
9 <div onclick="alert('单击事件')">单击事件</div>
10 <div ondblclick="alert('双击事件')">双击事件</div>
11
12
13 <input type="text" value="请输入姓名" onfocus="enter(this)" onblur="exit(this)">
14
15
16 <script>
17 function enter(self){
18 self.value="";
19 }
20
21 function exit(self){
22 if(self.value.trim()==""){
23 self.value="请输入姓名";
24 }
25 }
26
27 </script>
28
29 </body>
30 </html>
31
32 onfocus onblur 表单输入例子
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title></title>
6 <script>
7 window.onload=function () {
8 var ele=document.getElementsByClassName("div1")[0];
9 console.log(ele.innerText)
10 }
11 </script>
12 </head>
13 <body>
14
15 <div class="div1">hello div</div>
16
17
18 </body>
19 </html>
20
21 onload js代码最后执行演示
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title></title>
6 </head>
7 <body>
8
9 <select name="" class="select_pro">
10 <option value="1">河南省</option>
11 <option value="2">湖南省</option>
12 <option value="3">云南省</option>
13 </select>
14
15
16 <select name="" class="select_city">
17
18 </select>
19
20
21 <script>
22 var info={"河南省":["郑州","洛阳","开封"],"湖南省":["湘潭","长沙","岳阳"],"云南省":["大理","昆明"]}
23
24 var ele=document.getElementsByClassName("select_pro")[0];
25 var ele_2=document.getElementsByClassName("select_city")[0];
26 ele.onchange=function(){
27 var arrs=ele.children;
28
29
30 var sindex=this.selectedIndex; // 得到一个数字
31
32 var province=arrs[sindex].innerText; // 得到省份
33 var citys_arr=info[province];
34 console.log(citys_arr);
35
36 var ele2_children=ele_2.children;
37
38
39 // for (var j=0;j<ele2_children.length;j++){
40 // ele_2.removeChild(ele2_children[0])
41 // }
42
43 ele_2.options.length=0; // 清空select的子元素
44
45 for (var i=0;i<citys_arr.length;i++){
46
47 var option=document.createElement("option");
48
49 option.innerText=citys_arr[i];
50 ele_2.appendChild(option);
51 }
52 }
53
54
55 </script>
56 </body>
57 </html>
58
59 onchange 二级联动省份演示
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Title</title>
6
7 <style>
8 .outer{
9 margin: 0 auto;
10 background-color: darkgray;
11 width: 80%;
12 height: 600px;
13 margin-top: 30px;
14 word-spacing: -5px;
15
16 }
17
18 #left {
19 display: inline-block;
20 width: 100px;
21 height: 140px;
22 background-color: wheat;
23 text-align: center;
24 }
25
26 #choice{
27 display: inline-block;
28 height: 140px;
29 background-color: darkolivegreen;
30
31 vertical-align: top;
32 padding:0 5px;
33 }
34
35 #choice button{
36 margin-top: 20px;
37 }
38
39 #right{
40 display: inline-block;
41 width: 100px ;
42 height: 140px;
43 background-color: wheat;
44 text-align: center;
45 line-height: 140px;
46
47 }
48
49 </style>
50 </head>
51 <body>
52
53
54
55 <div class="outer">
56
57 <select multiple="multiple" size="5" id="left">
58 <option>红楼梦</option>
59 <option>西游记</option>
60 <option>水浒传</option>
61 <option>JinPingMei</option>
62 <option>三国演义</option>
63 </select>
64
65
66
67
68 <span id="choice">
69 <button id="choose_move"> > </button><br>
70 <button id="all_move"> >> </button>
71 </span>
72
73
74
75 <select multiple="multiple" size="10" id="right">
76 <option>放风筝的人</option>
77 </select>
78
79
80 </div>
81
82
83
84
85 <script>
86
87 var choose_move=document.getElementById("choose_move");
88 var all_move=document.getElementById("all_move");
89
90 var right=document.getElementById("right");
91 var left=document.getElementById("left");
92 var options=left.options;
93
94
95
96 choose_move.onclick=function(){
97
98 for (var i=0; i<options.length;i++){
99
100 var option=options[i];
101 if(option.selected==true){
102
103 // var news=option.cloneNode(true);
104 // console.log(news);
105
106 right.appendChild(option);
107 i--;
108 }
109 }
110 };
111
112 all_move.onclick=function(){
113
114 for (var i=0; i<options.length;i++){
115
116 var option=options[i];
117
118 right.appendChild(option);
119 i--;
120
121 };
122 };
123
124
125
126
127 /*
128 var buttons=document.getElementsByTagName("button"