JavaScript-7

1.JavaScript的简单数据类型和复杂数据类型

　　简单类型又叫做基本数据类型或者值类型，复杂类型又叫做引用类型

值类型：简单数据类型/基本数据类型，在存储时变量中存储的是值本身，因此叫做值类型
- String、Number、Boolean、Undefined、Null
引用类型：复杂数据类型，在存储时变量中存储的仅仅是地址（引用），因此叫做引用数据类型。
- 通过new关键字创建的对象（系统对象、自定义对象），如Object、Array、Date等
堆和栈（JavaScript没有堆栈概念）
- 栈（操作系统）：由操作系统自动分配释放存放函数的参数值，局部变量的值等。其操作方式类似于数据结构中的栈。简单数据类型存放到栈里
- 堆（操作系统）：存储复杂类型（对象），一般由程序员分配释放，若程序员不释放，由垃圾回收机制回收。复杂数据类型存放到堆里
数据类型的内存分配

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title></title>
 6         <script>
 7             //简单数据类型 null
 8             //返回的是一个空的对象
 9             var timer = null;
10             console.log(typeof timer);//object
11             //如果有个我们以后打算存储为对象，暂时没想好放什么，这个时候就给null 
12             //1.简单数据类型 是存放在栈里面 里面直接开辟一个空间存放的是值
13             //2.复杂数据 首先在栈里面存放一个地址 用16进制表示 然后这个地址指向堆里面的数据
14         </script>
15     </head>
16     <body>
17     </body>
18 </html>

简单类型传参

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title></title>
 6             <script>
 7                 //简单数据类型传参
 8                 /* 
 9                     函数的形参也可看作是一个变量，当我们把一个值类型变量作为参数传递给函数的形参时，其实
10                     是把变量在栈空间里的值复制了一份给形参，那么在方法内部对形参做任何修改，都不会影响到外部变量
11                  */
12                 var a = 10;
13                 function dou(a){
14                     a++;
15                     console.log(a);
16                 }
17                 dou(a);
18                 console.log(a);
19             </script>
20     </head>
21     <body>
22     </body>
23 </html>

复杂数据类型传参

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title></title>
 6         <script>
 7             //复杂数据类型传参
 8             /* 
 9                 函数的形参也可以看作是一个变量，当我们把引用类型变量传给形参时，其实是把变量在栈空间里保存
10                 的堆地址复制给了形参，形参和实参实际上保存的是同一个堆地址，所以操作的是一个对象
11              */
12             function Person(name){
13                 this.name = name;
14             }
15             function fun(x){
16                 console.log(x.name);//刘德华
17                 x.name = "张学友";
18                 console.log(x.name);//张学友
19             }
20             var p = new Person('刘德华');
21             console.log(p.name);//刘德华
22             fun(p);
23             console.log(p.name);//张学友
24         </script>
25     </head>
26     <body>
27     </body>
28 </html>

2.Web API

Web API简介

- Web APIs是W3C组织的标准
- Web APIs我们主要学习BOM和DOM
- Web APIs是我们JS所独有的部分
- 我们主要学习页面交互功能
- 需要使用JS基础的课程内容做基础
API和Web API
- API是一些预先定义的函数，目的是提供应用程序与开发人员基于某软件或硬件得以访问一组例程的能力。简单来说：API是给程序员提供的一种工具，以便能更轻松的实现想要完成的功能
- Web API是浏览器提供的一套操作浏览器功能和页面元素的API（BOM和DOM）

3.DOM

DOM简介

文档对象模型(Document Object Model，简称DOM)，是W3C组织推荐的处理可扩展标记语言(HTML或者XML)的标准程序接口

DOM树

- 文档：一个页面就是一个文档，DOM中使用document表示
- 元素：页面中所有标签就是元素，DOM使用element表示
- 节点：网页中的所有内容都是节点（标签、属性、文本、注释等），DOM中使用node表示
- DOM把以上内容都看做是对象

4.获取元素

获取单个元素

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title>Document</title>
 6     </head>
 7     <body>
 8         <h5 id = "week">今天星期一</h5>
 9         <script>
10             //因为我们文档页面从上往下加载，所以得先有标签 所以我们script写到标签下面
11             /* 
12                 一、通过getElementById(字符串)获取元素
13                     1.参数id是大小写敏感的字符串
14                     2.返回的是一个元素对象
15                     3.console.dir()打印我们返回的元素对象，更好的查看里面的属性和方法
16             */
17             var timer = document.getElementById("week");
18             console.log(timer);
19             console.dir(timer);
20             
21         </script>
22     </body>
23 </html>

获取某一类元素

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title>Document</title>
 6     </head>
 7     <body>
 8         <ul>
 9             <li>梦入江南烟水路，行尽江南，</li>
10             <li>不与离人遇。</li>
11             <li>睡里消魂无说处，觉来惆怅消魂误。</li>
12             <li>欲尽此情书尺素，浮雁沉鱼，</li>
13             <li>终了无凭据。</li>
14             <li>却倚缓弦歌别绪，断肠移破秦筝柱。</li>
15         </ul>
16         <li>嘀哩嘀哩嘀哩哩嘀哩嘀哩嘀</li>
17         <script>
18             /* 
19                 二、通过document.getElementsByTagName()返回带有指定标签名的对象集合
20                 1.返回的是获取过来元素对象的集合 以伪数组的形式存储的
21                 2.我们可以通过遍历的方式一次打印出里面的元素
22                 3.如果页面中只有一个该标签，仍然以伪数组的形式返回
23                 4.如果页面中没有这个元素，返回的是一个空的伪数组
24              */
25             var lis = document.getElementsByTagName('li');
26             console.log(lis);
27             for(var i = 0 ; i < lis.length ; i++){
28                 console.log(lis[i]);
29             }
30             /* 
31                 三、获取某个元素(父元素)内部所有指定标签名的子元素
32                 注意：父元素必须是单个对象(必须指明是哪一个对象)，获取的时候不包含父元素自己
33                 
34              */
35             var far = document.getElementsByTagName("ul")[0];
36             var liss = far.getElementsByTagName("li");
37             console.log(liss);
38         </script>
39     </body>
40 </html>

H5新增的方法获取

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title></title>
 6     </head>
 7     <body>
 8         <div class = "box">盒子</div>
 9         <div class= "box">盒子</div>
10         <div id = "box3">
11             <ul>
12                 <li>春天在哪里呀</li>
13                 <li>春天在哪里</li>
14             </ul>
15         </div>
16         <script>
17             /* 
18                 1.getElementByClassName()根据类名获取某些元素的集合            
19              */
20             var boxes = document.getElementsByClassName("box");
21             console.log(boxes);
22             /* 
23                 2.document.querySelector('选择器') 根据指定选择器返回第一个元素对象
24                 注意：切记里面的选择器需要加符号 .box #box3
25             */
26             var firstBox = document.querySelector('.box');
27             var thirdBox = document.querySelector('#box3');
28             console.log(firstBox);
29             console.log(thirdBox);
30             /* 
31                 3.querySelectorAll()返回指定选择器的所有元素对象集合            
32              */
33             var allbox = document.querySelectorAll('.box');
34             console.log(allbox);
35         </script>
36     </body>
37 </html>

获取特殊元素（body、html）

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title></title>
 6     </head>
 7     <body>
 8         <script>
 9             //1.获取body元素
10             var body = document.body;
11             console.log(body);
12             //2.获取html元素
13             var html = document.documentElement;
14             console.log(html);
15         </script>
16     </body>
17 </html>

5.事件基础

事件三要素

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title></title>
 6     </head>
 7     <body>
 8         <button id = 'btn'>唐伯虎</button>
 9         <script>
10             /* 
11                 1.事件是由三部分组成 事件源 事件类型 事件处理程序 我们也称为事件三要素
12                     -事件源 事件被触发的对象 
13                     -事件类型 如何触发
14                     -事件处理程序 通过函数赋值的方式完成
15              */
16             var btn = document.getElementById('btn');
17             btn.onclick = function(){
18                 alert("点秋香");
19             }
20         </script>
21     </body>
22 </html>

执行事件的步骤

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title></title>
 6     </head>
 7     <body>
 8         <div>456</div>
 9         <script>
10             /* 
11                 执行事件步骤
12                     点击div控制台输出 我们选中了
13                     1.获取事件源
14                     2.绑定事件/注册事件
15                     3.添加事件处理程序
16              */
17             var div = document.querySelector("div");
18             div.onclick = function(){
19                 console.log("我被选中了");
20             }
21         </script>
22     </body>
23 </html>

6.操作元素

改变元素内容

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title></title>
 6     </head>
 7     <body>
 8         <button>显示当前系统时间</button>
 9         <div>某个时间</div>
10         <script>
11             //当我们点击按钮，div文字会发生变化
12             var btn = document.querySelector("button");
13             var div= document.querySelector("div");
14             btn.onclick = function(){
15                 div.innerText = new Date();
16             }
17             //同样元素内容可以不绑定点击事件，就改变元素内容
18             /* 
19                 innerHTML和innerText的区别
20                 1.innerText不识别html标签 既不显示标签 也去除形式 非标准 去除空格和换行
21                 2.innerHTML识别html标签 W3C推荐 保留空格和换行 显示标签和形式
22                 3.这两个属性是可读写的 可以获取元素里面的内容
23              */
24         </script>
25     </body>
26 </html>

修改元素属性

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <button>边伯贤</button>
        <button>边伯甜</button><br />
        <img src="img/3.jpg" alt="" width="600px" height="400px"title="边伯贤"/>
        <script>
            //修改元素属性 src
            //1.获取元素
            var btn_1 = document.querySelectorAll('button')[0];
            var btn_2 = document.querySelectorAll('button')[1];
            var img = document.querySelector('img');
            //2.注册事件
            btn_2.onclick = function(){
                img.src = "img/2.jpg";
                img.title = '边伯甜';
            }
            btn_1.onclick = function(){
                img.src = "img/3.jpg";
                img.title = '边伯贤';
            }
        </script>
    </body>
</html>

修改表单属性

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title></title>
 6     </head>
 7     <body>
 8         <button>按钮</button>
 9         <input type="text" value="输入内容" />
10         <script>
11         //1.获取元素
12         var btn = document.querySelector("button");
13         var input = document.querySelector('input');
14         //2.注册事件 处理程序
15         btn.onclick = function(){
16             //input.innerHTML = '点击了';这个是普通盒子比如div标签里面的内容
17             //表单里面的值/文字是通过value来修改的
18             input.value = '被点击了';
19             //如果想要某个表单被禁用 不能再点击disabled
20             // btn.disabled = true;
21             //this指向的事件函数的调用者btn
22             this.disabled = true;
23         }
24         </script>
25     </body>
26 </html>

修改样式属性

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title></title>
 6         <style>
 7             div{
 8                 width: 400px;
 9                 height: 300px;
10                 background-color: lightpink; 
11             }
12         </style>
13     </head>
14     <body>
15         <div></div>
16         <script>
17             var div = document.querySelector('div');
18             div.onclick = function(){
19                 //div.style里面的属性采取驼峰命名法
20                 //JS修改style样式操作，产生的是行内样式，css权重比较高
21                 this.style.backgroundColor = 'cornflowerblue';
22             }
23         </script>
24     </body>
25 </html>

利用className改变属性

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title></title>
 6         <style>
 7             div{
 8                 width: 100px;
 9                 height: 150px;
10                 background-color: #FFB6C1;
11             }
12             .change{
13                 margin-top: 100px;
14                 color: darkseagreen;
15                 background-color: aqua;
16             }
17         </style>
18     </head>
19     <body>
20         <div class="first">
21             文本
22         </div>
23         <script>
24             //1.使用element.style获得修改元素样式 如果样式比较少 或者功能简单的情况下使用
25             //2.element.className 类名样式操作
26             var div = document.querySelector('div');
27             //3.我们可以通过修改元素的className更改元素的样式 适合于样式较多或者功能复杂的情况
28             div.onclick = function(){
29                 //注意：className会直接修改元素的类名，会覆盖原先的类名
30                 //可以使用多重类名的形式，进行覆盖
31                 // div.className = 'first change';
32                 div.className = 'change';
33             }
34         </script>
35     </body>
36 </html>

posted @ 2022-03-08 19:08 Miraitowa56 阅读(45) 评论(0) 收藏举报

刷新页面返回顶部

Miraitowa56

JavaScript-7

公告