javaWeb-day07-js

最新推荐文章于 2021-10-13 19:26:25 发布

重庆森林呼呼呼

最新推荐文章于 2021-10-13 19:26:25 发布

阅读量209

点赞数

本文链接：https://blog.csdn.net/qq_34681728/article/details/106087610

版权

JavaScript简介

简称JS。JS运行在浏览器中，负责实现网页中的动画效果或者是实现表单校验等功能

引入方式

1、在script标签内部可以书写JS代码
2、通过script标签引入外部的JS文件
3、在元素上书写JS代码
01_引入JS.html

<!DOCTYPE html>
<html>
<head>
   <meta charset="UTF-8">
   <!-- 引入JS的第一种方式, type属性可以省略 -->
   <script type="text/javascript">
      // 警告框
      //alert("引入JS的第一种方式...");
      //alert( 100+23 );
   </script>
   
   <!-- 引入js的第二种方式: 引入js文件 -->
   <script type="text/javascript" src="demo.js">
      //这里能否再书写JS代码? 不可以!!!, 写了也无法执行
      alert("如果这句话可以执行, 那我就直播吃饭..!")
   </script>
</head>
<body>
   <!-- 引入js的第三种方式: 直接在元素上书写js代码 -->
   <!-- onclick属性 用于为当前元素绑定点击事件, 
      当元素被点击时, 会立即触发onclick事件, 会立即执行所绑定的函数 -->
   <h1 onclick="alert('别点我~!')">Hello CGB2003!</h1>
   <h1 onclick="console.log( new Date() )">Hello CGB2003!</h1>
</body>
</html>

demo.js

// 在js文件中可以直接书写JS代码
alert( "引入JS的第二种方式..." );

JS语法

1.注释格式：

和Java注释符号相同

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

2.数据类型

1.数值类型
数值底层都是浮点型，但是在处理和显示的过程中会自动的和整型进行转换。
2.字符串类型(string)
在JS中，字符串类型属于基本数据类型，字符串常量可以使用单引号或者使用双引号引起来
另外，JS中字符串类型有对应的包装对象（String），在需要时会自动的和包装对象进行转换
3.布尔类型(boolean)
布尔类型的值有两个，分别为true和false
4.undefined类型
undefined类型的值只有一个，就是undefined，表示变量未定义(但不是指变量没有声明)
5.null类型
null类型的值也只有一个，就是null，表示空值。可以作为函数的返回值，表示函数返回的是一个空的对象
注意：null和undefined类型的变量是不能调用函数或属性的，会抛异常
6.复杂数据类型
主要指对象(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运算符

和Java中的运算符大致相同

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

JS语句

和Java语句大致相同

02_JS语法示例1.html

<!DOCTYPE html>
<html>
<head>
   <meta charset="UTF-8">
   <!-- 在script标签内部直接书写JS代码 -->
   <script type="text/javascript">
      /* JS的数据类型
      一、基本数据类型
         数值类型: 在JS底层都是浮点型
         字符串类型:  字符串值用单引号或双引号引起来
         布尔类型: true和false
         undefined: 表示声明了变量但没有为变量赋值, 值为undefined
         null: 表示空值, 可以作为函数的返回值, 表示函数返回的是一个空的对象
      二、复杂数据类型
         主要指对象（JS内置/自带对象、自定义对象、数组、函数等）
      */
      // undefined
      var x; //声明变量, 默认值是undefined
      //console.log( x ); //打印x的值为 undefined
      //console.log( typeof x ); //打印x的类型为undefined   
      
      /* JS的变量声明
      JS通过var关键字声明变量, 且声明的变量不区分类型, 可以指向任意数据
      JS中如果多次声明相同的变量, 不会出现错误, 而是发生值覆盖
       */
      var x = 100;
      console.log( typeof x );// x在此时的类型为 number
      x = "abc";
      console.log( typeof x );// x在此时的类型为 string
      x = new String("abc");
      console.log( typeof x );// x在此时的类型为 object
      x = false;
      console.log( typeof x );// x在此时的类型为 boolean
      x = []; //数组
      console.log( typeof x );// x在此时的类型为 object
      x = {}; //对象
      console.log( typeof x );// x在此时的类型为 object
      //---------------------------------------
      var y = 123;
      var y = "hello";
      console.log( "y===" + y );
   </script>
</head>
<body>
</body>
</html>

03_JS语法实例2.html

<!DOCTYPE html>
<html>
<head>
   <meta charset="UTF-8">
   <script type="text/javascript">
      /* 案例1：if分支案例: 接收用户输入的成绩，判断成绩所属的等级
         80~100(包括80，也包括100) 优秀
         60~80(包括60，但不包括80) 中等
         0~60(包括0，但不包括60) 不及格
         其他值 输入有误*/
      var score = prompt( "在下面的输入框中输入成绩：", 150 ); //弹出一个消息输入框
      //var score = "35";
      console.log( "score="+score )
      if( score >= 80 && score <=100 ){
         alert("您的成绩属于: 优秀!");
      }else if( score >= 60 && score < 80 ){
         alert("您的成绩属于: 中等!");
      }else if( score >= 0 && score < 60 ){
         alert("您的成绩属于: 不及格!");
      }else{
         alert("您的输入有误!!");
      }
      /* 案例2：switch语句案例—实现一个简易的计算器:
      可以接收用户输入的两个数值和一个操作符(+、-、*、/)，根据操作符号的不同，
      对两个数值执行不同的运算。*/
      var str = prompt("请输入两个数值和一个运算符, 用逗号分隔: ", "10,5,+");
      var strArr = str.split(","); //用逗号切割字符串,返回一个字符串数组
      var num1 = strArr[0]; //数值1
      num1 = parseFloat( num1 ); //将num1转成浮点型的数值, 再赋值给num1
      var num2 = strArr[1]; //数值2
      num2 = parseFloat( num2 ); //将num2转成浮点型的数值, 再赋值给num2
      var opt = strArr[2];  //运算符 +、-、*、/
      //console.log( num1+"---"+num2+"---"+opt );
      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 sum = 0;
      for(var i=1;i<=100;i++){
         // sum = sum + i;
         sum += i;
      }
      alert( "1~100之间所有整数的和为: "+sum );
      /* 案例4：while循环语句案例
      遍历下面数组中的元素，将元素输出到控制台。 */
      var arr = [123, "abc", false, 88 ];
      var index = 0;//index作为数组的下标
      while( index < arr.length ){
         console.log( index + ":" + arr[index] );
         index++;
      }
   </script>
</head>
<body>
</body>
</html>

04_JS的数组和函数.html

<!DOCTYPE html>
<html>
<head>
   <meta charset="UTF-8">
   <title>Insert title here</title>
   <script type="text/javascript">
      /* JS的数组 */
      //1.声明方式一
      var arr1 = []; //声明一个空数组
      var arr2 = [100,"hello",true,88];//声明一个具有初始值的数组
      //2.声明方式二
      var arr3 = new Array();//声明一个空数组
      var arr4 = new Array(100,"hello",true,88);//声明一个具有初始值的数组
      //3.JS的数组中可以包含任意类型的元素
      //4.JS数组的长度可以被任意改变(length)
      var arr5 = [];
      console.log( arr5.length ); // 数组长度: 0
      arr5.length = 10; //通过length属性将数组长度改为10
      console.log( arr5.length ); // 数组长度: 10
      arr5[99] = "hello";    //数组长度会提升为100
      console.log( arr5.length ); // 数组长度: 100
      arr5.length=1; //通过length属性将数组长度改为1
      console.log( arr5.length ); // 数组长度: 1
      /* JS的函数 */
      //1.函数声明方式 function
      function fn(){
         alert("fn函数执行了。。。");
      }
      //fn();
      function fn2( name, age ){
         alert( name+":"+age );
      }
      //fn2("张飞", 30);
      var fn3 = function(name, addr){
         alert( name+":"+addr )
      }
      //fn3( "刘备", "河北" );
      /** 练习：声明一个函数fn4，在函数中实现：遍历指定的两个数值(例如1和100)
         之间的整数，将是3的倍数的数值存入到一个数组中，并将数组返回。 */
      function fn4( begin, end ){
         var arr = []; // 用于存储begin到end之间所有是3的倍数的数值
         var index = 0; // 作为数组的下标
         //遍历begin到end之间的所有整数
         for( var i=begin; i<=end; i++ ){ //begin=1, end=100
            if( i % 3 == 0 ){ //判断i是否为3的倍数
               arr[index] = i;
               index++;
            }
         }
         return arr;  //[课间休息 10:02-10:20]
      }
      //调用fn4函数,并接收函数的返回值
      var arr = fn4(1,100);
      console.log( arr );
   </script>
</head>
<body>
</body>
</html>

DOM操作

DOM: Document Object Model，文档对象模型，其实就是JS专门为访问html元素提供的一套API
点击电灯可以实现开/关灯，代码实现如下：

<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title>电灯开关案例</title>
<style>
   body{padding:20px;font-size:20px;}
   #div1{width:30%;border:1px solid red;padding:5px;margin-bottom:20px;}
</style>
<!-- 引入jquery的js库
<script src="js/jquery-1.8.3.min.js"></script> -->
<script>
   /** 练习：点击按钮，开灯或关灯
    onclick属性可以为当前元素绑定点击事件!
     当点击按钮时, 会触发点击事件, 执行changeImg函数
   */
   var flag = "off"; //off表示灯为关闭状态
   function changeImg(){
      //获取img元素(id为img1)
      var oImg = document.getElementById("img1");
      //判断当前灯的状态( 如果灯为关, 点击后则开; 如果等为开, 点击后则关)
      if( flag == "off" ){ //如果灯为关, 点击后则开
         oImg.src = "imgs/on.gif"; //开灯!
         flag = "on"; //on表示灯为打开状态
      }else{ // flag="on", 灯为开, 点击后则关
         oImg.src = "imgs/off.gif"; //关灯!
         flag = "off"; //off表示灯为关闭状态
      }
   }
</script>
</head>
<body>
   <input type="button" value="开/关灯"
      onclick="changeImg()" /> <br/><br/>
   <img id="img1" src="imgs/off.gif"/>
</body>
</html>

点击网页中的按钮对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; }
   #info{ width:250px;height:90px;font-size:22px;padding:5px;resize:none;}
   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(){
      //通过document创建一个div元素( <div>我是新来的!!</div> )
      var oDiv = document.createElement( "div" );
      //为div设置内容
      oDiv.innerHTML = "我是新来的!!";
      //获取当前网页中的body元素
      var oBody = document.body;
      //将新创建的div元素添加到body元素内部
      oBody.appendChild( oDiv );
   }
   /** 练习2、删除元素: 删除id为div_2的元素 */
   //parentNode
   function deleteNode(){
      //获取id为div_2的元素
      var oDiv2 = document.getElementById("div_2");
      //获取div_2的父元素(parentNode用于获取当前元素的父元素)
      var oParent = oDiv2.parentNode;
      //通过div_2的父元素, 删除div_2的元素
      oParent.removeChild( oDiv2 );
   }

   /** 练习3、更新元素内容：将div_3的内容更新为当前时间 */
   function updateNode(){
      //获取id为div_3的元素
      var oDiv3 = document.getElementById("div_3");
      //获取表示当前时间的字符串
      //toString()是按照默认时间格式将Date中的日期转成一个字符串
      //toLocaleString()是按照本地时间格式将Date中的日期转成一个字符串
      var dateStr = new Date().toLocaleString(); 
      //将当前时间的字符串设置给div_3元素的内容
      oDiv3.innerHTML = dateStr;
   }
    
</script>
</head>
<body>
   <input type="button" onclick="addNode()"
         value="创建一个div添加到body中"/>
    <input type="button" onclick="deleteNode()"
          value="删除id为div_2的元素"/>
    <input type="button" onclick="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{ /* 选中所有class值为min的元素 */
      font-size:16px;
   }
   .middle{ /* 选中所有class为middle的元素 */
      font-size:18px;
   }
   .max{ /* 选中所有class为max的元素 */
      font-size:20px;
   }
   .super-max{ /* 选中所有class为super-max的元素 */
      font-size:24px;
   }
</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是class值,不同的class值字号也不相同
      //将size设置给div的class属性即可!
      var oDiv = document.getElementById("newstext");
      //给div设置class(即设置所属的分组, class是保留字,得用className属性)
      oDiv.className = size;
      
   }
   //自由练习!!!
   //定义数组，存放不同的皮肤（css文件的路径）
   var cssArr = ["red.css", "green.css", "blue.css"];
   var index = 0; //index表示数组的下标
   /** 练习2：执行下面的函数，为页面切换不同的皮肤 */
   function changeStyle(){
      //为当前网页设置不同的样式(皮肤)
      //获取head标签中的link标签(id=link)
      var oLink = document.getElementById("link");
      //将link标签的href属性指向不同的css文件的路径
      oLink.href = "css/" + cssArr[index];
      index++;
      //当数组下标等于数组长度时, 就将下标重置为零
      if( index == cssArr.length ){ 
         index = 0;
      }
   }
</script>
</head>
<body>
    <h2>重庆森林简介</h2>
    <div id="change-font">
       <!-- 当为a标签的href属性赋值为"javascript:void(0)"，
          就会阻止超链接跳转, 即点击a标签后,不会跳转到任何网页!-->
       <a href="javascript:void(0)" 
          onclick="resize('min')">小字体</a> 
       <a href="javascript:void(0)" 
          onclick="resize('middle')">中字体</a> 
       <a href="javascript:void(0)" 
          onclick="resize('max')">大字体</a> 
       <a href="javascript:void(0)" 
          onclick="resize('super-max')">超大字体</a>
       <a href="javascript:void(0)" 
          onclick="changeStyle()">换肤</a>
   </div>
    <hr/>
    
    <div id="newstext" class="middle">
      <p>
         编号为223的警察（金城武）失恋后患上失恋综合症，在与金发女杀手（林青霞）擦肩而过又离奇相遇并有了一晚温情后，原本以为包括“爱情”在内的所有东西都有保质期的他意外地迎来心灵的短暂温暖。可是，他们的爱情还是结束了。
      </p>
      <p>
         快餐店新来的女招待阿菲（王菲）爱上了时常光顾快餐店的编号 为663的警察（梁朝伟），因拆了他的女友（周嘉玲）留在快餐店给他的“分手” 信，阿菲知晓了他的心情，偷拿到他的钥匙趁他不在时常潜入他家，一边梦游一边悄悄地改变他的生活，终在被他撞见时令其感受到情感的回归。然而，这才是他们爱情的开始。     
      </p>
    </div>

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

JS增删改查元素:

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

document.getElementById( id值 ) -- 通过元素的id值，获取一个元素。返回的是表示该元素的js对象
document.getElementsByTagName( 元素名 ) -- 通过元素名称获取当前文档中的所有指定名称的元素，返回的是一个数组，其中包含了所有指定名称的元素。
document.body -- 获取当前文档中的body元素
ele.parentNode -- 获取当前元素的父元素。ele表示当前元素
document.createElement( 元素名称 ) -- 根据元素名称创建指定名称的元素，返回的是表示新创建元素的js对象
parent.appendChild( child ) -- 通过父元素添加子元素，其中parent表示父元素，child表示子元素
parent.removeChild( child )-- 通过父元素删除子元素，其中parent表示父元素，child表示子元素
ele.innerHTML -- 获取当前元素的html内容(从开始标签到结束标签之间的所有内容)，还可以设置当前元素的html内容(如果元素内部有内容，将会覆盖原有内容)