黑马程序员_毕老师_CSS

-------android培训、java培训、期待与您交流！ ----------

QQ空间备份

CSS层叠样式表cascading style sheets
将网页中的样式单独分离出来，完全由CSS控制，增强样式复用性和扩展性。
格式：选择器{属性名：属性值；属性名：属性值；……}
CSS与HTML结合的4中方式：
1、每个HTML标签都有style属性。（将css代码定义在style的属性值当中）
2、当页面中有多个标签具有相同样式时，可定义style标签封装样式以复用
<style type=”text/css”>css代码</style>
3、当多个页面使用相同样式时，可将样式单独封装为CSS文件导入
<style type=”text/css”>@import url(“1.css”);</style>
4、通过HTML头标签中的link标签链接一个CSS文件
<link rel=”stylesheet” href=”1.css” media属性可选，默认设备屏幕/>
第3种和第4种，都有一个css文件，并把它链接进来。区别是：第3种用的是css代码，第4种用的是html代码。
技巧：为提高样式的复用性和可扩展性，将多个样式单独定义并封装为CSS文件，如p.css、div.css……在一个总的CSS文件中，使用import导入这些CSS文件，然后在HTML页面中用link标签将这个总的CSS文件导入即可。
1.css(它中的语句，是下面两句)
@import url("p.css");
@import url("div.css");
<link rel="stylesheet" href="1.css" /> (这条语句是在html中的语句)
在后期想要对样式进行修改的话，只要将p.css或者div.css修改就可以了，其他的页面全都不用动。
样式表最大的特点就是可以进行样式重叠，如果在某一个页面中，p.css或者div.css需要有特殊的样式的话，先加载普通样式，再在p标签或者div标签上定义style属性，也可以定义style标签。
优先级：就近原则。标签上设置的style属性可以覆盖其他样式

选择器：其实就是样式要作用的标签容器。
HTML能对它封装的数据进行一些基本的样式设定，但是非常的简单，为了丰富其样式，将样式进行分离，用css来完成。当样式后，html作用在于用标签封装数据。然后让css加载到指定的标签上。
选择器的基本分类：
1、标签选择器：其实就是html中的每一个标签名。（每个HTML标签名即为一个选择器）
2、类选择器：其实就是每一个标签中的class属性，用“.”的形式表示。只用来给CSS使用，可以对不同标签进行相同样式设定。我们玩动态样式加载的时候也是一样，这个标签本身有了class属性，我只要不断的改变class属性的值，就可以达到样式切换效果。（标签中的class属，定义样式要加点，js引用时用className）
3、ID选择器：其实就是每一个标签中的id属性。但是要保证ID的唯一性。用#来标识。ID不仅可以被css所使用，还可以被javascript所使用。标签的id属性，尽量保证唯一，便于JavaScript获取元素
选择器优等级。ID>class>标签。
4、扩展选择器：
a、关联选择器：其实就是对标签中的标签进行样式定义（标签中的标签有继承特性，它会继承外部标签的样式。[选择器选择器]：table div表示表格中的div区域）
b、组合选择器：对多个选择器进行相同样式定义，将多个选择器通过逗号隔开的形式。
c、为元素选择器：其实就是元素的状态。如超链接的默认状态、点击状态、悬停状态等
a:link 超链接被点之前状态。
a:visited 超链接点击之后状态。
a:hover 光标悬停在超链接之上。
a:active 鼠标按下的瞬间效果。
超链接在点了之后，如果想让颜色没有变化，要让link和visited一致。
在定义这些状态时，有一个顺序：L V H A 顺序
删除超链接默认下划线：text-decoration：none
p:first-letterp:first-line focus:IE6不支持，但FF支持（FireFox）
CSS滤镜：其实通过一些代码丰富了的样式（比如图片的水印效果，图片的拖影效果）
当使用到时CSS的更多属性时，还需要查阅CSS API.
网页设计时，DIV+CSS
div只是用来封装数据区域没有什么特殊的含意。也可在定义层的概念。
DIV：行级区域，回车效果。SPAN：块级区域，无回车效果。
p:行级区域。P中不要嵌套DIV。两个p之间有空行，两个div之间没有，但是都有换行的动作。
可加border、color等属性，

JavaScript：基于对象和事件的脚本语言（对象已经封装在其中了）
java是强类型的放言，但javascript是弱类型的语言（什么都可以向里面存）。java是严谨的语言，javascript是非严谨的语言。
java为了方便内在的分配和数据的运算，它对每一种数据都分配了类型（八种基本，三种引用）。javascript没有类型。
特点：
安全性：不允许直接访问本地硬盘，可做的就是信息的动态交互
跨平台性：只要可以解析JS的浏览器就可执行，与平台无关
JavaScript与Java的不同：
1、js是NetScape的产品，Java是SUN的产品
2、js是基于对象的，Java是面向对象的
3、js只需解释就可执行（支持javascript的浏览器[客户端]），Java需要先编译成字节码文件后再执行
4、js是弱类型语言，Java是强类型的
5、js是非严谨的，Java是严谨的
JavaScript是运行在客户端，可以直接和用户进行交互的一种方式。
JavaScript需要被浏览器所解释执行，就必须要将代码和HTML相结合。（任何代码要融入HTML代码中，都是通过标签形式）
1、将js代码存放在标签对<script></script>中，规范要求加type属性（以前是language属性），方便浏览器启动指定的解析引擎。
<script type=”text/javascript”> js代码 </script> （script标签可以存在在页面的任意位置上,但一般放在head中因为先加载）
2、也可以通过<script>标签，使用src属性连接一个指定的js文件进来。(将js代码封装成js文件，提高复用性,也方便后期的维护和扩展）
<script type=”text/javascript” src="1.js"></script>
规范中script标签中必须加入type属性。

javascript支持单行注释（//）和多行注释(//)的情况。
基本数据类型的数据在运算的时候和java有些差别：如javascript中，var x = 3750; alert(3750/1000*1000) 它的结果还是3750.

每一种语法都有自己的语法规则，JS语法与Java很低，所以学习起来比较容易。JS中也有变量，语句，函数，数组等常见语言组成元素。
变量
变量通过关键字var定义，该变量可以赋予不同类型的常量。弱类型语言不需要指定具体数据类型。例:var x = 3; x = "hello",即可用单引号，也可以用双引号。
特殊常量：undefined 变量没有初始化时值就是它

语句
判断语句：if()
在javascript中0代表假，非零代表真。如，alert(true+1);结果为2；
在javascript中null就是假，非空就是真。
在javascript中要连接两个boolean型的表达式的时候，要用双与&&，双或||。不用双的话也可以，但如果用单的话，它会把运行的结果进行与运算
var x = 3;
if(3==x)
alert("yes");
else
alert("no");
javascript只有一种提示错误的方式，在浏览器中左下角，有一个叹号，双击这个叹号，就会出现错误的提示。可以写为（x==3的形式，但是不能写为3==x,不会有的结果，会在状态栏出现错误提示）
选择结构语句:switch()
可以用case "abc";
循环语句（while语句，do...while语句，for语句）
注：不同的是，没有了具体数据类型的限制，使用时要注意。

用document.write("<font color="red"> 字体</font>")它会将javascript中的内容打到页面上去。

JS特有语句:简化操作的with语句和for…in语句
with语句的形式：with(对象){可直接调用对象的属性和方法，不用加对象名}
可以用来简化书写，当对象调用"."的形式多了之后，代码会变得比较麻烦。为了简化，我们可以把对象直接存放在with的小括号当中。在后面的大括号中，我们可以随时的使用with的对象和方法，而不用写“对象.”。用于确定对象的作用范围
with(stu)
{
alert(name+"......"+age);
}
document.write("")；这个语句中的docucment可以直接写到with中去。
for…in语句:用于遍历对象的属性及行为，也可以遍历数组
for((变量)s in (学生对象)stu){alert(s)} 可以把对象stu的属性遍历出来，能遍历出属性就能拿到其中的值。要获得属性值用stu[s]
for(x in array) { alert(x) }打印的是数组角标,要想成为打印数组中的元素，可以用alert(arr[x]);的形式。

数组：var arr = [1, 2, ‘abc’, 3.53] 当要明确其中的数据和内容的时候用的不是大括号，而是中括号。数组长度是可变的，没有越界问题，其他值为undefined，在这里面想装什么就装什么。
var arr = new Array()数组的定义方式。数组内可存放任意类型元素，推荐元素类型一致（在操作的时候还是以同类型为主，方便操作）。
var arr = [[1, 0, 3], [true, ‘abc’]];二维数组的定义方式。
js中的数组就相当于Java中的集合，它是可变长度的，随便在这里面扔都没有问题。
操作形式和java一样。都是通过for进行遍历，同时也使用了指针思想。

函数：function 函数名(参数列表){js代码 return 返回值；}
通常提供代码复用，可以将代码封装成函数。两个明确：#，明确该功能实现后的结果（return ;）。 #，该功能在实现过程中是否的未知内容参与运算。
对函数来讲，JS的函数是比较简单的，因为他没有具体类型，所以不涉及返回值类型，及参数类型。用关键字function来定义。方法的（）中可以定义参数，也可以不定义参数。如，function(arr){ },在其中不用写var，直接写参数就可以了。
和java一样，函数如果没有被调用，它是不会执行的。
调用有参数的函数，但没有给其传值，函数一样可以运行。或者调用没有参数的函数，给其传参数，该函数也一样运行。说的简单点：只要写了函数名后面跟了一对小括号，该函数就会运行。
JavaScript函数没有重载形式，参数可随意传递，函数内部默认有一个arguments数组用来接收传入的参数，参数个数尽量保持一致
function show() //用到哪些未知内容，都把它定义在这些参数之上，这样的话阅读性比较的强，如果这样定义的话，看起来会比较的不舒服。
{
for(var x=0; x<arguments.length; x++)
alert(arguments[x]);
}
show(3,4,6,7)
函数中也可以有return ;语句。
在javascript中方法就是一个对象。如show()方法，这个对象的名字就是show。如果定义var x=show; alert(x);则show代码是什么，它打印的结果就为什么（表示x指向了show所指向的函数对象）。如果加上（）:var x = show();表示show方法在接收show()方法产生的结果。
alert(函数名)可将函数内容打印出来，包括注释
动态函数：var fun = new Function(“x”, “y”, “var sum=x+y; return sum;”); var a = fun(3,2);
动态的new了一个函数，并把函数的参数和函数体给定义了出来。参数和函数体都可以做为变量向内传递。函数的参数和函数体都可以通过字符串变量来动态修改
匿名函数：function(){} 同Java，多用于事件处理(匿名函数是一般函数的简写形式，相对还要常用一些，因为javascript不仅是基于对象，还基于事件驱动。事件要对应处理方式，处理方式对应函数)
var show = function()
{
alert("func run");
}
show();

//当窗体中的内容全都加载完成了之后，产生了加载完成这个事件，这个事件怎么处理呢？我们可以通过匿名函数的形式将其完成，这是一种简化的写法。
window.onload = function()
{
alert("onload over");
}
可以通过函数形式来模拟Java，创建对象
js可以通过对象形式将数据进行封装，首先对对象进行描述，通过函数来完成。
function Person() //这里不一定要大写，但是大写的话，可以增加阅读性。
{
alert(“person init”);
}
var p = new Person(); //调用Person的方法
p.name = “张三” //可以给p添加属性和方法
p.age = 30；
p.eat = function(){}

function Person(name, age)
{
this.name = name;
this.age = age;
}
var p = new Person("lisi____",90);
alert(p["name"]+"..."+p.age); //用这两种方式都可以获取到数据。
引用name属性可用,p.name 或p[“name”]
也可像Java一样使用this来完成对象构造

在函数使用时需要注意的部分：
function show()
{
return "show run";
}
var method = show();
var method = show;
两句代码都是正确的，第一句表示的是show方法运行后的结果赋值给method变量。
第二句表示的是将show指向的对象的地址赋值给method,那么method也指向了该对象。（函数本身就是一个对象，函数名就相当于对象的引用，你把引用赋给method,method也就指向了一个引用。也就是说在使用的时候可以这样写method() ）。
那么就可以用method()；的形式来调用这个show()。

JavaScript的内部对象（JS中已经定义完的，方便我们使用的对象）：Object、String、Array、Math、Date、Global、Function……
这些对象都有一个属性叫做prototype原型。prototype可以获取指定对象的引用。可以通过该引用给已有的对象赋予一些新的功能。那么在使用该对象时，可以直接调用定义好的新功能。
prototype属性：获取对象原型（返回对象的引用），可以给源对象添加自定义功能或属性
function getMax()
{
var max = this[0];
for (var x=1; x<this.length; x++)
{
if (max<this[x])
max = this[x];
}
return max;
}
能不能把getMax()方法都放到数组当中，让数组本身就具有getMax方法呢？像arr.sort方法一样(直接调用Array对象的sort方法对数组进行排序)。
Array.prototype.getZuiDa = getMax; //给已有的Array对象添加getMax方法（自定义的功能），可直接调用。（获取对象的原型，并把自定义的方法，赋值到一个自定义的属性当中）
var arr = [4,1,5,6,2];
var x = arr.getZuiDa(arr); //arr.中已经有arr代表数组了，再传数组没有意思，可以将getMax(arr)改为getMax()，方法体中的arr可以改为this。
alert("max="+x);

String：长度为length属性，不是方法
方法有：toUpperCase()toLowerCase() CharAt()indexOf() lastIndexOf()
split() replace() substring(start, end)substr(start, length)：从起始位start开始，取length个结束，如果不足length个
math()正则表达式匹配 bold()给字符串两边加上<b></b>标签
fontColor() fontSize()sub() sup()link(“URL”)都是加标签的
Math：random()产生0~1之间的伪随机数，含0不含1，可能为0，但总小于1，为小数
怎么产生1—10之间的整数呢？random()*10+1需要转换成整数，使用Global对象方法
Global：封装一些不属于具体某个对象的单独存在的全局方法，可不用对象名直接调用
parseFloat() parseInt() radix 基数
parseInt(numString, [radix]) //将数字格式的字符串转换在整数，如果指定了基数，那么numString就会按指定的基数时行转换。radix指定numString的进制形式，2~36。radix英文为基数的意思。
默认0x开头位16进制，0开头为八进制，其他为十进制
如果numString前缀不能转为数字，则返回NaN（Not a number），可用Global中的方法isNaN()检测
parseInt(“aaa”)NaN parseInt(“33abe”)33 提示：转换前先用正则匹配，是数字再转换
反向转换（将十进制转换为其它进制，可以用）用toString方法:objectname.toString([radix])
var x = 6;
var num = x.toString(10);

Data：日期时间对象
var d = new Data();
with(d)
{
var month = getMonth()+1；月份从0开始
month = month>9?month:”0”+month;月份用两位数日也可这样做
alert(getYear()+”年”+month+”月”+getData()+”日，星期”+getDay());
}

DOM
DOM：文档对象模型document object model。我们为了方便操作标记型文档，就将标记型文档中的所有的标签都封装成了对象。而封装对象的动作就是由DOM来完成的。
为什么要将这些文档以及其中的标签封装成对象呢？把文档中的每个标签看作是一个对象，当把文档中的标签封装成对象后，我们可以在对象中定义很多的属性和行为，方便操作这些对象。这样就可以由用户动态的添加一些标签。也可以动态的删除一些标签。并结合CSS做一些动态的效果出来。
DOM三层模型：
DOM1；将HTML文档封装成对象
DOM2：将XML文档封装成对象
DOM3：将XML文档封装成对象
它将文档封装成对象之后，就产生了一个标签树（DOM）。树上的第一个结点，我们都称之为对象。
DOM树：将HTML中的标签按照层级关系封装成节点对象
DOM的出现使静态的HTML页面的标签变为动态的可操作的节点对象（它把静态网页上的html的标签都给变活了）有了DOM这后，这些标签都是可操作的，就可定义很多的属性和行为，我们就可以对标签（对象）做一些改变。
html,xhtml,xml:这些都是标记型文档（都是一门语言）。
DHTML：动态的HTML（DOM加入了），它是HTML、CSS、DOM、JavaScript四种技术的综合体（DHTML不是一门语言）。（XHTML它不是综合体，它本身是可扩展的超文本标记型语言）
HTML：负责将数据进行封装
DOM：负责将标签及标签中的数据封装成对象
CSS：负责标签中的数据样式（将样式加在对象上）
JavaScript：将三者进行融合，通过程序设计方式完成动态效果的操作（怎样加载呢，可以通过javascript动态的加载）
如果在动态的基础上（DHTML）加上xmlHttpRequest对象-->AJAX (AJAX也是一个综合体，可以和服务端进行交互的对象。AJAX的主力语言是JavaScript，JavaScript因为AJAX才大火的。AJAX的出现确实可以把前台展现进入一个里程碑式的转换。AJAX的出现，它的里面没有一项是新技术。)
<script type="text/javascript">
function demo() //只有var obj这两个单词是javascript代码，其余的都不是。document.getElementById("divid");是DOM代码。
{
var obj = document.getElementById("divid");
//alert(obj.tagName); //显示出是标签
//alert(obj.innerText); //显示出文本的内容
obj.innerText = "kkkkkkk"; //对文本进行替换
}
</script>

通过这个标签层次，可以形象的看作是一个树型结构。那么当标记型文档，一加载进内存，内存中就产生了相应的DOM树，这些标签以及标签的数据都是这棵树上的节点。
由此产生的弊端就是，文档相当大时，消耗资源（内存）。所以标记形的文档不要搞的太大，太大的话，树就会比较的大。后期除了DOM可对标记型文档进行解析之外，还可用SAX方式对大型文档进行解析（它对大型的文档解析的速度是比较快的，因为它是按照事件驱动的方式进行解析的）。
HTML文档中的层次关系，DOM树的层次结构
window //不光封装了文档，凡是窗口中能涉及到的都给封装完了。
|——
|——
|——

打开DHTML手册后，点一标签，如DIV。在成员表中的有两个属性：标签属性和属性。其中"标签属性"这一列，是html标签中的写法（html代码）。而"属性"这一列，是对象所调用的属性的写法（DOM代码）。而且html中没有的，对象中也有，添加了一些新的属性供我们指挥对象用的。
点样式，“样式标签属性”这一列，代表CSS对应的代码。“样式属性”这一列，代表CSS对象对应的代码。每一个标签中都有一个style属性，而这个style属性本身也是一个对象，我们通过style对象，就可以调用CSS中的这些属性值。
<script type="text/javascript">
function demo()
{
var divObj = document.getElementById("divid");
divObj.style.backgroundColor = "red"; //要打开DHTML文档，打div，点样式，看CSS中的属性background-color对应的属性的值。
}
</script>
<div id="divid">
这个是测试的文字
</div>

节点类型
标签型节点：nodeType为1，容器型节点的nodeValue为空null 没有值
文本型节点：名字#text 类型为3
注释型节点：#comment 类型为8
文档型节点：#document 类型为9
属性型节点：类型为2 属性可通过对象的attributes集合属性获取
<script type="text/javascript">
function demo()
{
var divObj = document.getElementById("divid");
//获取父结点
var parent = divObj.parentNode;
getNodeInfo(parent)
//获取子结点
var childs = divObj.childNodes;
getNodeInfo(childs[0]);
//获取上一个兄弟结点
var preNode = divObj.previousSibling; //div前面是一个空行，IE浏览器在解析的时候会解析成一个空白的文本结点。
getNodeInfo(preNode);
//获取下一个兄弟结点
var nextNode = divObj.nextSibling;
getNodeInfo(nextNode);
//需求：获取单元格一文本（先获取节点）
var tabNode = divObj.nextSibling;
//getNodeInfo(tabNode.childNodes[0].childNodes[0].childNodes[0].childNodes[0]) //太疯狂了，太麻烦了。
var tdNodes = tabNode.getElementsByTagName("td");//找对象拿方法。这里也可以用document.getElementByTagName("td");但是如果有多个表格的话，就把所有的表格给拿到了，不精准。
getNodeInfo(tdNodes[0].childNodes[0]);

}
function getNodeInfo(node)
{
alert("name:"+node.nodeName+".....type:"+node.nodeType+"....value:"+node.nodeValue);
}
//通过递归获取节点的层次关系
function listNode(node,level)
{
printInfo(node,level);
level++;
var nodes = node.childNodes;
for(var x=0; x<nodes.length; x++)
{
if(nodes[x].hasChildsNodes())
listNode(nodes[x],level);
else
printInfo(nodes[x],level);
}
}
function getSpace(level)
{
var s = "";
for(var x=0; x<level; x++)
{
s += "|----";
}
return s;
}
function printInfo(node,level)
{
str += getSpace(level)+"name:"+node.nodeName+".....type"+node.Type+".....value"+node.nodeValue+"<br/>";
}
function getNodes()
{
listNode(document,0);
document.write(str);
}
</script>
<body>
<input type="button" value="演示" οnclick="demo()"> //要打印层次目录的时候，这里换为οnclick="getNodes()"

<div id="dived">
kdjfldjlfjld
</div>

<table>
<tr>
<td>单元格一</td>
<td>单元格二</td>
</tr>
<tr>
<td>单元格三</td>
<td>单元格四</td>
</tr>
</table>
</body>
如何获取其他结点呢？这就涉及到了结点之间的层次关系。
当要拿一个结点的父结点的时候，返回来一个对象。如果要拿一个对象的子结点的时候，返回的是一堆对象，它返回的是一个集合（javascript中为数组）
注意：标签之间存在空行时，会出现一个空白的文本节点，在获取节点时一定要注意，
节点关系
父节点：parentNode。每个节点有且只有一个父节点通过节点parentNode属性获取
子节点：childNodes:直接结点。返回的是一个节点对象数组。即通过节点childNodes属性获取子节点集合（数组）
兄弟节点：分上一个和下一个（上一个下一个访问的都是一个节点），通过previousSibling和nextSibling属性获取。

注意页面中标签之间的空行也是文本节点，浏览器解析时可能出现也可能没有这个节点

获取结点除了可以通过节点的层次关系完成，也可以通过document对象完成。
获取节点的方法：
1、getElementById(HTML标签中定义的id值)
获取文档中指定id对应的标签对象，注意保证id值唯一；
如果多个标签id相同，获取的是id对应的第一个对象
<script type=”text/javascript”>
var divObj = document.getElementById(“divid”);
divObj.style.backgroundColor=”blue”;注意DOM代码与CSS代码的不同
</script>
<html>
<div id=”divid” style=”background-color:red”>div内部数据</div>
style属性中的内容为CSS代码，注意区分DOM中的相同属性名称
</html>
2、getElementsByName(HTML标签中定义的name值)：通过标签的name属性值获取对象。返回的是一堆对象，其实是一个对象数组。
3、getElementsByTagName(HTML标签名)：即没有id也没有name时，可是通过标签名来获取节点对象。返回的是一堆对象。其实是一个对象数组。
大多容器型标签都具备该方法（不具备getElementByid和getElementByName）。
容器型标签中都有该方法，如div、table、p

每个对象都有一个集合属性all，可以获取该对象中的所有节点对象的引用，但是all属性不获取文本型节点和空行产生的节点；还有一个attributes集合属性，用来获取该对象的所有属性。

window对象：代表浏览器打开的一个窗口
window中的对象
document：窗口中的HTML文档 event：事件状态
history：历史记录 location：当前地址栏信息
navigator：关于浏览器的信息 screen：屏幕信息

navigator对象：window.navigator.href或者navigator.href
属性：appCodeName appNameappVersion获取浏览器代码名称、名称、版本
platform获取操作系统名称
history对象：包含了用户已浏览的URL的信息。只有一个length属性
方法：back（） forward（） go（）都是从历史列表中装入URL
location对象：包含了当前URL信息。此对象的属性既可用来获取又可用来设置对应属性的值
属性：host获取或设置URL的主机名和端口号hostname port
href：URL(获取地址栏信息)protocol：协议 pathname：文件名或路径
search：href属性中问号后面的部分 hash：href属性中井号后的部分
location对象的任一属性改变后浏览器都将立即前往指定的URL
screen对象：
属性：availHeight和availWidth是系统屏幕的有效区域，不包括Windows的任务栏
height和width是系统屏幕的分辨率值
window对象方法：
alert：确定对话框(在调用方法的时候从来没有写过这个对象。因为窗体只要已打开对象已经在了。)
confirm：确定取消对话框，返回true或false
prompt(提示信息，[输入默认值])：可接收输入数据的对话框，返回输入的文本数据
moveBy(x, y)：使窗体根据指定的坐标值偏移窗口抖动效果
moveTo(x, y)：使窗体移动到指定坐标值
resizeBy(x, y)：窗体缩放指定偏移值resizeTo(x, y)：窗体缩放至指定值
scroll(x, y)：将窗口滚动到距窗口左上角指定偏移值的位置
scrollBy(x, y)：将窗口滚动指定的偏移值
scrollTo(x, y)：将窗口滚动到指定位置
close：关闭窗口
open：打开一个窗口window.open( [sURL] [, sName] [, sFeatures] [, bReplace])
window.open("","_blank","fullscreen=1");这句NB了，整个屏幕都是白板
sURL：打开窗口的地址，默认打开一个新的空白窗体about:blank
sName：指定窗口的打开方式，即target属性值
_blank：新的无标题窗口
_parent：当前框架的父窗体，没有父窗体则为_self
_self：当前窗口，替换当前窗口内容
_search：浏览器的搜索面板内，IE5及以后版本有效
_top：替换所有可以加载的框架集，没有框架则为_self
sFeatures：(for example, "fullscreen=yes, toolbar=yes")
height≥100px，width≥100px，left≥0，top≥0
下边的属性取值可以为yes/no或1/0
channelmode 默认值no
fullscreen 默认值no，改为yes记得提供关闭窗口的按钮或方法ALT+F4
下边的默认值都为yes directories location地址栏
menubar菜单栏 resizable可调大小 scroll bars滚动条
status状态栏 titlebar标题栏 toolbar工具栏
window.open()
bReplace：false(新建)或者true(替换)历史列表中的记录
setTimeout(vCode,iMilliSeconds)：经过指定毫秒值后，计算表达式的值或执行表达式内容。返回一个id值
setTimeout(“window.close()”, 5000);5秒后自动关闭窗口
setInterval(vCode,iMilliSeconds)：没经过指定毫秒值计算表达式，循环。返回一个事件id值
setInterval(“alert(111)”,3000)每隔3秒弹一次
clearTimeout(id）：
clearInterval(iIntervalID):setInterval方法返回的就是一个int型的ID,再用clearInterval取消先前开始的间隔事件。
focus：获取焦点
window.setInterval(“window.focus()”, 3000);将窗口每隔3秒前置一次（这是流氓广告的一种方式。）

window事件
onload：对象加载完成后打开窗口后
onunload：对象卸载完成关闭窗口，窗体消失后
onbeforeunload：对象卸载前关闭窗口，窗体还在时
onkeypress：键盘事件

event对象：代表事件状态，如事件发生的元素，键盘状态，鼠标位置和鼠标按钮状态。
keyCode属性：设置或获取事件对应的按键码
returnValue：设置或获取事件的返回值，false或true，用于取消事件执行效果
例：文本框只允许输入数字，非数字不允许显示在文本框中
function checkNum()
{
if(!(window.event.keyCode>=48 && window.event.keyCode<=57))
{
alert("不允许录入非数字")；
event.returnValue = false; //取消事件执行。两件事：一个是弹出对话框，一个是在对话框中显示打的字母。若在弹出对话框后，事件中途被中止，就不会在框中显示字母了。
}
}<body>
<input type="text" οnkeypress="checkNum()" />
</body>

表单提交，submit的作用就是，将表单中的数据封装完成后一提交（无论表单中的数据是否正确都能提交出去）。现在可以用returnValue,如果表单中有一个是错误的submit怎么按都没有效果。提交实现取消。

returnValue：可用在表单提交中，当表单数据不符合要求时取消提交按钮效果
srcElement：属性可设置或获取当前事件源对象（拿事件源对象很重要，因为后期再在很多个结点上加事件后，用户操作的是哪一个我们要知道。拿到当前事件源，我们就能拿到周围的一些结点。）

制作图形化界面，动态样式时效果的基本步骤：
1，定义数据封装的标签(定义界面)。
2，确定事件源
3，注册事件
4，事件处理。
需求：
页面中有一个新闻区域。
通过超链接大中小。
可以让用户改变区域中的字体的大小。

docTool.js中的内容出下：
var doc = document;
function byId(id)
{
return doc.getElementById(id);
}
function byTag(tag)
{
return doc.getElementsByTagName(tag);
}

<head>
<style type="text/css">
.max{
background-color:#0F6;
color:#003;
font-size:24px;
width:800px;
}
.min{
background-color:#CF6;
color:#30C;
font-size:9px;
width:500px;
}
div,.norm{
background-color:#990;
color:#F03;
font-size:16px;
width:500px;
}
</style>

<body>
<a href="javascript:void(0)" οnclick="changeSize('max')">大</a>
<a href="javascript:void(0)" οnclick="changeSize('norm')">中</a>
<a href="javascript:void(0)" οnclick="changeSize('min')">小</a><br/>
<div id="newsid" >
这是一个测试性的文字这是一个测试性的文字这是一个<br />
这是一个测试性的文字这是一个测试性的文字这是一个<br />
这是一个测试性的文字这是一个测试性的文字这是一个<br />
这是一个测试性的文字这是一个测试性的文字这是一个<br />
</div>
</body>

取消超链接默认点击效果：让浏览器启动JavaScript解析引擎执行一个空的函数
<a href=”javascript:void(0)” οnclick=”method()”></a>

需求：通过点击实现一个展开闭合效果
通过哪个效果能实现展开闭合呢，找CSS2.0找布局属性LayoutProperties中的overflow : visible | auto | hidden | scroll。检索或设置当对象的内容超过其指定高度及宽度时如何管理内容。
<html>
<head>
<script type="text/javascript" src="docTool.js"></script>
<script type="text/javascript">
var b = true;
function change()
{
//var divNode = document.getElementsByTagName("div")[0]; //第一种方式
var divNode = byTag("div")[0]; //通过外部导入的
//alert(divNode.nodeName);
/*
if(b)
{
divNode.style.height="8px";
divNode.style.overflow="hidden";
b = false;
}
else
{
divNode.style.height="8px";
divNode.style.overflow="visible";
b = true;;
}
*/

if(divNode.className=="close")
{
divNode.className = "open";
alert("if:open");
}
else
{
divNode.className = "close";
alert("else:close");
}
}
function list() //在下面的时候如果要用list(this)的话，要这个：list(dtNode),不用srcElement了接点直接传进来。
{
//var dtNode = byTag("dt")[0]; //如果有多个相同标签的话，通过标签来拿的话，就麻烦了。
//var dlNode = byTag("dl")[0];
//alert(dtNode.nodeName+"..."+dlNode.nodeName);

//可以先拿事件源对象，谁被触发了，谁就是事件源对象。
var dtNode = event.srcElement;
var dlNode = dtNode.parentNode;
if(dlNode.className=="open")
{
dlNode.className = "close";
}
else
{
dlNode.className = "open";
}
}
/*
function list(dtNode) //开一人而关其他的，可以用于网页的节省空间。
{
var dlNode = dtNode.parentNode;
var dlNodes = byTag("dl");
for(var x=0; x<dlNode.length; x++)
{
if(dlNodes[x]==dlNode)
{
if(dlNode.className=="open")
{
dlNode.className = "close";
}
else
{
dlNode.className = "open";
}
}
else
dlNodes[x].className = "close";
}
}
*/
/*
获取事件源对象的两种方式：
1，通过event对象的srcElement属性。
2，将事件源对象通过this传入。
*/
</script>

<body>

<dl>
<dt οnclick="list()">上层项目上层项目</dt>
<dd>历城置顶曙是胆胆</dd>
<dd>历城置顶曙是胆胆</dd>
<dd>历城置顶曙是胆胆</dd>
</dl>

<dl>
<dt οnclick="list()">上层项目上层项目</dt>
<dd>历城置顶曙是胆胆</dd>
<dd>历城置顶曙是胆胆</dd>
<dd>历城置顶曙是胆胆</dd>
</dl>
<dl>
<dt οnclick="list()">上层项目上层项目</dt> 
<dd>历城置顶曙是胆胆</dd>
<dd>历城置顶曙是胆胆</dd>
<dd>历城置顶曙是胆胆</dd>
</dl>
</body>
</html>

list2.html,不用overflow这种设计方式，用表示显示的display来设计。
<html>
<head>
<style type="text/css">
table{
border:#63F 1px solid;
}
table td{
border:#C06 1px solid;
background-color:#03C;
}
table td div{
background-color:#6F9;
display:none;
}
table td a:link,table td a:viseted{
text-decoration:none;
color:#0F0;
}
.open{
display:block;
}
.close{
display:none;
}
</style>
<script type="text/javascript">
function list2()
{
var aNode = event.srcElement;
var tdNode = aNode.parentNode; //想拿到DIV节点的话，一个很容易想的就是拿到a的下一个兄弟节点，但是容易出现空的文本节点。所以用先获取父结点的方式再获取DIV结点。
var divNode = tdNode.getElementsByTagName("div")[0];
//alert(divNode.nodeName);
var table = document.getElementsByTagName("table")[0];
var divNodes = table.getElementsByTagName("div");
for(var x = 0; x<divNodes.length; x++)
{
if(divNodes[x]==divNode)
{
if(divNode.className == "open")
{
divNode.className = "close";
}
else
{
divNode.className = "open";
}
}
else
divNodes[x].className = "close";
}
}
</script>
</head>

<body>
<table>
<tr>
<td>
<a href="javascript:void(0)" οnclick="list2()">好友菜单列表</a>

<div> 
你好啊世界<br />
你好啊世界<br />
你好啊世界<br />
你好啊世界<br />
你好啊世界<br />
</div>
</td>
</tr>
<tr>
<td>
<a href="javascript:void(0)" οnclick="list2()">好友菜单列表</a>
<div>
你好啊世界<br />
你好啊世界<br />
你好啊世界<br />
你好啊世界<br />
你好啊世界<br />
</div>
</td>
</tr>
<tr>
<td>
<a href="javascript:void(0)" οnclick="list2()">好友菜单列表</a>
<div>
你好啊世界<br />
你好啊世界<br />
你好啊世界<br />
你好啊世界<br />
你好啊世界<br />
</div>
</td>
</tr>
</table>
</body>
</html>

CSS中的布局属性overflow：设置当对象中的内容超过其指定宽度或高度时的显示方式
hidden隐藏、visible显示、scroll滚动条、auto自动
使用此属性可以实现展开闭合效果，如好友列表
display属性也可以完成这个效果 none隐藏，block块状显示分行，
inline一行内显示
获取事件源对象的两种方式
1、event.srcElement
2、事件处理时直接将事件对象通过this传递
<html>
<head>
<link rel="stylesheet" href="tab.css" />
<script type="text/javascript" src="docTool.js"></script>
<script type="text/javascript">
function createTab1()
{
var tabNode = doc.createElement("table");
var tbdNode = doc.createElement("tbody");
var trNode = doc.createElement("tr");
var tdNode = doc.createElement("td");
var textNode = doc.createTextNode("单元格一");

tdNode.appendChild(textNode);
trNode.appendChild(tdNode);
tbdNode.appendChild(trNode);
tabNode.appendChild(tbdNode);
byTag("div")[0].appendChild(tabNode);
//alert(byTag("div")[0].className);
}
function createTab2()
{
var tabNode = doc.createElement("table");
//它直接做了两件事：一、创建了tr。二、把tr添加到表格中去了。封装完后，它就简化了。
var trNode = tabNode.insertRow();
var tdNode = trNode.insertCell();
tdNode.innerHTML = "单元格一".fontcolor("red");
//如果这里面填充的文本是要被解析的，就不用innerText，用innnerHTML。就表示它里面填的是HTML文本，它会被HTML引擎给解析。如果用innerText,打印的就是：<FONT COLOR="red">单元格一</FONT>
byTag("div")[0].appendChild(tabNode);
}
function createTab() //动态的创建多行，多列。
{
var tabNode = doc.createElement("table");
//tabNode.id = "tabid";
tabNode.setAttribute("id","tabid");
var row = byName("rownum")[0].value;
var col = byName("colnum")[0].value;
for(var x=1; x<=row; x++)
{
var trNode = tabNode.insertRow();
for(var y=1; y<=col; y++)
{
var tdNode = trNode.insertCell();
tdNode.innerHTML = x+"...."+y;
}
}
byTag("div")[0].appendChild(tabNode);
event.srcElement.disabled =true;
}
function delRow()
{
var tabNode = byId("tabid");
if(tabNode == null)
{
alert("表格不存在");
return;
}
var rownum = byName("delrow")[0].value;
if(rownum>0 && rownum<=tabNode.rows.length)
tabNode.deleteRow(rownum-1); //要减1的。如果输入的是4删除的实际上是第5行。角标从0行开始。
else
alert("删除的行不存在，学习数数先重要");

}
function delCol() //删除列的原理就是将每一行中的指定的单元格删除的话就相当于删除列了。
{
var tabNode = byId("tabid");
if(tabNode == null)
{
alert("表格不存在");
return;
}
var colnum = byName("delcol")[0].value;
if(colnum>0 && colnum<=tabNode.rows[0].cells.length)
{
for(var x=0; x<tabNode.rows.length; x++)
{
tabNode.rows[x].deleteCell(colnum-1);
}
}
else
{
alert("删除的列不存在");
}
}
</script>
</head>

<body>

行：<input type="text" name="rownum" /><br/>
列：<input type="text" name="colnum" /><br/>
<input type="button" value="创建表格" οnclick="createTab()"><br />
<input type="text" name="delrow" />
<input type="button" value="删除行" οnclick="delRow()" />
<br />
<input type="text" name="delcol" />
<input type="button" value="删除列" οnclick="delCol()" />
<br />
<br />
<div>
</div>
</body>
</html>
创建节点：
document.createElement(标签名)创建一个指定标签名的节点
document.createTextNode(文本内容)创建一个文本节点
添加节点：添加到的目的节点.appendChild(要添加的节点) 添加到尾部

------- android培训、java培训、期待与您交流！ ----------

黑马程序员_毕老师_CSS_JS(上)相关推荐

黑马程序员_毕老师_HTML_32
------- android培训.java培训.期待与您交流! ---------- HTML HTML:(Hype Text Markup Language)超文本标记语言,是最基本的网页语言.代 ...
黑马程序员_毕向东_Java基础视频教程_Java基础学习知识点总结
黑马程序员_毕向东_Java基础视频教程 Java基础学习知识点总结 2016年01月06日 day01 一.基础知识:软件开发 1.什么是软件?软件:一系列按照特定顺序组织的计算机数据和指令的集合 ...
黑马程序员—java毕老师视频个人总结01
-------android培训.java培训.期待与您交流! ---------- 因为之前看有一遍,但没有同步书写blog,如果现在硬着头皮回想每一天的所学所得,无疑是既浪费时间又不可能牢固知识点 ...
黑马程序员学习毕老师java视频第14.15.16天
---------------------- <a href="http://edu.csdn.net/heima" target="blank"> ...
黑马程序员_毕向东_JavaScript视频教程--学习笔记
---------------------- android培训.java培训.期待与您交流! ---------------------- 第一节: 1. Html基本内容 ...
黑马程序员_毕向东_JavaScript视频教程（1）
------- android培训.java培训.期待与您交流! ---------- <html> <head> <title>这是我</title> ...
黑马程序员_异常（老毕视频总结及《疯狂java》补充）
----------------------<ahref="http://edu.csdn.net"target="blank">ASP.Net+A ...
黑马程序员_石头迷阵小游戏
黑马程序员_石头迷阵小游戏源代码一些说明: 1)这些是我看b站黑马程序员的视频,自己手打的,想分享一下,如果有侵权啥的请联系我,马上删除 2)一些比较重要的我都有给注释 3)工具idea idk版 ...
黑马程序员_基础测试
-------android培训.java培训.期待与您交流! ---------- 黑马程序员训练营基础测试题及个人代码(包含思路.步骤和基本注释) 1. 编写程序计算12+22+32+....+1 ...

黑马程序员_毕老师_CSS_JS(上)

黑马程序员_毕老师_CSS_JS(上)相关推荐

最新文章

热门文章