Skip to content

Commit fce4ec8

Browse files
coderpwh1024coderpwh1024
committed
update js
1 parent 21ecdd2 commit fce4ec8

17 files changed

+458
-0
lines changed

‎jquery/W3C/DOM/index1.html~HEAD

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>Dom树</title>
6+
</head>
7+
<body>
8+
<p id="demo1">demo</p>
9+
<p>演示:</p>
10+
<script type="text/javascript">
11+
var x = document.getElementById('demo1');
12+
document.write("<p>添加的内容是:+" + x.innerHTML + "</p>")
13+
</script>
14+
<p>hello World!</p>
15+
16+
<div id="main">
17+
<p>The Dom is very userful!</p>
18+
<p>演示:<b>getElementsByTagName</b>方法</p>
19+
</div>
20+
<script type="text/javascript">
21+
var x = document.getElementById("main");
22+
var y = x.getElementsByTagName("p");
23+
document.write('id为"main"的div中的第一段文本是:' + y[0].innerHTML);
24+
</script>
25+
<script type="text/javascript">
26+
document.write(new Date())
27+
</script>
28+
29+
30+
</body>
31+
32+
</html>

‎jquery/W3C/DOM/index2.html~HEAD

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>Title</title>
6+
</head>
7+
<body>
8+
9+
<p1 id="demo1">Hello world</p1>
10+
<script type="text/javascript">
11+
document.getElementById('demo1').innerText = 'new JavaScript!'
12+
</script>
13+
<p>上面的段落被一条 JavaScript 脚本修改了。</p>
14+
<br/>
15+
<h1 id="header">old header!</h1>
16+
<script type="text/javascript">
17+
var x = document.getElementById('header');
18+
x.innerHTML = 'new header!';
19+
</script>
20+
<p>old header 被改变为new header!</p>
21+
22+
23+
</body>
24+
</html>

‎jquery/W3C/DOM/index3.html~HEAD

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>Title</title>
6+
</head>
7+
<body>
8+
<p id="p1">Hello World!</p>
9+
<p id="p2">Helo World!</p>
10+
<script type="text/javascript">
11+
document.getElementById("p2").style.color = "blue";
12+
document.getElementById("p2").style.fontFamily = "Arial";
13+
document.getElementById("p2").style.fontSize = "larger"
14+
</script>
15+
<br/>
16+
<h1 id="id1">This is a Header</h1>
17+
<button type="button" onclick="document.getElementById('id1').style.color='red'">点击改变颜色</button>
18+
</body>
19+
</html>

‎jquery/W3C/DOM/index4.html~HEAD

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>JavaScirpt事件</title>
6+
<script type="text/javascript">
7+
function change(id) {
8+
id.innerHTML = 'Are you ok?'
9+
}
10+
11+
</script>
12+
<script type="text/javascript">
13+
function displayDate() {
14+
document.getElementById('id3').innerHTML = new Date();
15+
}
16+
17+
</script>
18+
19+
</head>
20+
<body>
21+
<h1 onclick="this.innerHTML='Thank you!'">点击看看!</h1>
22+
<br/>
23+
<h2 onclick="change(this)">点击改变</h2>
24+
<br/>
25+
<p>点击按钮就可以执行 <em>displayDate()</em> 函数。</p>
26+
27+
<button onclick="displayDate()">点击这里</button>
28+
<p id="id3"></p>
29+
<br/>
30+
<br/>
31+
32+
<p>点击按钮就可以执行 <em>displayDate()</em> 函数。</p>
33+
34+
<button id="myBtn">函数式</button>
35+
<script type="text/javascript">
36+
document.getElementById('myBtn').onclick = function () {
37+
displayDate();
38+
}
39+
function displayDate() {
40+
document.getElementById('id4').innerHTML = new Date();
41+
}
42+
</script>
43+
44+
<p id="id4"></p>
45+
46+
47+
</body>
48+
</html>

‎jquery/W3C/DOM/index5.html~HEAD

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>Title</title>
6+
</head>
7+
<body onload="checkCookies()">
8+
<script type="text/javascript">
9+
function checkCookies() {
10+
if (navigator.cookieEnabled == true) {
11+
alert('已经开始使用Cookie');
12+
} else {
13+
alert('未使用Cookie');
14+
}
15+
}
16+
17+
</script>
18+
19+
<p> 浏览器已经开始使用Cookie!</p>
20+
21+
</body>
22+
</html>

‎jquery/W3C/DOM/index6.html~HEAD

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>Title</title>
6+
<script type="text/javascript">
7+
function mychange() {
8+
var x = document.getElementById('frame');
9+
x.value = x.value.toUpperCase();
10+
}
11+
</script>
12+
13+
</head>
14+
<body>
15+
请输入英文字符<input type="text" id="frame" onchange="mychange()">
16+
<p>当您离开输入字段时，会触发将输入文本转换为大写的函数。</p>
17+
18+
19+
</body>
20+
</html>

‎jquery/W3C/DOM/index7.html~HEAD

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>Title</title>
6+
</head>
7+
<body>
8+
<div onmouseover="mOver(this)" onmouseout="mOut(this)"
9+
style="background-color: green;width: 120px;height: 220px;padding: 40px;color:#ffffff;">
10+
鼠标移动上面去
11+
</div>
12+
13+
14+
<script type="text/javascript">
15+
function mOver(Obj) {
16+
Obj.innerHTML = 'Thank you!'
17+
}
18+
19+
function mOut(Obj) {
20+
Obj.innerHTML = '移动上面去!'
21+
}
22+
23+
</script>
24+
25+
26+
</body>
27+
</html>

‎jquery/W3C/DOM/index8.html~HEAD

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>Title</title>
6+
</head>
7+
<body>
8+
<div onmousedown="mDown(this)" onmouseup="mUp(this)"
9+
style="background-color: green;width: 120px;height: 220px;padding: 40px;color:#ffffff;">
10+
鼠标移动上面去
11+
</div>
12+
13+
<script type="text/javascript">
14+
function mDown(obj) {
15+
obj.style.backgroundColor = '#1ec5e5';
16+
obj.innerHTML = '向下移动!'
17+
}
18+
function mUp(obj) {
19+
obj.style.backgroundColor = "green";
20+
obj.innerHTML = '向上移动'
21+
}
22+
23+
</script>
24+
25+
26+
</body>
27+
</html>

‎jquery/W3C/DOM/index9.html~HEAD

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
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+
<p id="p1">这是一个段落</p>
10+
<p id="p2">另外一个段落</p>
11+
</div>
12+
<script type="text/javascript">
13+
var parten = document.createElement('p')
14+
var node = document.createTextNode('这是一个新段落');
15+
parten.appendChild(node);
16+
var element = document.getElementById('div1')
17+
element.appendChild(parten);
18+
</script>
19+
20+
21+
</body>
22+
</html>

‎jquery/W3C/语法/index1.html~HEAD

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>Title</title>
6+
</head>
7+
<script type="text/javascript">
8+
document.write("<h1>This is heading</h1>");
9+
document.write("<h2>This is pagaraph.</h2>");
10+
</script>
11+
<script type="text/javascript">
12+
function myFunction() {
13+
var x = document.getElementById('demo');
14+
x.innerHTML = 'Hello JavaScript！';
15+
}
16+
</script>
17+
<script type="text/javascript">
18+
19+
function myFunction2() {
20+
var x = document.getElementById('demo2').value;
21+
if (x == '' || isNaN(x)) {
22+
alert('你输入的不是数字!');
23+
24+
}
25+
}
26+
27+
</script>
28+
<body>
29+
<p>
30+
您只能在 HTML 输出流中使用 <strong>document.write</strong>。
31+
如果您在文档已加载后使用它（比如在函数中），会覆盖整个文档。
32+
</p>
33+
<button type="button" onclick="alert('welcome!')">点击这里</button>
34+
<button type="button" onclick="myFunction()">JavaScript改变世界</button>
35+
<p id="demo">
36+
JavaScript 改变内容!
37+
</p>
38+
<h1>JavaScript第一阶段!</h1>
39+
<p>请输入数字，如果不是数字，浏览器会有提示框!</p>
40+
<input type="text" id="demo2">
41+
<button type="button" onclick="myFunction2()">点击这里</button>
42+
43+
44+
</body>
45+
</html>

‎jquery/W3C/语法/index2.html~HEAD

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>Title</title>
6+
<script type="text/javascript">
7+
function myfunction() {
8+
document.getElementById('demo1').innerHTML = '哥写的JavaScript!'
9+
}
10+
</script>
11+
<script type="text/javascript">
12+
function myfunction2() {
13+
document.getElementById('demo2').innerHTML = 'JavaScript change world!'
14+
}
15+
</script>
16+
<script type="text/javascript">
17+
document.write("<p>JavaScript!</p>")
18+
</script>
19+
20+
21+
22+
23+
</head>
24+
25+
26+
<body>
27+
<h1>My Web page</h1>
28+
<p id="demo1">a Paragraph.</p>
29+
<button type="button" onclick="myfunction()">点击这里</button>
30+
31+
<p id="demo2">my JavaScript code</p>
32+
<button type="button" onclick="myfunction2()">改变世界</button>
33+
34+
35+
</body>
36+
</html>

‎jquery/W3C/语法/index3.html~HEAD

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>Title</title>
6+
7+
</head>
8+
9+
<body>
10+
<h1>My Web Page</h1>
11+
12+
<p id="demo">A Paragraph.</p>
13+
14+
<div id="myDIV">A DIV.</div>
15+
16+
<script>
17+
document.getElementById("demo").innerHTML="Hello World";
18+
document.getElementById("myDIV").innerHTML="How are you?";
19+
</script>
20+
21+
22+
</body>
23+
</html>

‎jquery/W3C/语法/index4.html~HEAD

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>Title</title>
6+
<script type="text/javascript">
7+
function myfunction() {
8+
var name = "Are you ok?";
9+
document.getElementById('demo1').innerHTML = name;
10+
}
11+
12+
</script>
13+
14+
</head>
15+
<body>
16+
<p>店家这里可以显示隐藏的部分</p>
17+
<button type="button" onclick="myfunction()">点击看看</button>
18+
<p id="demo1"></p>
19+
20+
21+
</body>
22+
</html>

0 commit comments

Comments
 (0)