JavaScript

JavaScript

1.基本语法

<html>
    <head>
        <script type="javascript">
            alert("hello，script！！");//输出警告
        </script>
    </head>
    <body>        
    </body>
</html>

直接写入 HTML 输出流：document.write("<h1>这是一个标题</h1>");

处理 HTML 内容：

x=document.getElementById("demo"); //查找元素

x.innerHTML="Hello JavaScript"; //改变内容

x.style.color="#ff0000"; //改变样式

输出：

  • 使用 window.alert() 弹出警告框。

  • 使用 document.write() 方法将内容写到 HTML 文档中。

    如果在文档已完成加载后执行 document.write，整个 HTML 页面将被覆盖。

  • 使用 innerHTML 写入到 HTML 元素。

  • 使用 console.log() 写入到浏览器的控制台。

 

 

 

1.1 变量

javascript是一个弱类型语言,所有的数据类型都是用var表示的。

弱类型：定义变量不指定数据类型，变量可以赋值任意的数据类型，通过变量的值来确定变量的数据类型。

javascript中的原始数据类型

  • number：小数、整数、NaN（不是数字）

  • string：字符串类型

  • boolean：布尔类型

  • null：一个为对象的空的占位符

  • undefind：变量声明，未赋值

  • 引用类型：Object，Date，Array

typeof 操作符来检测变量的数据类型

数组是一种特殊的对象类型， 返回 object

 

  • null是一个只有一个值的特殊类型。表示一个空对象引用；设置为 null 来清空对象:返回是object

  • undefined 是一个没有设置值的变量；设置值为 undefined 来清空，类型为 undefined.

  • null 和 undefined 的值相等，但类型不等：

 

类型转换：

Number() 转换为数字， String() 转换为字符串， Boolean() 转换为布尔值

 

1.2 运算符

算数运算符

  • +、-、*、\、%

  • ++（--）：++在前，先自加(自减)，在运算

  • ++（--）：++在后，先运算，在自加(自减)

赋值运算符

  • +、+=、-=...

比较运算符

== 、!=、===、>、<、>=、<=

逻辑运算符

&&、||、|

三元运算符

boolean的表达式?值1:值2;

1.3 分支循环

if..else

switch 变量可以是任意的原始数据类型

while

do...while

for

1.4 数组 函数

//定义数组,js中的数组长度可变，不需要设置数组长度
var array = new Array();
// 给元素赋值
array[0] = 3;
​
//初始化数组
var array2 = [0, "中午", 12.5, true];
// 给元素赋值
array[2] = 3;
​
// 遍历数组
for(var i=0;i<array.length;i++){
    document.write(array[i]);
}
for(var o in arr1){
    document.write(array[o]);
}
​
// 语法：
function 方法名([参数名,参数名2]){
    [return 值;]
}
/*JavaScript 变量生命周期在它声明时初始化。
在函数外声明的变量是全局变量，网页上的所有脚本和函数都能访问它
全局变量在页面关闭后销毁。
函数内部声明的变量（使用 var）是局部变量，所以只能在函数内部访问它
局部变量在函数执行完毕后销毁。
​
*/

1.5 对象

JavaScript 对象是拥有属性和方法的数据。

对象也是一个变量，但对象可以包含多个值（多个变量），每个值以 name:value 对呈现。

var car = {name:"Fiat", model:500, color:"white"};

// Math：数学运算类
var number = Math.random(); // 生成0-1之间的小数
​
// Math.round();  //四舍五入。
number = Math.round(23.78);
​
// 获取系统时间
var date = new Date();
var year = date.getFullYear();
var month = date.getMonth() + 1;
var day = date.getDate();
​
// js:没有类,有对象
var student = new Object(); // 实例化对象
​
// 定义构造函数
function Student(name, age, sex) {
    // 给属性赋值
    this.name = name;
    this.age = age;
    this.sex = sex;
    // 匿名函数
    this.getAge = function() {
    return this.age;
    }
}
​
// 通过构造函数来实例化对象 
var stu = new Student("小红", 22, "女");

对象是可变的，它们是通过引用来传递的

 

1.6 事件

js中的事件：当某个标签元素触发一个特定的事情，完成一个业务处理 事件绑定的3要素：1.事件的载体（元素） 2.事件的类型 3.事件触发之后执行的函数

事件描述
onchange HTML 元素改变
onclick 用户点击 HTML 元素
onmouseover 用户在一个HTML元素上移动鼠标
onmouseout 用户从一个HTML元素上移开鼠标
onmousedown 点击鼠标按钮时
onmouseup 当释放鼠标按钮时
onkeydown 用户按下键盘按键
onload 浏览器已完成页面的加载

 

1.7 正则

正则表达式是由一个字符序列形成的搜索模式

可用于所有文本搜索和文本替换的操作

/正则表达式主体/修饰符(可选)

在 JavaScript 中，正则表达式通常用于两个字符串方法 : search() 和 replace()。

  • search() 方法 用于检索字符串中指定的子字符串，或检索与正则表达式相匹配的子字符串，并返回子串的起始位置。

  • replace() 方法 用于在字符串中用一些字符替换另一些字符，或替换一个与正则表达式匹配的子串。

修饰符描述
i 执行对大小写不敏感的匹配。
g 执行全局匹配（查找所有匹配而非在找到第一个匹配后停止）。
m 执行多行匹配。
表达式描述
[abc] 查找方括号之间的任何字符。
[0-9] 查找任何从 0 至 9 的数字。
(x|y) 查找任何以 | 分隔的选项。
元字符描述
\d 查找数字。
\s 查找空白字符。
\b 匹配单词边界。
\uxxxx 查找以十六进制数 xxxx 规定的 Unicode 字符。
量词描述
n+ 匹配任何包含至少一个 n 的字符串。
n* 匹配任何包含零个或多个 n 的字符串。
n? 匹配任何包含零个或一个 n 的字符串。

方法

  • test() 方法:用于检测一个字符串是否匹配某个模式，如果字符串中含有匹配的文本，则返回 true，否则返回 false。

  • exec() 方法用于检索字符串中的正则表达式的匹配。该函数返回一个数组，其中存放匹配的结果。如果未找到匹配，则返回值为 null。

1.8 JSON

轻量级数据交换格式

转化格式：

  • 对象 {}

  • 数组 []

  • 所有键值对 key:value

对象转化为JSON字符串：JSON.stringify(对象名);

JSON转化为对象： var obj = JSON.parse('{k1:v1,k2:v2}');

2.BOM

浏览器对象模型 (BOM) 使 JavaScript 有能力与浏览器"对话"。

widow 浏览器窗口

navigator 浏览器信息

screen 屏幕

location 当前页面的URL信息

document 代表当前页面、HTML、DOM文档树

history 浏览器历史记录 back() forward()

 

3.DOM

通过 HTML DOM，可访问 JavaScript HTML 文档的所有元素。

网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）

 

查找HTML元素：

1.通过 id 找到 HTML 元素 var x=document.getElementById("intro");

2.通过标签名找到 HTML 元素

  • var x=document.getElementById("main");查找 id="main" 的元素

  • var y=x.getElementsByTagName("p");查找 id="main" 元素中的所有 <p> 元素

3.通过类名找到 HTML 元素var x=document.getElementsByClassName("intro");

 

3.1 改变HTML

  • 改变HTML输出流

    • document.write() 可用于直接向 HTML 输出流写内容；

    • 不要在文档(DOM)加载完成之后使用 document.write()。这会覆盖该文档

  • 改变HTML内容

    • document.getElementById(id).innerHTML=新的 HTML

  • 改变HTML属性

    • document.getElementById(id).attribute=新属性值

 

3.2 改变CSS

  • 改变 HTML 元素的样式 document.getElementById(id).style.property=新样式

  • 触发事件

 

3.3 事件监听

element.addEventListener(事件的类型, 触发后调用的函数, 布尔值用于描述事件是冒泡还是捕获);

允许向同一个元素添加多个事件，且不会覆盖已存在的事件：

允许你在 HTML DOM 对象添加事件监听， HTML DOM 对象如： HTML 元素, HTML 文档, window 对象。或者其他支持的事件对象如: xmlHttpRequest 对象。

 

事件传递有两种方式：冒泡与捕获。

  • 在 冒泡 中，内部元素的事件会先被触发，然后再触发外部元素

  • 在 捕获 中，外部元素的事件会先被触发，然后才会触发内部元素的事件

 

removeEventListener() 方法移除由 addEventListener() 方法添加的事件句柄

 

3.4 集合 节点

HTMLCollection 对象类似包含 HTML 元素的一个数组，getElementsByTagName() 方法返回 HTMLCollection对象。

NodeList 对象是一个从文档中获取的节点列表 (集合)，所有浏览器的 childNodes 属性返回的是 NodeList 对象；大部分浏览器的 querySelectorAll() 返回 NodeList 对象

比较

  • HTMLCollection是 HTML 元素的集合。

  • NodeList 是一个文档节点的集合。

  • NodeList 与 HTMLCollection 有很多类似的地方。

  • NodeList 与 HTMLCollection 都与数组对象有点类似，可以使用索引 (0, 1, 2, 3, 4, ...) 来获取元素。

  • NodeList 与 HTMLCollection 都有 length 属性。

  • HTMLCollection 元素可以通过 name，id 或索引来获取。

  • NodeList 只能通过索引来获取。

  • 只有 NodeList 对象有包含属性节点和文本节点。

获得DOM节点：

  • getElementById/TagName/ClassName

  • 获取父节点下的子节点： children

更新节点：

  • innerText 修改文本

  • innerHTML 解析HTML文本标签

  • 操作CSS

删除节点：

  • 获取父节点 father

  • father.removeChild(childName);

创建节点：

  • 获得的节点若为空则通过innerHTML增加元素，若已存在则会覆盖，若要追加则append

  • var newp = createElement('p') 创建新标签 p

  • newp.id = 'newp'; newp.innerText = 'hello';设置

  • newp.setAttribute('type','text/javascript');设置属性

  • list.appendChild(newp);追加入list

插入节点：

insert

 

 

 

posted @ 2021-05-07 10:10  FremontUltimate  阅读(53)  评论(0)    收藏  举报