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

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

  • 发表于:
  • 原文链接https://kuaibao.qq.com/s/20190102A0OO2F00?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。

扫码关注云+社区

领取腾讯云代金券