javaScript的学习记录：
一：HTML 文件开头格式需要编写 ；（编写格式注意：标签对称，如：<html> 开头，需以 </html> 结尾）
、、、
<!DOCTYPE html>
<html>
<head>
// 必须写在 title 上面，网页编码格式
<meta charset="utf-8">
<title>网页名称</titme>
</head>
<body>
//编写 html（界面 内容
</body>
</html>
、、、
<body> 标签中可以写入 <script> 标签；<script> 标签中必须写 js 类型代码，比如变量命名，函数等一系列操纵
二：HTML 标签控件事件
、、、
onchange HTML 元素改变
onclick 用户点击 HTML 元素
onmouseover 用户在一个HTML元素上移动鼠标
onmouseout 用户从一个HTML元素上移开鼠标
onkeydown 用户按下键盘按键
onload 浏览器已完成页面的加载
、、、
三：变量
需要注重的地方：
1.变量可以先使用，后声明
、、、
x = 5; // 变量 x 设置为 5
var x; // 声明 x
、、、
严格模式(use strict) 下不允许使用未经声明的变量，否则会报错；
"use strict" 指令在 JavaScript 1.8.5 (ECMAScript5) 中新增。
它不是一条语句，但是是一个字面量表达式，在 JavaScript 旧版本中会被忽略。
"use strict" 的目的是指定代码在严格条件下执行。
支持严格模式的浏览器:
Internet Explorer 10 +、 Firefox 4+ Chrome 13+、 Safari 5.1+、 Opera 12+。
、、、
"use strict";
x = 3.14; // 报错 (x 未定义)
、、、
2.字符串可以是插入到引号中的任何字符。你可以使用单引号或双引号：
、、、
//实例
var carname = "Volvo XC60"; //双引号
var carname = 'Volvo XC60'; //单引号
、、、
可以使用索引位置来访问字符串中的每个字符：
、、、
//实例
var character = carname[7];
、、、
在字符串添加转义字符来使用引号：
、、、
//实例
var x = 'It\'s alright';
var y = "He is called \"Johnny\"";
、、、
、、、
\' 单引号 '
\" 双引号 "
\\ 反斜杠 \
\n 换行
\r 回车
\t tab(制表符)
\b 退格符
\f 换页符
、、、
字符串的方法
image.png
四：运算符
javaScript中的运算符与 OC 或 Swift 中的差不多，需记一点： for in 循环语句，在 IOS 中只能遍历数据；在 javaScript 中可以用来遍历对象的属性；
、、、
//实例
var person={fname:"Bill",lname:"Gates",age:56};
for (x in person) // x 为属性名
{
txt = txt + person[x];
}
、、、
五： JSON
image.png
六：点击事件
事件传递有两种方式：冒泡与捕获。
事件传递定义了元素事件触发的顺序。 如果你将 <p> 元素插入到 <div> 元素中，用户点击 <p> 元素, 哪个元素的 "click" 事件先被触发呢？
在 冒泡 中，内部元素的事件会先被触发，然后再触发外部元素，即： <p> 元素的点击事件先触发，然后会触发 <div> 元素的点击事件。
在 捕获 中，外部元素的事件会先被触发，然后才会触发内部元素的事件，即： <div> 元素的点击事件先触发 ，然后再触发 <p> 元素的点击事件。
若只点击父元素，则不会执行子元素中的点击事件
addEventListener() 方法可以指定 "useCapture" 参数来设置传递类型：
、、、
addEventListener(event, function, useCapture);
//默认值为 false, 即冒泡传递，当值为 true 时, 事件使用捕获传递。
// 实例
document.getElementById("myDiv").addEventListener("click", myFunction, true);
、、、
七：HTMLCollection 对象与 NodeList对象 的区别
HTMLCollection 是 HTML 元素的集合。
NodeList 是一个文档节点（即：某个时间点内）的集合。
NodeList 与 HTMLCollection 都与数组对象有点类似，可以使用索引 (0, 1, 2, 3, 4, ...) 来获取元素。
NodeList 与 HTMLCollection 都有 length 属性。
HTMLCollection 元素可以通过 name，id 或索引来获取。
NodeList 只能通过索引来获取。
、、、
var plist=document.getElementsByTagName("p") // HTMLCollection
var pcoll=document.querySelectorAll("p") //NodeList
// 以上 pcoll 返回的就是固定的值。
//而获取 plist 后, 若 html 页面有变化且刚好添加或移除了 p 标签, 此时plist也会跟着变。
、、、
NodeList 调用类似于 HTMLCollection
HTMLCollection 调用事例：https://www.runoob.com/try/try.php?filename=tryjs_dom_htmlcollection_loop
八：HTML 常用组件标签：
div，span，img，ul，li，canvas，p，table；
解释：
div：<div> 元素是块级元素，它可用于组合其他 HTML 元素的容器；类似微信小程序中的 <view> 组件
span：用来组合文档中的行内元素， 内联元素(inline)；通俗的讲就是自定义某段显示内容文字中，某几个文字的显示状态如颜色，大小；（如下图）
、、、
<p>我的母亲有 <span style="color:blue;font-weight:bold">蓝色</span> 的眼睛，我的父亲有 <span style="color:darkolivegreen;font-weight:bold">碧绿色</span> 的眼睛。</p>
、、、
image.png
img：<img></img> ,图像组件；内用 scr=“图片路径地址” 属性来展示图像；使用时最好加上 width、height 属性来指定宽高，避免加载时破坏页面的整体布局。
ul：<ul></ul>，无序列表组件；一个项目的列表，此列项目使用粗体圆点（典型的小黑圆圈）进行标记。<ul style="list-style-type:disc">中的style属性可以定义小圆点的类型（如空心圆圈，实心方块）。
ol：<ol></ol>，有序列表；，有序列表也是一列项目，列表项目使用数字进行标记。 有序列表始于 <ol> 标签。每个列表项始于 <li> 标签。列表项使用数字来标记。<ol type="A"> 中的type属性可以定义有序的类型（将数字换成 字母开始排序）；
无序，有序列表都可以根据代码缩进层级来实现嵌套效果
li：<li> 标签，列表行组件；
image.png
image.png
<dl>：<dl></dl>，自定义列表；每个自定义列表项以 <dt> 开始。每个自定义列表项的定义以 <dd> 开始； 列表项内部可以使用段落、换行符、图片、链接以及其他列表等等。
、、、
<h4>一个自定义列表：</h4>
<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>
、、、
image.png
canvas：<canvas></canvas>，区块标签，用 js 代码创建的组件，需要在 js 中设置该标签的宽高和坐标；
image.png
p：<p></p>，段落组件；类似IOS中的 UILabel 控件
table：<table></table>,表格标签；每个表格均有若干行（由 <tr> 标签定义），每行被分割为若干单元格（由 <td> 标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。
九：CSS 样式控制
CSS 代码需要写在 <style></style>标签中，<style>标签写要在 <head>标签中
image.png
Id 和 Class选择器；如果你要在HTML元素中设置CSS样式，你需要在元素中设置"id" 和 "class"选择器。
HTML元素以id属性来设置id选择器,CSS 中 id 选择器以 "#" 来定义。
class 选择器在HTML中以class属性表示, 在 CSS 中，类选择器以一个点"."号显示：
、、、
<p id="para1">Hello World!</p>
#para1{ text-align:center;}
<h1 class="center">这个标题不受影响</h1>
.center {text-align:center;}
、、、
网友评论