一、css
1、css样式的结合应用
<html> <head> <style> ul{ list-style-type:none; list-style-image:url(../pic/4.jpg); /* 用自己的图片代替前面的小点 */ } table{ border-bottom:#0033CC double 3px; /* double虚线 */ /* css要用这种注释 */ border-left:#FFFF00 solid 3px; /* 实线 */ border-right:#000099 dashed 3px; /* 虚线线 */ border-top:#00CC99 groove 3px; /* 确定的规范，也是实线 */ width:500px; border-spacing:0; } table td{ border:#00CCFF dotted 1px; /* 点线 */ padding:20px; } div{ border:#FF9900 dashed 2px; height:200px; width:400px; } input{ border:#0099FF 1px solid; border:none; border-bottom:#000000 1px solid; } .haha{ border-bottom:#0000CC 5px solid;} </style> </head> <body> <ul> <li>无序项目列表</li> <li>无序项目列表</li> <li>无序项目列表</li> <li>无序项目列表</li> </ul> <table> <tr> <td><input type="text" class="haha" /></td> <td>单元格二</td> </tr> <tr> <td>单元格一</td> <td>单元格二</td> </tr> </table> <div>div区域</div> 姓名：<input type="text" />成绩：<input type="text" /> </body> </html>
2、css的盒子模型
- 盒子模型：
边框：border
上border-top
下border-bottom
左border-left
右border-right
内边距：pappding
pappding-top
...
一个值：四边
两个值：上下 左右
三个值：上 左 下
四个值：顺时针
外边距：margin
3、布局
- 漂浮：float
- 定位：position
- 图文混排：<div>
- 图像签名：
对文字定位positon
4、css总结
- css 层叠样式表：
将网络中的样式分离出来，完全由css来控制
增强样式的复用性以及可扩展性。
样式：
选择器{属性名:属性值; 属性名:属性值...}
css和html代码结合的四种方式：
1、每一个html标签都有一个style属性。
2、当页面有多个标签有相同样式时，可以进行复用。
<style>
css代码。
</style>
3、当有多个页面中的标签的样式相同时，还可以将样式单独封装成一个css文件。通过在每个页面中定义
<style>
@import url("1.css");
</style>
4、通过html中head标签的link标签连接一个css文件。
<link rel="stylesheet" href="1.css" />
技巧：
为了提高相同样式的复用性以及复用性，可以将多个标签样式进行单独定义，并封装成css文件。
p.css, div.css...
在一个css中使用css的import将多个标签样式文件导入。
然后再html页面上，使用link标签导入这个总的css文件即可。
1.css
@import url("p.css");
@import url("div.css");
<link rel="stylesheet" href="1.css" />
选择器（css中比较重要的）：
其实就是样式要做用的标签容器。
当样式分离后，html作用在于用标签封装数据。然后将css加载到指定标签上。
选择器的基本分类：
1、标签选择器：其实就是html中的每一个标签名。
2、类选择器：其实就是每一个标签中的class属性。用 .类名 的形式表示。
只用来给css所使用。可以对不同标签进行相同样式设定。
3、id选择器：其实就是每一个标签中的id属性。但是要保证id的唯一性。用 #id名 来标识。
因为id不仅可以被css所使用，还可以被javascript所使用。
选择器的优先级：
id>class>标签
扩展选择器：
1、关联选择器：其实就是对标签中的标签进行样式定义。用 选择器 选择器 ... 的形式表示。
例：
div b {color:#FFFFFF}
<div><b></b></div>
2、组合选择器：对多个选择器进行相同样式定义。用 多个选择器用 , 隔开的形式表示。
.z, p b {...}
<div class="z"><b></b></div>
<p><b></b></p>
3、伪元素选择器：其实就是元素的一个状态。
a:link 超链接被点前状态。
a:visited 点之后。
a:hover 悬停。
a:active 点击时。
例：
a:link, a:visited{...}
要是四个都定义，有一个顺序：L V H A。
p:first-letter
p:first-line
:focus 很遗憾，IE6不支持。但FF支持。
css滤镜：其实就是通过一些代码完成丰富了样式。没用过？
当使用到css的更多属性时，还需要查阅css api。
网页设计的时候：div+css
div：行级区域。
span：块级区域。
p：行级区域。p中不要嵌套div。为什么呀？
二、JavaScript
1、JavaScript 概述
- JavaScript是基于对象和事件驱动的脚本语言，主要应用在客户端。
特点：
1. 交互性（它可以做的就是信息的动态交互）
2. 安全性（不允许直接访问本地硬盘）
3. 跨平台性（只要是可以解释Js的浏览器都可以执行，和平台无关）
JavaScript与Java不同。（JavaScript和Java没有直接联系）。
1. JS是Netscape公司的产品，前身是LiveScript;Java是Sun公司的产品，现在是Oracle公司的产品。
2. JS是基于对象，Java是面向对象。
3. JS只需解释就可以执行，Java需要先编译成字节码文件，再执行。
4. JS（非严谨）是弱类型，Java（严谨）是强类型。
对于数据的定义，java对每一种数据都分配了不同的类型。
而JavaScript没有类型。
2、JavaScript与Html的结合方式
- 想要将其他代码融入到Html中，都是以标签的形式。
1. JS代码存放在标签对<script> js code．．．</script>中。
2. 当有多个html页面使用到相同的JS脚本时，可以将js代码封装到一个文件中，只要在script标签的src属性引入一个js文件。（方便后期维护，扩展）
注意：如果在script标签中定义了src属性，那么标签中的内容不会被执行。
例：<script type="text/javascript" src="1.css"></script>
注：规范中script标签早期有一个属性language,而现在使用type属性。
3、JavaScript语法
- 每一种语言都有自己的语法规则，JS语法与Java很像，所以学习起来比较容易。JS中也一样有变量，语句，函数，数组等常见语言组成元素。
- 变量
通过关键字var来定义，弱类型即是不用指定具体的数据类型。
在JavaScript中没有字符概念，所以用单引号，双引号都一样。
例：
var x = 3;
var y = "abc";
注：JS中特殊的常量值：undefined，当变量没有初始化就被使用，该变量的值就是undefined（未定义）。
注意：Javascript的语句在结尾处是可以不用分号结束的，非严谨语言的特点。
但为了符合编程规范，需要象java一样定义结束符。
而且有些情况是必须写分号的，如：var x = 3 ; var y =5 如果两条语句写在同一行，就需要分号隔开。
- 运算符
Javascript中的运算符和Java大致相同。
只是运算过程中需要注意几点：
1， var x = 3120/1000*1000; x = 3120;而不是3000。
2， var x = 2.4+3.6 ; 得x = 6;而不是6.0
3， var x = "12" + 1; 得x = "121"; //string
x = "12" – 1 ; 得x = 11; //number
加号对于字符串是连接符
4， && || 是逻辑运算符 & | 是位运算符。
5， 也支持三元运算符
6， 特殊运算符 typeof : 返回一个操作表达式的数据类型的字符串。
var x = 3;
var y = "123";
var z = false;
typeof(x); //number
typeof(y); //string
typeof(z); //boolean
- 语句(与Java语句格式相同)
使用逻辑运算符进行布尔表达式连接的时候，需要是短路与和短路或。 && ||
1. 判断结构(if语句)
注：var x = 3;
if(x==4)//可以进行比较运算。
if(x=4)//可以进行赋值运算，而且可以同样进行判断。不报错。
因为在Js中0或者null就是false，
非0或者非null就是true（通常用1表示）。
所以if(x=4)结果是true；
可以通过if(4==y)来解决该问题。因为4=y不会进行判断，而是会报错。
2. 选择结构(switch语句)
与java不同的是：因为弱类型，也可以对字符串进行选择。
例：
var x = "abcd";
switch(x)
{
case "abc":
alert('a');
break;
default:
alert('c');
break;
}
3. 循环结构(while语句，do…while语句，for语句)。
注：不同的是，没有了具体数据类型的限制，使用时要注意。
var sum = "";
for(var x = 1; x <= 4; x++)
{
sum = sum + "x=" + x + ",";
}
alert(sum);
没看懂？为什么会得到x=1,x=2,x=3,x=4,？
用表格形式显示一个99乘法表。(for循环)<html> <body> <style type="text/css"> table{ border-collapse:collapse; width:600px; } table td{ border:1px #0000FF solid; padding:10px; } </style> <script type="text/javascript"> document.write("<table>"); for(var x = 1; x <= 9; x++) { document.write("<tr>"); for(var y = 1; y <= x; y++) { document.write("<td>"+y+"*"+x+"="+x*y+"</td>"); //"+y+"*"+x+"="+x*y+"为什么是这么表示呢？ } document.write("</tr>"); } document.write("</table>"); </script> </body> </html> - 数组
方便操作多元素的容器，可以对其中的元素进行编号。
特点：可以存任意元素，长度是可变的。
格式：
var arr = new Array();
arr[0] = "hello";
arr[1] = 123;
var arr = ['hello',123,true,'abc'];
通过遍历即可对数组进行基本操作。
for(var x=0; x<arr.length; x++)
{
alert(arr[x]);
}
二维数组：
var arr = [[3,1,9],[3,4]];
- 函数
1. 一般函数
格式：
function 函数名(形式参数...)
{
执行语句；
return 返回值；
}
函数是多条执行语句的封装体，只有被调用才会被运行。
注意：调用有参数的函数，但没有给其传值，函数一样可以运行，或者调用没有参数的函数，给其传值，该函数也一样运行。
说的简单点：只要写了函数名后面跟了一对小括号，该函数就会运行。那么传递的参数呢？
其实，在函数中有一个参数数组对象（arguments），该对象将传递的参数都封装在一个数组中。
例：
function demo()//定义函数。
{
alert(arguments.length);
}
demo("hello",123,true);//调用函数。
那么弹出的对话框结果是3，如果想得到所有的参数值，可以通过for循环遍历该数组。
for(var x=0; x<arguments.length; x++)
{
alert(arguments[x]);
}
为了增强阅读性，最好按照规范，按定义好的形式参数传递实际参数。
函数在调用时的其他写法：
var show = demo();//show变量接收demo函数的返回值。
var show = demo;//这种写法是可以的，意为show和demo代表同一个函数。
//那么该函数也可以通过show()的方式运行。
2、 动态函数
通过Js的内置对象Function实现。
例：var demo = new Function("x,y";"var sum = x+y; return sum;");
demo(4,6);
如同：
function demo(x,y)
{
alert(x+y);
}
demo(4,6);
不同的是，动态函数，参数以及函数体都可以通过参数进行传递，可以动态指定。
3、 匿名函数
格式：function(){...}
例：var demo = function(){...}
demo();
通常在定义事件属性的行为时较为常用。
例：
function test()
{
alert(“load ok”);
}
window.onload = test;
可以写成匿名函数的形式：
window.onload = function()
{
alert(“load ok”);
}
匿名函数就是一种简写格式。
- 对象
Js除了已经提供的内置对象外，也可以自定义对象。
例：
function Person()//很象java中的构造函数。P不一定要大写。
{
}
var p = new Person();
p.name = "zhangsan";//定义成员变量。
p.age = 20;
//定义成员函数。
p.run = function()
{
alert(“run”);
}
p.run();
或：
function Person(name,age)
{
this.name = name;
this.age = age;
}
var p = new Person("zhangsan",20);
alert(p["name"]+"..."+p.age); //两种调用方式。
- Js用于操作对象的语句
1、 with语句。
格式：
with(对象)
{
}
应用：当调用一个对象中多个成员时，为了简化调用，避免”对象.”这种格式的重复书写。
var p = new Person("zhangsan",20);
alert(p.name+","+p.age);
可以写成：
var p = new Person("zhangsan",20);
with(p)
{
alert(name+","+age);
}
with语句定义了某个对象的作用域，在该域中可以直接调用该对象的成员。
2、 for...in语句
用于遍历对象属性。
例：
var p = new Person("zhangsan",20);
for(x in p)
{
alert(x);//结果是两个对话框，一个是name，一个是age。
alert(x+”:”+p[x]);//可以得到属性与属性的值。p[x]:p对象就是个数组，要通过指定的元素名获取元素的值。
}
- 补充：
JavaScript中的已定义好的一些对象。
1、String,Math,Date
这些对象都有一个属性叫做prototyp原型。
prototype可以获取指定的对象引用
可以通过该引用给已有的对象赋予一些新的功能。
那么在使用该对象时，可以直接使用定义好的新功能。
function getMax()
{
var max = 0;
for(var x=1; x<this.length; x++)
{
if(this[x] > this[max])
max = x;
}
return this[max];
}
var arr = [3,4,16,7];
arr.sort(); //直接调用Array对象的sort方法对数组进行排序。
那么可不可以像调用sort方法一样调用getMax方法呢：
就需要将getMax方法添加到Array对象当中。
Array.prototype.getMax = getMax;
var x = arr.getMax();
alert("max="+x);
常见的全局方法：
parseInt(numstr,[radix]); //将数字格式的字符串转成整数。如果指定了基数，那么numstr就会按照指定的基数机制进行转换。
x.toString();
三、DOM编程
1、DOM：document object model 文档对象模型。
- 其实就是将一些标记型的文档以及文档中的内容当成对象。
为什么要将这些文档以及其中的标签封装成对象呢：
因为可以在对象中定义其属性和行为，可以方便操作这些对象。
- dom三层模型：
dom1：将html文档封装成对象。
dom2：将xml文档封装成对象。
dom3：将xml文档封装成对象。
标签之间存在层次关系：
html
|--head
|--title
|--base
|--mate
|--link
|--style
|--script
|--body
|--table
|--tbody
|--tr
|--th
|--td
|--div
|--form
|--input
|--select
|--a
|--dl
|--dt
|--dd
DOM树 节点。
可以动态地添加和删除
html，xhtml，xml：这些都是标记型文档。
DHTML：是多个技术的综合体。叫做动态的html。它不是一门语言。
html css dom JavaScript的综合体
html：将数据进行封装。
dom：将标签封装成对象。（起着关键作用）。
css：负责标签中数据的样式。
JavaScript：将三者进行融合，通过程序设计方式来完成动态效果的操作。
xmlHttpRequest --> AJAX（没有新的技术）
<head> <script type="text/javascript"> var b = true; function demo() { var obj = document.getElementById("divid"); // alert(obj.tagName); //标签名 // alert(obj.innerText); //内部文本 // obj.innerText = "kkkkk"; //改变文本 // alert(obj.className); //得到类名 if(b) { obj.className = "font1"; b = false; } else { obj.className = "font2"; b = true; } } var ranNum = parseInt(Math.random()*100+1); function guess() { var textObj = document.getElementById("textid"); var num = parseInt(textObj.value); alert(ranNum); if(num > ranNum) alert("大了，继续！"); else if(num < ranNum) alert("小了，继续！"); else if(num == ranNum) alert("中了，恭喜！"); } </script> <style type="text/css"> .font1{ color:#0000CC; } .font2{ color:#FF0000; } </style> </head> <body> <input type="button" value="演示效果1" οnclick="demo()" /> <div id="divid"> hahaha </div> <br /> <input type="button" value="演示效果2" οnclick="guess()" /> <input type="text" id="textid" /> </body>
扫一扫
882
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
