JS

2022/7/13 23:20:50

编程Tag： js 属性元素 Dom var arr

本文主要是介绍JS，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

------------恢复内容开始------------

一、JS概述

1.JS组成

核心（ECMAScript）
文档对象模型（DOM，Document Object Model）：让JS有能力与网页进行对话
浏览器对象模型（BOM，Browser Object Model）：让JS有能力与浏览器进行对话

2.特点

解释型语言
弱类型语言：由数据来决定数据类型4
面向对象

3.JS脚本嵌入页面

将JS代码嵌入在元素“事件”中

<div onclick="JS代码"></div>

<body>
    <botton onclick="console.log('Hello World');">//onclick：当单击元素时所做的操作
        打印消息
    </botton>
</body>

将JS代码嵌入在script标签中（允许出现在网页的任意位置）

<head>
    <script>
        JS代码
    </script>
</head>

<body>
    <script>
        JS代码
    </script>
</body>

将页面引入JS文件
```
<head>
    <script src="路径"></script>
</head>
```
引入了JS文件的script标签中不能出现代码

二、JS语法

1.变量声明

var 变量名=值

省略var关键字，则声明的是全局变量

2.数据类型

数字类型
字符串类型
- \u4e00：汉字的起始字符
- \u9fa5：汉字的结束字符
布尔类型
空：声明对象未赋值
未定义：声明变量未赋值、访问对象不存在的属性
typeof(变量)/typeof 变量:获取数据类型

强制转换为字符串:变量.toString()

parseInt(数据)：获取指定数据的整数部分

parseFloat(数据)：将指定数据转化为小数（数字+字符串，返回数字部分；字符串+数字，返回NaN）

Number(数据)：将一个字符串解析为number（包含非法字符返回NaN）

==：等于（不比较类型，只比较数值）
===：全等（除数值外，连同类型也会一起比较）

3.函数声明

function 函数名(参数列表声明){
    语句
    return 值;
}

声明提前：JS在正式执行前，会将所有var声明的变量和function声明函数，预读到所有作用域的顶部，但是，对变量的赋值，还保留在原来的位置

4.数组

创建（元素类型可以不同）

var arr=[];

var arr=new Array();

索引数组：长度可变、不限制下表越界、不限制数据类型

关联数组：可自定义下标名称

//遍历关联数组
for(var key in arr){
    
}

5.数组API

String(arr):将数组中每一个元素转化为字符串，用逗号分隔
arr.join("连接符"):将数组中每个元素转化为字符串，用自定义连接符分隔
arr1.concat(值1，值2，arr2，值3):拼接并返回一个新数组
arr.slice(starti,endi+1):返回一个子数组（含头不含尾）
arr.splice(starti,n):删除starti开始的n个元素，返回值为被删除元素组成的临时数组
arr.splice(starti,0,值1，值2):在starti插入值
arr.splice(starti,n,值1，值2):将starti位置的n个值替换（删除的元素个数和插入的新元素个数不必一致）
arr.reverse():颠倒数组
arr.sort():将元素从小到大排序（默认将元素转化为字符串再排列）

6.DOM查找

文档对象模型（对网页进行增删改查的操作）

6.1按ID属性

var elem = document.getElementById("id ")

精确查找一个元素对象(效率非常高)

getElementById只能用在document上

6.2按标签名

var elems = parent.getElementsByTagName("tag")

查找指定parent节点下的所有标签为tag的子节点，返回一个动态集合

6.3按name属性

var elems = document.getElementsByName("name属性值")

返回具有指定name属性值的所有子元素的集合

6.4按class属性

var elems = parent.getElementsByClassName("class")

查找父元素下指定的class属性元素

6.5CSS选择器查找

只找一个元素：
```
var elem = parent.querySelector("selector")
```
selector支持一切CSS选择器

如果选择器匹配的有多个，只返回第一个

找多个：

var elems = parent.querySelectorAll("selector")

返回非动态集合

7.DOM修改

核心DOM

可操作一切结构化文档的API，包括HTML和XML

万能，繁琐

HTML DOM

专门操作HTML文档的简化版DOM API，仅对常用的复杂API进行了简化

不是万能，简单

7.1读取属性值

先获得属性节点对象，再获得节点对象的值

var attrNode = elem.attributes[下标/属性名]
var attrNode = elem.getAttributeNode(属性名)

attrNode.value//获得属性值

直接获得属性值

var value = elem.geiAttribute("属性名")

7.2修改属性值

elem.setAttribute("属性名",value)

7.3判定是否包含指定属性

var bool = elem.hasAttribute("属性名")

7.4移除属性

elem.removeAttribute("属性名")

7.5修改样式

内嵌样式：elem.style.属性名="值"

属性名：去横线，变驼峰(background-color=>backgroundColor)

8.DOM添加

添加元素的步骤：创建空元素、设置关键属性、将元素添加到DOM树

8.1创建空元素

var elem = document.createElement("元素名")

8.2设置关键属性

关键属性

a.innerHTML="mooc";
a.href="#";

<a href="#">mooc<\a>

关键样式

a.stytle.属性名="值"
a.stytle.csssTest=""//可以写多个属性

8.3将元素添加到DOM树

parent.appendChild(child)//为父元素追加最后一个子节点

parent.insertBefore(newChild,existingChild)//在父元素的指定子节点前添加一个子节点

尽量减少操作DOM树（每次修改DOM树是，都导致重新layout）

同时创建父元素和子元素

在内存中先将子元素添加到父元素，在将父元素挂到页面中
只添加多个平级子元素

将所有子元素临时添加到文档片段中，在将文档片段添加到页面

文档片段：临时保存多个平级子元素的虚父元素，用法和普通父元素完全一样
```
var frag = document.creatDocumentFragment();//创建片段
frag.appendChild(child);//将子元素临时追加到frag中
parent.appendChild(frag);//将frag追加到页面
```
append之后，frag自动释放，不会占用元素

9.BOM

浏览器对象模型：没有标准，有兼容性问题

window	代表整个窗口
history	封装当前窗口打开后，成功访问过的历史url记录
navigator	封装浏览器配置信息
document	封装当前正在加载的网页内容
location	封装了当前窗口正在打开的url地址
screen	封装了屏幕的信息
event	定义了网页的事件机制

获取当前窗口大小

完整窗口大小：window.outerWidth/outerHeight
文档显示区大小：window.innerWidth/innerHeight

定时器

让程序按照指定时间间隔自动执行任务（网页动态效果、计时功能等）

周期性定时器

setInterval(exp,time)
//exp：执行语句
//time：时间周期，毫秒为单位

setInterval(function(){
    console.log("Hello World");
},1000)

停止定时器

var timer = setInterval(exp,time);//给定时器取名
clearInterval(timer);//停止定时器

一次性定时器

setTimeout(exp,time)
//exp：执行语句
//time：间隔时间

三、JQuery

1.JQuery概述

快速简洁的第三方js库

DOM操作的终极简化
屏蔽了浏览器的兼容性问题

使用JQuery：先引入JQuery.js，在编写自定义脚本

工厂函数$()

在JQuery中，无论使用那种类型的选择符，都要从一个美元符号$和一对圆括号开始：$()
所有能在样式表中使用的选择符，都能放到这个圆括号中的引号内

//DOM
document.getElementById("id");
//JQuery
$("#id");

2.JQuery增删改查

2.1查找

基本选择器
层级选择器
兄弟关系

$().next/prev()：紧邻的后一个或前一个元素

$().nextAll/precAll()：之后或之前的所有元素

$().sibings()：除自己之外的所有兄弟

2.2修改

属性
- 获取 $().attr("属性名")
- 修改 $().attr("属性名"，值)
内容
- html操作
  - 获取 $().html()
  - 设置 $().html("html代码")
- 文本操作
  - 获取 $().text()
  - 设置 $().text("文本")
- 值操作
  - 获取 $().val()
  - 设置 $().val(值)
样式
- 直接修改CSS样式
  - 获取 $().css("CSS属性名")
  - 修改 $().css("CSS属性名",值)
- 通过修改class批量修改样式
  - 判断是否包含指定class $().hasClass("类名")
  - 添加class $().addClass("类名")
  - 移除class $().removeClass("类名")

2.3添加

创建新元素
```
var $new = $("html代码片段")
```
将新元素结尾添加到DOM树
```
$(parent).append($new)
```

2.4删除

$().remove()

//获取第二个<li>元素节点后，将它删除
$("ul li:eq(1)").remove();

//把<li>元素中title属性不等于“菠萝”的<li>元素删除
$("ul li").remove("li[title!="菠萝"]");

3.JQuery事件

事件绑定

$().bind("事件类型",function(e){})
$().事件类型（function(e){}）//简写

事件对象

e:这个对象包含了与事件相关的信息，也提供了可以影响事件在DOM中传递进程的一些方法

事件对象记录事件发生时的鼠标位置、键盘按键状态和触发水箱等信息
```
clientX/offsetX/pageX/screenX/x//事件发生的X坐标
clientY/offsetY/pageY/screenY/y//事件发生的Y坐标
keyCode//键盘事件中按下的按键的值
```

四、响应式布局

在不同的显示设备上显示不同的布局方式

布局方式
- 固定宽度布局：主流宽度有960px、980px、1190px、1210px等
- 流式布局：百分比设置相对宽度
- 响应式布局：检测设备信息，设备宽度不同，布局不同
- 几种方式混合使用
响应式布局
- Media Query媒体查询
- 第三方开源框架Bootstrap

1.媒体查询

视口：显示网页的区域

视口规定：布局视口=设备视觉视口，不可缩放

<meta name="viewport" content="width=device-width, initial-scale=1.0">

设备宽度

设备屏幕	尺寸px
超小屏extra small	<768
小屏small	≥768
中等medium	≥992
大屏large	≥1200

<stytle>
    body{
    	background-color:black;
    }
    @media screen and (min-width:768px){<!-- 媒体查询 判断屏幕的尺寸 屏幕满足的条件 -->
    	body{
    		background-color:red;
    	}
    }
</stytle>

属性	含义
min-height	页面最小高度
min-width	页面最小宽度
max-height	页面最大高度
max-width	页面最小宽度

2.Bootstrap

移动优先的前端框架

栅格系统（类似于表格，将12列中一些列进行合并单元格）

<div class="row">
    <div class="col-md-8"></div>//超小屏xs、小屏sm、中屏md、大屏lg
    <div class="col-md-4"></div>
</div>

五、HTML5

1.新结构

header、nav、aside、content、footor

2.音频

支持.mp3、.wav、.ogg

<audio src="音频路径" controls="controls">
    文字//浏览器不支持时显示
</audio>

3.视频

支持.mp4、.webm、.ogg

<video>
    <source src="路径" type="类型"/>
</video>

4.绘图

定义画布
```
<canvas id="myCanvas"></canvas>
```
设置画布样式
JS准备绘图上下文环境
JS绘图
------------恢复内容结束------------

这篇关于JS的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！

JS