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 + 7 =
快来做第一个评论的人吧~