学习JS第三周

最新推荐文章于 2024-07-24 23:00:08 发布

长期顽固性肥胖

最新推荐文章于 2024-07-24 23:00:08 发布

阅读量42

点赞数

文章标签：前端 javascript

本文链接：https://blog.csdn.net/weixin_75004747/article/details/130656470

版权

23/5/8~5/14

1.简单类型和复杂类型

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

值类型：简单数据类型（基本数据类型：string、number、boolean、undefined、null返回的是一个空的对象），在存储时变量中存储的是值本身，因此叫做值类型。
对于null,若有变量准备存储为对象，暂时没想好放啥，这个时候就让它定义为null
引用类型：复杂数据类型，在存储时变量中存储的仅仅是地址（引用），因此叫做引用数据类型，通过new关键字创建的对象（系统对象、自定义对象），如object,array,date等。

1.1堆和栈

堆栈空间分配区别：

栈（操作系统）：由操作系统自动分配释放存放函数的参数值、局部变量的值等。其操作方式类似于数据结构中的栈；简单数据类型存放到栈里面。
堆（操作系统）：存储复杂类型（对象），一般由程序员分配释放，若程序员不释放，由垃圾回收机制回收。复杂数据类型存放到堆里面。

1.2简单类型的内存分配

简单数据类型：是存放在栈里面，里面直接开辟了一个空间存放的是值
复杂数据类型：首先在栈里面存放地址，十六进制表示，然后这个地址指向堆里面的数据

1.3简单类型传参

函数的形参也可以看作是一个变量，当我们把一个值类型变量作为参数传给函数的形参时，其实是把变量在栈空间里的值复制了一份给形参，那么在方法内部对形参做任何修改，都不会影响到外部变量。

1.4复杂类型传参

函数的形参也可以看做是一个变量，当我们把引用类型变量传给形参时，其实是变量在栈空间里保存的堆地址复制给了形参，形参和实参其实保存的是同一个堆地址，所以操作的是同一个对象。

2.API和Web API

API:是一些预先定义的函数，目的是提供应用程序与开放人员基于某软件或硬件得以访问一组例程的能力，而又无需访问源码，或理解内部工作机制的细节。
Web API：是浏览器提供的一套操作浏览器功能和页面元素的API（BOM和DOM）

DOM

1.DOM简介

1.1什么是DOM

文档对象模型（DOM），是W3C组织推荐的处理可扩展标记语言（HTML或者XML）的标准编程接口。通过DOM接口可以改变网页的内容、结构和样式。

1.2DOM树

DOM树

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

2.获取元素

2.1如何获取页面元素

根据ID获取
根据标签名获取
通过HTML5新增的方法获取
特殊元素获取

2.2根据ID获取

<body>
 <div id="time">2019-9-9</div>
 <script>
  var timer = document.getElementById('time');
  console.log(timer);
  console.dir(timer);
 </script>
</body>

使用getElementById()方法可以获取**带有ID（特定）**的元素对象；
因为文档页面从上往下加载，所以先得有标签，故将script写到标签下面；
返回一个匹配到ID的DOM Element对象，若在当前文档下没有找到，则返回null；
参数：id是大小写敏感的字符串（‘ ’）
console.dir 用于打印返回的元素对象，更好的查看里面的属性和方法

2.3根据标签名获取

<body>
<ul>
<li>123</li>
<li>123</li>
</ul>
<script>
var lis = document.getElementsByTagName('li');
console.log(lis);
console.log(lis[0]);//某一项元素对象
for(var i = 0;i<lis.length;i++){
console.log(lis[i]);
}//遍历
var ul = document.getElementsByTagName('ul');
console.log(ul[0].getElementsByTagName('li'));//ul[0]指明了父元素中的具体对象
</script>
</body>

使用getElementsByTagName()方法可以返回带有指定标签名的对象的集合。
返回的是获取过来元素对象的集合，以伪数组的形式存储的
若页面中只有一个元素对象，返回的依旧是伪数组形式
若页面中没有元素对象，返回的是空的伪数组的形式
若想依次打印里面的元素对象可以采用遍历的方式
若想获取某个元素（父元素：必须是单个对象，获取的时候不包括父元素本身）内部所有指定标签名的子元素，（父元素）element.getElementsByTagName(‘标签名’)；

2.4通过HTML5新增的方法获取

1.根据类名返回元素对象集合（document.getElementsByClassName(‘类名’)）

<body>
<div class = "box">123</div>
<div class = "box">456</div>
<script>
var boxs = document.getElementsByClassName('box');
console.log(boxs);
</script>
</body>

2.根据指定选择器返回第一个元素对象（document.querySelsctor(‘选择器’)）

<body>
<div class = "box">123</div>
<div class = "box">456</div>
<script>
var firstBox = document.querySelector('.box');//.box是类选择器 #XX是id选择器
console.log(firstBox);
</script>
</body>

3.根据指定选择器返回所有元素对象（document.querySelectorAll(‘选择器’)）

<body>
<div class = "box">123</div>
<div class = "box">456</div>
<script>
var allBox = document.querySelectorAll('.box');//.box是类选择器 #XX是id选择器
console.log(allBox);
</script>
</body>

2.5特殊元素(body、html)获取

获取body 元素
document.body
获取HTML 元素
document.documentElement

3.事件基础

3.1事件概述

JS使我们有能力创建动态页面，而事件是可以被JS侦测到的行为。即为触发—响应机制。
事件由三部分（三要素）组成：事件源、事件类型、事件处理程序

事件源：事件被触发的对象
事件类型：如何触发，什么事件，比如鼠标点击（onclick）还是鼠标经过，还是键盘按下
事件处理程序：通过一个函数赋值的方式完成

<body>
 <button id = "btn">唐伯虎</button>
 <script>
  var btn = document.getElementById('btn');
  btn.onclick = function(){
  alert('点秋香')；
   }
 </script>
</body>

3.2执行事件的步骤

获取事件源
注册事件（绑定事件）
添加事件处理程序（采取函数赋值形式）

3.3常见的鼠标事件

鼠标点击事件

4.操作元素

JS的DOM操作可以改变网页内容、结构和样式，我们可以利用DOM操作来改变元素里面的内容、属性等。

4.1改变元素内容

从起始位置到终止位置的内容，但它去除html标签，同时空格和换行也会去掉
element.innerText
起始位置到终止位置的全部内容，包括html标签，同时保留空格和换行
element.innerHTML
innerText和innerHTML的区别
- innerText不识别html标签；而innerHTML识别html标签
- 这两个属性是可读写的，可以获取元素里面的内容，但innerText去除空格和换行，而innerHTML保留空格和换行

4.2操作元素—修改元素内容

当点击按钮，div里面的文字会发生变化

<body>
<button>显示当前系统时间</button>
<div>某个时间</div>
 <script>
  var btn = document.querySelector('button');
  var div = document.querySelector('div');
  btn.onclick = function(){
  div.innerText = 'dangqianshijian'
   }
 </script>
</body>

直接显示当前时间(元素不添加事件，直接出现结果)

<body>
<div>某个时间</div>
 <script>
 var div = document.querySelector('div');
 div.innerText = getDate();
 </script>
</body>

4.3操作元素—修改元素属性

利用DOM可以操作如下元素的属性：src、href、id、alt、title
两个按钮各对应一张图片，点击下去切换两张图片

<body>
 <button id="ldh">刘德华</button>
 <button id="zxy">张学友</button>
 <img src="images/ldh.jpg" alt="" title="刘德华">
 <script>
   var ldh = document.getElementById('ldh');
   var zxy = document.getElementById('zxy');
   var img = document.querySelector('img');
   zxy.onclick = function(){
   img.src = 'images/zxy.jpg';
   img.title = '张学友';
   }
   ldh.onclick = function(){
   img.src = 'images/ldh.jpg';
   img.title = '刘德华';
   }
 </script>
</body>

4.4操作元素—修改表单属性

利用DOM可以操作如下表单元素的属性：type、value、checked、selected、disabled
点击按钮后值发生变化

<body>
<button>按钮</button>
<input type="text" value="输入内容">
 <script>
 var btn = document.querySelector('button');
 var input = document.querySelector('input');
 btn.onclick = function(){
 input.value = '被点击了'；//表单里的文字内容是通过value来修改的
 btn.disabled = true;//按钮被点击一次后被禁用
 //（也可以写作）this.disabled = true;  其中this指向的是事件函数的调用者
 }
 </script>
</body>

4.5操作元素—修改样式属性

行内样式操作
element.style

<head>
 <style>
 div{
 background-color:pink;
  }
 </style>
</head>
<body>
 <div></div>
 <script>
 var div = document.querySelector('div');
 div.onclick = function(){
 this.style.backgroundColor = 'purple';//注意
 }
 </script>
</body>

类名样式操作
element.className

<head>
 <style>
 div{
 width:100px;
 height:100px;
 background-color:pink;
  }
  .change {
  background-color:purple;
  font-size:25px;
  }
 </style>
</head>
<body>
 <div>文本</div>
 <script>
  var test = document.querySelector('div');
  test.onclick = function(){
  this.className = 'change';
   }
 </script>
</body>

若想保留原先的类名，用多类名选择器
this.className = 'first change'

4.6排他思想

如果有同一组元素，我们需要某一个元素实现某种样式，需要用到循环的排他思想算法：

所有元素全部清除样式
给当前元素设置样式

<body>
 <button>按钮1</button>
 <button>按钮2</button>
 <button>按钮3</button>
 <button>按钮4</button>
 <button>按钮5</button>
 <script>
  var btns document.getElementsByTagName('button');//btns得到的是伪数组，里面的每个元素btns[i]
  for (var i = 0;i < btns.length;i++){
  btns[i].onclick = function(){
   for (var i = 0; i < btns.length; i++){
   btns[i].style.backgroundColor = '';
    }
  this.style.backgroundColor = 'pink';
  }
 }
 </script>
</body>

若少去第二个for循环，结果为按钮只要被点击就是有颜色的

4.7自定义属性操作

1.获取属性值

element.属性获取属性值
element.getAttribute(‘属性’)；
区别：
element.属性获取内置属性值（元素本身自带的属性）
element.getAttribute(‘属性’)；主要获得（程序员）自定义的属性（标准）
2.设置属性值
element.属性 = ‘值’ 设置内置属性值
elemen.setAttribute(‘属性’,‘值’);
区别：
element.属性设置内置属性值
element.setAttribute(‘属性’)；主要设置自定义的属性（标准）
3.移除属性
element.removeAttribute(‘属性’)；

<body>
  <div id="demo" index='1'></div>
  <script>
    var div = document.querySelector('div');
    console.log(div.id);
    console.log(div.getAttribute('id'));
    console.log(div.getAttribute('index'));//自定义属性的获取
    div.id = 'test';
    div.className = 'navs';
    div.setAttribute('index',2);
    div.setAttribute('class','footer');//这里使用的是class而不是className
    div.removeAttribute('index');//此处移除的是index
  </script>
</body>

4.8H5自定义属性

自定义属性目的：为了保存并使用数据。有些数据可以保存到页面中而不用保存到数据库中。
自定义属性获取是通过getAttribute(‘属性’)获取
1.设置H5自定义属性
- H5规定自定义属性data-开头作为属性名并且赋值
- 通过JS设置：element.setAttribute(‘data-index’,2)
  2.获取自定义属性
- 兼容性获取 element.getAttribute(‘data-index’);
- H5新增：element.dataset.index
  element.dataset[‘index’]

长期顽固性肥胖

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
学习JS第三周

文档对象模型（DOM），是W3C组织推荐的处理可扩展标记语言（HTML或者XML）的标准编程接口。通过DOM接口可以改变网页的内容、结构和样式。JS使我们有能力创建动态页面，而事件是可以被JS侦测到的行为。即为触发—响应机制。事件由三部分（三要素）组成：事件源、事件类型、事件处理程序事件源：事件被触发的对象事件类型：如何触发，什么事件，比如鼠标点击（onclick）还是鼠标经过，还是键盘按下事件处理程序：通过一个函数赋值的方式完成。
复制链接

扫一扫