JavaScript
1、JavaScript概述与基础语法
(1)什么是 JavaScript
JavaScript 是一种运行于JavaScript解释器/引擎中的解释型脚本语言.
运行环境:
1、独立安装的JS解释器(NodeJS)
2、嵌入在[浏览器]内核中JS解释器
浏览器内核的作用:负责页面内容的渲染。内核主要由两部分组成
- 内容排版引擎解析HTML和CSS
- 脚本解释引擎解析Javascript
不同的浏览器的内核是不同的
(2)JS组成
1、核心(ECMAScript)
2、文档对象模型(DOM,Document Object Model)让JS有能力与网页进行对话
3、浏览器对象模型(BOM,Browser Object Model)让JS有能力与浏览器进行对话
(3)JS特点
- 开发工具简单,记事本即可
- 无需编译,直接由JS引擎负责执行
- 弱类型语言,由数据来决定 数据类型
- 面向对象
(4)JavaScript的使用
1、将JS代码嵌入在元素”事件”中
<div id="" onclick="JS代码">xxx</div>
2、将JS代码嵌入在<script>
标记中
<script></script>
允许出现网页的任意位置处
3、将JS代码写在外部脚本文件中(.js)
在页面中 引入 js文件<script src="js文件路径"></script>
注意:方法3中,该对标记中,是不允许出现任何内容的
(5)语法规范
使用 分号 来表示结束、大小写敏感、英文标点符号、由表达式、关键字、运算符 组成
2、基本使用
定义变量:
var
定义函数:
function
数据类型判断:
获取数据类型:typeof(变量名) 或者typeof 变量名
NaN:Not a Number
isNaN(数据) : 判断 数据是否为 非数字
数据类型转换:
toString()
parseInt()
parseFloat()
Number()
所有的数据类型 与 string 做 + 运算时,最后的结果都为 string
分支:
- if else
- switch case
循环:
- while
- do while
- while、do while 都是判断条件为真继续执行
- for
数组(类似python中的元组):注意,由于其特性,数组内容可以不一致,例如[1,q,”weq”]
- 创建:1、arr=[] 2、arr=new Array()
- 数组的 length属性:记录了数组中理论上的元素个数length属性的值永远是最大下标+1。且更改其内容,就会改变其大小,减小的话就会删除多余元素
- 三不:不限制数组的元素个数、不限制下标越界、不限制数组元素数据类型
关联数组(字典)
- *创建:arr=[];arr[“test”]=6; *
- 遍历:for(var key in hash)
数组API
- String(arr) :将arr中每个元素转为字符串,用逗号分隔
- 固定套路: 对数组拍照: 用于鉴别是否数组被修改过
- arr.join(“连接符”) :将arr中每个元素转为字符串,用自定义的连接符分隔,使用空串作为连接符则为无缝转成字符串
- 扩展: 判断数组是空数组: arr.join(“”)==””
- 将数组转化为页面元素的内容:
- concat() :拼接两个或更多的数组,并返回结果。不直接修改原数组,而返回新数组!
- slice(starti,endi) :返回现有数组的一个子数组范围是starti到endi,前闭后开
- 一直选取到结尾: 可省略第二个参数
- 如果选取的元素离结尾近: 可用倒数下标
- 复制数组: arr.slice(0,arr.length);可简写为:arr.slice();
- 删除splice(starti,n);删除arr中starti位置开始的n个元素,返回值被删除的元素组成的临时数组。直接修改原数组!返回值保存了被删除的元素组成的临时数组
- 插入splice(starti,0,值1,值2,…):starti位置,插入新值1,值2,…原starti位置的值及其之后的值被向后顺移
- 替换splice(starti,n,值1,值2,…):先删除arr中starti位置的n个值,再在starti位置插入新值
- 强调: 删除的元素个数和插入的新元素个数不必一致。
- reverse() :颠倒数组中元素的顺序
- arr.sort(): 默认将所有元素转为字符串再排列
- 问题: 只能排列字符串类型的元素
- 解决: 使用自定义比较器函数
- String(arr) :将arr中每个元素转为字符串,用逗号分隔
3、DOM
什么是DOM?
document object model DOM 是 W3C(万维网联盟)的标准, 是中立于平台和语言
的接口,它允许程序和脚本动态地访问和更新文档的内容、结 构和样式。 对网页进行增删改查的操作。
DOM标准:
- 核心DOM:可操作一切结构化文档的API,包括HTML和XML万能!繁琐!
- HTML DOM:专门操作HTML文档的简化版DOM API 仅对常用的复杂的API进行了简化 不是万能! 简单
对于开发人员来说,先用简单的,再用复杂的补充——以实现效果为目标
在 HTML DOM 中,所有事物都是节点。DOM 是被视为节点树的 HTML。
常用DOM方法
getElementById() | 返回带有指定 ID 的元素。 |
---|---|
getElementsByTagName() | 返回包含带有指定标签名称的所有元素的节点列表(集合/节点数组)。 |
getElementsByClassName() | 返回包含带有指定类名的所有元素的节点列表。 |
appendChild() | 把新的子节点添加到指定节点。 |
removeChild() | 删除子节点。 |
replaceChild() | 替换子节点。 |
insertBefore() | 在指定的子节点前面插入新的子节点。 |
createAttribute() | 创建属性节点。 |
createElement() | 创建元素节点。 |
createTextNode() | 创建文本节点。 |
getAttribute() | 返回指定的属性值。 |
setAttribute() | 把指定属性设置或修改为指定的值。 |
(1)DOM查找
var elem=document.getElementById(“id”);按id属性,精确查找一个元素对象
var elems=parent.getElementsByTagName(“tag”);按标签名找
- 可用在任意父元素,例如:
- var ul = document.getElementById(‘menuList’);
var list = ul.getElementsByTagName(‘li’);
- var ul = document.getElementById(‘menuList’);
- 不仅查直接子节点,而且查所有子代节点
- 返回一个动态集合,即使只找到一个元素,也返回集合,必须用[0],取出唯一元素。
- 可用在任意父元素,例如:
var list = document.getElementsByName(‘name’);通过name属性查找
var elems=parent.getElemnetsByClassName(“class”);查找父元素下指定class属性的元素
例如:
var div = document.getElementById(‘news’);
var list = div.getElementsByClassName(‘mainTitle’);
通过CSS选择器查找一个:var elem=parent.querySelector(“selector”)
- selector支持一切css中选择器
- 如果选择器匹配的有多个,只返回第一个
*通过CSS选择器查找多个:var elems=parent.querySelectorAll(“selector”) *
selector API 返回的是非动态集合:
(2)DOM修改
核心DOM: 4个操作
①读取属性值:
1.先获得属性(节点)对象,再获得节点对象的值:
在 HTML DOM 中,所有事物都是节点。DOM 是被视为节点树的 HTML。所以,方法一:通过属性名获取该属性节点的对象,通过该对象获取属性值。有些繁琐,很少使用。
- 获取节点对象(两种):
- var attrNode=elem.attributes[下标/属性名];
- var attrNode=elem.getAttributeNode(属性名)
- 通过节点对象获取属性值:attrNode.value——属性值
- 获取节点对象(两种):
2.直接获得属性值:var value=elem.getAttribute(“属性名”);
②修改属性值:elem.setAttribute(“属性名”, value);
③判断是否包含指定属性:var bool=elem.hasAttribute(“属性名”)
④移除属性:elem.removeAttribute(“属性名”)
(3)DOM添加
步骤:创建空元素(标签)、 设置关键属性、将元素添加到DOM树
- 创建空元素:var elem=document.createElement(“元素名”)
- 设置关键属性或样式
- 直接通过elem.属性名设置属性
- 直接通过elem.style.样式名设置样式;若样式过多可以通过elem.style.cssText=“样式内容”设置
- 直接通过elem.属性名设置属性
- 将元素添加到DOM树
- parentNode.appendChild(childNode);可用于将为一个父元素追加最后一个子节点
- parentNode.insertBefore(newChild, existingChild);
尽量少的操作DOM树,因为每次修改DOM树,都导致重新layout
1.如果同时创建父元素和子元素时,建议在内存中先将子元素添加到父元素,再将父元素一次性挂到页面
2.如果只添加多个平级子元素时, 就要将所有子元素,临时添加到文档片段中。再将文档片段整体添加到页面
文档片段: 内存中,临时保存多个平级子元素的 虚拟父元素用法和普通父元素完全一样
4、BOM
(1)简介
Browser Object Model专门操作浏览器窗口的API其既没有标准的实现,也没有严格的定义, 所以浏览器厂商可以自由地实现BOM——没有标准, 有兼容性问题使用要注意
浏览器对象模型:
window: 代表整个窗口
history: 封装当前窗口打开后,成功访问过的历史url记录
navigator: 封装浏览器配置信息
document: 封装当前正在加载的网页内容
location: 封装了当前窗口正在打开的url地址
screen: 封装了屏幕的信息
event: 定义了网页中的事件机制
例如:获取窗口大小
完整窗口大小: window.outerWidth/outerHeight
文档显示区大小: window.innerWidth/innerHeight
(2)定时器
什么是定时器?让程序按指定时间间隔自动执行任务。实现网页动态效果、计时功能等
周期性定时器:让程序按指定时间间隔反复自动执行一项任务
语法:var timer=setInterval(exp,time);exp:执行语句time:时间周期,单位为毫秒
停止定时器:clearInterval(timer); timer是定义的定时器
一次性定时器:让程序延迟一段时间执行
- 语法:setTimeout(exp,time);exp:执行语句time:时间周期,单位为毫秒
Jquery
1、概述
什么是 JQuery? 答:快速、简洁的第三方js库
JQuery的核心理念是write less,do more(写更少的代码,做更多的事情)
JQuery是DOM操作的终极简化,还屏蔽了浏览器的兼容性问题。
- 核心DOM: 万能,但繁琐
- HTML DOM: 简单,但不是万能
- Jquery: 对DOM操作的终极简化
如何使用JQuery?答:先引入JQuery.js , 再编写自定义脚本
1、将JQuery.js 下载到服务器本地,在script中使用服务器路径
2、使用CDN网络上共享的JQuery.js 生产环境中用的最多
工厂函数:在JQuery中,无论使用哪种类型的选择符,都要从一个美元符号和一对圆括号开始:$()。所有能在样式表中使用的选择符,都能放到这个圆括号中的引号内。
2、JQuery增删改查
(1)查找
$(“#myList”);就是document.getElementById(‘myList’);
括号内的内容可以是基本选择器、层级选择器,他们的表示方法和CSS一样。
表示兄弟关系时:
(2)修改
修改属性
- 获取 $(“…”).attr(“属性名”)
- 修改 $(“…”).attr(“属性名”,值)
修改内容
- 修改html内容
- html( ):(函数值为空)读取或(函数值为修改的内容)修改节点的HTML内容
- html( ):(函数值为空)读取或(函数值为修改的内容)修改节点的HTML内容
- 文本操作
- text( ):读取或修改节点的文本内容
- text( ):读取或修改节点的文本内容
- 值操作
- val( ):读取或修改节点的value属性值
- val( ):读取或修改节点的value属性值
修改样式
- 直接修改css属性
- 获取css样式(计算后的样式) $(“…”).css(“CSS属性名”)
- 修改css样式 $(“…”).css(“css属性名”,值)
- 通过修改class批量修改样式
- 判断是否包含指定class:$(“…”).hasClass(“类名”
- 添加class: $(“…”).addClass(“类名”)
- 移除class :$(“…”).removeClass(“类名”)
(3)添加
- 创建新元素:
var $new = $("html代码片段")
- 将新元素结尾添加到DOM树:
$(parent).append($newelem)
(4)删除
$(“…”).remove()
3、JQuery事件
(1)事件绑定
语法:$(“…”).bind(“事件类型”,function(e){….})
(2)事件对象
function(event)中的event这个对象中包含与事件相关的信息,也提供了可以影响事件在DOM中传递进程的一些方法。
事件对象记录事件发生时的鼠标位置、键盘按键状态和触发对象等信息
clientX/offsetX/pageX/screenX/x:事件发生的X坐标
clientY/offsetY/pageY/screenY/y:事件发生的Y坐标
keyCode : 键盘事件中按下的按键的值
响应式布局
响应式布局:检测设备信息,设备宽度不同, 布局不同.
这里介绍两种布局方法:CSS3 Media Query媒体查询、第三方开源框架 Bootstrap
1、CSS3媒体查询
(1)Viewport视口
视口:显示网页的区域
为了响应式布局,我们对视口规定:布局视口=设备视觉视口、不可缩放
实现视口规定:设置meta标签
1 | <meta name="viewport" content="width=device-width, user-scalable=no, |
sublime中meta:vp即可 扩展出该设定
(2)媒体查询
检查设备宽度,根据宽度设置CSS样式
设备屏幕 | 尺寸 |
---|---|
超小屏extra small | <768 |
小屏small | ≥768 |
中等medium | ≥992 |
大屏large | ≥1200 |
媒体查询设计:
- @media表示媒体查询,之后跟查询何种对象的尺寸,这里是screen 可以是打印机等其他。
- and连接满足的条件
- min-height 页面最小高度
- min-width 页面最小宽度
- max-height 页面最大高度
- max-width 页面最大宽度
- 根据CSS自上而下顺序解释特性,由于min-width 使用我们也需要将尺寸变化由小到大表示,这样做到覆盖。
2、Bootstrap
Bootstrap:来自 Twitter,Bootstrap4 ;开源、移动优先的前端框架 ;是基于 HTML、CSS、JavaScript、JQuery 的 ;写很少代码,实现多终端的页面适配。
两个版本:编译版本(不需要修改源码时使用)、源代码版本(既包括源代码又包括编译版本)
docs是说明和示例
(1)Bootstrap使用
- 方式一:下载下来引用
- 方式二:CDN方式,通过超链接使用网络上保存的资源。
区别只是在于路径设置。两者都是要按照CSS、Jquery、JS顺序引用
1 | <link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/ |
中文文档中有很多功能和相应源代码,复制下来就能使用了
(2)栅格布局
需要一个container包括栅格布局界面
container中设置row,在row中划分列,来组织一行的栅格大小
- 一行最多12列,放不开就会自动换行
- md可换,表示设备尺寸
- xs:extra small <768
- sm:small ≥768
- md:medium≥992
- lg:large≥1200
- 数字代表合并的栅格数,最小的1代表设备尺寸/12
通过引入多个class就能够实现响应式布局了