数组
var beatles = Array(4);
Beatles [0] = ‘John’;
var beatles = [‘John’,’Paul’,’Gorge’];
对象
var lenmon = Object();
lemon.classname = ‘John’;
var lemon = {name:”John”,year:1940,living:false}
比较操作符
===
不仅比较值而且比较变量的类型
DOM
D:文档
O:对象
用户定义对象
内建对象 内建在javascript里的对象如Array Math 和Data
宿主对象 由浏览器提供的对象
Window对象对应浏览器窗口本身,这个对象的属性和方法统称为BOM浏览器对象模型
M:模型
DOM把文档看为一棵树
看文档里有多少元素节点
Document.getElementsByTagName("*");
图片库实例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" type="text/css" href="new_file.css"/>
<script src="new_file.js"></script>
<script >
window.onload=function(){
if(!document.getElementById) return false;
if(!document.getElementsByClassName) return false;
if(! document.getElementById("placeholder"));
var gallery = document.getElementById("imagegallery");
var image = document.createElement("img");
image.setAttribute("id","placeholder");
image.setAttribute("src","image/u=1976971154,3672095769&fm=27&gp=0.jpg");
image.setAttribute("alt","my image gallery");
var description = document.createElement("p");
description.id = "description";
var txt = document.createTextNode("趴着");
description.appendChild(txt);
insertAfter(image,gallery);
insertAfter(description,image);
var oImg = document.getElementById("placeholder");
var oShow = document.getElementsByClassName("show");
for(var i=0;i<oShow.length;i++){
oShow[i].onclick=function(){
var source = this.getAttribute("href");
if(oImg.getAttribute("src"))
oImg.setAttribute("src",source);
var oP = document.getElementById("description");
var desciption = this.getAttribute("title");
oP.childNodes[0].nodeValue = desciption;
return false;
}
}
function insertAfter(newElement,targetElement) {
var parent = targetElement.parentNode;
if (parent.lastChild == targetElement) {
parent.appendChild(newElement);
} else {
parent.insertBefore(newElement,targetElement.nextSibling);
}
}
};
</script>
</head>
<body>
<h1>抱抱表情包</h1>
<div>
<ul id="imagegallery">
<li>
<a class="show" href="image/微信图片_20181211205206.jpg" title="趴着"><img src="image/微信图片_20181211205206.jpg" /></a>
</li>
<li>
<a class="show" href="image/微信图片_20181211205218.jpg" title="写字"><img src="image/微信图片_20181211205218.jpg" /></a>
</li>
<li>
<a class="show" href="image/微信图片_20181211205222.jpg" title="戳脸"><img src="image/微信图片_20181211205222.jpg"/></a>
</li>
<li>
<a class="show" href="image/微信图片_20181211205226.jpg" title="爱心"><img src="image/微信图片_20181211205226.jpg" /></a>
</li>
</ul></div>
</body>
</html>
- childNodes获取所有节点数,children获得所有元素节点
- nodeValue获得节点的值
- 获得p里的文本: p对象.fristchild.nodeValue
- 在给元素添加了事件处理函数后,一旦事件发生,相应的代码就会执行,执行后的代码会返回一个true或false给函数,如果返回值为false,onclick函数就认为"这个链接没有被点击 ”,它的默认行为就不会被调用
-
function insertAfter(newElement,targetElement){
var parent = targetElement.parentNode;
if(parent.lastElemetChild == targetElement){
parent.appendChild(newElement);
}else{
parent.insertBefore(newElement,targetElement.nextElementSibling);
}
}
平稳退化与渐进增强
“平稳退化”是在浏览器没有JavaScript功能,或没有开启JavaScript功能情况下,我们解决这种问题的方式;
(虽然某些功能无法应用,但基本操作可以完成)
“渐进增强”是在浏览器开启JavaScript功能后,如果浏览器版本不支持某些JavaScript能力,我们解决这种问题的方式。
性能考虑
- 尽量少访问DOM,用变量存放DOM的搜索结果(查询DOM在中的元素,浏览器都会遍历整个DOM树)
- 合并放置脚本
- 压缩脚本文件(在精简副本上加min字样,保留原副本)
将abbr里的内容和title的值通过数组由定义列表来实现
<script>
function displayAbbreviations(){
var abbreviations = document.getElementsByTagName("abbr");
if(abbreviations.length<1)return false;
//判断文档是否亦缩略语
var defs = new Array();
for(var i=0;i<abbreviations.length;i++){
var definition = abbreviations[i].getAttribute("title");
var key = abbreviations[i].innerText;
defs[key] = definition;
}
//创建数组defs 下标存放key也就是title,值为definition也就是缩略语
var dlist = document.createElement("dl");
for(key in defs){
var definition = defs[key];
var dtitle = document.createElement("dt");
var dtitle_text = document.createTextNode(key);
dtitle.appendChild(dtitle_text);
//dtitle key
var ddscription = document.createElement("dd");
var ddscription_test = document.createTextNode(definition);
ddscription.appendChild(ddscription_test);
//ddscription definition
dlist.appendChild(dtitle);
dtitle.appendChild(ddscription);
document.body.appendChild(dlist);
}
}
addLoadEvent(displayAbbreviations);
</script>
更改tr颜色
css3伪类选择器
tr:nth-child(odd){} 单数行
tr:nth-child(even){} 双数行
function stripeTables(){
if(document.getElementsByTagName) return false;
var tables = document.getElementsByTagName("table");
var odd,rows;
for(var i = 0;i<table.length;i++)
{
odd = false;
rows = table[i.getElementByTagName("tr");
for(var j=0;j<rows.length;j++)
{
if(odd==true){
row[j].style.backgroundColor = "#fc";
odd = false;}
else{
odd = true;}
}
}
}
window.onload会在页面加载完之后立即执行
addClass函数
function addClass(element,value) {
if (!element.className) {
element.className = value;
} else {
newClassName = element.className;
newClassName+= " ";
newClassName+= value;
element.className = newClassName;
}
}