黑马程序员----JAVA基础CSS javaScript DOM

来源：互联网发布：淘宝退款被卖家拒绝了编辑：程序博客网时间：2024/05/29 19:47

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

一ccs

1. ccs概述?

HTML用于显示数据，把数据展示在页面中。
CSS是层叠样式表（Cascading Style Sheets）。用于美化页面定义网页的现实效果。而且还可以让我们的显示数据和美化数据分离。

2. ccs的作用?

对html封装的网页数据进行版式和样式的定义.

可以解决html代码对样式定义的重复，降低了耦合性提高了后期样式代码的可维护性，并增强了网页的现实效果功能。简单一句话：CSS将网页内容和显示样式进行分离，提高了显示功能，同时可以把css样式代码放到一个外部文件然后html页面再导入从而提高了网页的效率。

3. ccs怎么用?

步骤:

先封装代码

三种方式: p: 封装后成行里的一部分信息 div :封装后成一行就是会自动换行 span:封装后里面的内容就成了一个段落(前后都空一行)

三种标识

1:html 直接用div p span 标记操作

标记:

<div >演示div区域二</div>

引用:

div{//标签选择器

color:red;

}

2.class 相同标签设置不同样式的时候，用class进行区分。
不同标签进行相同设置的时候，用class进行统一定义。

标记:

<div class="hehe" >演示div区域二</div>

<span class="haha">演示span<b>区域</b>一</span>

引用:

div.haha{//类选择器

color:red;

}

span.haha{//类选择器

color:red;

}

/*对名称为haha的类的标签进行样式操作:前面加点.

. haha{//类选择器

color:red;

}

第三种:id 这个要确保唯一性,跟变量名一样，一个页面上只能有一个，不能出现重复的id号。

标记:

<div id="xixi" >演示div区域二</div>

引用:

#xixi{//id选择器

color:blue;

}

合并操作:

div b,.hehe,#xixi{

color:red;

}

css与html结合通过四种方式 格式如下:

1. style属性方式：

利用标签中style属性来改变每个标签的显示样式。

例：

p标签段落内容。

</p>

该方式比较灵活，但是对于多个相同标签的同一样式定义比较麻烦，适合局部修改。

2. style标签方式：（内嵌方式）

在head标签中加入style标签，对多个标签进行统一修改。

<head>

p { color:#FF0000;}

</style>

</head>

该方式可以对单个页面的样式进行统一设置，但对于局部不够灵活。

3. 导入方式：

前提是已经存在一个定义好的CSS文件。网页的一部分样式需要用到，那么就用到这种方式。

例：
<style type="text/css">

@import url(css_3.css);

注:css里还可以定义:@import url包在css文件里直接写义

@import url(div.css);

@import url(span.css);

@import url(p.css);

div { color:#FF0000;}

</style>

注：url括号后面必须要用分号结束。如果导入进来的样式与本页面定义的样式重复，以本页定义样式为准。

4. 链接方式：

通过head标签中link标签来实现，前提也是先要有一个已定好的CSS文件。

例：

注：可以通过多个link标签链接进来多个CSS文件。重复样式以最后链接进来的CSS样式为准。

a) 伪元素选择器

其实就在html中预先定义好的一些选择器。称为伪元素。是因为CSS的术语。

格式：标签名：伪元素。类名标签名。类名：伪元素。都可以。

a:link 超链接未点击状态。

a:visited 被访问后的状态。

a:hover 光标移到超链接上的状态（未点击）。

a:active 点击超链接时的状态。

使用顺序 L – V – H - A

p:first-line 段落的第一行文本。

p:first-letter 段落中的第一个字母。

:focus 具有焦点的元素。IE6浏览器不支持，在FireFox中可以看到效果。

4. ccs什么时候用?

制作网页时需要给出复杂的特效时.

5. ccs有什么特点?

样式优先级：

由上到下，由外到内。优先级由低到高。就近原则。

总结CSS代码格式

选择器名称 { 属性名：属性值；属性名：属性值；…….}

属性与属性之间用分号隔开

属性与属性值直接按用冒号连接

如果一个属性有多个值的话，那么多个值用空格隔开。

二javaScript

1. javaScript是什么?

JavaScript是一种运行在客户端浏览器的是基于对象和事件驱动(事件驱使其动态)的脚本语言.

2. javaScript有什么作用?

负责提供具备逻辑性的编程语言内容，控制页面的行为。

3. javaScript怎么用?

在html运用:

格式1:前面加<script type="text/javascript" >

javaScript内容

</script>

格式二:直接导入一个js文件,如:<script type="text/javascript" src="jsfiles/hello.js"></script>

javaScript的基本语法

基本要素:

关键字:有特殊意义的单词

标识符:用于标识数据的符号,比如和序的自定义名称变量名

变量:用于储存常量的内存空间,当储存的数据不确定时,用变量

运算符:用于数据运算的符号

语句:用于控制程序的运行流程(判断与选择语句没有区别)

数组:是一个储存数据的容器,并可以对里面的数据进行操作

函数:一段独立的代码,用于表示一个功能.提高代码复用性

变量:是弱类型,所以其没有数据类型的区分,所有的都用一种var

如:var x= "123" var x=1 var x=true等...

显示数据的两种方式:

alert("x"+x)-----弹出一个窗口

document.write("x"=x);-----直接在网页区域显示

如何显示隐式数据类型:

//typeof。获取数据的隐式类型。

document.write("abc:"+typeof("abc")+"<br/>");//string

document.write("123:"+typeof(123)+"<br/>");//number

语句：

* 1，判断结构。if

* 2，选择结构。switch

* 3，循环结构。while, do while ,for

==============================================

//判断结构。

var x = 3;

if(4==x){//在判断时，建议将常量放左边

document.write("yes");

}else{

document.write("no");

}

//==============================================

//选择结构。

var str = "abcd";

switch(str){

case "cc":

document.write("a");

break;

case "abc":

document.write("b");

break;

default:

document.write("c");

}

==============================================

//循环结构。

//while ,do while(无论条件是否满足，循环体至少执行一次), for

var x = 1;

while(x<3)

{

alert("x="+x);

x++;

}

------------------------------

for(var x=0; x<3; x++){

document.write("x="+x+"<br/>");

}

//var x = 9;

document.write("x==="+x);么时候用?

数组:

* 定义格式：var arr = [];//创建一个元素个数为0的数组。

* 特点：

* 1，数组长度可变。

* 2，数组元素的类型可以任意。

3.不一定每个元素都要赋值,

如可以:var arr=[2,3] 再定义一个arr[2]="abc" 那么结果是:2,3,nofield,"abc",

* 格式二：var arr = new Array(4,6);

函数:

* js中的函数

* 定义函数无外乎围绕两点：

* 1，明确该功能的参与运算的未知内容。明确参数列表。

* 2，明确该功能的结果。明确返回值。

* 格式：通过关键字function 来定义。

* function 函数名(参数列表)

* {

* 函数体；

* return 返回值；

* }

注意几点:

1.只与函数名有关系,参数不作区分

2.参数不需要有类型,直接跟一个数组形式存在

3.不管参数有没有,都可以传参数,以数组形式存在的,这个数组名字叫做：arguments.

只是说为了阅读和使用方便，定义了几个参数，就传入几个实参。

function show(a,b){

for (var x = 0; x < arguments.length; x++) {

document.write(arguments[x]+"<br/>");}

4.函数的参数或者函数内定义的变量，只在函数内有效，称为局部变量。

5.函数名后面写括号，是在调用这个函数。不写括号，是在使用这个函数引用。　

6.函数的其他定义方式。

1，动态函数。该函数特点，参数列表，和函数体都是动态指定。

var add = new Function("x,y","var sum; sum=x+y; return sum;");// 根据Function类，通过new产生一个函数对象

2，匿名函数。有什么特点?匿名函数。就是一种简写格式。

var method = function(){

alert("func run");

}

javaScript常用方法:

1.数组://加入分隔符join(),默认,;排序sort();

2.String:如下事例:

var str = 'abcde';

alert(str.bold());

writePageln(str.bold());

writePageln(str.fontcolor("red"));

writePageln(str.link("http://www.sina.com.cn"));

writePageln(str.substr(1,4));//bcde

writePageln(str.substring(1,4));//bcd

3.Date:

ar year = date.getFullYear();

var month = getValue(date.getMonth()+1);

var day = getValue(date.getDate());

var week = getWeek(date.getDay());

//获取两个时间点之间相隔多少天.

var str_date = '01/12/1988';

var str1_date = '9/30/2012';

//先获取多少毫秒

var value = Date.parse(str1_date)-Date.parse(str_date);//将日期字符串转成日期对象。

var day=value/3600/24/1000;

document.write(value+"<br/>");

var str_date = '7/26/2006';

var value = Date.parse(str_date);//将日期字符串转成日期对象。

writePageln("value="+new Date(value).toLocaleString());

4.Math:

var num1 = Math.ceil(13.56);

var num2 = Math.floor(13.56);

writePageln("num1="+num1);

writePageln("num2="+num2);

for(varx=0;x<10;x++){ writePageln(Math.ceil(Math.random()*10));

writePageln(parseInt(Math.random()*6+1));

}

javaScript对象的创建:

是什么?

本质上就是封装,因为js是基于对象的,所以相当于把一个一个的小对象,封装在一个方法中.然后把这个方法当作一个对象,然后,再往里面添加方法,或属性对象.

怎么用?

格式:

先建立一个方法描述一个事物

//描述人。Person

function Person(){//相当于构造器。

alert("person run");

}

再创建对象.

//创建Person对象。

var p = new Person();

给对象添加属性

p.name = "lisi";//p这个对象就具备了一个属性名为name，值为lisi。

p.age = 32;

给对象添加方法

p.show = function(){

alert(this.name+"....."+this.age);

}

//调用方法

p.show();

也可以实现get set的封装:

如下:

function Person(name,age){

this.name=name;

this.age=age;

this.show = function(){

alert(this.name+"........"+this.age);

}

this.setName = function(name){

this.name = name;

}

this.getName = function(){

return this.name;

}

三 DOM与BOM

1. DOM 和BOM是什么?

DOM: Document Object Model 文档对象模型

文档：标记型文档,html,xml等。

对象：就是一个封装体，这里指的就是将文档封装成了对象。

模型：就是一个共性的内容具体表现。

2. DOM 和BOM有什么用?

DOM技术的作用：就是将标记型文档以及文档中的所有内容封装成了对象。

并在对象中定义了更多的属性和行为，便于操作这些对象.

可以对节点进行各种操作增删改查。弊端：如果标记型文档较大，效率低。

DOM技术是一种底层技术，只要应用软件中内置了可以DOM技术的解析引擎，

就是可以通过DOM的方式对标记型文档进行解析。

浏览器中就内置了DOM解析引擎。

3. DOM 和BOM怎么用?

DOM技术如何对标记型文档解析的呢？

将一个标记型文档解析成一个dom树，将文档中的内容解析成树中的节点。

document

|--html

|--head

|--meta

|--title

|--body

|--div

|--文本

|--table

|--tbody

|--tr

|--td

|--a

|--form

|--input

|--select

4. DOM 和BOM什么时候用?

负责将文档以及文档中的所有内容封装成对象，并提供了属性和行为，便于对对象的操作。

5. DOM 和BOM有什么特点?

DOM解析：好处：可以对节点进行各种操作增删改查。弊端：如果标记型文档较大，效率低。

SAX解析：基于事件驱动。好处：速度快。弊端：只能获取数据，不能对节点进行修改等其他操作。

DOM发展等级：

level_1: 将html文档封装成了对象。

level_2: 在1的基础上进行升级，加入了名称空间支持等。

level_3: 将xml文档封装成了对象。

DHTML:动态的HTML。多项技术的综合体简称。

包含着：html css javascript dom。

HTML：负责提供标签，对数据进行封装(标示)。

CSS:负责提供丰富的样式，对数据进行显示效果的定义。

DOM:负责将文档以及文档中的所有内容封装成对象，并提供了属性和行为，便于对对象的操作。

JS:负责提供具备逻辑性的编程语言内容，控制页面的行为。

BOM

是什么?

BOM：Browser Object Model 浏览器对象模型。

将浏览器窗口封装了对象。以及浏览器中包含的内容也封装成了对象。

比如：地址栏，状态栏，历史记录，浏览器的特有信息。

window

|--history

|--location

|--document

|--navigator

四 DHTML案例

DHTML应用

1. DHML是什么?

DHTML是指动态的HTML。是多项技术的综合体简称。包含着：html css javascript dom。

2. DHML有什么用?

可以让HTML实现动态效果,从而实现与用户更好的交互.

3. DHML怎么用?

DHTML编程思想:

一、首先使用HTML标签对数据进行封装,定义数据的位置.

二、接下来,用CSS定义数据的初始化样式.

三、最后实现动态效果:

1.明确事件源:也就是操作哪个标签以获得效果

2.明确事件动作,:也就是通过什么动作让这个事件发生.

3.明确事件的处理方式:

这里就要用到JavaScript和DOM, 用DOM获取网页节点,并应用节点的属性和行为,然后用javaScript来对操用各个对象的行为及维护各个对象的关系.

事例一:新闻字体的大小调整。

<html>

<head>

<title>Untitled Document</title>

伪元素选择器,是html预定好的一些选择器.

a:link,a:visited{

/*设定超链接点击前和点击后的颜色为一样*/

color:#a4d1f7;

/*取消下划线*/

text-decoration:none;

}

/*设定光标移动到超链接上的颜色状态*/

a:hover{

color:#fa8316;

}

/* 用id选择器设定div文本的格式*/

#newstext{

/*设制区域离上面标签的距离*/

margin-top:20px;

/*设制一个div的外框线条粗细和颜色*/

border:solid 3px #0080ff;

/*设制一个div的外框的宽度*/

width:550px;

/*设制一个div内容的页边距*/

padding:10px;

}

</style>

</head>

<body>

<h2>这是新闻标题</h2>

//定义javaScript 方法一:直接通过传参改变属性

//改变新闻文字的字体大小。

function changeFont(size,clr){

//1,获取被处理的新闻文字div节点。

var newsTextNode = document.getElementById("newstext");

//用div节点去调用其style属性节点并调用其样式对象属性:字体大小

newsTextNode.style.fontSize = size+"px";

//用div节点去调用其style属性节点并调用其样式对象属性:字体格式

newsTextNode.style.color = clr;

}

</script>

javaScript方法二:将样式进行CSS封装成参数传入.

<head>

/*定义一些风格*/

/*.开头是就是class属性*/

.max{

font-size:24px;

color:#81f02f;

}

.min{

font-size:12px;

color:#fa590c;

}

.norm{

font-size:16px;

color:#000000;

}

</style>

</head>

//改变新闻字体风格。通过className进行风格切换。

function changeFont(styleName){

var newsTextNode = document.getElementById("newstext");

//通过div对象的属性className获取对象的类

newsTextNode.className = styleName;

}

</script>

这是新闻内容这是新闻内容这是新闻内容这是新闻内容这是新闻内容<br/>

这是新闻内容这是新闻内容这是新闻内容这是新闻内容这是新闻内容<br/

</div>

</body>

</html>

事例二:列表标签的展开闭合

//让dd标签不缩进

dl dd{

margin:0px;

}

dl{

//设置默认属性

height:16px;

overflow: hidden;

}

.open{

overflow:visible;

}

.close{

overflow: hidden;

}

</style>

</head>

<body>

展开闭合切换方法一:

var b= true;

function list(node){

var dlNode=node.parentNode;

if(b){

dlNode.style.overflow="visible";

b=false;

}else{

dlNode.style.overflow="hidden";

b=true;

}

展开闭合切换方法二:

function list2(node){

var dlNode=node.parentNode;

if(dlNode.className=="open"){

dlNode.className="close";

}else{

dlNode.className="open";

}

</script>

<dl>

</dl>

<dl>

</dl>

</body>

</html>

4. DHML什么时候用?

只要做网页,需要有交互与动态就会用到

5. DHML有什么特点?

这个技术方法最重要