10天学会php第八天js的使用

前面几天介绍了html、php和mysql的基础知识，今天介绍一下页面效果css和js的使用。这个一般用于页面效果。如图片轮播、手风琴特效、在线咨询等效果都需要js代码，我们就从基础开始一层层揭开他的什么面纱吧。

今天的知识点如下

div

css介绍

选择器

css使用方式

css 主要属性

什么是div，div有什么特性

特性：独占一行。

css介绍：层叠样式表.

作用：修饰和美化页面元素的。

index -->--->结构。

a.html---》表现。

web 2.0 结构和表现分开。

选择器：选中页面的某个（某些）元素来操作样式的。

1 通配选择器 ： *

2 id 选择器：通过id来查找页面元素。#IDName

3 类选择器：通过元素 class属性来查找页面元素.className

4 标记选择器：通过标记名称来查找元素。 标记名称

5 群组选择器：通过id、class、标记名称的组合来统一查找元素。 元素1，元素2，元素3....

6 包含选择器：父元素 子元素

css使用方式

使用方式：3中 元素上直接使用（内嵌样式）、外部调用******、在head区域书写样式。

外部引用css

1、元素上直接使用（内嵌样式）:利用元素的style来写样式。

2、外部调用*************

3 在head区域书写样式

选择器

选择器

选择器

选择器

五 、 css 主要属性

css使用

1 文本属性：

color:颜色。

font-size:大写。

font-family:字体。

font-weight：加粗。bold normal.

font-style:斜体：normal italic。

line-height: 行高。

text-decoration:修饰线。

line-through 删除线.

overline上划线

underline下划线

none没有线。

text-align: 文本对齐方式 left right center

cursor:鼠标指针 pointer help wait

2 边框：

border： 粗细 实线 颜色。

border-top:粗细 实线 颜色

border-left:

border-right:

border-bottom:

3 背景属性：

background-color:背景色。

background-image:url("../image/2.jpg"); //路径是从css文件出发的。

background-repeat:no-repeat repeat-x repeat-y;

background-position:

4 布局属性：

width：宽度

height：高度

margin-top:

margin-bottom:

margin-left:

margin-right:

margin: 上 右 下 左；

padding-top:

padding-left:

padding-right:

padding-bottom:

padding:上 右 下 左；

float:浮动：

clear:清除浮动：

list-style-type:none; 去掉ul的黑点：

超链接：

a:动作名称

a/#id:link 正常连接的样式。

a/#id:hover 移动上去的样式。

a/#id:active 点击动作时候的样式。

a/#id:visited 访问过的连接的样式。

position:位置。

1 relative：相对位置。

2 absolute: 绝对位置。

3 fixed：固定位置

4 static：默认位置。

1 relative:相对位置。

2 absolute:绝对定位。

1》如果元素的父元素都没有position，该元素如果有position，将参照body来定位。

2》如果该元素的父

js

级元素只要有一个定义了position：absolute/relvative.

该元素将相对于父级元素去定位。

3 fiexed：总是以body为定位对象。

4 static 默认。

js知识点：

数组；

自定义函数

js对象

JavaScript Document

一、数组：

1 创建数组：

var arr = new Array(val1, val2,val3,.....valn);//数组下标时从0开始的。

2 数组的属性：length

数组名称.length; 数组元素个数。

注意：看到数组，先遍历在说话。

数组常用方法：

join：将数组元素使用指定的连接符号连接成字符串。

push: 在数组的末尾添加元素.

unshift:在开头添加元素。

shift:删除数组第一个位置的元素，且返回该元素。

pop: 删除最后一个元素，且返回该元素

concat() 将多个数组连成一个新数组。

JavaScript函数

二维数组：

二维数组的定义：

var arr = new Array(

new Array("张三","李四","wangwu","zhaoliu"),

new Array(12,15,16,18),

new Array(0,1,0,1)

);

三、js对象

1 windws 对象

alert():弹出带有确定按钮的对话框。

configm();弹出带有确定和取消按钮的对话框。ture 确定 false 取消

open(url，window_name,window_property)打开新的浏览器窗口

width:宽

height：高

left:窗口距离左边的距离

top:窗口右边的距离。

menubar:菜单栏

toolbar:工具栏

location:地址栏

status:窗口的状态栏

scrollbars;页面的滚动条。

2 screen对象

width

height

3 navigator对象

appName 浏览器名称

appVersion 浏览器版本

4 history

back()*****

forward()*****

go()

window.histroy.back(-1); 后退

window.histroy.forward(1);前进

5 location

window.location[.href]="http://www.freemoban.com";

document对象

html dom

select 对象

事件

一 document对象

1 wirte()方法：

作用：输出到浏览器。

格式：document.write() "字符串" 数值型 var

2 getElementById("元素的id");

作用：通过元素的id值定位元素。

格式：document.getElementById("id");

getElementsByTagName("标记名称");

作用：通过标记名称定义元素，获得到一个集合。

格式：document.getElementsByTagName("标记名称");

3 removeChild()方法

作用：删除页面的元素

格式：父对象.removeChild(子对象);

parentNode:父节点

4 appendChild()方法。

作用：向页面元素追加节点。

格式：父对象.appendChild(子对象);

创建元素 document.createElement("元素名称"); 返回元素对象

属性指定：元素对象.属性名称="属性的值";

父对象.appendChild(子对象);

二 html dom

dom:

1 获取对象的属性：

对象名称.属性名称*********

对象名称.getAttribute("属性名称")

2 设置对象的属性：

对象名称.属性名称 = 值

对象名称.setAttribute("属性名称","值");

注意：

1》 属性名称有两个词以上合成，属性名称遵循"驼峰标记法"。

2》 innerHTML 和 innerText 控制标记中内容的。

innerHTML:获取到对象内部的所有内容（html和文本）. ie ff

innText:只包含对象内部的文字。

3 获取和设置元素的css样式。

设置：对象名称.style.样式 = 值。

获取：对象名称.style.样式

css background-image

js :backgroundImage

今天介绍的知识点有点多，有兴趣的朋友可以反复多看多实践