JavaScript 学习笔记-2


编程语言18 阅0 评

JavaScript 事件

HTML事件是发生在 HTML 元素上的事情
当在HTML页面中使用 JavaScript 时,JavaScript 能够“应对”这些事情。

HTML 事件

HTML 事件是浏览器或者用户做的一些事情。例如:

  • HTML 页面完成加载
  • HTML 输入字段被修改
  • HTML 按钮被点击

通常,当事件发生时,用户会希望做某些事情。

JavaScript 允许在事件被侦测到时执行指定的代码。

使用

HTML 允许向 HTML 元素中添加事件处理程序。

通用的格式为:

<element event='一些 JavaScript'>
<!-- 使用双引号也是一样 -->
<element event="一些 JavaScript">

例如在按钮元素中添加onlick事件的调用。

<button onclick='document.getElementById("demo").innerHTML=Date()'>
    现在的时间是?
</button>

W3School TIY Editor

也可以通过this改变自身的元素的内容:

<button onclick="this.innerHTML=Date()">
    现在的时间是?
</button>

W3School TIY Editor

通常不直接将 JavaScript 代码写到 HTML 代码中,而调用函数更为常见。

<script>
function displayDate() {
    document.getElementById("demo").innerHTML = Date();
}
</script>
<button onclick="displayDate()">
    现在的时间是?
</button>

TIY Editor

常见的 HTML 事件

事件描述
onchangeHTML 元素已被改变
onclick用户点击了 HTML 元素
onmouseover用户把鼠标移动到 HTML 元素上
onmouseout用户把鼠标移开 HTML 元素上
okkeydown用户按下键盘按钮
onload浏览器已经完成了加载

更完整的列表:W3School JavaScript 参考手册 HTML DOM 事件

JavaScript 字符串

JavaScript 字符串用户存储和操作文本。

// 使用双引号
var x = "Bill Gates";
// 或者单引号
var x = 'Bill Gates';
// 同时使用双引号和单引号
// 和 Python 中的无异
var answer = 'Hi is called "Bill"';

JavaScript 的字符串对象拥有一些内建函数,例如length可以返回字符串的长度。

一些属性和方法

  • length 属性返回字符串的长度,注意这里不是函数,不需要加小括号。TIY
  • indexOf(matchString, startIndex = 0) 方法返回字符串中指定文本首次出现的索引位置(从0开始)。默认从0位置开始查找。TIY
  • lastIndexOf(matchString, startIndex = 0)方法与上面的类似,返回最后出现的索引位置。TIY 如果为找到,则indexOf()lastIndexOf()返回-1TIY
  • search() 方法检索特定值的字符串(支持正则表达式),返回其匹配的索引位置。

search()无法设置第二个开始位置。

indexOf()方法无法设置正则表达式。

提取部分字符串

有三种函数可以提取部分字符串:

  • slice(start, end)
  • substring(start, end)
  • substr(start, length)

slice(satrt, end)

这里的startend可以为负数,都是字符串的索引位置。这一点与 Python 中的 string[start: end]类似。

substring(start, end)

它与slice(start, end)类似,只是无法为负数。

substr(start, length)

它与slice的区别在于,它的第二个参数为指定的字符串长度,start也可以为负数。

替换字符串内容

使用 replace(oldStr, newStr)用于新的值替换与之匹配的字符串中指定的值。例如:

str = "Please visit Microsoft!";
var n = str.replace("Microsoft", "W3School");

TIY

replace()方法不会改变原调用对象,只是返回一个新的字符串。

默认此方法**只替换首个匹配**

默认对大小写敏感,如果需要不敏感,则使用正则/i(大小写不敏感)。

str = "Please visit Microsoft!";
var n = str.replace(/MICROSOFT/i, "W3School");

正则表达式不带引号。

如需替换所有匹配,请使用正则表达式的 g 标志(用于全局搜索):

str = "Please visit Microsoft and Microsoft!";
var n = str.replace(/Microsoft/g, "W3School");

转大小写

通过 toUpperCase() 将字符串转换为大写。

通过 toLowerCase() 将字符串转换为小写。

连接字符串

concat()方法连接两个或者多个字符串。与+是等效的。

String.trim()

trim()方法删除字符串两端的空白符。

提取字符串中单个字符

carAt()方法

返回字符串中指定下标(位置)的字符串。

var str = "HELLO WORLD";
str.charAt(0);            // 返回 H

carCodeAt()方法

返回字符串中指定位置的字符串的 unicode编码:

var str = "HELLO WORLD";
str.charCodeAt(0);         // 返回 72

也可以使用下标

类似于数组,但是并不安全。

var str = "HELLO WORLD";
str[0];                   // 返回 H

将字符串转换为数组

通过split()将字符串转换为数组。与 Python 中的同理。

var txt = "a,b,c,d,e";   // 字符串
txt.split(",");          // 用逗号分隔
txt.split(" ");          // 用空格分隔
txt.split("|");          // 用竖线分隔
// 如果省略分隔符,被返回的数组将包含 index [0] 中的整个字符串。
//如果分隔符是 "",被返回的数组将是间隔单个字符的数组:
var txt = "Hello";       // 字符串
txt.split("");           // 分隔为字符

转义字符

JavaScript 中的转义字符与 C 中的无异。

代码结果
\''
\""
\\\
b退格
f换页
n换行
r回车
t水平制表符
v垂直制表符

长代码换行

换行的目的主要是为了可读性。

在字符串中如果需要换行,则在其行的末尾加上一个反斜杠\即可。

document.getElementById("demo").innerHTML = "Hello \
Kitty!";

与其他语言类似。

但是,\方法并不是 ECMAScript 标准,所以更安全的方法是使用加号+对字符串进行连接。

两个 JavaScript 对象的比较

注意,两个 JavaScript 对象永远不相等,因为它们是不同的对象。

var x = new String("Bill")
var y = new String("Bill")
// (x == y) 为 false, 因为 x 和 y 是不同的对象。
// (x === y) 为 false,同理。
最后更新 2022-01-07
评论 ( 0 )
OωO
隐私评论