unit04-JavaScript

JavaScript简介

什么是JavaScript(了解)

全称叫做JavaScript，简称叫做JS

由NetScape(网景)公司提供，是一门专门嵌入在浏览器中执行的脚本语言

LiveScript JavaScript

JS运行在浏览器中，负责实现网页中的动画效果

或者是实现表单校验等功能

JS特点和优势(了解)

1、特点：

(1)JS是一门直译式的语言(边解释边执行，没有编译的过程)

java--> 编写时 xx.java --->编译成 xx.class --> 运行

js ---> 编写时 html, 编写时 js文件, 直接运行, 没有编译过程

(2)JS是一门基于对象的语言(JS中没有类的概念,也没有编译的过程)

JS中是有对象的(内置对象、自定义对象)

(3)JS是一门弱类型的语言(Java:强类型)

在java中: 变量一旦声明, 就属于固定的数据类型, 不能被改变
String s = "abc";
int n = 100;
在JS中: 变量是不区分类型的, 可以指向任意的数据类型
var s = 100;
s = "abc";
s = true;
s = [];
s = function(){}

2、优势：

(1)JS具有良好的交互性

(2)JS具有一定的安全性(只能在浏览器内部运行,不能访问浏览器以外的资源)

(3)JS具有跨平台性(JS 浏览器)

( JS语言是跨平台的，是因为有浏览器，但浏览器不跨平台

Java语言是跨平台的，是因为有虚拟机，但虚拟主机不跨平台 )

在HTML书写JS的方式

1、在script标签内部可以书写JS代码：

在head或者body标签内部可以添加一个script标签，在script标签内部可以直接书写JS代码！

<!-- 在script标签内部可以书写JS注释和JS代码 -->
<script type="text/javascript">
  //JS的单行注释
  /* JS的多行注释 */
    alert( "在html中引入JS的第一种方式..." );
</script>

2、通过script标签引入外部的JS文件

在head或body标签内部，可以通过script标签引入外部的JS文件。例如：

<!-- 通过script标签可以引入外部的JS文件 -->
<script src="demo.js"></script>

注意：(1)在引入js文件的script标签内部不要书写JS代码,例如:

<script src="demo.js">
    alert( 111 ); //这里的代码不会执行
</script>

(2)不要将引入JS文件的script标签自闭，因为可能会导致文件引入失败，如下：

<script src="demo.js" />

扩展内容：也可以直接在元素上书写JS代码

<!-- 直接在元素上书写JS代码：
onclick属性用于给当前元素绑定点击事件：点击元素就会触发事件，执行相应函数
-->
<input type="button" value="点我~" οnclick="alert('叫你点你还真敢点啊!!!')"/>
<input type="button" value="别点我"  οnclick="console.log( new Date() )"/>

JavaScript语法

注释格式

JS的注释符号和Java的注释符号相同，如下：

// 单行注释内容
/* 多行注释内容 */

数据类型

1、基本数据类型

(1)数值类型(number)

在JS中，所有的数值在底层都是浮点型，但是在处理和显示的过程中会自动的和整型进行转换。

例如：2.4+3.6=6
特殊值：Infinity(无穷大) / -Infinity(负无穷大) / NaN(非数字)

(2)字符串类型(string)

在JS中，字符串类型属于基本数据类型，字符串常量可以使用单引号或者使用双引号引起来。例如：

var s1 = "Hello JS";
var s2 = 'Hello JS';

另外，JS中字符串类型有对应的包装对象（String），在需要时会自动的和包装对象进行转换。

var s1 = "Hello JS"; //基本数据类型, string
console.log( typeof s1 ); //string
var s2 = new String("Hello JS"); //复杂数据类型, object
console.log( typeof s2 ); //object
//不管是基本数据类型s1, 还是对象类型s2, 都可以当作对象来用
console.log( s1.valueOf() ); //s1是基本数据类型, 会转成对象, 调用valueOf函数
console.log( s2.valueOf() );

(3)布尔类型(boolean)

布尔类型的值有两个，分别为true和false。

(4)undefined类型

undefined类型的值只有一个，就是undefined，表示变量未定义(但不是指变量没有声明)。

是指声明了变量，但没有为变量赋值，该变量的值就是undefined。

/* 1.undefined类型 */
var x;
alert( x ); //undefined
alert( y ); //抛异常

(5)null类型

null类型的值也只有一个，就是null，表示空值。

可以作为函数的返回值，表示函数返回的是一个空的对象。

注意：null和undefined类型的变量是不能调用函数或属性的，会抛异常！

2、复杂数据类型

主要指对象(JS的内置对象、自定义的对象、函数、数组)

变量声明

JS中是通过var关键字声明变量，声明的变量是不区分类型，可以指向任意的数据。例如：

var x = 100;
x = "abc";
x = true;
x = [];
x = function(){}
x = new Object();
x = {};

另外，JS中多次声明同名的变量不会出现语法错误，例如：

/* 2.变量的定义 */
var s = "Hello"; // var s; s="Hello";
var s = 123; // var s; s=123; 第二次声明变量x没有生效
alert( s ); //123

JS是严格区分大小写的!

JS运算符

JS和Java中的运算符大致相同，例如：

算术运算符: +，-，*，/，%，++，--
赋值运算符: =，+=，-=，*=，/=，%=
比较运算符: ==，!=，>，>=，<，<=
位运算符: & ， |
逻辑运算符: && ，||   ( false && 表达式, true || 表达式 )
前置逻辑运算符: ! (not)
三元运算符: 表达式 ? 表达式 : 表达式
。。。

JS语句

JS中的语句和Java中的语句也大致相同

1、if分支结构

if分支结构用于基于不同的条件来执行不同的动作。语法结构如下：

if (条件 1){
    当条件 1 为 true 时执行的代码
}else if (条件 2){
    当条件 2 为 true 时执行的代码
}else{
    当条件 1 和 条件 2 都不为 true 时执行的代码
}

2、switch语句

使用 switch 语句来选择要执行的多个代码块之一。语法结构如下：

switch(n){
    case 1:
        执行代码块 1
        break;
    case 2:
    执行代码块 2
        break;
    ...
    default:
        与 case 1 和 case 2 不同时执行的代码
}

执行原理：首先设置表达式 n（通常是一个变量）。随后表达式的值会与结构中的每个case 的值做比较。如果存在匹配，则与该 case 关联的代码块会被执行。请使用 break来阻止代码自动地向下一个 case 运行。

3、for循环语句 -- 循环代码块一定的次数

for 循环的语法结构如下：

for (语句 1; 语句 2; 语句 3){
    被执行的代码块
}

4、while循环 -- 在指定条件为真时循环执行代码块

JS中while循环也分为while和do/while循环，下面为while循环语法结构:

while (条件){
    需要执行的代码
}

while 循环会在指定条件为真时循环执行代码块。

案例1：if分支案例: 接收用户输入的成绩，判断成绩所属的等级

80~100(包括80，也包括100) 优秀
60~80(包括60，但不包括80) 中等
0~60(包括0，但不包括60) 不及格
其他值 输入有误

代码实现如下：

propmt( 参数1, 参数2 )函数：在页面上弹出一个消息输入框，接收的参数1是在弹框中显示的提示内容，用户输入的内容，会作为函数的返回值直接返回。

参数2, 是输入框中的默认值, 可以修改

var score = prompt("请输入您的成绩: ");
if( score >= 80 && score <=100 ){
    alert("您的成绩属于: 优秀!");
}else if( score >= 60 && score < 80 ){
    alert("您的成绩属于: 中等!");
}else if( score >= 0 && score < 60 ){
    alert("您的成绩属于: 不及格!");
}else{
    alert("您的输入有误, 请重新输入!");
}

案例2：switch语句案例—实现一个简易的计算器：

可以接收用户输入的两个数值和一个操作符(+、-、*、/)，根据操作符号的不同，对两个数值执行不同的运算。

代码实现如下：

 

//1.接收用户输入的数值和运算符, 中间用空格分隔

var str = prompt("请输入数值1、运算符、数值2，中间用空格分隔："); //"10 + 5"

//2.对用户输入的内容进行切割(以空格作为分隔符切割)

var arr = str.split(" "); // ["10", "+", "5"]

var num1 = arr[0] - 0 ;
var opt = arr[1];
var num2 = arr[2] - 0 ;
//3.通过switch分支实现计算器
switch( opt ){
    case "+":
        alert( "两个数的和为: "+( num1+num2 ) );
        break;
    case "-":
        alert( "两个数的差为: "+( num1-num2 ) );
        break;
    case "*":
        alert( "两个数的乘积为: "+( num1*num2 ) );
        break;
    case "/":
        alert( "两个数的商为: "+( num1/num2 ) );
        break;
    default:
        alert( "您输入的运算符有误, 请重新输入!" );
}

案例3：for循环语句案例

遍历1~100之间的所有整数，求1~100之间所有整数的和，并输出到控制台;

代码实现如下：

 

//--------------------------------------
var i = 1;
var sum = 0;
while( i <= 100 ){
    sum += i;
    i++;
}
alert( "1~100之间所有整数的和为: "+sum );
//--------------------------------------
var sum = 0;
for( var i=0; i<=100; i++){
    sum += i;
}
alert( "1~100之间所有整数的和为: "+sum );
//--------------------------------------

案例4：while循环语句案例

遍历下面数组中的元素，将元素输出到控制台。

var arr = [123, "abc", false, new Object() ];

代码实现如下：

var arr = [123, "abc", false, new Object() ];
var index = 0;
while( index < arr.length ){
    console.log( arr[index] );
    index++;
}
for( var i=0; i<arr.length; i++ ){
    console.log( arr[i] );
}

JS数组

Array 对象用于在单个的变量中存储多个值。

JS数组的声明方式一:

//声明一个空数组,长度为零
var arr1 = [];
//声明一个数组，并为数组设置初始值
var arr2 = ["Hello", 111, false, new Object() ];

JS数组的声明方式二:

//声明一个空数组，长度为零
var arr3 = new Array();
//声明一个数组，并为数组设置初始值
var arr4 = new Array("Hello", 111, false, new Object());

数组中的细节问题:

(1)JS中的数组可以存储任意类型的数据

(2)JS中的数组长度是可以被任意改变的

var arr1 = [];
console.log("此处数组的长度为: "+arr1.length ); // 0
arr1.length = 5;
console.log("此处数组的长度为: "+arr1.length ); // 5
arr1[9] = "a";
console.log("此处数组的长度为: "+arr1.length ); // 10
arr1[99] = "b";
console.log("此处数组的长度为: "+arr1.length ); // 100

JS函数

函数就是一个具有功能的代码块, 可以反复调用

函数就是包裹在花括号中的代码块，前面使用了关键词 function。

JS中声明函数的方式为:

function 函数名称([参数列表]){
    函数体
}

或者：

var 变量名/函数名 = function([参数列表]){
    函数体
}

调用函数: 函数名称([参数列表]);

综合练习

(自己完成)声明一个函数fn，在函数中实现：遍历指定的两个数值(例如1和100)之间的整数，将是3的倍数的数值存入到一个数组中，并将数组返回。

1、声明fn函数

function fn(x,y){
    var arr = [];
    for(var i=x,j=0;i<y;i++){
        if(i%3==0){
            arr[j] = i;
            j++;
        }
    }
    return arr;
}

2、调用fn函数, 获取1~100之间是3的倍数的数值组成的数组

var arr = fn(1,100);

3、遍历数组中的元素, 输出在网页上(提示: document.write("输出的内容") )

for(var i=0;i<arr.length;i++){
    document.write(arr[i]+" ");
}

DOM操作

DOM: Document Object Model，文档对象模型，其实就是JS专门为访问html元素提供的一套API。

案例：电灯开关

点击电灯可以实现开/关灯，代码实现如下：

var flag = "off"; //flag表示灯的状态, off表示灯是关闭的!
function changeImg( ){
    //1.通过id获取img元素(返回是一个JS对象)
    var imgObj = document.getElementById("img1");
    if( flag == "off" ){ // 表明灯是关闭状态, 点击后则需要打开
        imgObj.src = "imgs/on.gif";
        flag = "on"; // 更新灯的状态为开灯
    }else{ // flag="on" 表名灯是打开状态, 点击后则需要关闭
        imgObj.src = "imgs/off.gif";
        flag = "off";
    }
}

案例：增删改元素

点击网页中的按钮对html元素进行操作

练习1、添加元素:添加一个div元素到body中

function addNode(){
    //1.创建一个新的div元素(返回的是一个JS对象, 表示新创建的div元素)
    var newDivObj = document.createElement("div"); // \<div\>\</div\>
    newDivObj.innerHTML = "我是新来的....";
    //2.获取body元素(body是父元素)
    var bodyObj = document.body;
    //3.通过父元素(body)添加子元素(newDivObj)
    bodyObj.appendChild( newDivObj );
}

练习2、删除元素: 删除id为div_2的元素

function deleteNode(){
    //1.获取要删除的元素(id为div_2)
    var div2 = document.getElementById("div_2");
    //2.获取id为div_2的元素的父元素
    var parent = div2.parentNode;
    //3.通过父元素删除子元素
    parent.removeChild( div2 );
}

练习3、更新元素内容：将div_3的内容更新为当前时间

function updateNode(){
    //1.获取id为div_3的元素
    var div3 = document.getElementById("div_3");
    //2.获取表示当前时间的字符串
    var dateStr = new Date().toLocaleString();
    //3.将div_3元素的内容更新为当前时间
    div_3.innerHTML = dateStr;
}

案例：网页换肤

/** 练习1：执行下面的函数，切换字体大小 */
function resize( selector ){
    //获取id为newstext元素
    var div = document.getElementById("newstext");
    //将id为newstext元素的class属性值设置为 selector
    div.className = selector;
}

/** 练习2：执行下面的函数，为页面切换不同的皮肤
    点击换肤链接时,执行changeStyle函数，将link标签的href属性值指向
    不同的css文件的路径，就会使用不同的css文件中的样式 */
//定义数组，存放不同的皮肤（css文件的路径）
var styleArr = ["css/red.css", "css/green.css", "css/blue.css"];
var index = 0;
function changeStyle(){
    //获取head中的link标签(id=link)
    var link = document.getElementById("link");
    //    将link标签的href属性值指向css文件的路径
    link.href = styleArr[index];
    index++;
    if( index == styleArr.length ){ //如果下标等于数组长度
        index = 0; //则将下标重置为0
    }
}

总结：JS获取元素

document是一个js对象，用于表示当前html网页。当浏览器加载完整个html网页后，会用document对象表示整个html网页！

document.getElementById( id值 ) -- 通过元素的id值，获取一个元素。返回的是表示该元素的js对象。

<div id="div1">xxxx</div>
//获取id为div1的元素
var oDiv1 = document.getElementById("div1");
//oDiv1是一个js对象,表示获取的div元素

document.getElementsByTagName( 元素名 ) -- 通过元素名称获取当前文档中的所有指定名称的元素，返回的是一个数组，其中包含了所有指定名称的元素。

document.body -- 获取当前文档中的body元素

ele.parentNode -- 获取当前元素的父元素。ele表示当前元素

总结：JS增删改元素

document.createElement( 元素名称 ) -- 根据元素名称创建指定名称的元素，返回的是表示新创建元素的js对象

parent.appendChild( child ) -- 通过父元素添加子元素，其中parent表示父元素，child表示子元素

parent.removeChild( child )-- 通过父元素删除子元素，其中parent表示父元素，child表示子元素

ele.innerHTML -- 获取当前元素的html内容(从开始标签到结束标签之间的所有内容)，还可以设置当前元素的html内容(如果元素内部有内容，将会覆盖原有内容)

<div id="div1">
    这是一个div元素...
    <span>这是一个span元素</span>
</div>
//获取div元素
var oDiv1 = document.getElementById("div1");
oDiv1.innerHTML;//获取div元素的内容

htmlcss+JS作业

05-09作业：

1、独立完成京淘注册页面（1~2遍）

2、（选作）完成京淘的登录页面

3、完成课上讲过的JS语句案例里

(1) if分支结构案例: 接收用户输入的成绩, 判断成绩所属的等级
(2) switch语句: 实现一个简易计算器
(3) 综合案例

05-11作业：

1、完成课上讲过的DOM操作相关的案例：

（1）电灯开关
（2）增删改元素
（3）网页换皮肤

2、复习文档就绪事件函数（掌握什么时候该使用文档就绪事件函数）

 

//在这个文件中可以书写JS注释和JS代码
/* 多行注释 */
document.write("引入代码的第二种方式.....<br />");
document.write("引入代码的第二种方式.....<br />");

 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <!-- 1.引入JS的第一种方式：直接在script标签内部书写JS -->
        <script type="text/javascript">
            //用js网页上输出一句话(document是表示当前网页的js对象)
            document.write("引入JS的第一种方式....<br/>");
            document.write("引入JS的第一种方式....<br/>");
        </script>
        
        <!-- 2.引入JS的第二种方式： 将JS代码写在JS文件中，再引入这个JS文件
         注意细节：（1）在引入JS文件的script标签内部，不要书写JS代码，写了也无法执行！
         （2）引入js文件的script标签，最好不要自闭，可能会导致文件引入失败
         -->
        <script src="./js/demo.js"></script>
    </head>
    <body>
        <!-- 3.引入JS的第三种方式：直接将js代码写在标签上
         onclick是为当前元素绑定点击事件，只有点击当前元素，才会执行onclick中的代码-->
        <input type="button" value="别点我~!"
         οnclick="document.write(document.body.innerHTML+'引入JS的第三种方式.....<br/>')"/>
    </body>
</html>

 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>JS的语法</title>
        <script type="text/javascript">
        /* 1.数值类型（number）: 在JS的底层所有数值都是浮点型 
        在需要时 会自动的在整型和浮点值之间进行转换*/
            var n= 100;//number
            var x=2.4;
            var y=3.6;
            console.log( x+y );//6
            //Infinity 正无穷大
            //-Infinity 负无穷大
            //NaN 非数字（Not a Number）
            
            /* 2.字符串类型（string）:在JS中字符串可以使用双引号或单引号引起来 */
            var s1 = "Hello JS";
            var s2 = "Hello JS";
            console.log( s1 );
            console.log( s2 );
            
            //s1、s2都是基本数据类型--String,s3是object，对象
            var s3 = new String("Hello JavaScript");
            console.log( typeof s1 );//输出s1的类型：String
            console.log( typeof s3 );//输出s3的类型：object
            //console.log( s1.substr(4,4));
            //console.log( s1.substring(0,4));
            
            //3.布尔类型（boolean）
            var b1 = true;
            var b2 = false;
            console.log(12*23 > 256 ? "YES" : "NO" );
                
            /* 4.undefind、null 
            undefined: 表示声明了变量，但没有为变量赋值，此时变量的值为underfined
            undefined类型的值有一个，就会undefined
            null:表示空值，可以作为函数的的返回值，表示函数返回的是一个空的对象
            null类型的值也是只有一个，就是null值
            */
            var o;
            console.log( o );//undefined
            //int i;
            
            /* 5.变量的声明：通过var关键字声明变量 
            JS是严格区分大小写的*/
            var x = "abc";
            console.log( x );
            x = 88;
            x = [];
            
            /* 6.测试"&&"的短路效果 */
            console.log( a() && b());//具有短路效果
            //console.log( b() && a());//没有短路效果
            console.log( b() || a());//具有短路效果
            //console.log( a() || b());//没有短路效果
            
            function a(){
                console.log("a函数执行了.....");
                return 3>5;
            }
            
            function b(){
                console.log("b函数执行了....");
                return 5>3;
            }
            
            
            
        </script>
    </head>
    <body>
    </body>
</html>

 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script type="text/javascript">
            /* 1.if分支结构：接收用户输入的成绩，判断成绩所属的等级` 
            80~100(包括80，也包括100) 优秀
            60~80(包括60，但不包括80) 中等
            0~60(包括0，但不包括60) 不及格
            其他值 输入有误*/
            
            /* prompt()函数--可以接收用户输入的内容，并返回用户的输入，返回值是一个字符串 
            字符串为什么可以和数值进行比较？
            JS中有数据类型的自动转换，在需要时，字符串可以转成数值
            举例：100+“23”;//10023
            100+("23"-0);//123
            */
            /* var score = prompt("请在下方输入您的成绩:");//用户的成绩
            //alert( typeof score );//弹出一个消息对话框，通常用作警告
            if( score >= 80 && score <= 100){
                document.write("您的成绩属于：优秀!");
                
            }else if( score >= 60 && score < 80){
                document.write("您的成绩属于：中等");
                
            }else if(score >= 0 && score < 60){
                document.write("您的成绩属于：不及格");
            }else{
                document.write("您的成绩不合法，请重新输入！");
            } */
            
            /* 2.switch语句：实现一个简易的计算器，可以实现加减乘除 */
            //接收用户输入的两个数值和一个运算符
            
            /* var str = prompt("请输入数值1、运算符、数值2，用逗号间隔：");//100,+,50
            var strArr = str.split(",");//["100","+","50"]
            var n1 = strArr[0] - 0;//数值1 减0是为了将strArr[0]转为数值
            var opt = strArr[1];//+-*/
            /* var n2 = parseFloat( strArr[2] ); */
            //数值2 parseFloat是为了将strArr[2]转为数值
            /* switch( opt ){
                case "+":
                    document.write("两个数值的和为："+(n1 + n2));
                    break;
                    
                    case "-":
                        document.write("两个数值的差为："+(n1 - n2));
                        break;
                        
                    case "*":
                        document.write("两个数值的成绩为："+(n1 * n2));
                        break;
                        
                    case "/":
                        document.write("两个数值的商为："+(n1 / n2));
                        break;
                        
                    default:
                        document.write("您输入的运算符不合法，请重新输入" );
            } */
            
            
            
            /* 3.遍历1\~100之间的所有整数，求1\~100之间所有整数的和，并输出到控制台; */
            var sum = 0;
            for(var i=1;i<=100; i++){
                sum +=i;//sum = sum + i;
            }
            document.write("1~100之间所有整数的和为:"+sum);
            document.write("<hr />");
            
            /* 4.遍历下面数组中的元素，将元素输出到控制台。 */
            var arr = [123, "abc", false, new Object() ];
            var index =0;//作为数组的下标，从零开始
            while( index < arr.length ){
                document.write( arr[index]+"");
                index++;
            }
            
        </script>
    </head>
    <body>
    </body>
</html>

 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>JS的数组和函数</title>
        <script type="text/javascript">
            /* JS中数组的声明方式 */
            var arr1 = [];//声明一个空数组，长度为零，也没有任何元素
            var arr2 = [88,"abc",false,new Date()];//声明一个具有初始值的数组
            
            //声明一个空数组，长度为零，也没有任何元素
            var arr3 = new Array();
            //声明一个具有初始值的数组
            var arr4 = new Array( 88,"abc",false,new Date() )
            
            /* JS数组的特点: 
            (1)JS中的数组可以包含任意类型的数据
            （2）JS中数组的长度可以被任意改变
            */
           var arr5 = [];
           console.log( arr5.length );//0
           arr5.length = 10;//通过length属性改变数组的长度
           console.log( arr5.length );//10
           arr5[99] = "abc";//通过给数组指定的位置赋值改变长度
           console.log( arr5.length);//100
           
           /* JS中函数的声明
           JS中的函数类似于Java中的方法，可以反复执行，反复调用*/
           
           //1.声明名称为 myFunction的函数
           function myFunction(name, age){
               alert(name+" : "+age+"...");
           }
           
           //调用函数
          // myFunction("刘沛霞",35); 
          
          //2.声明一个匿名函数并执行函数(匿名只能调用一次)
          (function (name,addr){
              console.log(name+" : "+addr+"...");
          })("刘德华","中国香港");
          
          //3.声明一个函数，并将函数赋值给 myFunction2 变量
          var myFunction2 = function(name,addr){
                 console.log(name+" : "+addr+"...");
          }
          myFunction2("陈子枢","西安");
           
           
           
           
        </script>
    </head>
    <body>
    </body>
</html>

 

@charset "UTF-8";
body{
    background:#baecde;
}
#newstext{
    background:yellow;
    color:blue;
}

 

@charset "UTF-8";
body{
    background:#ffaff5;
}
#newstext{
    background:#eee5e1;
    color:green;
}
 

 

@charset "UTF-8";
body{
    background:pink;
}
#newstext{
    background:#fff;
    color:red;
}

 

 

<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title>电灯开关案例</title>
<style>
    body{padding:20px;font-size:20px;}
    
</style>
<!-- 引入jquery的js库
<script src="js/jquery-1.8.3.min.js"></script> -->
<script>
    /** 练习：点击按钮，开灯或关灯 
        点击“开/关灯”按钮，会触发点击事件，执行 changeImg 函数
        在这个函数中：获取灯泡的img标签，将img标签的src属性的值
        指向另外一张灯泡的图片（如果当前灯是关闭状态，则指向开灯的图片
        反之，如果灯是打开状态，则指向关闭状态的图片）
        
    */
    var flag = "off";//off表示灯是关闭状态，on则表示灯是打开状态
    function changeImg(){
        //1.通过id获取img元素(id = "img1"),返回值是一个js对象，用于表示img元素
        var oImg = document.getElementById("img1");
        
        if(flag == "off"){
            oImg.src = "imgs/on.gif";//打开灯
            flag = "on";//灯的状态发生变化，同时更新标记
        }else if(flag == "on"){
            oImg.src = "imgs/off.gif";//关闭灯
            flag = "off";//灯的状态发生变化，同时更新标记
        }
        
        
    }
</script>
</head>
<body>
    <input type="button" value="开/关灯"
        οnclick="changeImg()" /> <br/><br/>
    <img id="img1" src="imgs/off.gif"/>
    
</body>
</html>

 

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8"/>
<title>元素的增删改查</title>
<!-- 加入样式表 -->
<style type="text/css">
    div { border:#0099FF 2px solid;height:60px;width:350px;margin:20px 10px;padding:5px 7px;line-height:60px;font-size:26px;text-align:center;}
    #div_1{ background-color:#d400ff; }
    #div_2{ background-color:#FF3399; }
    #div_3{ background-color:#00FF00; }
    #div_4{ background-color:#FFFF66; }
    
    input{font-size:18px;}
</style>

<!-- 引入jquery的js库
<script src="js/jquery-1.8.3.min.js"></script> -->
<script type="text/javascript">
    /** 练习1、添加元素:添加一个div元素到body中 */
    function addNode(){
        //1.创建一个新的div元素(返回一个JS对象，表示新创建的div元素)
        var oNewDiv = document.createElement("div");
        //给div元素设置内容( <div>我是新创建的div元素....</div>)
        oNewDiv.innerHTML = "我是新创建的div元素.....";
        
        //2.获取body元素
        var oBody = document.body;
        
        //3.将创建的div元素添加到body元素内部
        oBody.appendChild( oNewDiv );
    }

    /** 练习2、删除元素: 删除id为div_2的元素 */
    //parentNode
    function deleteNode(){
        //1.获取id为div_2的元素
        var oDiv2 = document.getElementById("div_2");
        //2.获取div_2的父元素（在此处是body元素）
        //var oBody = document.body;//专门获取body元素
        var oParent = oDiv2.parentNode;//专门获取当前元素的父元素
        
        //3.通过父元素删除子元素
        oParent.removeChild( oDiv2 );
        
    }

    /** 练习3、更新元素内容：将div_3的内容更新为当前时间 */
    function updateNode(){
        /* //1.获取id为div_3的元素
        var oDiv3 = document.getElementById("div_3");
        
        //2.将div_3元素的内容设置为/更新为当前时间
        //console.log("------"+oDiv3.innerHTML+"-----");
        oDiv3.innerHTML = new Date().toLocaleString(); */
        
        //扩展内容：将所有div内容都改为当前时间
        //1.获取所有的div元素(返回是所有div组成的数组)
        var divArr = document.getElementsByTagName( "div" );
        //2.遍历divArr数组中的每个div元素
        for(var i=0;i<divArr.length;i++){
            //3.给每一个div元素设置内容为当前时间
            divArr[i].innerHTML = new Date().toLocaleString();
        }
    }
</script>
</head>
<body>
    <input type="button" οnclick="addNode()"
            value="创建一个div添加到body中"/>
    <input type="button" οnclick="deleteNode()"
            value="删除id为div_2的元素"/>
    <input type="button" οnclick="updateNode()"
            value="将div_3的内容更新为当前时间"/><hr/>
    <div id="div_1">
        div_1
    </div>
    <div id="div_2">
        div_2
    </div>
    <div id="div_3">
        div_3
    </div>
    <div id="div_4">
        div_4
    </div>

    

    
</body>
</html>

 

 

<html>
<head>
<meta charset="utf-8"/>
<title>网页换肤</title>
<style type="text/css">
    body{font-size:18px;font-family:"微软雅黑";}
    hr{border:1px solid yellow;}
    a{font-size:17px;font-weight:500;}
    a:hover {color:#0099FF;}
    h2,#change-font{text-align:center;}
    #newstext{padding:10px;margin:0 auto;letter-spacing:2px;}    
    /* 预先定一些选择器 */
    .min{
        font-size:16px;
        border: 2px solid #0000FF;
    }
    .middle{
        font-size:18px;
        border: 2px solid #00FF00;
    }
    .max{
        font-size:20px;
        border: 2px solid #FF0000;
    }
    .super-max{
        font-size:24px;
        border: 2px solid #D400FF;
    }
</style>
<!-- 引入外部的CSS文件 -->
<link rel="stylesheet" href="#" id="link"/>

<!-- 引入jquery的js库
<script src="js/jquery-1.8.3.min.js"></script> --> 
<script type="text/javascript">
    /** 练习1：执行下面的函数，切换字体大小 */
    function resize(size){
        //size的值可能为：min,middle,max,supper-max
        //获取id为newstext的div元素
        var oDiv = document.getElementById( "newstext" );
        
        //将传来的class值（min,middle,max,supper-max）设置给div 的class属性
            oDiv.className = size;
    
        
    }
    
    
    //定义数组，存放不同的皮肤（css文件的路径）
    var cssArr = ["css/red.css","css/blue.css","css/green.css"];
    var index = 0;//作为数组的下标
    
    /** 练习2：执行下面的函数，为页面切换不同的皮肤 */
    function changeStyle(){
        //1.获取id为link的标签(link标签)
        var oLink = document.getElementById("link");
        //2.修改link标签的href属性值
        oLink.href = cssArr[index];
        //3.让index自增1，并判断index的值是否等于数组长度
        index++;
        
        index = index == (cssArr.length) ? 0 : index
        /* if( index == cssArr.length){
            index = 0;
        } */
        
        
        
    }
</script>
</head>
<body>
    <h2>达内时代科技集团简介</h2>
    <div id="change-font">
        <!-- href="javascript:void(0)"  可以阻止超链接跳转
        调用resize时传递的参数是class的值，而这些class都有对应的选择器
        -->
        <a href="javascript:void(0)" 
            οnclick="resize('min')">小字体</a> 
        <a href="javascript:void(0)" 
            οnclick="resize('middle')">中字体</a> 
        <a href="javascript:void(0)" 
            οnclick="resize('max')">大字体</a> 
        <a href="javascript:void(0)" 
            οnclick="resize('super-max')">超大字体</a>
        <a href="javascript:void(0)" 
            οnclick="changeStyle()">换肤</a>
    </div>
    <hr/>
    
    <div id="newstext" class="middle">
        <p>
            达内时代科技集团有限公司，是中国高端IT培训的领先品牌，致力于培养面向互联网、电信和金融领域的Java、C++、C#、.Net、软件测试、嵌入式、PHP、android等方面的中高端软件人才。
        </p>
        <p>
             达内创办于2002年，专注IT职业教育17年，2014年在美国纳斯达克上市公司。目前，已开设24大课程方向，在全国70多个城市建立了330家培训中心，真正实现“一地学习，全国就业”。高薪聘请总监级名师全职授课，术业有专攻，名师出高徒。实施“因材施教，分级培优”教学方案，让每一位学员都成才，让强者更强。采用“先学习，就业后付款”的模式，已帮助80万名学员成功就业。
        </p>
        <p>
            达内优秀的教学效果和行业领先的经营模式赢得了社会各界的广泛赞誉和好评，荣获了各界权威机构的颁奖：达内成为业界唯一的一家2006、2007、2008、2009连续4年入选德勤评选的 “中国高科技高成长50强公司”、“亚太地区高科技高成长500强公司”，获得首届中国留学人才归国创业“腾飞”奖、中关村管理委员会指定的“软件人才培养示范基地”、被《计算机世界》评选的“就业服务杰出贡献奖”、被《中国计算机报》评选的“最具影响力培训机构奖”、被搜狐评为“中国十大教育集团”、被腾讯评为“中国大学生心目中最具影响力的IT品牌”。
            有实力、有信誉，要培训，就选上市公司！
        </p>
    </div>

    <hr/>
</body>
</html>