JavaScript基础02
JavaScript事件与对象
JavaScript函数
函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块。
语法
//函数就是包裹在花括号中的代码块,前面使用了关键字function:
function functionname()
{
//执行代码
}
//调用函数时,您可以向其传递着,这些值被称为参数
function myFunction(var1,var2)
{
//执行代码
}
返回值
我们希望函数将值返回调用它的地方,可以通过使用 return 语句就可以实现。
在使用 return 语句时,函数会停止执行,并返回指定的值。
function myFunction()
{
var x=5;
return x;
}
示例:
求两个数之和:
//声明函数
function sum(a,b){
s = a + b;
return s;
}
JavaScript常用函数
字符串函数
indexOf()
描述:返回某个指定的字符串值在字符串中首次出现的位置。
原型:
stringObject.indexOf(searchvalue,fromindex)
参数 | 描述 |
---|---|
searchvalue | 必需。规定需检索的字符串值。 |
fromindex | 可选的整数参数。规定在字符串中开始检索的位置。它的合法取值是 0 到 stringObject.length - 1。如省略该参数,则将从字符串的首字符开始检索。 |
说明:该方法将从头到尾地检索字符串 stringObject,看它是否含有子串 searchvalue。开始检索的位置在字符串的 fromindex 处或字符串的开头(没有指定 fromindex 时)。如果找到一个 searchvalue,则返回 searchvalue 的第一次出现的位置。stringObject 中的字符位置是从 0 开始的。
注释:indexOf() 方法对大小写敏感!如果要检索的字符串值没有出现,则该方法返回 -1。
用法:
<script type="text/javascript">
var str = "Hello world!"
console.log(str.indexOf("Hello"))
console.log(str.indexOf("World"))
console.log(str.indexOf("world"))
</script>
输出:
0
-1
6
lastIndexOf()
描述:返回一个指定的字符串值最后出现的位置,在一个字符串中的指定位置从后向前搜索。
原型:
stringObject.lastIndexOf(searchvalue,fromindex)
参数 | 描述 |
---|---|
searchvalue | 必需。规定需检索的字符串值。 |
fromindex | 可选的整数参数。规定在字符串中开始检索的位置。它的合法取值是 0 到stringObject.length - 1。如省略该参数,则将从字符串的最后一个字符处开始检索。 |
返回值:如果在 stringObject 中的 fromindex 位置之前存在 searchvalue,则返回的是出现的最后一个searchvalue 的位置。
说明:该方法将从尾到头地检索字符串 stringObject,看它是否含有子串 searchvalue。开始检索的位置在字符串的 fromindex 处或字符串的结尾(没有指定 fromindex 时)。如果找到一个 searchvalue,则返回 searchvalue 的第一个字符在 stringObject 中的位置。stringObject 中的字符位置是从 0 开始的。
用法:
<script type="text/javascript">
var str = "Hello Hello!"
console.log(str.lastIndexOf("Hello"))
</script>
输出:
6
replace()
描述:用于在字符串中用一些字符替换另一些字符,或替换一个与正则表达式匹配的子串。
原型:
stringObject.replace(regexp/substr,replacement)
参数 | 参数 |
---|---|
regexp/substr | 必需。规定子字符串或要替换的模式的 RegExp 对象。请注意,如果该值是一个字符串,则将它作为要检索的直接量文本模式,而不是首先被转换为 RegExp对象。 |
replacement | 必需。一个字符串值。规定了替换文本或生成替换文本的函数。 |
用法1 单次替换:
<script type="text/javascript">
var str = "Hello World!"
document.write(str.replace(/Hello/, "Hi"))
document.write("<br>")
str = "Hello Hello World!"
document.write(str.replace(/Hello/, "Hi"))
</script>
输出1:
Hi World!
Hi Hello World!
用法2 全局替换:
<script type="text/javascript">
var str = "Hello Hello World!"
document.write(str.replace(/Hello/g, "Hi"))
</script>
输出2:
Hi Hi World!
substr()
描述:在字符串中抽取从 start 下标开始的指定数目的字符。
原型:
stringObject.substr(start,length)
参数 | 描述 |
---|---|
start | 必需。要抽取的子串的起始下标。必须是数值。如果是负数,那么该参数声明从字符串的尾部开始算起的位置。也就是说,-1 指字符串中最后一个字符,-2 指倒数第二个字符,以此类推。 |
length | 可选。子串中的字符数。必须是数值。如果省略了该参数,那么返回从 stringObject 的开始位置到结尾的字串。 |
返回值:一个新的字符串,包含从 stringObject 的 start(包括 start 所指的字符) 处开始的 length 个字符。如果没有指定 length,那么返回的字符串包含从 start 到 stringObject 的结尾的字符。
注释:substr() 的参数指定的是子串的开始位置和长度,因此它可以替代 substring() 和 slice() 来使用。
重要事项:ECMAscript 没有对该方法进行标准化,因此反对使用它。
重要事项:在 IE 4 中,参数 start 的值无效。在这个 BUG 中,start 规定的是第 0 个字符的位置。在之后的版本中,此 BUG 已被修正。
用法:
<script type="text/javascript">
var str = "Hello world!"
console.log(str.substr(3))
console.log(str.substr(3, 7))
</script>
输出:
lo world!
lo worl
toLowerCase()
描述:用于把字符串转换为小写。
原型: stringObject.toLowerCase()
用法:
<script type="text/javascript">
var str = "Hello World!"
console.log(str.toLowerCase())
</script>
输出:
hello world!
toUpperCase()
描述:用于把字符串转换为大写。
原型:
stringObject.toUpperCase()
返回值:一个新的字符串,在其中 stringObject 的所有小写字符全部被转换为了大写字符。
用法:
<script type="text/javascript">
var str = "Hello World!"
console.log(str.toUpperCase())
</script>
输出:
HELLO WORLD!
数组函数
push()
描述:向数组的末尾添加一个或多个元素,并返回新的长度。
原型: arrayObject.push(newelement1,newelement2,…,newelementX)
参数 | 描述 |
---|---|
newelement1 | 必需。要添加到数组的第一个元素。 |
newelement2 | 可选。要添加到数组的第二个元素。 |
newelementX | 可选。可添加多个元素。 |
返回值:把指定的值添加到数组后的新长度。
说明:push() 方法可把它的参数顺序添加到 arrayObject 的尾部。它直接修改 arrayObject,而不是创建一个新的数组。push() 方法和 pop() 方法使用数组提供的先进后出栈的功能。
注释:该方法会改变数组的长度。
提示:要想数组的开头添加一个或多个元素,请使用 unshift() 方法。
用法:
<script type="text/javascript">
var arr = new Array(3)
arr[0] = "George"
arr[1] = "John"
arr[2] = "Thomas"
console.log(arr)
console.log(arr.push("James"))
console.log(arr)
</script>
输出:
["George", "John", "Thomas"]
4
["George", "John", "Thomas", "James"]
reverse()
描述:用于颠倒数组中元素的顺序。
原型:
arrayObject.reverse()
注释:该方法会改变原来的数组,而不会创建新的数组。
用法:
<script type="text/javascript">
var arr = new Array(3)
arr[0] = "George"
arr[1] = "John"
arr[2] = "Thomas"
console.log(arr)
console.log(arr.reverse())
</script>
输出:
["George", "John", "Thomas"]
["Thomas", "John", "George"]
JavaScript 对象
JavaScript 中的所有事物都是对象:字符串、数值、数组、函数等。此外,JavaScript 允许自定义对象。
自定义对象
对象由花括号分隔。在括号内部,对象的属性以名称和值对的形式 (name : value) 来定义。属性由逗号
分隔:
var person = {
firstname: "John",
lastname: "Doe",
id: 5566
};
console.log(person);
person有三个属性:firstname、lastname 以及 id
var person = {
firstname: "John",
lastname: "Doe",
id: 5566
};
console.log(person.lastname);
console.log(person["id"]);
JavaScript 变量均为对象。当您声明一个变量时,就创建了一个新的对象。
HTML事件
HTML 事件是发生在 HTML 元素上的事件,当在 HTML 页面中使用 JavaScript 时, JavaScript 可以触发这些事件。
事件可以是浏览器行为,也可以是用户行为。
是 HTML 事件的实例:
- HTML 页面完成加载(事件)
- HTML input 字段改变时(事件)
- HTML 按钮被点击(事件)
常见的HTML事件
事件 | 描述 |
---|---|
onchange | HTML 元素改变 |
onclick | 用户点击 HTML 元素 |
onmouseover | 鼠标指针移动到指定的元素上时发生 |
onmouseout | 用户从一个 HTML 元素上移开鼠标时发生 |
onkeydown | 用户按下键盘按键 |
onload | 浏览器已完成页面的加载 |
onload
<body onload="alert('onload')">
onchange
<input type="text" onchange="alert('onchange')">
onmouseover onmouseout
<input type="text" onmouseover="alert('onmouseover')">
<input type="text" onmouseout="alert('onmouseout')">
<img src="https://www.secdriver.com/assets/ldy/logo.png" onmouseover="alert('鼠标
移上来了')" οnmοuseοut="alert('鼠标移出去了')">
onmousedown onmouseup
<input type="text" onmousedown="alert('onmousedown')">
<input type="text" onmouseup="alert('onmouseup')">
onclick
<head>
<title>HTML事件</title>
<script>
function myevent() {
alert('onclick');
}
</script>
</head>
<body>
<button onclick="myevent()">点我</button>
</body>
onerror
<img src="xxxx" alt="出错了" onerror="alert('onerror')">
HTML DOM
DOM(Document Object Model,文档对象模型)。
HTML DOM 模型被构造为对象的树:
通过可编程的对象模型,JavaScript 获得了足够的能力来创建动态的 HTML。
- JavaScript 能够改变页面中的所有 HTML 元素
- JavaScript 能够改变页面中的所有 HTML 属性
- JavaScript 能够改变页面中的所有 CSS 样式
- JavaScript 能够对页面中的所有事件做出反应
查找 HTML 元素
通过 JavaScript操作 HTML 元素,首先需要找到该元素。
有三种方法来做这件事:
- 通过 id 找到 HTML 元素
- 通过标签名找到 HTML 元素
- 通过类名找到 HTML 元素
通过 id 查找 HTML 元素
<body>
<h2 id="h2">这是一个标题</h2>
<script>
var h2 = document.getElementById("h2");
console.log(h2);
</script>
</body>
通过标签名找到 HTML 元素
查找元素中的所有
元素:
<body>
<h2>这是一个标题</h2>
<h2>这还是一个标题</h2>
<script>
var h2 =
document.getElementsByTagName('h2');
console.log(h2);
</script>
</body>
通过类名找到 HTML 元素
<body>
<h2 class="h2">这是一个标题</h2>
<script>
var h2 = document.getElementsByClassName("h2");
console.log(h2);
</script>
</body>
改变HTML内容
HTML DOM 允许 JavaScript 改变 HTML 元素的内容。
改变内容
<body>
<h2 id="h2">这是一个标题</h2>
<script>
var h2 = document.getElementById("h2");
h2.innerHTML = "修改标题内容";
</script>
</body>
改变属性
<body>
<img id="img" src="xx">
<script>
var img = document.getElementById("img");
img.src = "https://www.secdriver.com/assets/ldy/logo.png";
</script>
</body>
改变事件
<body>
<img id="img" src="https://www.secdriver.com/assets/ldy/logo.png">
<script>
var img = document.getElementById("img");
img.onclick = function () {
alert('通过js改变事件');
};
</script>
</body>
添加监听
<body>
<img id="img" src="https://www.secdriver.com/assets/ldy/logo.png">
<script>
var img = document.getElementById("img");
img.addEventListener("click", function () {
alert('添加监听');
});
</script>
</body>
添加元素
<body>
<div id="div"> </div>
<script>
var div = document.getElementById("div");
var p = document.createElement("p");
p.innerText = "这是js创建的p标签";
div.appendChild(p);
</script>
</body>
移除元素
<body>
<div id="div">
<p id="p">这是一个p标签</p>
<p>这是另一个p标签</p>
</div>
<script>
// 要移除一个元素,你需要知道该元素的父元素。
var div = document.getElementById("div");
var p = document.getElementById("p");
div.removeChild(p);
</script>
</body>
总结:
tion () {
alert(‘添加监听’);
});
添加元素
<body>
<div id="div"> </div>
<script>
var div = document.getElementById("div");
var p = document.createElement("p");
p.innerText = "这是js创建的p标签";
div.appendChild(p);
</script>
</body>
移除元素
<body>
<div id="div">
<p id="p">这是一个p标签</p>
<p>这是另一个p标签</p>
</div>
<script>
// 要移除一个元素,你需要知道该元素的父元素。
var div = document.getElementById("div");
var p = document.getElementById("p");
div.removeChild(p);
</script>
</body>