js初学

最新推荐文章于 2023-09-21 15:57:37 发布

MZ-Liang

最新推荐文章于 2023-09-21 15:57:37 发布

阅读量294

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/FENGLMZ/article/details/75588338

版权

<script> 标签

如需在 HTML 页面中插入 JavaScript，请使用 <script> 标签。

操作 HTML 元素

如需从 JavaScript 访问某个 HTML 元素，可以使用 document.getElementById(id) ，getElementsByName() 方法或者 getElementsByTagName() 方法找到元素。

查找 HTML 元素

通常，通过 JavaScript，您需要操作 HTML 元素。

为了做到这件事情，您必须首先找到该元素。有三种方法来做这件事：

通过 id 找到 HTML 元素
```
var x=document.getElementById("intro");
```
通过标签名找到 HTML 元素本例查找 id="main" 的元素，然后查找 "main" 中的所有 <p> 元素：
```
var x=document.getElementById("main");
var y=x.getElementsByTagName("p");
```
通过类名找到 HTML 元素

改变 HTML 内容

修改 HTML 内容的最简单的方法时使用 innerHTML 属性。

如需改变 HTML 元素的内容，请使用这个语法：

document.getElementById(id).innerHTML=new HTML

改变 HTML 属性

如需改变 HTML 元素的属性，请使用这个语法：

document.getElementById(id).attribute=new value

改变 HTML 样式

如需改变 HTML 元素的样式，请使用这个语法：

document.getElementById(id).style.property=new style

警告

请使用 document.write() 仅仅向文档输出写内容。

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

<!DOCTYPE html>
<html>
<body>

<h1>我的第一张网页</h1>

<p>我的第一个段落。</p>

<button οnclick="myFunction()">点击这里</button>

<script>
function myFunction()
{
document.write("糟糕！文档消失了。");
}
</script>

</body>
</html>

JavaScript 语句

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

下面的 JavaScript 语句向 id="demo" 的 HTML 元素输出文本 "Hello World"：

document.getElementById("demo").innerHTML="Hello World";

JavaScript 代码（或者只有 JavaScript）是 JavaScript 语句的序列。

浏览器会按照编写顺序来执行每条语句。

JavaScript 对大小写敏感。

JavaScript 对大小写是敏感的。

当编写 JavaScript 语句时，请留意是否关闭大小写切换键。

函数 getElementById 与 getElementbyID 是不同的。

同样，变量 myVariable 与 MyVariable 也是不同的。

空格

JavaScript 会忽略多余的空格。您可以向脚本添加空格，来提高其可读性。下面的两行代码是等效的：

对代码行进行折行

可以在文本字符串中使用反斜杠对代码行进行换行。下面的例子会正确地显示：

document.write("Hello \
World!");

不过，不能像这样折行：

document.write \
("Hello World!");

JavaScript 拥有动态类型

JavaScript 拥有动态类型。这意味着相同的变量可用作不同的类型：

实例

var x                // x 为 undefined
var x = 6;           // x 为数字
var x = "Bill";      // x 为字符串

局部 JavaScript 变量

在 JavaScript 函数内部声明的变量（使用 var）是局部变量，所以只能在函数内部访问它。（该变量的作用域是局部的）。

您可以在不同的函数中使用名称相同的局部变量，因为只有声明过该变量的函数才能识别出该变量。

只要函数运行完毕，本地变量就会被删除。

全局 JavaScript 变量

在函数外声明的变量是全局变量，网页上的所有脚本和函数都能访问它。

JavaScript 变量的生存期

JavaScript 变量的生命期从它们被声明的时间开始。

局部变量会在函数运行以后被删除。

全局变量会在页面关闭后被删除。

向未声明的 JavaScript 变量来分配值

如果您把值赋给尚未声明的变量，该变量将被自动作为全局变量声明。

这条语句：

carname="Volvo";

将声明一个全局变量 carname，即使它在函数内执行。

JavaScript 对象

对象由花括号分隔。在括号内部，对象的属性以名称和值对的形式 (name : value) 来定义。属性由逗号分隔：

var person={firstname:"Bill", lastname:"Gates", id:5566};

上面例子中的对象 (person) 有三个属性：firstname、lastname 以及 id。

空格和折行无关紧要。声明可横跨多行：

var person={
firstname : "Bill",
lastname  : "Gates",
id        :  5566
};

对象属性有两种寻址方式：

实例

name=person.lastname;
name=person["lastname"];

创建对象

JavaScript 提供了一些常用的内置对象（稍后介绍），但是有些情况下我们需要自定义地创建对象，以达到特殊的、丰富的功能。

比如我们创建一个“student”对象，并为其指定几个属性和方法：

student = new Object();  // 创建对象“student”

student.name = "Tom";   // 对象属性 名字
student.age  = "19";    // 对象属性 年龄

student.study =function() {   // 对象方法 学习
    alert("studying");
};

student.eat =function() {     // 对象方法 吃
    alert("eating");
};

此外，你也可以这样创建对象：

var student = {};
student.name = "Tom";
……

或者这样：

var student = {
    name:"Tom";
     age:"19";
    ……
}

但是以上方法在创建多个对象时，会产生大量重复代码，所以我们也可以采用函数的方式新建对象：

function student(name,age) {

    this.name = name;
    this.age = age;

    this.study = function() {
        alert("studying");
    };

    this.eat = function() {
        alert("eating");
    }
}

然后通过 new 创建 student 对象的实例：

var student1 = new student('Tom','19');

var student2 = new student('Jack','20');

JavaScript 中的所有事物都是对象：字符串、数字、数组、日期，等等。

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

For/In 循环

JavaScript for/in 语句循环遍历对象的属性：

实例

var person={fname:"John",lname:"Doe",age:25};

for (x in person)
  {
  txt=txt + person[x];
  }

事件

onclick 单击
ondblclick 双击
onfocus 元素获得焦点
onblur 元素失去焦点

onmouseover 鼠标移到某元素之上
onmouseout 鼠标从某元素移开

onmousedown 鼠标按钮被按下
onmouseup 鼠标按键被松开

onkeydown 某个键盘按键被按下
onkeyup 某个键盘按键被松开
onkeypress 某个键盘按键被按下并松开

使用 HTML DOM 来分配事件

HTML DOM 允许您通过使用 JavaScript 来向 HTML 元素分配事件：

实例

向 button 元素分配 onclick 事件：

<script>
document.getElementById("myBtn").οnclick=function(){displayDate()};
</script>

onload 和 onunload 事件

onload 和 onunload 事件会在用户进入或离开页面时被触发。

onload 事件可用于检测访问者的浏览器类型和浏览器版本，并基于这些信息来加载网页的正确版本。

onload 和 onunload 事件可用于处理 cookie。

实例

<body οnlοad="checkCookies()">

onchange 事件

onchange 事件常结合对输入字段的验证来使用。

下面是一个如何使用 onchange 的例子。当用户改变输入字段的内容时，会调用 upperCase() 函数。

实例

<input type="text" id="fname" οnchange="upperCase()">

创建新的 HTML 元素

如需向 HTML DOM 添加新元素，您必须首先创建该元素（元素节点），然后向一个已存在的元素追加该元素。

实例

<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>

可以通过 getAttribute() 和 setAttribute() 查询和设置元素的属性

删除已有的 HTML 元素

如需删除 HTML 元素，您必须首先获得该元素的父元素

通过 parentNode() 方法可以查看并操作一个节点的父节点,

从父元素中删除子元素：

parent.removeChild(child);

MZ-Liang

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js初学

标签如需在 HTML 页面中插入 JavaScript，请使用标签。和会告诉 JavaScript 在何处开始和结束。和之间的代码行包含了 JavaScript。操作 HTML 元素如需从 JavaScript 访问某个 HTML 元素，可以使用 document.getElementById(id) ，getElementsBy
复制链接

扫一扫