1. 云图网首页
  2. 技术专区
  3. 编程笔记

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 定义了网页的事件机制

获取当前窗口大小

  1. 完整窗口大小：window.outerWidth/outerHeight
  2. 文档显示区大小：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修改

  1. 属性

    • 获取 $().attr(“属性名”)
    • 修改 $().attr(“属性名”，值)

  2. 内容

    • html操作

      • 获取 $().html()
      • 设置 $().html(“html代码”)

    • 文本操作

      • 获取 $().text()
      • 设置 $().text(“文本”)

    • 值操作

      • 获取 $().val()
      • 设置 $().val(值)

  3. 样式

    • 直接修改CSS样式
      • 获取 $().css(“CSS属性名”)
      • 修改 $().css(“CSS属性名”,值)
    • 通过修改class批量修改样式
      • 判断是否包含指定class $().hasClass(“类名”)
      • 添加class $().addClass(“类名”)
      • 移除class $().removeClass(“类名”)

2.3添加

  1. 创建新元素

    var $new = $("html代码片段")

  2. 将新元素结尾添加到DOM树

    $(parent).append($new)

2.4删除

$().remove()

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

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

3.JQuery事件

  1. 事件绑定

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

  2. 事件对象

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

    事件对象记录事件发生时的鼠标位置、键盘按键状态和触发水箱等信息

    clientX/offsetX/pageX/screenX/x//事件发生的X坐标
clientY/offsetY/pageY/screenY/y//事件发生的Y坐标
keyCode//键盘事件中按下的按键的值

四、响应式布局

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

  1. 布局方式
    • 固定宽度布局：主流宽度有960px、980px、1190px、1210px等
    • 流式布局：百分比设置相对宽度
    • 响应式布局：检测设备信息，设备宽度不同，布局不同
    • 几种方式混合使用
  2. 响应式布局
    • 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.绘图

  1. 定义画布

    <canvas id="myCanvas"></canvas>

  2. 设置画布样式

  3. JS准备绘图上下文环境

  4. JS绘图
    ————恢复内容结束————

原创文章，作者：wdmbts，如若转载，请注明出处：https://blog.ytso.com/274063.html

赞 (0)
0
上一篇 2022年7月13日
下一篇 2022年7月13日

相关推荐

发表回复

登录后才能评论