JavaWeb-02
JavaWeb-CSS和JavaScript
CSS
一、CSS 概述
* CSS ： Cascading Style Sheet 层叠样式表
* CSS 作用就是给HTML页面标签添加各种样式
* 为什么用CSS
HTML的缺陷：
1. 不能够适应多种设备
2. 要求浏览器必须智能化足够庞大
3. 数据和显示没有分开
4. 功能不够强大
CSS 优点：
1.使数据和显示分开
2.降低网络流量
3.使整个网站视觉效果一致
4.使开发效率提高了
二、CSS语法
p{color：red;}
选择器{属性名：属性值 ;}
选择器后一定是大括号.属性名后必须用冒号隔开.属性值后用分号，属性名和冒号之间最好不要有空格。
三、CSS和HTML的结合方式
CSS代码理论上位置是任意的，但通常写在style标签里
CSS和HTML的结合方式有3种：
a. 行级样式表:采用style属性,范围只针对此标签适用
<div style = "border:1px solid red ;">大家好</div>
b. 内嵌样式表:采用<style>标签完成。范围针对此页面
c. 外部样式表: 采用建立样式表文件。针对多个页面.
引入样式表文件的方式:
1):采用<link>标签
eg:<link rel = "stylesheet" type = "text/css" href="http://blog.163.com/faith_yee/blog/a.css"></link>
2):采用import，必须写在<style>标签中，并且必须是第一句
eg: @import url(a.css) ;
两种引入方式的区别：
外部样式表中不能写<link>标签,但是可以写import语句
Demo
<!doctype html>
<html lang="en">
<head>
<!--<link rel = "stylesheet" type="text/css" href="http://blog.163.com/faith_yee/blog/a.css" ></link>-->
<title>CSS和HTML的结合方式3种</title>
<style type = "text/css">
/*
css在HTML中的写的位置：
1. 行级样式表: 采用属性style完成
2. 内嵌样式表: 采用style标签完成
3. 外部样式表: 创建css文件，并且引入
引入方式： 1.采用<link>标签引入
2.采用@import引入 规定必须是第一句
区别：
在外部样式表中可以使用@import语句引入新的外部样式表*/
@import url("a.css");<!--方式3:常用-->
<!--方式2-->
p{
width :200px;
height : 200px;
}
</style>
</head>
<!--建议把css的内嵌样式表写在此-->
<body>
<!--方式1-->
<p style = "border : 1px solid red">刘德华</p>
</body>
</html>
四、CSS选择器
选择器分为两大类:
1.基本选择器
a.标签选择器:指的就是选择器的名字代表html页面上的标签
p{
color:red ;
border:1px dashed green;
}
b.类选择器：规定用圆点.来定义
优点：灵活
eg: .one{background-color:#ff0099; }
c. ID选择器：规定用#来定义
eg: #one{cursor:hand; }
区别：标签选择器针对的是页面上的一类标签.
类选择器可以供多种标签使用.
ID选择器是值供特定的标签(一个). ID是此标签在此页面上的唯一标识。
d:通用选择器： 用*定义,代表页面上的所有标签。
*{
font-size:30px;
margin-left:0px;
margin-top:0px;
}
Demo
<!doctype html>
<html lang="en">
<head>
<title>基本选择器</title>
</head>
<style type = "text/css">
/*
选择器： 样式表的名字
两大类：
1. 基本选择器
a. 标签选择器： 就是样式表的名字代表了HTML的标签
b. 类选择器： 规定用.来定义
c. ID选择器： 规定用#来定义
d. 通用选择器： 用*来定义
标签选择器针对页面上的同类标签来用。 类选择器灵活，适用多种标签，ID选择器只能针对特定的一个标签来用。
2. 扩展选择器
*/
/*1基本选择器：标签选择器*/
p{
border:1px solid red;
}
/*1基本选择器：类选择器*/
.one{
border:3px dashed green ;
}
/*1基本选择器：ID选择器*/
#one
{
border : 5px double yellow ;
}
/*1基本选择器：通用选择器：用*来表示*/
*{
color : blue ;
}
</style>
<body>
<p>你好啊</p>
<p class = "one">你好啊</p>
<p id ="one">你好啊</p>
<h1 >刘德华</h1>
</body>
</html>
2.扩展选择器
a. 组合选择器:采用逗号隔开
eg: p,h1,h2,.one,#two{color:red ; }
b. 关联选择器(后代选择器): 采用空格隔开
eg: h4 span i{color:red ; }
表示h4标签中的span标签中的i标签的样式
h4和span和i标签不一定是紧挨着的。
c. 伪类选择器
1) :静态伪类：规定是用:来定义.只有两个.只能用于超链接.
:link表示超链接点击之前的颜色
:visited表示链接点击之后的颜色
eg:a:link{color:red ;}
a:visited{color:yellow;}
注意： a:link{}定义的样式针对所有的写了href属性的超链接(不包括锚)
a{}定义的样式针对所有的超链接(包括锚)
2) :动态伪类 : 针对所有的标签都适用
:hover : 是移动到某个标签上的时候
:focus : 是某个标签获得焦点的时候
:active : 点击某个标签没有放松鼠标时
eg: label:hover{color:#00ff00; }
input:focus{
background-color:#ff9999;
border:1px solid red;
}
a:active{
color:blue;
}
Demo
<!doctype html>
<html lang="en">
<head>
<title>扩展选择器</title>
<style type="text/css">
/*
选择器： 样式表的名字
两大类：
1. 基本选择器
2. 扩展选择器
a. 组合选择器: 用逗号隔开多个选择器
b. 后代选择器(关联选择器): 用空格隔开多个选择器
c. 伪类选择器：
1)静态伪类： :link和:visited 只能用于超链接
2)动态伪类： :focus 获得焦点
:hover 鼠标移动到控件上面
:active 鼠标点击控件并且没有松开鼠标
适用于所有的标签
*/
/*扩展选择器：组合选择器:用逗号隔开多个标签*/
i,.one,#two{
border:1px solid green ;
}
/*扩展选择器：后代选择器：用空格隔开*/
label u b{
border:3px dashed red ;
}
/*扩展选择器：伪类选择器：静态伪类：link和visited只能用于超链接*/
a:link{
color:red ;
}
a:visited{
color:yellow;
}
/*扩展选择器：伪类选择器：动态伪类：focus 获得焦点、hover 鼠标移动到控件上面 active 鼠标点击控件并且没有松开鼠标,适用与所有标签*/
input:focus{
background-color:yellow;
border:2px solid red ;
}
table{
border:1px solid gray ;
border-collapse:collapse;
}
table td{
border:2px solid pink ;
}
table tr:hover{
background-color:pink;
}
table td:focus{
background-color: yellow ;
}
button:active{
width:100px;
height:30px;
}
</style>
</head>
<body>
<i>林志玲</i><br>
<p class = "one">刘德华</p>
<div id = "two">成龙</div>
<label>今<u>天<b>天气</b>真</u>好</label><br>
<b>镇关西</b>
<a href="http://blog.163.com/faith_yee/blog/#">你好</a><br>
<input type="text" name=""><br>
<table>
<tr>
<td>aaaaaaaa</td>
<td>bbbbbbbbbb</td>
<td>cccccccc</td>
</tr>
<tr>
<td>ddddddd</td>
<td>eeeeeee</td>
<td>ffffffff</td>
</tr>
<tr>
<td>ddddddd</td>
<td>ffffff</td>
<td>gggggggggg</td>
</tr>
</table>
<button>点啊</button>
</body>
</html>
五、CSS各种选择器的冲突(掌握)
CSS样式的冲突:
1.ID选择器 > 类选择器 > 标签选择器
2.行级样式表 > 内嵌样式表 > 外部样式表
外部样式表的ID选择器 > 内嵌样式表的标签选择器
原则： 就近原则
Demo
<!doctype html>
<html lang="en">
<head>
<title>Css的选择器的冲突</title>
<style type="text/css">
/*
选择器的冲突：
1. ID选择器> 类选择器> 标签选择器
2. 行级 > 内嵌 > 外部
3. 外部样式表中的Id选择器> 内嵌样式表的标签选择器
原则：就近原则
*/
/* p{
color:red ;
}
.one{
color:blue;
}
#two{
color:green ;
}*/
/* p{
color:red ;
}*/
</style>
</head>
<body>
<p class = "one" id = "two" >刘德华</p>
</body>
</html>
六、CSS的各种属性(掌握)
CSS中尺度单位的介绍 CSS的单位: a. 绝对单位 1in=2.54cm=25.4mm=72pt=6pc , pt是点或者磅，pc是派卡 b.相对单位：px, em(印刷单位相当于12个点), %(相对周围的文字)
1、字体设置
p{
font-size:50px; /*字体大小*/
font-style:italic ; /*斜体*/
font-weight:bold; /*粗体*/
font-family:幼圆; /*字体类型*/
font-variant:small-caps; /*小写变大写*/
}
Demo
<!doctype html>
<html lang="en">
<head>
<title>CSS的单位</title>
<style type="text/css">
/*
css的单位：
1. 绝对单位：1in=2.54cm=25.4mm=72pt=6pc pc(派卡)
2. 相对单位: px, %
*/
.two{
background-color:yellow;
}
.one{
color:red ;
}
.three{
border:1px solid green ;
}
label{
font-size:200%;
}
#two{
font-size:10px;
}
</style>
</head>
<body>
<p class = "two one three">林志玲</p>
<p id = "two">我喜欢<label>芙蓉</label>姐姐</p>
</body>
</html>
2、文本设置
p{
letter-spacing:0.5cm ; /*字母间距*/
word-spacing:1cm; /*单词间距*/
text-align:center; /*在所包含容器的中间*/
text-decoration:overline; /*字体修饰 underline下划线 line-through中划线 overline上划线*/
text-transform:lowercase; /*单词字体大小写*/
color:red ;
}
Demo
<!doctype html>
<html lang="en">
<head>
<title>字体常用属性</title>
</head>
<style type="text/css">
p{
font-size:100px;
font-style:italic;
font-weight:bolder;
font-variant:small-caps;
/*方式2:不好用*/
/*font:100px italic bolder small-caps;*/
}
</style>
<body>
<p>啦啦啦啦啦</p>
</body>
</html>
Demo
<!doctype html>
<html lang="en">
<head>
<title>字体常用属性</title>
</head>
<style type="text/css">
p {
word-spacing:2cm;
letter-spacing:0.5cm;
text-decoration:overline;
text-transform:capitalize;/*单词首字母大写*/
}
a{
text-decoration:none;/*没有下划线*/
}
</style>
<body>
<p>what's your name? 你 好 ?</p>
<a href="http://blog.163.com/faith_yee/blog/www.baidu.com"> www.baidu.com</a>
</body>
</html>
3、背景设置
body{
background-color:#ff99ff ; /*背景颜色*/
background-image:url(images/2.gif) ; /*背景图片*/
background-repeat: no-repeat; /*no-repeat不要平铺，repeat-x,横向平铺，repeat-y 纵向平铺*/
background-position:center right; /*背景位置*/
background-attachment: scroll ; /*背景的移动 ,fixed跟着滚动条一起移动，scroll 不动*/
}
Demo
<!doctype html>
<html lang="en">
<head>
<title>背景常用属性</title>
</head>
<style type="text/css">
body{
background-color:yellow;
background-image:url("2.gif");
background-repeat:no-repeat;
background-attachment:fixed;
background-position:right;
}
</style>
<body>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</body>
</html>
4、列表设置
ul li{
list-style:none; /*列表前样式*/
list-style-image:url(images/2.gif) ; /*列表项前图片*/
margin-left:80px;
}
Demo
<!doctype html>
<html lang="en">
<head>
<title>列表属性</title>
</head>
<style type="text/css">
ul li{
list-style:none;
list-style-image:url("2.gif");
}
body{
padding:100px;
}
</style>
<body>
<ul>
<li>中国</li>
<li>美国</li>
<li>日本</li>
<li>韩国</li>
</ul>
</body>
</html>
5、盒子模型(border margin padding)
padding:是内容到边的距离
border: 是边的粗细
margin:是控件到控件的距离
Demo
<!doctype html>
<html lang="en">
<head>
<title>盒子模型</title>
<style type="text/css">
/*取消一般浏览器给设定好了的padding和margin属性*/
*{
padding:0px;
margin:0px;
}
div{
width:300px;
height:300px;
border:1px solid red ;
padding:20px;
margin:30px;
}
</style>
</head>
<body>
<div>林志玲</div>
<div>林志玲</div>
</body>
</html>
6、定位设置(position,float,clear,z-index)
#d{
position: absolute; /*
1.绝对定位: 定义横纵坐标 .脱离了本身的顺序流
2.相对定位: 相对的是自己在顺序流中原来的位置
*/
left:100px; /*横坐标*/
top:100px; /*纵坐标*/
border:1px solid red ;
width:100px;
height:100px;
background-color:#ff66ff;
}
#d1{
position: relative; /*相对位置*/
left:100px;
top:100px;
border:1px solid green ;
width:100px;
height:100px;
background-color:#339900;
}
span{
position: relative;
left:20px;
top:20px;
}
z-index:值任意，值越大离我们越近
flaot: 浮动
overflow: 超出范围怎么办
Demo
<!doctype html>
<html lang="en">
<head>
<title>导航栏的制作</title>
<style type="text/css">
ul li{
float: left;/*让原来的列表脱离了顺序,left是水平放置*/
list-style:none;
margin-left:20px;
padding-top:7px;
}
ul{
background-color:black;
width:900px;
height:30px;
padding-left:0px;
}
a{
color:white;
text-decoration:none;
}
</style>
</head>
<body>
<ul>
<li><a href="http://blog.163.com/faith_yee/blog/#">首页</a></li>
<li><a href="http://blog.163.com/faith_yee/blog/#">学习论坛</a></li>
<li><a href="http://blog.163.com/faith_yee/blog/#">学员问答</a></li>
<li><a href="http://blog.163.com/faith_yee/blog/#">IT圈子</a></li>
<li><a href="http://blog.163.com/faith_yee/blog/#">实时课堂</a></li>
<li><a href="http://blog.163.com/faith_yee/blog/#">客户端下载</a></li>
<li><a href="http://blog.163.com/faith_yee/blog/#">帮助中心</a></li>
</ul>
</body>
</html>
Demo
<!doctype html>
<html lang="en">
<head>
<title>定位属性</title>
</head>
<style type="text/css">
/*
两种情况元素的排列将脱离顺序流：
1、float
2、将定位位置设置为绝对定位position:absolute
*/
#d1{
width:200px;
height:200px;
border:1px solid red;
background-color:#ff6699;
position:absolute;
left:100px;
top:100px;
/*float:left;*/
z-index:9;/*谁的z-index值大谁盖着谁*/
overflow:auto;
}
#d2{
width:200px;
height:200px;
border:1px solid green;
background-color:yellow;
position:absolute;
left:50px;
top:50px;
/*黄色把红色的给覆盖了*/
z-index:10;
}
</style>
<body>
<div id= "d1"><label>你好</label>
三种不同级别的Linux装机需求
查看Linux对硬件的支持度，查how to 文件或查询网址
在Linux中，几乎所有硬件设备的文件都在/dev这个目录下
IDE接口的硬盘文件/dev/hd[a-d]
其他设备名
Linux分区的文件名
常见磁盘借口两种IDE（旧）物理逻辑、SATA（主流）顺序逻辑
第一个扇区很重要有主引导分区MBR和分区表
所谓的分区只是针对哪个64bytes的分区表进行设置的（数据安全及系统的性能）
扩展分区无法格式化
如果扩展分区被破坏，所有逻辑分区将会被删除
开机--》bios--》MBR--》加载内核文件
实际可开机的内核文件是放置到各分区内的
</div>
<div id= "d2">你好啊</div>
</body>
</html>
</body>
</html>
7、鼠标样式设置(cursor)
Demo
<!doctype html>
<html lang="en">
<head>
<title>鼠标样式</title>
</head>
<style type="text/css">
p{
cursor:help;
}
</style>
<body>
<p>刘德华</p>
</body>
</html>
七、滤镜(了解)
1、什么是样式表滤镜
说到滤镜，其实它并不是对图像进行了什么处理，而是在浏览器中对使用了该属性的对象进行一定的修饰。样式表滤镜实际上是样式表一个新的扩展部分，使用这种技术简单的语法就可以把可视化的滤镜和转换效果添加到一个标准的html元素上，例如图片、文本、以及其他一些对象，为页面添加一些丰富的变化。如果大家有一些脚本语言的基础，能够把滤镜效果与类似javascript的脚本代码做一些结合，就可以拥有一个在样式表滤镜与脚本共同作用下建立的强大的动态交互文档工具。现在能使用的滤镜有13个之多，不过要欣赏到这些滤镜的特效，必须要求用户的浏览器必须在IE4.0/NC6.0之上，因为只有这些版本的浏览器才能支持样式表滤镜效果。
2、常用的样式表滤镜
随着样式表技术的不断成熟，其滤镜功能和种类也在不断增多。如果用户能够熟练地混合使用它们，将可以产生意想不到的效果。在操作上，用户只需要了解具体滤镜的实际效果后，就能根据实际进行微调了。
JavaScript
一、Javascript概述
a.一种基于对象和事件驱动的脚本语言（即对象已经存在和当事件发生了会促发代码的语言）
b.作用： 给页面添加动态效果
c.历史： 原名叫做livescript.W3c组织开发的标准叫ECMAscript.
d.特点：
1). 弱势语言
2). 由浏览器直接解析执行。（函数不能直接执行）
3). 是一个解释性语言
4). 交互性（它可以做的就是信息的动态交互）
5). 安全性（不允许直接访问本地硬盘）
6). 跨平台性（只要是可以解释Js的浏览器都可以执行，和平台无关）
e . javascript和java的一些区别：
1). javascript是一个解释性语言,java是编译解释性语言
2). javascript是一个弱势语言，Java是一个强势语言
3). 在页面上引入的方式不同javascript代表用<script>引入
4). JS是基于对象，Java是面向对象。
为什么javascript是写在html中的注释里？
主要是针对老版本的IE浏览器，如果解析不了那么就注释掉。
浏览器解析HTML语言时是从上往下的。
二、JavaScript语言组成
(EcMAScript + BOM + DOM)
ECMAScript: 规定了一些语法，变量，for循环等等结构
BOM: Browser object Model 浏览器对象模型
DOM: Document object Model 文档对象模型
三、JavaScript与Html的结合方式
Javascript与HTML的结合方式有三种：
1.采用事件来调用，代码写在字符串中
<button onclick = "alert('大家好')">点击</button>
2.采用定义函数的方式: 用function来定义函数
function fun(){ alert('你好')} ;
3.采用外部js文件.
利用<script src="http://blog.163.com/faith_yee/blog/a.js"></script>引入
Demo
<!doctype html>
<html lang="en">
<head>
<title>javascriptDemo</title>
</head>
<body>
<img src="http://blog.163.com/faith_yee/blog/2.gif" width = "200" height = "200" onclick = "this.style.display='none'">
<script type="text/javascript">
<!--
alert("点击图片产生的事件");
//-->
</script>
</body>
</html>
Demo
<!doctype html>
<html lang="en">
<head>
<script type="text/javascript" src="http://blog.163.com/faith_yee/blog/a.js" ></script>
<title>js和HTML的结合方式</title>
<script type="text/javascript">
<!--
/*
结合方式：1. 在事件中写
2. 在<script>标签中写
*/
alert("大家好哦啊");
var p = document.getElementById("p");
alert(p.innerHTML);
/*解析不了，因为浏览器从上往下解析时发现p的对象都没有创建。所以报错*/
//-->
</script>
</head>
<body>
<p onclick = "alert(this.innerHTML)"><b>你好啊</b></p>
</body>
</html>
四、JavaScript基本语法(掌握)
-
定义变量：采用var关键字来定义.定义的变量的类型是由给定的值来决定的。
-
数据类型： undifined,表示未定义类型。
Number类型。代表了一切数字类型 String类型。字符串类型 Boolean类型。布尔类型 Function类型。函数类型 Null类型。 object ：对象类型. -
判断变量的类型 :
1. 采用typeof函数判断 :typeof(a) == "string" 2. 采用instanceof运算符： a instanceof String -
三大结构
a.顺序结构 b.选择结构 c.循环结构 for,while,do...while -
运算符
1.一元运算符 +(正号) - ++ -- 2.二元运算符 +(加法) - * / % 3.三元运算符 ？ ： 4.等号 == 判断的是内容, === 全等于 ,判断类型和内容 -
类型的转换
1. Number转String : 3 + "" 2. Number转Boolean ：在javascript中，非0为真，0为假。 3. String转Number: a. parseInt,parseFloat b. 乘以1即可
Demo
<!doctype html>
<html lang="en">
<head>
<title>Document</title>
</head>
<body>
<script type="text/javascript">
<!--
/*
变量类型：
a、基本类型
1、Undefined：未定义类型,没有给变量赋值。
2、Nunber
3、String
4、Boolean
5、Function
6、null
b、对象类型
object
判断类型：
1、用typeof函数来判断，打出来的是类型的toString方法
2、用instanceof来判断：是不是由某个类型new出来
*/
//var a = 10;
//alert(a);
//定义变量
var a = "abc";
a = 10.5;
a = function(){};
a = document;
a = true;
alert(typeof(a));
a = new Boolean();
alert(a instanceof Boolean);
var b = "abac";
alert(b instanceof String );
var c = new String ("abcd");
alert(c instanceof String);
//-->
</script>
</body>
</html>
Demo
<!doctype html>
<html lang="en">
<head>
<title>Document</title>
</head>
<body>
<script type="text/javascript">
<!--
var a = 100;
var b = "100";
alert(a== b);//在javascript里==比较的是内容
alert(a===b);//全等号：比较的是内容类型都要比较。
/*
类型转换：
number和boolean转换成String：只需要加""搞定
String转换成number：
1、parseInt
2、乘以1即可。推荐
String转成成boolean：
非零为真，零为假
当变量的类型是undefined或者null类型，都认为是假的
*/
var c = "123.4";
a = parseInt(a);
alert(typeof(a));
a = parseFloat(a);
alert(typeof(a));
a = a*1;
alert(typeof(a));
a = 0;
a = "0";
a = null;
if(a)
alert("真的");
else alert("假");
//-->
</script>
</body>
</html>
五、JavaScript 函数的定义（掌握）
-
函数的定义有三种方式：
1.采用function关键字来定义 2.采用匿名的方式来定义 3.采用new Function()的方式(了解,不推荐) -
函数的调用：
1.函数调用的时候参数可以传递多个，可以和函数定义的形参个数不符合 2.如果函数重名了，那么调用的时候一定是调用最后一个，与参数无关。 推荐： 定义函数的不要重名。
Demo
<!doctype html>
<html lang="en">
<head>
<title>函数的定义</title>
</head>
<script type="text/javascript">
<!--
/*
函数的定义：
1、采用关键字function定义
2、采用匿名函数
3、new Function() 不推荐
*/
function fun (){
alert("aaaaa");
}
fun();//调用
//调用匿名函数
var a = function()
{
alert("调用匿名函数");
}
a();//调用匿名函数
var f = new Function("a","b","c","alert(a+b+c)");
f(2,3,5);
//函数的调用
function f (){
alert("aasdsada");
}
function f(a){
alert(a);
}
function f(a,b){
alert(a+b);
}
function f(a,b){
alert("acasca");
}
f();//NaN：不是一个number
//-->
</script>
<body>
</body>
</html>
函数劫持：改变函数本身的作用.
Demo
<!doctype html>
<html lang="en">
<head>
<title>Document</title>
</head>
<script type="text/javascript">
<!--
alert("大家好");
//函数劫持就是改变了函数的原来的功能。
window.alert = function(a){
document.write(a);
}
alert("大家好啊");//已经弹不出来了
//全局函数
/*
1、isNaN:是判断变量是不是一个number类型，true:是数字/false：不是数字
2、eval：1、将字符串转换为number，掌握
*/
var a = true;
if(isNaN(a))
{
alert("是数字");
}else alert("不是数字");
var b = "123";
alert(b);
var c = "中国";
alert(escape(c));
alert(unescape(c));
var d = "www.baidu.com?name = faith_yee";
alert(encodeURI(d));
alert(decodeURI(d));
//-->
</script>
<body>
</body>
</html>
六、JavaScript 全局函数(掌握)
全局函数：
1.isNaN (掌握)：用来判断变量是否是数字类型的字符串
NaN: not a Number ,不是一个数字
2.parseInt,parseFloat
3.eval(掌握): 把字符串转换成数字
4.escape(): 编码
5.unescape(): 解码
6.encodeURI(): 对网址（URL）进行编码
7.decodeURI(): 对网址（URL）进行解码
Demo
<!DOCTYPE HTML>
<!DOCTYPE html PUBLIC "" ""><HTML lang="en"><HEAD><META content="IE=11.0000" http-equiv="X-UA-Compatible">
<TITLE>Document</TITLE>
<SCRIPT type="text/javascript">
<!--
alert("大家好");
//函数劫持就是改变了函数的原来的功能。
window.alert = function(a){
document.write(a);
}
alert("大家好啊");//已经弹不出来了
//全局函数
/*
1、isNaN:是判断变量是不是一个number类型，true:是数字/false：不是数字
2、eval：1、将字符串转换为number，掌握
*/
var a = true;
if(isNaN(a))
{
alert("是数字");
}else alert("不是数字");
var b = "123";
alert(b);
var c = "中国";
alert(escape(c));
alert(unescape(c));
var d = "www.baidu.com?name = faith_yee";
alert(encodeURI(d));
alert(decodeURI(d));
//-->
</SCRIPT>
</HEAD>
<BODY></BODY></HTML>
923
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
