------------恢复内容开始------------
一、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("类名")
- 直接修改CSS样式
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绘图
------------恢复内容结束------------
标签：arr,DOM,元素,JS,var,属性 来源： https://www.cnblogs.com/cherish-0/p/16473897.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。