js笔记

3560
前端开发
js笔记

文章最后更新时间为：2018年08月14日 11:09:09

以前的js学习笔记，放在网上随时查阅，也随时补充吧。

1. 语句

JavaScript 语句向浏览器发出的命令。语句的作用是告诉浏览器该做什么。

document.getElementById("demo").innerHTML = "你好 Dolly";

分号用于分隔 JavaScript 语句。可以在文本字符串中使用反斜杠对代码行进行换行。

document.write("你好 \
世界!");

2. 注释

  • 单行注释以 // 开头。
  • 多行注释以 / 开始，以 / 结尾。

使用 JavaScript 脚本在页面中输出一个字符串，将 JavaScript 脚本编写在 HTML 注释中，如果浏览器支持 JavaScript 将输出此字符串，如果不支持将不输出此字符串，代码如下:

<script>
<!--
document.write("您的浏览器支持JavaScript脚本!");
//-->
</script>

3. js变量

  • 变量必须以字母开头
  • 变量也能以 $ 和 _ 符号开头（不过我们不推荐这么做）
  • 变量名称对大小写敏感（y 和 Y 是不同的变量）

JavaScript 使用关键字 var 来定义变量， 使用等号来为变量赋值：

var carname;//值为空
var carname="Volvo";
var lastname="Doe", age=30, job="carpenter";

4.数据类型

字符串（String）、数字(Number)、布尔(Boolean)、数组(Array)、对象(Object)、空（Null）、未定义（Undefined）。
JavaScript 拥有动态类型。这意味着相同的变量可用作不同的类型：

var x;               // x 为 undefined
var x = 5;           // 现在 x 为数字
var x = "John";      // 现在 x 为字符串

JavaScript 只有一种数字类型。数字可以带小数点，也可以不带。
布尔（逻辑）只能有两个值：true 或 false。
创建数组3种方式：

var cars=new Array();
cars[0]="Saab";
cars[1]="Volvo";
cars[2]="BMW";

var cars=new Array("Saab","Volvo","BMW");

var cars=["Saab","Volvo","BMW"];

创建对象：

var person={firstname:"John", lastname:"Doe", id:5566};

寻址方式
name=person.lastname;
name=person["lastname"];

Undefined 这个值表示变量不含有值。
可以通过将变量的值设置为 null 来清空变量。

当声明新变量时，可以使用关键词 "new" 来声明其类型：
var carname=new String;

5. 对象

对象含有属性和方法

<script>
var person = {
    firstName: "John",
    lastName : "Doe",
    id : 5566,
    fullName : function() 
    {
       return this.firstName + " " + this.lastName;
    }
};
document.getElementById("demo").innerHTML = person.fullName();
</script>

访问属性：

  • person.lastName;

  • person["lastName"];
    访问方法：
    name=person.fullName();
    如果你要访问 person 对象的 fullName 属性，它将作为一个定义函数的字符串返回：

    person.fullName
function() { return this.firstName + " " + this.lastName; }

6. 函数

<!DOCTYPE html>
<html>
<head>
<script>
function myFunction()
{
    alert("Hello World!");
}
</script>
</head>
 
<body>
<button onclick="myFunction()">Try it</button>
</body>
</html>

带参数的函数

<button onclick="myFunction('Bob','Builder')">点击这里</button>
<script>
function myFunction(name,job)
{
    alert("Welcome " + name + ", the " + job);
}
</script>

带返回值

function myFunction(a,b)
{
    return a*b;
}
 
document.getElementById("demo").innerHTML=myFunction(4,3);

7. 作用域

局部变量全局变量内容略

8. 输出

  • 使用 window.alert() 弹出警告框。
  • 使用 document.write() 方法将内容写到 HTML 文档中。
  • 使用 innerHTML 写入到 HTML 元素。

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

    <button onclick="myFunction()">点我</button>
<script>
function myFunction() {
     document.write(Date());
}
</script>

<script>
window.alert(5 + 6);

document.getElementById("demo").innerHTML = "段落已修改。";

document.write(Date());

console.log(c);
</script>

    9. DOM

    当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。通过可编程的对象模型，JavaScript 获得了足够的能力来创建动态的 HTML。

在 DOM 中查找 HTML 元素的最简单的方法，是通过使用元素的 id。

var x=document.getElementById("intro");
<div id="main">
<p> DOM 是非常有用的。</p>
<p>该实例展示了  <b>getElementsByTagName</b> 方法</p>
</div>
<script>
var x=document.getElementById("main");
var y=x.getElementsByTagName("p");
document.write('id="main"元素中的第一个段落为：' + y[0].innerHTML);
</script>

DOM HTML

改变HTML输出
document.write(Date());

改变HTML内容
document.getElementById("p1").innerHTML="新文本!";
var element=document.getElementById("header");
element.innerHTML="新标题";

改变HTML属性
<img id="image" src="smiley.gif">
document.getElementById("image").src="landscape.jpg";

DOM CSS

改变css
<p id="p2">Hello World!</p>
document.getElementById("p2").style.color="blue";

触发实践改变
<button type="button" 
onclick="document.getElementById('id1').style.color='red'">
点我!</button>

DOM事件

调用js
<h1 onclick="changetext()">点击文本!</h1>

js触发事件
<button id="myBtn">点这里</button>
<script>
document.getElementById("myBtn").onclick=function(){displayDate()};
function displayDate(){
    document.getElementById("demo").innerHTML=Date();
}
</script>
<p id="demo"></p>
  • onload 和 onunload 事件会在用户进入或离开页面时被触发。
  • onchange 事件常结合对输入字段的验证来使用。（例如当你离开输入框后，函数将被触发）
  • onmouseover 和 onmouseout 事件可用于在用户的鼠标移至 HTML 元素上方或移出元素时触发函数。
  • onmousedown, onmouseup 以及 onclick 构成了鼠标点击事件的所有部分。首先当点击鼠标按钮时，会触发 onmousedown 事件，当释放鼠标按钮时，会触发 onmouseup 事件，最后，当完成鼠标点击时，会触发 onclick 事件。

DOM EventListener

element.addEventListener(event, function, useCapture);

第一个参数是事件的类型 (如 "click" 或 "mousedown").

第二个参数是事件触发后调用的函数。

第三个参数是个布尔值用于描述事件是冒泡还是捕获。该参数是可选的。

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

<button id="myBtn">点我</button>
<script>
var x = document.getElementById("myBtn");
x.addEventListener("click", myFunction);
x.addEventListener("click", someOtherFunction);
function myFunction() {
    alert ("Hello World!")
}
function someOtherFunction() {
    alert ("函数已执行!")
}
</script>
<p id="demo"></p>
<script>
var p1 = 5;
var p2 = 7;
document.getElementById("myBtn").addEventListener("click", function() {
    myFunction(p1, p2);
});
function myFunction(a, b) {
    var result = a * b;
    document.getElementById("demo").innerHTML = result;
}
</script>

事件传递有两种方式：冒泡与捕获。
冒泡 中，内部元素的事件会先被触发，然后再触发外部元素。
捕获 中，外部元素的事件会先被触发，然后才会触发内部元素的事件

DOM 元素

创建新的html元素

<div id="div1">
<p id="p1">这是一个段落。</p>
<p id="p2">这是另一个段落。</p>
</div>
<script>
var para=document.createElement("p");
var node=document.createTextNode("这是一个新段落。");
para.appendChild(node);
var element=document.getElementById("div1");
element.appendChild(para);
</script>

删除已有的html元素

<div id="div1">
    <p id="p1">这是一个段落。</p>
    <p id="p2">这是另一个段落。</p>
</div>
<script>
var parent=document.getElementById("div1");
var child=document.getElementById("p1");
parent.removeChild(child);
</script>
1 + 1 =
快来做第一个评论的人吧~