1.编写JS脚本程序
JS在网页中通常被嵌入到HTML文档中，在HTML中，JS代码需要被放入标签之中，JS代码可以嵌入到和部分
标签中的内容会优先于中的内容被加载，建议将script标签中的内容放置在结束标签之后，这样，程序会优先加载页面然后加载JS脚本，否则，先加载脚本会产生延迟。如果JS脚本内容较小，或者是某些版本检测内容（检测当前浏览器是否支持某个函数），则建议放在标签之中，因为其会被优先加载，以便进行某些处理。
- document.write(string)
该方法用于在HTML页面中打印字符串，其还可以打印HTML代码，你几乎可以使用该方法输出所有的HTML元素，部分的script框架采用该方法输出HTML页面。document.write()方法大多只用于调试。
<head> </head>
<body>
<script>
document.write("Hello World!");
//or
//document.write("<i>Hello World</i>");
</script>
</body>
</html>
提示：
- innerHTML, used to manipulate HTML elements.
- document.write(), used for testing purpose.
- console.log(), used for debugging in browser console.
- window.alert(), is used to pop-up a message or something else.
- <script>
参数：language，type，两者共同指定script的类型(language属性已经被弃用，应该尽量避免使用他)
<script language="javascript" type="text/javascript">
...
</script>
因为JS作为默认的脚本执行语言，通常情况下，type属性，也不是必须的。
-
<noscript>
当客户端浏览器不支持script时，其中的内容会被打印并执行。 -
alert(string)
该方法弹出一个提示框。 -
JS脚本也可以被单独额外的放在另一个.js文件中（该脚本中不应该包含<script>标签，因为该标签不会被加载），通常情况下，这么做会增加代码的可读性和可复用性 。
通过使用src属性（表示外部脚本的文件地址）在HTNL中y引入一个外部脚本：
<html>
<head>
<title> </title>
<script src="demo.js"></script>
</head>
<body>
</body>
</html>
- 使用**//或者/*…*/**注释代码。
| HTML | <!- -…- -> 该注释会被发送到客户端，即用户在调试端可以看到 |
|---|---|
| JSP | <%-- --%> 该注释不会被发送到客户端 |
| – | – |
- JS关键字：
2. DOM
- 定义
- 节点有父节点，子节点，兄弟节点
上图中
<html> 有两个子节点
<head> 有一个子节点一个父节点
<title> 有一个父节点，没有子节点
<body> 有两个子节点一个父节点
如下：
<p>即是<body>的子节点，<h1>的父节点
<body>
<p>
<h1>Hi</h1>
</p>
</body>
- document对象
document是JS中的一个预定义对象，可以被用于访问基于DOM的所有元素，换句话说，document是你网页中所有其他对象的所有者（或者说根），所以你可以通过document访问网页中的所有其他对象并进行修改，如：
document.body.innerHTML = "Some text";
- 查找对象
在DOM模型中，所有的HTML元素都是对象，并且所有的对象都有相应的属性和方法。document提供了特定方法同于查找对应元素，进而修改元素属性
- document.getElementById(id) 该方法通过ID查找特定元素，并返回匹配到的对象。
- document.getElementsByClassName(name) 通过类名（class name）查找，该方法有可能匹配到多个对象，若匹配到多个对象，则返回匹配到的所有对象组成的数组
- document.getElementsByTagName(name) 通过标签名（tag name）查找，该方法也可能匹配多个对象，并返回一个数组。
如
var elem = document.getElementById("demo");
elem.innerHTML = "Hello World!";
var arr = document.getElementsByClassName("demo");
//accessing the second element
arr[1].innerHTML = "Hi";
<p>hi</p>
<p>hello</p>
<p>hi</p>
<script>
var arr = document.getElementsByTagName("p");
for (var x = 0; x < arr.length; x++) {
arr[x].innerHTML = "Hi there";
}
</script>
- element.childNodes 返回所有子节点组成的数组
- element.firstChild 返回第一个子节点
- element.lastChild 返回最后一个子节点
- element.hasChildNodes 返回true如果element拥有任何一个子节点
- element.nextSibling 返回下一个兄弟节点
- element.previousSibling 返回上一个兄弟节点
- element.parentNode 返回父节点
<html>
<body>
<div id ="demo">
<p>some text</p>
<p>some other text</p>
</div>
<script>
var a = document.getElementById("demo");
var arr = a.childNodes;
for(var x=0;x<arr.length;x++) {
arr[x].innerHTML = "new text"; <!--修改标签文本-->
}
</script>
</body>
</html>
- 修改对象属性
- 事实上可以通过（JS）DOM修改元素的所有属性
<img id="myimg" src="orange.png" alt="" />
<script>
var el = document.getElementById("myimg");
el.src = "apple.png";
</script>
<a href="http://www.example.com">Some link</a>
<script>
var el = document.getElementsByTagName("a");
el[0].href = "http://www.sololearn.com";
</script>
- 通过style对象修改HTML标签样式，style对象可以访问所有外观属性。
所有的CSS属性都可以被JS设置和定义，不要在属性名中使用“-”符号，使用驼峰标识代替表示。
<div id="demo" style="width:200px">some text</div>
<script>
var x = document.getElementById("demo");
x.style.color = "6600FF";
x.style.width = "100px";
</script>
- 创建节点
- element.cloneNode() 克隆一个元素并且返回一个节点
- document.creatElement(element) 新建一个节点，elemen是标签名称
- document.createTextNode(txt) 新建一个文本节点，它不会自己显示在网页上，除非将他添加到一个已知的元素上
也可以通过如下方法避免创建一个文本节点，而选择直接将其插入到一个元素中
<script>
var p=document.createElement("p");
p.innerHTML="Some new text";
var div = document.getElementById("demo");
div.appendChild(p);
</script>
innerHTML和createTextNode之间的区别在于：后者对文本进行转义，而前者将完全按照你打印的内容输出到网页上，这意味着，当你在innerHTML中插入HTML标记时，其将不会被解析为HTML。
- element.appendChild(newNode) 添加一个新的子节点到一个元素的最后
- element.insertBefore(node1,node2) 添加一个新的子节点node1到子节点node2之前
<div id ="demo">some content</div>
<script>
//creating a new paragraph
var p = document.createElement("p");
var node = document.createTextNode("Some new text");
//adding the text to the paragraph
p.appendChild(node);
var div = document.getElementById("demo");
//adding the paragraph to the div
div.appendChild(p);
</script>
- 删除节点
- parentNode.removeChild(childNode) 删除父节点之下的一个子节点
以下代码会从页面中删除id为p1的子节点
<div id="demo">
<p id="p1">This is a paragraph.</p>
<p id="p2">This is another paragraph.</p>
</div>
<script>
var parent = document.getElementById("demo");
var child = document.getElementById("p1");
parent.removeChild(child);
</script>
- childNode.parentNode 通过parentNode属性直接获取节点的父节点
child.parentNode.removeChild(child);
- 替换节点
- element.replaceChild(newNode,oldNode) 该方法替换节点
<div id="demo">
<p id="p1">This is a paragraph.</p>
<p id="p2">This is another paragraph.</p>
</div>
<script>
var p = document.createElement("p");
var node = document.createTextNode("This is new");
p.appendChild(node);
var parent = document.getElementById("demo");
var child = document.getElementById("p1");
parent.replaceChild(p, child);
</script>
3.动画
- var A = setInterval(function，timer) 开始一个动画A，该方法会建立一个计时器，在以timer（int-ms）为单位时间的循环内，根据function重复通过更改对应属性来实现动画效果。
以下代码实现将红色方块右移至绿色方块最右端位置
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<div id="container">
<div id="box"> </div>
</div>
</body>
</html>
//CSS
#container {
width: 200px;
height: 200px;
background: green;
position: relative;
}
#box {
width: 50px;
height: 50px;
background: red;
position: absolute;
}
//JS
//calling the function in window.onload to make sure the HTML is loaded
window.onload = function() {
var pos = 0;
//our box element
var box = document.getElementById('box');
var t = setInterval(move, 10);
function move() {
if(pos >= 150) {
clearInterval(t);
}
else {
pos += 1;
box.style.left = pos+'px';
}
}
};
- clearInterval(A) 结束动画A
window.clearInterval(iIntervalID) 这个要插入一个Id
4.Event
事件发生指当用户执行某项操作或者达到某种特定条件时，执行某段特定代码。
| Event | Description |
|---|---|
| onclick | 当用户点击一个元素时发生 |
| onload | 页面载入时触发 |
| onunload | 页面关闭时触发 |
| onbeforeunload | 在页面关闭之前触发（一般用于确认是否关闭页面） |
| onchange | 当一个元素的文本内容被更改，或者状态发生改变时发生 |
| onmouseover | 当鼠标移动到一个节点或其子节点时发生 |
| onmouseout | 当鼠标移除一个节点或其子节点时发生 |
| onmousedown | 当用户在一个元素上按下鼠标按钮时发生 |
| onmouseup | 当用户在一个元素上松开鼠标按钮时发生 |
| onblur | 当一个元素失去焦点时发生 |
| onfocus | 当一个用户得到焦点时发生 |
- 事件可以作为属性被添加进HTML元素中：例如：<p οnclick=“somefunc（）”>一些文本</p>（不推荐使用）
<button onclick="show()">Click Me</button>
<script>
function show() {
alert("Hi there");
}
</script>
var x = document.getElementById("demo");
x.onclick = function () {
document.body.innerHTML = Date();
}
- **element.addEventListener(event,function,useCapture)**给一个元素添加一个事件监听
event表示事件类型，如click，mouseover（即上述事件除去on）
function表示事件发生后的处理方法
useCapture 是一个boolean值，表示事件的传播机制（冒泡或捕获），此参数是可选的。
一个元素可以添加多个事件处理，一种事件也可以添加多个处理方法。
Example：
element.addEventListener("click", myFunction);
element.addEventListener("mouseover", myFunction);
function myFunction() {
alert("Hello World!");
}
- element.removeEventListener(event,function) 将一个事件从元素中移除
Example:
<button id="demo">Start</button>
<script>
var btn = document.getElementById("demo");
btn.addEventListener("click", myFunction);
function myFunction() {
alert(Math.random());
btn.removeEventListener("click", myFunction);
}
</script>
注意：IE8或该版本以下都不支持addEventListener，和removeEventListener方法，但是可以通过document.attachEvent()方法来添加相应的事件处理。
5.Event Propagation(事件传播)（难点）
HTML DOM中有两种事件传播机制：bubbling和capturing。
事件传播机制允许定义相同性质的的”嵌套“事件发生时的执行顺序，例如，在一个<div>元素中有一个<p>元素，那么，当用户点击了<p>元素时，浏览器应该先处理那个事件呢？
在bubbling（冒泡）模式中，最里层的目标事件被优先处理，相同事件从内向外得到执行，所以<p>元素中的事件被首先执行。
而在capturing（捕获）模式中,最外层的目标事件则被首先执行，即由外而内，所以此时<div中的事件被优先执行>。
如：
- 当为捕获机制时: 当点击黄色方块时(结构嵌套, 黄色为里面的div, 红色为父级), 先出发的是红色点击事件, 之后是绿色, 黄色;
- 当为冒泡机制时, 先触发黄色事件, 然后依次向父级冒泡, 为绿色, 红色.
addEventListener(event,function,useCapture)方法中的useCapture参数可用于定义元素行为的传播机制，默认属性是false，表示bubling，而当其被设置为true时，其表示capturing。
通过将事件对象的cancelBubble设置为true，即可取消冒泡：
IE8以及以前可以通过 window.event.cancelBubble=true阻止事件的继续传播；IE9+/FF/Chrome通过event.stopPropagation()阻止事件的继续传播
element.event =function(event){
event= event || window.event;
event.cancelBubble= true;
};
| ele.onxxx = function(event) { } | 兼容性好, 但是一个元素的同一个事件上只能绑定一个处理程序基本等同于写在HTML行间 |
|---|---|
| obj.addEventListener(type, function( ){ }, flase); | IE9以下不兼容, 可以为一个事件绑定多个处理程序 |
| obj.attachEvent(‘on’ + type, fn); | IE独有, 一个事件同样可以绑定多个处理程序 |
6.Form Validation（表单验证）
<form οnsubmit=“return function” >…</form> onsubmit属性通过function检验表单内容是否合法。
function返回true时，表示内容合法会被提交。否则不会被提交。
示例
- 图片轮显
HTML：
<div>
<button onclick="prev()"> Prev </button>
<img id="slider" src="http://www.sololearn.com/uploads/slider/1.jpg"
width="200px" height="100px"/>
<button onclick="next()"> Next </button>
</div>
JS：
var images = [
"http://www.sololearn.com/uploads/slider/1.jpg",
"http://www.sololearn.com/uploads/slider/2.jpg",
"http://www.sololearn.com/uploads/slider/3.jpg"
];
var num = 0;
function next() {
var slider = document.getElementById("slider");
num++;
if(num >= images.length) {
num = 0;
}
slider.src = images[num];
}
function prev() {
var slider = document.getElementById("slider");
num--;
if(num < 0) {
num = images.length-1;
}
slider.src = images[num];
}
扫一扫
1636
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
