前端基础（二） javaScript

最新推荐文章于 2020-10-28 22:19:29 发布
最新推荐文章于 2020-10-28 22:19:29 发布
阅读量211 收藏 2
点赞数 1
分类专栏： JavaSE 文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43835305/article/details/108785183
版权

二、javaScript

基本概念

  • JavaScript是现在网络上比较流行的一种脚本语言，通过javaScript可以让用户与Web 站点之间增强交互
  • JavaScript可以被所有Web浏览器解析。
  • 脚本语言叫做动态语言，它是一种解释型语言，它一般由文本编辑器编辑。脚本语言，一 它不能单独运行，需要嵌入到其它语言中，例如：javaScript， 我们可以将编写的javaScript嵌入到HTML代 码中，由浏览器解析执行它

使用场景

  • 数据可视化
    数据可视化是当下大家所推崇的一种互动展示模式，而JavaScript拥有ECharts、D3.js等多种可实现数据可视化效果的框架
  • 移动应用
    PhoneGap将WebVieW带向了移动应用，同时也将JavaScript带向了移动应用
  • 服务端
    因为V8的性能将JavaScript带到了一个新的高度，于是Node.js诞生了——前端、后台都可以用JavaScript，现 在任何一个网页都离不开JavaScript
  • VR
    利用3D游戏引擎，如Three.js
  • 游戏
    JavaScript也可以做出华丽的特效

JavaScript的组成

  • ECMAScript：描述了该语言的语法、语句和基本对象 （核心）
  • BOM:浏览器对象. 描述处理网页内容的方法和接口 （浏览器对象模型）
  • DOM:Document Object Model.操作文档中的元素和内容 （文档对象模型）

JavaScript的引入

  • 在HTML文件中引入JavaScript有两种方式

    • 一种是在HTML文档直接嵌入JavaScript脚本，称为内嵌式
    • 另一种是 链接外部JavaScript脚本文件，称为外联式

  • 对他们的具体讲解如下：

    • 内嵌式，在HTML文档中，通过script标签引入

      基本语法

      <script type="text/javascript">    //此处为JavaScript代码 </script>

    • 外联式，在HTML文档中，通过script标签引入.js文件

      基本语法

      <script src="1.js" type="text/javascript" ></script>

基本语法

变量

  • 在使用JavaScript时，需要遵循以下命名规范：

    • 变量名必须以字母或下划线开头，数字不能开头
    • 变量名不能包含特殊符号 (如:空格等符号 )
    • 变量名不能使用JavaScript关键字作为变量名，如：function
    • JavaScript严格区分大小写

  • 变量声明

    var 变量名;    //JavaScript变量可以不声明，直接使用。默认值：undefined

  • 变量赋值

    var 变量名 = 值;    //JavaScript变量是弱类型，及同一个变量可以存放不同类型的数据

数据类型

  • 关键字:typeof 可以查看变量的数据类型

  • 基本类型

    • undefined, undefined类型只有一个值，即 undefined。当声明的变量未初始化时，该变量的默认值是 undefined
    • boolean，有两个值 true 和 false
    • number，表示任意数字
    • string，字符串由双引号（"）或单引号（’）声明的
    • JavaScript 没有字符类型

  • 引用类型

    • 引用类型通常叫做类（class），也就是说，遇到引用值，所处理的就是对象。
    • JavaScript是基于对象而不是面向对象。
    • JavaScript提供众多预定义引用类型（内置对象)
    造一个对象：var obj = new Object();
 
造一个字符串对象：var str = new String();
 
造一个日期对象：var date = new Date();

  • 注意事项

    • js属于弱语法类型，即不用特别规范也不会报错，如定义变量不写var也不报错
    • js也属于弱数据类型，var代表通用类型，当赋值后才确定数据类型
    • null属于object类型

运算符

  • JavaScript运算符与Java运算符基本一致

  • 算术运算符

    如果有字符串数值参与加法运算，则为字符串拼接

    如果字符串数值参与减法运算，则将字符串数值转为数值类型，再参与减法运算

    运算符描述例子(y=5)结果
    +加x=y+27
    -减x=y-23
    *乘x=y*210
    /除x=y/22.5
    %取余(保留整数)x=y%21
    ++累加x=++y6
    –累减x=–y4

  • 赋值运算符

    如果有字符串数值参与加等于运算，则为字符串拼接

    如果有字符串数值参与减等于运算，则将字符串转为数值类型，再参与运算

    运算符描述例子(x=2, y=5)结果
    =赋值等于x=y5
    +=加等于x+=y7
    -=减等于y-=x3
    *=乘等于x*=y10
    /=除等于x=y%22.5
    %=取余等于x%=y2

  • 比较运算符

    == 只比较内容，不比较类型

    === 既比较内容，也比较类型

    > 、< 等中字符串和数值的比较，会将字符串转为数值类型，再比较

    运算符描述例子(x=2)
    ==等于x==2 false
    ===全等于（值和类型）x===5 true；x==="5” false
    !=不等于x!=2 true
    >大于x>2 true
    <小于x < 2 false
    >=小于等于x>=5 true
    <=大于等于x<=5 true

  • 逻辑运算符

    运算符描述例子(x=1, y=2)
    &&andx<2 && y>1 true
    ||orx>1 || y=2 true
    ！not!(x==2) true

  • 运算符操作
    JavaScript规范规定以下操作规则

    boolean运算(在if等条件语句中使用时)

    参数类型结果
    Undefinedfalse
    Nullfalse
    Boolean结果等于输入的参数
    Number如果参数为+0，-0或NaN则结果为false，否则true
    String如果字符串为空字符串，则为false，否则true
    Objecttrue

JS中的语句

  • 跟java一样，js也存在if、if-else、for、switch等逻辑语句，与java使用方式一致

     <script type="text/javascript">    
     for (var i=0; i<10; i++) {        
         //alert(i);
     }    

     //定义数组    
     var arr = [1,2,3,5.5,true,"hello"];    
     //普通for遍历数组    
     /*for(var i=0; i<arr.length; i++){        
     alert(arr[i]);    
     }*/
 
    //加强for循环    
     for(index in arr){        
         alert(arr[index]);    
     }
	for(element of arr){
        alert(element)
    }
</script>

函数

  • js的函数是js非常重要的组成部分，js常用的函数的定义方式有两种

  • 普通函数

    //定义函数 
function 函数名(参数列表){    
    js逻辑代码;    
    //return 返回值；  // 若不需要返回值可以省略return 
}
 
// 函数调用格式：
// 函数名(实际参数);

    //定义函数： 
function add(a,b){    
    alert(a+b); 
} 
//执行函数：
add(3,5); 
//执行结果：8

  • 匿名函数

    //定义匿名函数也就是没有名字的函数 
function(参数列表){    
    js逻辑代码; 
}

    匿名函数没有办法直接调用，一般情况下匿名函数有两种使用场景：
    将匿名函数赋值给一个变量，使用变量调用函数

    //定义函数并赋值给变量： 
var fn = function(参数列表){    
    js逻辑代码
} 
//调用函数：fn(实际参数);

事件

  • js的事件是js不可或缺的组成部分，要学习js的事件，必须要理解如下几个概念：

    • 事件源：被监听的html元素
    • 事件：某类动作，例如点击事件，移入移除事件，敲击键盘事件等
    • 事件与事件源的绑定：在事件源上注册上某事件
    • 事件触发后的响应行为：事件触发后需要执行的代码，一般使用函数进行封装

  • 常用事件

    事件名描述
    onload某个页面或图像被完成加载
    onsubmit当表单提交时触发该事件—注意事件源是表单form
    onclick鼠标点击某个对象
    ondblclick鼠标双击某个对象
    onblur元素失去焦点
    onfocus元素获得焦点
    onchange用户改变域的内容
    onkeydown某个键盘的键被按下
    onkeypress某个键盘的键被按下或按住
    onkeyup某个键盘的键被松开
    onmousedown某个鼠标按键被按下
    onmouseup某个鼠标按键被松开
    onmouseover鼠标被移到某元素之上
    onmouseout鼠标从某元素移开
    onmousemove鼠标被移动

  • 事件绑定函数

    给页面上的标签添加一个事件，关联一个函数。当我们操作这个标签时，javaScript就会侦听到对应的事件发生，从而执行关联的函数我们称为事件绑定函数

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        /*
            事件介绍:
            window.onload 页面加载函数,当整个html页面加载完毕之后执行该该事件关联的函数.
            onload  某个页面或图像被完成加载
            onsubmit 当表单提交时触发该事件---注意事件源是表单form

            需求描述:
            1.页面加载完毕执行函数
            2.body加载完毕,执行函数
            3.提交表单事件
        */

        //1.页面加载完毕执行函数
        // window.onload = function(){
        //     alert("整个html已经加载完毕...");
        // }


        // 2.body加载完毕,执行函数
        //function load(){
        //   alert("body内容已经加载完毕.");
        //}

        //3.提交表单事件
        function validate(){
            //可以在该方法中验证用户在表单输入的数据是否合理,如果合理返回true,如果不合理返回false,不让表单提交.
            return ture;
        }

    </script>
</head>
<body onload="load()">
    <form action="demo1-js入门.html" onsubmit="return validate()">
        用户名<input type="text" name="username"  /> <br>
        <input type="submit" />
    </form>
</body>
</html>

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            border : 1px solid red;
            width: 200px;
            height: 200px;
        }
    </style>
    <script>
        /*
        事件介绍:
        onclick 鼠标点击某个对象
        ondblclick 鼠标双击某个对象
        onblur 元素失去焦点
        onfocus 元素获得焦点
        onchange 用户改变域的内容
        onmouseenter 某个鼠标进入
        onmousedown 某个鼠标按键被按下
        onmouseup 某个鼠标按键被松开
        onmouseout 鼠标从某元素移开

        需求:
        1.在页面上给定2个按钮,第一个按钮绑定单击事件; 第二个按钮绑定双击事件  (关联函数)
        2.在页面上写一个input type=text 文本框; 绑定一个 光标失去事件
        3.在页面上写一个input type=text 文本框; 绑定一个  获取光标事件
        4.编写一个下拉框,绑定一个 onchange 内容改变事件
        5.写div ,设置宽度和高度边框; onmouseenter 鼠标进入事件 ; onmousedown 某个鼠标按键被按下 ; 
        onmouseup 某个鼠标按键被松开 ; onmouseout 鼠标从某元素移开
        */


        //1.在页面上给定2个按钮,第一个按钮绑定单击事件; 第二个按钮绑定双击事件  (关联函数)
        function fun1(){
            alert("你单击我了...");
        }

        function fun2(){
            alert("你双击我了...");
        }

       //2.在页面上写一个input type=text 文本框; 绑定一个 光标失去事件
       function fun3(){
            alert("失去了光标...");
        }

       //3.在页面上写一个input type=text 文本框; 绑定一个  获取光标事件
       function fun4(){
            alert("获取了光标...");
        }


        //4.编写一个下拉框,绑定一个 onchange 内容改变事件
        function fun5(){
            alert("城市改变了..");
        }


        //5.写div ,设置宽度和高度边框; onmouseenter 鼠标进入事件 ; onmousedown 某个鼠标按键被按下 ; 
        //onmouseup 某个鼠标按键被松开 ; onmouseout 鼠标从某元素移开
        function enter(){
            //当鼠标进入,div的背景色变为黄色
            document.getElementById("mydiv").style.backgroundColor="yellow";
        }

        function down(){
            //当鼠按下,div的背景色变为绿色
            document.getElementById("mydiv").style.backgroundColor="green";
        }

        function up(){
            //当鼠抬起来,div的背景色变为红色
            document.getElementById("mydiv").style.backgroundColor="red";
        }


        function out(){
            //当鼠移出,div的背景色变为blue
            document.getElementById("mydiv").style.backgroundColor="blue";
        }
    </script>
</head>
<body>
    <form action="demo1-js入门.html">
        <input type="button" value="单击我" onclick="fun1()"><br>
        <input type="button" value="双击我" ondblclick="fun2()"><br>
        <input type="text" name="username" placeholder="将要失去光标" onblur="fun3()"><br>
        <input type="text" name="age" placeholder="将要获取光标" onfocus="fun4()"><br>
        <select name="city" onchange="fun5()">
            <option value="beijing">北京</option>
            <option value="shanghai">上海</option>
            <option value="shenzhen">深圳</option>
        </select><br>
    </form>
    <div id="mydiv" onmouseenter="enter()"  onmousedown="down()"  onmouseup="up()" onmouseout="out()"></div>
</body>
</html>

  • 派发事件

    不修改html, 通过js方式获取到一个html中的元素对象,并且给它动态的设置一个事件并关联一个函数.我们称为事件派发.

    派发的优点是:不污染原来的html代码;

    缺点:需要页面内容加载完毕在可以使用,一般写在页面加载函数

    注意事项:如果是派发事件,js代码如果要写在html代码上面,需要写页面加载函数中才可以执行.
    或者js代码直接写html下方

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>事件派发</title>
    <script>

        /*
            创建一个按钮,给按钮一个id,使用事件派发的方式给按钮派发一个单击事件,关联一个函数.

            页面加载函数:
            window.onload = function(){
                整个页面加载完毕之后执行的内容...
            }

            注意事项:
            如果是派发事件,js代码如果要写在html代码上面,需要写页面加载函数中才可以执行.
            或者js代码直接写html下方.
        */
       window.onload = function(){
            document.getElementById("btn").onclick = function(){
                alert("单击事件执行...");
            }
       }
        
    </script>
</head>
<body>
    <input type="button" value="按钮" id="btn">
</body>
<!-- 
<script>
    document.getElementById("btn").onclick = function(){
        alert("单击事件执行...");
    }
</script> 
-->
</html>

BOM对象

基本概念

  • BOM（Browser Object Model），浏览器对象模型(将客户端的浏览器抽象成一类对象)，是将我们使用的浏览器抽象成对象模型，例如我们打开一个浏览器，会呈现出页面，通过js提供浏览器对象模型对象我们可以模拟浏览器功能。

  • 例如，在浏览器地址栏输入地址，敲击回车这个过程，我们可以使用location对象进行模拟。

  • 例如，浏览器中的 前进和后退按钮，我们可以使用history对象模拟

js的BOM对象

  • Screen对象，Screen 对象中存放着有关显示浏览器屏幕的信息
  • Navigator对象，包含的属性描述了正在使用的浏览器
  • Window对象（重点），Window 对象表示一个浏览器窗口或一个框架
  • History对象，其实就是来保存浏览器历史记录信息
  • Location对象（重点），Location 对象是 Window 对象的一个部分，可通过 window.location 属性来访问，完成跳转

Window对象

  • Window对象此处学习它的三个作用
    • 获取文档对象document
    • 弹框的方法
    • 定时器
  • 凡是window对象的属性和方法，都可以省略window不写

弹框的方法

  • 提示框：alert(提示信息);

  • 确认框：confirm(提示信息);

  • 输入框：prompt(提示信息);

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>window的弹出框</title>
    <script>
        //window.alert("这是警告框");
		// 如果用户点击了确认,返回true;  如果用户点击取消,返回false;
        //var flag = confirm("您确认删除吗?");  
        //alert(flag);

        var result = prompt("请输入您的用户名");
        alert(result);
    </script>
</head>
<body>
    
</body>
</html>

定时器

  • setInterval((js代码/函数,毫秒值); 反复执行的定时器
  • clearInterval(定时器的id值);取消反复执行的定时器
  • setTimeout(js代码/函数,毫秒值); 执行一次的定时器
  • clearTimeout(定时器的id值);取消执行一次的定时器
周期执行任务

  • 代码演示

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>周期定时任务</title>
    <script>
        /*
        1.方法1: 周期执行任务方法
        setInterval(js脚本片段/函数,毫秒值);
        
        2.方法2: 取消周期执行任务
        clearInterval(周期执行任务id);
        */

        //window.setInterval("alert('hello')",2000);

        function fun(){
            alert("hello 拉勾");
        }

        var resultId = setInterval("fun()",2000);

        //该方法运行可以停止周期执行任务
        function stopInterval(){
            clearInterval(resultId);
        }
    </script>
</head>
<body>
    <input type="button" value="停止周期执行任务" onclick="stopInterval()">
</body>
</html>
定时执行任务

  • 代码演示

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>定时函数</title>
    <script>
        /*
            1. setTimeout(js代码/函数,毫秒值); 执行一次的定时器
            2. clearTimeout(定时器的id值);取消执行一次的定时器   

        */

        //setTimeout("alert('你好啊')",3000);

        function fun(){
            alert("欢迎大家");
        }

        var resultId = setTimeout("fun()",2000);

        //取消定时任务
        function  stopTimeOut(){
            clearTimeout(resultId);
        }
    </script>
</head>
<body>
    <input type="button" value="取消定时任务" onclick="stopTimeOut()">
</body>
</html>

常用的全局方法

  • 内置函数的重要转换: 字符串转成数字

    parseInt(被转换的内容) 将字符串数值变为number类型

    parseFloat(被转换的内容) 将字符串数值变为number类型

  • 代码举例

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>全局转换方法</title>
    <script>
        //var num1 = 100;
        //var num2 = "200";

        //计算num1和num2的和.
        //var result = num1 + num2;
        //alert(result);

        //var result2 =  num1 + parseInt(num2);
        //alert(result2);


        var  n1 = 11.15;
        var  n2 = "11.15";
        var result = n1 + n2;
        alert(result);

        var result2 = n1 + parseFloat(n2);
        alert(result2);

    </script>
</head>
<body>
    
</body>
</html>

Location对象

  • location.href 可以在js中进行url访问，完成页面的跳转

  • location.href 属性相当于在浏览器的地址栏中输入地址并敲回车

  • location.reload() 方法让页面重新加载(刷新页面)

  • 代码演示

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>location对象</title>
    <script>
        /*
            location对象: 记录了当前的URL信息

            属性:
            href : 完成一个地址的跳转

            方法:
            reload() ; 重新加载页面,刷新.

            补充:
            页面跳转的方式:
            1) 超链接跳转 <a href="URL地址"></a>
            2) 提交表单  form  action="URL地址"
            3) location.href="URL地址"
        */

        function goTo(){
            location.href="demo1-js入门.html";
        }

        //重新加载页面方法
        function reflesh(){
            location.reload();
        }

    </script>
</head>
<body>
    <input type="button" value="页面跳转" onclick="goTo()"> <br/>

    <input type="button" value="重新加载页面" onclick="reflesh()">
</body>
</html>

DOM对象

基本概念

  • DOM(Document Object Model) 文档对象模型，定义访问和操作结构化文档（HTML）的方式

    • 创建的结构化文档：html、xml 等
    • DOM包括：核心DOM、HTML DOM、XML DOM
    • 通常情况下HTML DOM 和XML DOM是可以相互使用的

  • HTML DOM 将整个HTML文档呈现成一颗DOM树，树中有元素、属性、文本等成员

    在这里插入图片描述

document 文档对象

  • 浏览器加载整个HTML文档形成Document 对象，Document 对象可以访问和操作HTML文档中的所有元素，对其进行增删改操作
  • 文档树的分类
    • 标签元素
    • 属性元素
    • 文本元素
获得元素对象

  • 方式

    获取标签元素方法描述
    document.getElelentById(“id值”)获取id为xx的是元素节点
    document.getElementsByName(“name名称”)获取多个元素的节点,通过name属性值
    document.getElelmetsByClassName(“class名称”)根据class名字获取多个节点
    document.getElementsByTagName(“标签名称”)根据标签名获取多个元素

  • 代码演示

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>获取元素</title>
    <script>
        // 1.定义一个button ,给设置value,也给id; 通过document.getElelentById("id值") 获取的是元素节点 , 及按钮的value值,打印
        function getElement(){
           var element =  document.getElementById("btn");
           //alert(element);    // [object HTMLInputElement]
           alert(element.value);
        }

        // 2.定义2一个input框,设置name属性值一致,获取2个input框元素,打印里面的值
        function getElements(){
           var elements =  document.getElementsByName("myname");
           //alert(elements.length);
           for(var i=0; i < elements.length; i++){
               alert(elements[i].value);
           }

        }

        // 3.定义2个input框,设置class属性值一致,getElelmetsByClassName("class名称"); 获取里面的值,打印
        function getClassElements(){
           var elements =  document.getElementsByClassName("cls");
           for(var i=0; i < elements.length; i++){
               alert(elements[i].value);
           }
        }

        // 4.获取所有的input ,打印里面的值 ,通过getElementsByTagName("标签名称")获取.
        function getTagElements(){
           var elements =  document.getElementsByTagName("input")
           for(var i=0; i < elements.length; i++){
               alert(elements[i].value);
           }
        }

    </script>
</head>
<body>
    <input type="button" value="我的按钮123" id="btn"> <br> <br>

    根据name属性获取元素:<input type="text" name="myname"  value="我的值1">  <br>
    根据name属性获取元素:<input type="text" name="myname"  value="我的值2">  <br> <br>

    根据class属性获取元素:<input type="text"   class="cls" value="我的值3">  <br>
    根据class属性获取元素:<input type="text"   class="cls" value="我的值4">  <br> <br>

    根据标签获取元素:<input type="text"   value="我的值5"> <br>
    根据标签获取元素:<input type="text"   value="我的值6"> <br>

    <hr>

    <input type="button" value="点击按钮获取value值" onclick="getElement()">
    <input type="button" value="根据name获取对应元素及value值" onclick="getElements()">
    <input type="button" value="根据class获取对应元素及value值" onclick="getClassElements()">
    <input type="button" value="根据TagName获取对应元素及value值" onclick="getTagElements()">
</body>
</html>
操作标签体内容

  • 方式

    语法描述
    对象名.innerHTML = 标签体;设置标签体html（也可以设置文本）
    对象名.innerHTML获取标签体html
    对象名.innerText = 文本内容;设置标签体文本
    对象名.innerText获取标签体文本

  • 代码演示

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>设置标签体内容</title>
    <script>
            // 定义一个p段落标签,<font color='red'>我的字体</font>
			
            // 1.使用innserHTML 获取P标签体中间的内容;
            function fun1(){
                //1.获取到p标签
               var pElement =  document.getElementById("pid");
               //2.pElement.innerHTML
               alert(pElement.innerHTML);// <font color="red">我的字体</font>
            }

            // 2.使用innerText获取P标签中间的内容
            function fun2(){
                //1.获取到p标签
               var pElement =  document.getElementById("pid");
               //2.pElement.innerText
               alert(pElement.innerText); // 我的字体
            }

            // 3.使用innerHTML,给P标签中设置内容(带html)
            function fun3(){
                 //1.获取到p标签
                 var pElement =  document.getElementById("pid");
                 pElement.innerHTML = "<font size='20px' color='blue'>我的新字体内容</font>"
            }


            // 4.使用innerText,给P标签设置文本
            function fun4(){
                 //1.获取到p标签
                 var pElement =  document.getElementById("pid");
                 pElement.innerText = "<font size='20px' color='blue'>我的新字体内容</font>"
            }

    </script>
</head>
<body>
    <p id="pid">
        <font color="red">我的字体</font>
    </p>

    <hr>
    <input type="button" value="使用innserHTML 获取P标签体中间的内容" onclick="fun1()">
    <input type="button" value="使用innerText获取P标签中间的内容" onclick="fun2()">
    <input type="button" value="使用innerHTML,给P标签中设置内容(带html)" onclick="fun3()">
    <input type="button" value="使用innerText,给P标签设置文本" onclick="fun4()">
</body>
</html>
属性的操作
  • 方式
方法描述
getAtrribute(name)获得属性的值
setAtrribute(name,value)设置属性的值
removeAtrribute(name)删除某个属性

  • 代码演示

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>属性操作</title>
    <script>
        // 定义一个input框, name属性值  value属性值

        // 1.点击按钮,使用getAtrribute(name) 获取name属性值和value属性值
        function fun1(){
            var inputElement = document.getElementById("inputId");
            var nameVal = inputElement.getAttribute("name");
            var val = inputElement.getAttribute("value");
            alert("name = "+ nameVal + " , value = "+val);
        }

        // 2.点击按钮,使用setAtrribute(name,value)给value修改内容
        function fun2(){
            var inputElement = document.getElementById("inputId");
            inputElement.setAttribute("value","jack");
        }

        // 3.点击按钮,使用removeAtrribute(name)删除value值
        function fun3(){
            var inputElement = document.getElementById("inputId");
            inputElement.removeAttribute("value");
        }
    </script>
</head>
<body>
    <input type="text" name="username" value="tom" id="inputId" />

    <hr>
    <input type="button" value="获取name属性值和value属性值" onclick="fun1()">
    <input type="button" value="使用setAtrribute(name,value)给value修改内容" onclick="fun2()">
    <input type="button" value="使用removeAtrribute(name)删除value值" onclick="fun3()">
</body>
</html>

JavaScript内置对象

  • JS的对象也分为内置对象和定义对象 例如: String 、 Array 、 Date 、Math、Random

JS内置对象 String

  • String 对象用于处理文本（字符串）

  • String 对象属性

    • length 字符串的长度

  • String 对象方法

    方法描述
    charAt(x)返回在指定位置的字符
    indexOf(x)检索字符串
    lastIndexOf(x)从后向前搜索字符串
    split(x)把字符串分割为字符串数组
    substring(开始索引,结尾索引)获取两个索引之间的字符,包含头,不包含尾
    substr(开始索引)获取的是开始索引到结尾之间的字符
    substr(开始索引,字符个数)从开始索引开始,获取指定个数个字

  • 代码演示

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>String对象</title>
    <script>
        /*
        1.String对象如何创建

        2.String对象的属性
            length 长度

        3.String对象的方法
        
        */

        //1.String对象如何创建
        //var str = "abc";
        //var str1 = new String("abcdef");

        // alert(str);
        // alert(typeof str);  //string
        // alert(str1);
        // alert(typeof str1); //object

        //2.String对象的属性
        //alert(str.length);
        //alert(str1.length);

        //3.String对象的方法

        //var str = "abcdefghcba";

        // charAt(x)		返回在指定位置的字符
        //alert(str.charAt(1)); // b

        // indexOf(x)		检索字符串
        //alert(str.indexOf("cde")); //2
        //alert(str.indexOf("b"));  //1

        // lastIndexOf(x)	从后向前搜索字符串。
        //alert(str.lastIndexOf("b")); //9

        // split(x)		把字符串分割为字符串数组。
        //var str = "aa,bb,cc,dd,ee";
        //var strArr = str.split(",");
        //alert(strArr);
        //alert(strArr[1]);
        //for(var i = 0;  i < strArr.length ;i++){
        //    alert(strArr[i]);
        //}

        // substring(开始索引,结尾索引)	获取两个索引之间的字符,包含头,不包含尾
          var str = "abcdefg";
        //var result = str.substring(1,3);  //bc
        //alert(result);

        // substr(开始索引)			   获取的是开始索引到结尾之间的字符
        //var result =  str.substr(3) ;  //defg
        //alert(result);

        // substr(开始索引,字符个数)		从开始索引开始,获取指定个数个字符
        var result = str.substr(2,3);   //cde
        alert(result);

        
    </script>
</head>
<body>
    
</body>
</html>

JS内置对象 Array

  • Array 对象，就是JS数组，用于存储多个值，存储的元素类型可以是任意类型

  • 创建 Array 对象的语法

    new Array(); 
new Array(size); 
new Array(element0, element0, ..., elementn);

  • 参数

    • 参数 size 是期望的数组元素个数。返回的数组，length 字段将被设为 size 的值
    • 参数 element …, elementn 是参数列表。当使用这些参数来调用构造函数
    • Array() 时，新创建的数组的元素就会被 初始化为这些值。它的 length 字段也会被设置为参数的个数

  • Array 对象属性

    • length 设置或返回数组中元素的数目

  • Array数组的特性

    • js中数组没有下标越界异常
    • js中数组的长度是不固定的，如果超出范围，则自动扩充
    • js中数组元素的类型是可以多种的

  • 代码演示

    <script type="text/javascript">    
    //定义数组对象    
    var arr1 = new Array();    
    //赋值元素    
    arr1[0] = 1;    
    arr1[1] = "a";    
    arr1[2] = 2.2;    
    alert(arr1);
 
    //定义数组对象    
    var arr2 = new Array(3);    
    //打印数组长度    
    alert(arr2.length);
 
    //定义数组对象    
    var arr3 = new Array(3,4,5,"a",true);    
    alert(arr3);
 
    //开发中常用方式    
    var arr4 = [1,2,3,4,"a","b","c"];    
    for(var i = 0 ; i< arr4.length;i++){        
        alert(arr4[i]);    
    }
 
    //定义二位数组    
    var arr5 = [        
        [1,2,3],["a",4,"b"],[true,5,false]    
    ];    
    //打印3    
    alert(arr5[0][2]);    
    //打印a    
    alert(arr5[1][0]);   
    //打印false    
    alert(arr5[2][2]);
</script>

案例–轮播图

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #img_id {
            width: 880px;
        }

        div {
            margin-top: 150px;
            margin-left: 250px;
        }
    </style>
</head>
<body>
    
    <!-- 思路分析：
        1.创建页面内容
        创建一个div ，div中包含了3个图片
        2.设置div  3个图片的样式
        3.编写js让图片滚动起来

        准备工作：
        1.jpg  2.jpg  3.jpg  left.png  right.png
    -->

    <div>
        <img src="img/left.png" onclick="pre()" style="width: 70px; vertical-align: middle; margin-top: -300px;">
        <img src="img/1.jpg" id="img_id">
        <img src="img/right.png" onclick="next()" style="width: 70px; vertical-align: middle; margin-top: -300px">
    </div>
</body>
<script>
    //1.定义一个记录图片值的变量 count
    var count = 1;

    //2.编写pre()方法,切换到前一张图片
    function pre(){
        count--;
        if(count <=0){
            count = 3;
        }
        //设置图片的src属性,更变图片
        document.getElementById("img_id").src="./img/"+count+".jpg";
    }

    //3.编写next()方法,切换到下一张图片
    function next(){
        count++;
        if(count > 3){
            count = 1;
        }
         //设置图片的src属性,更变图片
         document.getElementById("img_id").src="./img/"+count+".jpg";
    }

    //设置周期执行函数
    window.setInterval(next,2000);
</script>
</html>

注：本内容为个人拉勾教育大数据训练营课程笔记

是你得不到的人
关注
专栏目录
前端基础 - JavaScript （三）
真実はただ一つ。
11-15 181
流程控制 流程控制的概念 在一个程序的执行过程中。每行代码的执行顺序如果不同，对于程序的执行结果是不一样的。一般情况下需要人为控制代码的执行过程以达到我们需要的效果 通过一定的手段控制代码的执行顺序 分类 顺序结构：标准的从上往下执行的顺序 分支结构：通过判断一定的条件选择所要执行的代码，而产生若干分支 循环结构：通过一定的条件约束部分代码重复执行若干次 顺序流程 最简单最基本的流程控制，默认的程序代码按照从上往下的顺序依次执行 分支流程 分支结构 代码由上往下执行的过程中，根据条件进行选择不同的代码执
前端基础--JavaScript
2201_75981054的博客
02-02 189
编程语言 编程 1.编程：就是让计算机为解决某个问题而使用某种程序设计语言编写程序代码，并最终得到结果的过程 2.计算机程序：就是计算机所执行的一系列的指令集合，而程序全部都是用我们所掌握的语言来编写的，所以人们要控制计算机一定要通过计算机语言向计算机发出命令 3.计算机指的是任何能够执行代码的设备 计算机语言 1.计算机语言指用于人与计算机之间通讯的语言，它是人与计算机之间传递信息的媒介 2.分类 1）机器语言：由0和1组成的二进制数，二进制是计算机语言的基础 2）汇编语言 3）
从零开始学习python编程-从0开始的Python学习014面向对象编程（推荐）
q6q6q的专栏
10-28 148
简介到目前为止，我们的编程都是根据数据的函数和语句块来设计的，面向过程的编程。还有一种我们将数据和功能结合起来使用对象的形式，使用它里面的数据和方法这种方法叫做面向对象的编程。类和对象是面向对象编程的两个重要方面。对于类和对象的关系，举个例子就像学生和小明同学的关系一样。学生（类）是一个拥有共同属性的群体，小明同学（对象）是其中一个有自己特性的个体。对于一个对象或类的变量被称为域，函数被称为类或对...
前端基础：JavaScript
qq_40286307的博客
07-28 120
Introduction 脚本语言叫做动态语言，它是一种解释型语言，它一般由文本编辑器编辑。脚本语言，一般它不能单独运行，需要嵌入到其它语言中。 JavaScript 是比较流行的一种脚本语言，通过 JavaScript 可以让用户与 Web 站点之间增强交互。可以将编写的 JavaScript 嵌入到 HTML 代码中，由浏览器解析执行它。 JavaScript 的作用：1. 表单验证操作；2. 通过 JavaScript 对 HTML 代码内容进行修改，对 HTML 中的 CSS 样式进行修改。 Syn
前端基础-JavaScript
weixin_44540130的博客
01-18 8954
开发工具与关键技术：DW/浏览器 ；简单使用js。 作者：刘佳明 撰写时间：2019年1月 18 日 前面已经随手写过了关于网页编辑的一些基础布局和标签的认识；这篇文章在这里为大家简单的介绍一下关于JavaScript的一些知识； 我们在网页设计和编辑的时候，在有需要将它美观和动画的网页部分；常常需要使用到JavaScript，和css3 来实现一些精美的效果； 现很多已有封装好了插件，打开它的...
前端基础JavaScript基础知识大纲
最新发布
09-16
简易版JS知识体系，为小白开启前端之路，快速了解JS框架
头歌教学实践平台 Web前端开发基础 JavaScript 学习手册二：JS 数据类型
01-20
本教程“头歌教学实践平台 Web前端开发基础 JavaScript 学习手册二：JS 数据类型”深入浅出地介绍了JavaScript中的各种数据类型，这对于理解代码逻辑和优化性能至关重要。 在JavaScript中，数据类型主要分为两大类...
Web前端开发基础：JavaScript基础.ppt
06-06
JavaScript程序由语句、函数、对象、方法、属性等构成，程序结构包括顺序、分支和循环三种基本结构。 语句和语句块 JavaScript语句是发送给浏览器的命令，这些命令的作用是告诉浏览器要做的事情。 JavaScript语句...
1500个前端开发常用JavaScript特效
04-24
1. **事件处理**：JavaScript的事件处理机制是构建动态网页的基础，如点击（click）、鼠标悬浮（mouseover）和键盘操作（keydown）。了解如何添加事件监听器（addEventListener）和移除事件监听器...
前端JavaScript基础学习笔记案例
08-02
个人在学习前端JavaScript时的学习笔记，内含JavaScript的中基础知识点，以及案例。里面有兼容市面上浏览器的方法 1.知识点包括：基础语法，字符串操作，object对象，DOM对象，BOM对象，offset，client，scroll对象...
模块三作业解题思路
weixin_43835305的博客
08-27 821
拉勾教育大数据训练营模块三作业
java核心类库（一） 常用类
weixin_43835305的博客
08-24 770
常用类的介绍和使用，包括Object类，包装类，数学类等
多态的使用场合
weixin_43835305的博客
08-25 642
java 多态的一些使用场合
模块四解题思路
weixin_43835305的博客
09-13 574
第一阶段模块四作业解题思路
阶段二模块三解题思路
weixin_43835305的博客
09-28 564
阶段二模块三java-web作业
java核心类库（七） IO流--文件的读写
weixin_43835305的博客
09-04 517
java中文件的读写操作可用类
Mysql数据库（三） MySQL多表&外键&数据库设计
weixin_43835305的博客
09-24 475
mysql基础，多表操作，外键约束，数据库设计
Mysql数据库（一） 数据库基础及sql语句
weixin_43835305的博客
09-24 437
mysql数据库基础，安装卸载及基础sql语句
前端基础（五） Vue框架
weixin_43835305的博客
09-26 430
前端Vue框架基础知识
前端开发精粹：JavaScript基础与实战
这部分内容提到了莫振杰著的《Web前端开发精品课》和《JavaScript基础教程》，该书注重JavaScript的核心知识和实战经验的分享，通过实例和清晰的解释帮助学习者理解并掌握前端开发技术。" 尽管标题提及的是"事件...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值