DOM事件

src 属性可设置或返回图像的 URL，src 属性值更新时浏览器就会自动装载并显示出新图像。（当我们给Image对象设置一个src属性值时，浏览器就会自动发起一个HTTP请求，根据这个src的路径去取图片。）
注释：该属性可在任意时间被更改。不过新图像会继承原始图像的 height 和 width 属性。
该属性的初始值由标记<img>的 src 属性来设置。当把该属性设置为新图像的 URL 时，浏览器就会把那幅新图像装载并显示出来。这对于更新网页的图像外观以响应用户的动作非常有用。
语法：imageObject.src=URL
例子

事件

onload 事件（加载完成立即执行）

页面或图像加载完成后立即发生。
onload 通常用于 <body> 元素，在页面完全载入后(包括图片、css文件等等)执行脚本代码。
该事件可作用于以下 HTML 标签：<body>, <frame>, <frameset>, <iframe>, <img>, <input type="image">, <link>, <script>, <style>
对Image对象使用onload事件的例子

语法（推荐写在JS中）：
在 HTML 中:

1	<body onload="SomeJavaScriptCode">

在 JavaScript 中:

1	window.onload=function(){SomeJavaScriptCode};

注意

代码从上往下执行，在DOM事件中，如果先在<script>里获取对象再通过<div>定义对象会报错，因为这个对象的定义是出现在了获取的后面，你想要获取的时候还没定义。此时可以在<script>里对window使用onload事件（如下例子）

对window使用onload的例子

<head>
    <script>
        // 页面加载完成后才执行
        window.onload=function(){
            // 获取box
            var box =document.getElementById("box");
            var clicked=function(){
                alert("我被点击了！");
            }
            box.onclick=clicked;
        }
    </script>
</head>
<body>
    <div id="box">这是一个box</div>
</body>

onerror 事件(数据加载错误时执行)

onerror 事件在 文档/图像/视频/音频（audio/video） 数据加载期间发生错误时触发
装载图像时发生错误的例子

语法（推荐写在JS中）:
HTML 中(myScript()写在JS中)：

1	<element onerror="myScript">

JavaScript 中：

1	object.onerror=function(){myScript};

JavaScript 中, 使用 addEventListener() 方法添加事件句柄(myScript()写在JS中):

1	object.addEventListener("error", myScript);

参数

通过onerror绑定在img上的函数接收一个参数，该参数可传递错误信息：

1
2
3

img.onerror = (e) => {
    return e;
}

JS对象之string

八月 13, 2019 JavaScript学习

查找字符（串）的4种方法

charAt()查找字符

语法:
stringObject.charAt(index)

功能:返回stringObject中index位置的字符.

1 2	var str="hello world"; console. log(str. charAt(4));//o

ES6中可以直接使用str[index]，与str.charAt(index)效果一样

charCodeAt()查找字符的编码

语法:
stringObject.charCodeAt(index)
功能:
返回stringObject中index位置字符的字符编码.
说明：
ECMAScript5中可使用“方括号加字符索引”来访问字符串中特定的字符，但是IE7及更早的浏览器会返回undefined。
1
2
var str="hello world";
console. log(str. charCodeAt(4));//111

indexOf()与lastIndexOf（）

和数组中的indexOf()与lastIndexOf（）类似
都可以查字符串的位置，不过返回的是第一个字符的位置

indexOf()返回字符（串）的位置

和数组中的indexOf()类似

语法:
stringObject.indexOf("o")
功能:
从一个字符串中搜索给定的子字符串,返回子字符串的位置.
返回值:数值
说明:如果没有找到该子字符串,则返回-1.

lastIndexOf()倒着查，返回字符（串）的位置

语法:
stringObject.lastIndexOf("o")

o是你想查找的字符
功能:
倒着查，从一个字符串中搜索给定的子字符串,返回子字符串的位置
返回值:数值

说明:如果没有找到该子字符串,则返回-1

var email = "marry.mail@sohu.com";
//检测@在emai1中出现的位置
console.log(email.indexOf("o")); //12
console.log(email.indexOf("ar")); //1，可以查字符串的位置，不过返回的是第一个字符的位置
console.log(email.lastIndexOf("."));//15
console.log(email.lastIndexOf("ma"));//6

截取字符串的3种方法

slice()

和数组的slice()类似

语法：stringValue.slice(start,end)
功能:
截取子字符串.
参数说明:

start:必需,指定子字符串的开始位置.
end:可选,表示子字符串到哪里结束,end本身不在截取范围之内,省略时截取至字符串的未尾.

当参数为负数时 (注意：两个参数都适用),会将传入的负值与字符串的长度相加来得到起始位置 （参数值=字符串长度+负值）.

var str = "hello world";
//截取orl 
console.log(str.slice(7, 10));
// 11-3=8，相當於str.slice(8)
console.log(str.slice(-3));//rld
// 11-7=4,11-2=9
console.log(str.slice(-7,-2));//o wor

substring()

语法及功能同slice()完全一样.

区别:

当参数为负数时,自动将参数转换为0.

substring()会将较小的数作为开始位置,将较大的数作为结束位置.

var str = "hello world";//11位
//自动将参数转换为0.
console.log(str.substring(-7,5));//(0,5),hello
//将较小的数作为开始位置,将较大的数作为结束位置.
console.log(str.substring(2,-5));//(0,2),he

substr()

语法:
stringValue.substr(start,len)
功能:
截取子字符串.
参数说明:

start:必需,指定子字符串的开始位置.
len:可选,表示截取的字符总数,省略时截取至字符串的未尾.
当start为负数时,会将传入的负值与字符串的长度相加.（start参数值=字符串长度+负值） 【注意这里和以往不一样，不是两个参数了】

当len为负数时,返回空字符串.

var str = "hello world";//11位
console.log(str.substr(6, 3)); //wor
console.log(str.substr(-5, 4));//相當於(6,4),worl
console.log(str.substr(3, -4));//空

获取扩展名实例

// 获取扩展名
function getFileFormat(url){
    // 获取.在url中出现的位置
    var pos=url.lastIndexOf(".");
    return url.substr(pos+1);
}
var baidu="http://baidu.com/index.txt";
var formatName=getFileFormat(baidu);
var picFormat=getFileFormat("1231212.jpg");
console.log(formatName,picFormat);//txt png

编程练习

// 编程练习：用户输入登录的邮箱，对邮箱进行解析，解析出邮箱的用户名和邮箱的域名
var email=prompt("请输入登录邮箱");
function getName(email){
    // 获取@在email中的位置
    var at=email.indexOf("@");
    // 截取@前的字符串得到用户名
    return email.substring(0,at);
}
function getDomainName(email){
    // 获取@在email中的位置
    var at=email.indexOf("@");
    // 截取@后的字符串得到域名
    return email.substring(at+1);
}
// 要注意换行符"<br/>"在双引号里面
document.write("邮箱的用户名是："+getName(email)+"<br/>"+"登录的邮箱域名是："+getDomainName(email));

split()字符串转换为数组

正好相反，数组中的join()方法是将数组转换为字符串
语法:stringObject.split(separator)
- separator:必需,分隔符。分隔符可以是字符串
功能:把一个字符串分割成字符串数组.
返回值:Array.

replace()替换字符串

注意：它不会影响原来的字符串，它是产生新的字符串。
语法:
stringObject.replace(regexp/substr,replacement)

即：stringObject.replace(替换前字符（串）,替换后字符（串）)
- regexp:必需.规定子字符串或要替换的模式的RegExp对象.
- 如果 regexp 具有全局标志 g，那么 replace() 方法将替换所有匹配的子串。否则，它只替换第一个匹配子串。
- replacement:必需.一个字符串值.
功能:在字符串中用一些字符替换另一些字符,或替换一个与正则表达式匹配的子串.
返回值:String

var str = 'welcome-to-beijing';
//使用split将str转换为数组
var arr = str.split("-");
console.log(arr);//["welcome", "to", "beijing"]
var date = '2016/05/05';
var dateArr = date.split("/");
console.log(dateArr);//["2016", "05", "05"]
// 看来分隔符可以是字符串
var date2 = '2016//05//05';
var dateArr2 = date2.split("//");
//替换
var tel = '010-62971268,400-100-9098,010-867898891';
//newTel:被替换之后的字符串
var newTel = tel.replace(',', " ");
console.log(tel);//010-62971268,400-100-9098,010-867898891
console.log(newTel);//010-62971268 400-100-9098,010-867898891
//newTel2:被替换之后的字符串,只替换第一个匹配子串
var tel2 = '010-62971268,,400-100-9098,,010-867898891';
var newTel2 = tel2.replace(',,', " ");
console.log(newTel2);//010-62971268 400-100-9098,,010-867898891
// 使用正则，加上全局标志 g，则替换所有匹配子串
var tel3 = '010-62971268,,400-100-9098,,010-867898891';
var newTel3 = tel3.replace(/,,/g, " ");
console.log(newTel3);//010-62971268 400-100-9098 010-867898891

字符串转换大小写

toUpperCase()转大写

语法:stringValue.toUpperCase()

功能:把字符串转换为大写.

1
2
3

var str="hello world";
var upper=str.charAt(6).toUpperCase();
console.log(upper);//W

toLowerCase()转小写

语法:stringValue.toLowerCase()

功能:把字符串转换为小写.

1 2	var str2="WELCOME"; console.log(str2.toLowerCase());//welcome

案例：将字符串 border-left-color转换成borderLeftColor（驼峰形式）

function camelBack(str){
    // 通过“-”将字符串str拆分为数组
    var arr=str.split("-"),
        newStr=arr[0];//数组第一项不用变大写所以一开始就可以指定arr[0]为newStr
    // console.log(arr);// ["border", "left", "color"]
    for(var i=1,len=arr.length;i<len;i++){//i从1开始，因为数组第一项不用变大写
        // 遍历数组,改变除第一个单词之外的所有单词的首字母并连接剩余字符
        newStr += arr[i].charAt(0).toUpperCase()+arr[i].substr(1);
    }console.log(newStr);//borderLeftColor
}
var camelFormat=camelBack("border-left-color");

编程练习

小伙伴们,我们学习了string的转化大小写的方法,那么接下来任务来了,将字符串”Never deter till tomorrow that which you can do today”的”tomorrow”转化为大写.

// 将字符串"Never deter till tomorrow that which you can do today"的"tomorrow"转化为大写
var str="Never deter till tomorrow that which you can do today";
// 获取tomorrow位置
var t=str.indexOf("tomorrow");
// console.log(t,str.indexOf("w"));//17 24
// 截取
var tm=str.substring(17,25);
// console.log(tm);
// 改为大写并替换
var newStr=str.replace(str.substring(17,25),tm.toUpperCase());
console.log(newStr);//Never deter till TOMORROW that which you can do today

trim()删除头尾空格

trim() 方法用于删除字符串的头尾空格。
语法：string.trim()
trim() 方法不会改变原始字符串。
例子

正则表达式删除头尾空格

如果你的浏览器不支持 trim() 方法，你可以使用正则表达式来实现:

function myTrim(x) {
  return x.replace(/^\s+|\s+$/gm,'');
}
 
function myFunction() {
  var str = myTrim("        Runoob        ");
  alert(str);
}

(完整例子)

生成正则表达式对象：const regexp1=/规则/修饰符;
修饰符：g表示全局匹配，m表示多行匹配。
规则：
- 定位符：^ 输入字符串开始的位置，$ 输入字符串结尾的位置。
- \s匹配任何空白字符，包括空格、制表符、换页符等等。等价于 [ \f\n\r\t\v]。注意 Unicode 正则表达式会匹配全角空格符。
- |指明两项之间的一个选择。要匹配 |，请使用 \|。
- +匹配前面的子表达式一次或多次。例如，zo+ 能匹配 “zo” 以及 “zoo”，但不能匹配 “z”。+ 等价于 {1,}。

总结：也就是说，如果x以一个或多个空格开始，替换全部空格为空（^\s+）；或者(|)，如果x以一个或多个空格结束(\s+$)，替换全部空格为空。

Math对象

八月 12, 2019 JavaScript学习

Math 对象 Math 对象用于执行数学任务。

阅读全文

JS对象之数组(2)

八月 11, 2019 ES6学习, JavaScript学习

ES6增加的方法Array.prototype.filter()数组过滤方法 filter() 方法创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素。原理： filter 为数组中的每个元素调用一次 callback 函数，并利用所有使得 callback 返回 true 或等价于 true 的值的元素创建一个新数组。

阅读全文