第1章 JavaScript的简史
略
第2章 JavaScript的基本语法
博客(一)
第3章 DOM
1.解释HTML的基本结构
2.节点:元素(<body><p>等),文本(夹在元素中间的文本),属性(元素里的title,id等等)
3.CSS : 和JS类似,写在文档的<head>中<style>节点中,或者作为单独文件用<link>来链接。
P { color: yellow;
font-size:1.2em; }
和JS中的对象类似,对象名就是元素名。
Class属性: 在元素里面制定一个class,就可以使用特殊的式样了,class定义的时候要加.
.special{
font-sytle: italic; }
id属性 :用元素的id来制定特殊式样,定义时加上#。
#purchase{
font-sytle: italic; }
4.document.getElementById() 和 document.getElementByTagName()
前者是根据元素的id获得元素对象,后者是根据元素名,因为一般都有多个,所以都以数组的方式返回,即使只有一个也是返回数组。
5.document.getElementByClassName()
Html5 的DOM中新增的方法,有的浏览器器里还没有这个方法,所以需要判断,没有的话自己写。
6.getAttribute() 和 setAttribute()
取得某个元素的对象以后,可以这两个方法来对这个元素对象的属性进行修改。
第4章 JavaScript 图片库 就是有一堆链接,点击其中某个链接就会显示不同的图片
1. 把所有图片放到images文件夹中
2. 在<ul>下的<li>中放链接<a>,链接地址就是图片的相对路径。
3. 在Html中加上<img>标签,作为占位,显示图片用的。
4. JS写一个方法showPic(whichPic),参数是element对象,然后用getAttribute()方法获取这个对象的“href“属性。
然后再用document.getElementById取得<img>元素对象,把对象里的src赋值为前面的href属性值。
5. <a>里面写调用方法 :οnclick="showPic(this) ; return false;" 这里必须要写返回false,不然就新窗口点开那个图片的链接了。
扩展:
element.childNodes. 方便的获得这个元素的所有子元素,返回数组。
node.nodeType. 返回这个结点的类型 返回数字
元素element 1
属性attr 2
文本text 3
注释comments 8
文档documen 9
node.nodeValue 返回或者设置这个节点的文本。这里要注意的是,用getElementById取得的元素本身的nodeValue是null的,
要去获得/赋值它的子元素node.childNodes[0].nodeValue,才可以,因为这个元素显示的文本是作为这个元素的子元素的。
<P>texttext</P>
node.firstChild / node.lastChild 更方便的读取子节点
第5章 最佳实践
1.打开窗口:
<html>
<head>
<script type="text/javascript">
function popUp(winURL){
window.open(winURL,"popup","width=320,height=480");
}
</script>
</head>
<body>
<a href="javascript:popUp('https://www.baidu.com');"> test1 </a> <br/>
<a href="#" οnclick="popUp('https://www.baidu.com');"> test2</a> <br/>
<a href="https://www.baidu.com/" οnclick="popUp(this.href); return false;"> test3</a>
</body>
</html>
第章
第章
第章
第章
第章