函数:
函数是由事件驱动的或者当他被调用时执行的可重复使用的代码块。
函数语法
函数就是包裹在花括号中的代码块,前面使用了关键词function。
不带参数:
声明函数:
function 函数名(){
// 执行代码
}
<script>
// 创建名字为myFun的函数
function myFun(){
document.write("hello word");
};
// 调用函数,或this.myFun();
myFun();
</script>
调用函数:
函数名():一创建的函数名+小括号
带参数(传参):
声明函数:
function myFunction(var1,var2){
// 代码
}
声明时的参数一般称为形参。
<script>
// 创建名字为myFun的函数,带有参数名为str
function myFun(str){
document.write(str+"hello word");
};
// 调用函数并传参
myFun("世界你好");
</script>
调用函数:
函数名(参数):创建的函数名加小括号,括号内写传的参数值,一般称之为实参,顺序对应形参的顺序。
函数的返回值
函数中的返回值,跟定义的函数是否传参没有任何关系;
返回值是函数中可以返回一个类型,函数外可以进行接收并输出,函数是否传参跟调用的时候就需要对应。
function 函数名(){
// 执行代码
return 类型名;
}
<script>
// 创建名字为myFun的函数,带有参数名为str
function myFun(str){
var ret = str + "hello word";
// 返回ret字符串
return ret;
}
// 定义一个变量的值为,调用myFun函数并传参,接收的返回值
var fun = myFun("世界你好!");
// 输出变量
document.write(fun);
</script>
对象
引用数据类型
对象:在javascript中,对象是拥有属性和方法的数据,对象是属性的集合,他也是一种数据类型,所谓的属性就是这个对象的特征,可以描述的特点。
创建对象:
自定义对象:对象由花括号分割。在括号内部,对象的属性以名称和值对的形式(name:value)来定义。属性是由逗号分隔,属性值是可以任何类型,甚至可以是函数。
// var定义一个对象名叫cat,含name,age两个属性
var cat = {
name:"喵喵",
age:2,
}
创建对象方法(对象中包含方法)
对象的方法定义了一个函数,并作为对象的属性存储,也就是说创建对象属性值时可以使用函数进行创建,并对函数进行调用。
var cat = {
name:"喵喵",
age:2,
// 定义js对象方法--方法名为sayName,function为方法的关键字
sayName:function(){
console.log("我是喵喵");
},
}
获取对象中的属性值
对象名.属性名(通常使用此方法)
//获取cat对象名的name属性,并输出console.log(cat.name)
对象名["属性名"]
//获取cat对象名的name属性,并输出console.log(cat["name"])
对象名.属性方法名(调用对象中的方法)
//调用对象中的方法,调用方式:cat.sayName()
给方法传参数
给对象中的方法传递参数和给函数传递参数是一样的。
<script>
var cat = {
name:"喵喵",
age:2,
// 定义JS对象方法--方法名为sayName,function为方法的关键字
// num为参数
sayName:function(num){
document.write("我是喵喵" + num);
},
};
// 调用对象中的方法,调用方式:对象名.方法名;
// sayName为方法名
// 12346为给需要传递的参数赋值
cat.sayName(123456);
</script>
数组
数组是一个特殊的对象,对象的概念是属性的集合,而数组是元素的有序集合。
特点
- 数组中的元素下标(标识)从0开始,我们可以通过下标获取数组中的元素
- 数组是特殊的对象,他有自己的方法和属性,是常见的是length可以获取数组的长度
- 数组的长度读取方式从1开始进行
声明方法
var 数组名 = [元素,元素,元素]
用声明变量关键词var进行声明,每个数组中的元素,用","分割,数组用"[]"括起来,再赋值给数组名。
<script>
// 定义数组名为array,数组中的数据为1,2,3,4,5
var array = [1,2,3,4,5];
// 循环输出数组中的元素
// 定义i变量的大小,小于数组长度
for(var i=0;i<array.length;i++){
// 输出数组中的元素,使用数组标识方法
document.write(array[i]);
};
</script>
数组属性级方法
获取数组长度length属性
数组名.length
追加数组元素push():在数组中添加新的元素,使数组的长度有所正加
数组名.push(元素值)
<script>
// 定义数组名为array,数组中的数据为1,2,3,4,5
var array = [1,2,3,4,5];
// 追加数组中的元素
array.push(90);
// 输出追加的数组元素
document.write(array[5]);
</script>
for...in...循环
javascript for/in 语句循环遍历对象的属性
<script>
// 定义一个数组名为array
var array = [1,2,3,4,5,6];
// for..in...循环案例(讲解循环)
// i为属性名,遍历数组使用,可以理解为数组的标识
for(var i in array){
document.write(array[i]);
};
</script>
DOM
元素对象
document.querySelector()
返回匹配的指定的选择器的第一个元素,如果该元素较多,则返回第一个元素
document.querySelector("添加元素名")
<body>
<h1>DOM测试内容</h1>
<script>
// document.querySelector()获取元素,使用元素名获取
var h1 = document.querySelector("h1");
// 在系统日志中输出获取的内容
console.log(h1);
</script>
</body>
document.querySelector(".class类名")
<body>
<h1 class="title">DOM测试内容</h1>
<script>
// document.querySelector()获取元素,使用类名进行获取元素
var h1 = document.querySelector(".title");
// 在系统日志中输出获取的内容
console.log(h1);
</script>
</body>
document.querySelector("#id名")
<body>
<h1 id="title">DOM测试内容</h1>
<script>
// document.querySelector()获取元素,使用id名进行获取元素
var h1 = document.querySelector("#title");
// 在系统日志中输出获取的内容
console.log(h1);
</script>
</body>
document.querySelectorAll()
document.querySelectorAll("添加元素名/.class名/#id名");
文档中匹配的css选择器的所有元素节点列表,多用于有序或无序列表(默认元素存储到数组当中,返回一个数组对象)
<body>
<ul>
<li class="public_li">香蕉</li>
<li class="public_li">苹果</li>
<li class="public_li">西瓜</li>
<li class="public_li">桃子</li>
</ul>
<script>
// document.querySelectorAll获取元素,使用类名进行获取
var lists = document.querySelectorAll(".public_li");
// 在系统日志中输出获取内容
console.log(lists.length);
</script>
</body>
获取父级元素节点:parentNode
document.querySelector("子级元素名/.class名/#id名").parentNode;
parentNode属性可以返回某节点的父节点,如果指定的节点没有,父节点内返回null,可在不知道父级元素时,使用此方法删除元素节点
<body>
<ul>
<li class="public_li">香蕉</li>
<li class="public_li">苹果</li>
<li class="public_li">西瓜</li>
<li class="public_li">桃子</li>
</ul>
<script>
// document.querySelector获取元素,使用类名进行获取元素
// 使用parentNode方法获取父级
var lists = document.querySelector(".public_li").parentNode;
// 在系统日志中输出获取的内容
console.log(lists);
</script>
</body>
创建元素节点:document.createElement();
document.createElement("元素名");
<body>
<h1>DOM测试内容</h1>
<script>
// 请使用createElement方法,创建p标签
var content = document.createElement("P");
// 在系统日志中输出p标签
console.log(content);
</script>
</body>
删除元素节点:removerChild()
父级元素.removerChild(子级元素);
通过父级元素删除子级元素,在不确定父级元素时,可以使用此方法获取到父级元素删除子级元素
<body>
<ul>
<li class="public_li">第一个数据</li>
<li class="public_li">第二个数据</li>
<li class="public_li">第三个数据</li>
<li class="public_li">第四个数据</li>
</ul>
<script>
// 获取第一个li元素
var lists = document.querySelector(".public_li");
// 获取li元素的父级元素
var uls = lists.parentNode;
// 通过父级元素删除第一个li元素
uls.removeChild(lists);
</script>
</body>
文本对象
创建文本节点
创建文本节点请使用:document.createTextNode("文字")
<body>
<p>DOM测试文字</p>
<script>
// document.createTextNode创建文本节点
var content = document.createTextNode("helloword");
// content.nodeValue获取文本节点中的内容
document.write(content.nodeValue);
</script>
</body>
获取文本节点内容
nodeValue
<body>
<p>DOM测试文字</p>
<script>
// document.createTextNode创建文本节点
var content = document.createTextNode("helloword");
// content.nodeValue获取文本节点中的内容
document.write(content.nodeValue);
</script>
</body>
将创建的文本节点赋值到已经有元素中:appendChild()方法
追加文本节点的元素变量,appendChild(创建的文本节点内容)
<body>
<p class="content">DOM测试文字</p>
<script>
// 通过class类名获取p标签
var ps = document.querySelector(".content");
// document.createTextNode创建文本节点
var content = document.createTextNode("hello word");
// 在p标签后追加新创建的文本节点内容
ps.appendChild(content);
</script>
</body>
覆盖文本节点内容
innerHTML():新内容覆盖之前的文本内容
元素节点.innerHTML = "新文本节点内容"
<body>
<p class="content">DOM测试文字</p>
<script>
// 通过class类名获取p标签
var ps = document.querySelector(".content");
// 使用innerHTML方法修改之前的内容
ps.innerHTML = "修改后的内容";
</script>
</body>
事件对象
事件绑定
DOM事件
我们可以在事件发生时执行javascript,比如当用户在HTML元素上操作时。
事件分类
onclick:鼠标点击事件
节点.onclick = function(){代码块}
<body>
<p class="content">段落文档</p>
<button class="public_btn">按钮</button>
<script>
// 获取p标签与button标签的元素节点
var btn = document.querySelector(".public_btn");
var str = document.querySelector(".content");
// button标签添加onclick事件
btn.onclick = function(){
// 事件执行给p标签添加新的内容,覆盖之前内容
str.innerHTML = "hello word";
};
</script>
</body>
onmousemove:鼠标移入事件,和,onmouseout:鼠标移除事件
鼠标移入事件:节点.onmousemove = function(){代码块};
鼠标移除事件:节点.onmouseout = function(){代码块};
<body>
<p class="content">段落文档</p>
<script>
// 获取p标签元素节点
var str = document.querySelector(".content");
// 鼠标移入事件
str.onmousemove = function(){
str.innerHTML = "鼠标移入事件";
};
// 鼠标移除事件
str.onmouseout = function(){
str.innerHTML = "段落文档";
};
</script>
</body>
添加监听事件:addEventListevent()方法
使用方法:addEventListevent("事件名",函数,布尔值);
注:
- 事件名不含"on",如"click";
- 事件处理函数不可以加参数;
- 现在的版本可以省略第三个参数,默认值false,true表示事件捕获过程,false表示事件冒泡过程,true最先执行
<body>
<p class="content">段落文档</p>
<script>
// 获取p标签元素节点
var str = document.querySelector(".content");
// 添加监听事件,类型为点击事件
str.addEventListener("click",function(){
str.innerHTML = "测试监听";
});
</script>
</body>
<body>
<p class="content">段落文档</p>
<script>
// 获取p标签元素节点
var str = document.querySelector(".content");
// 添加一个函数,在函数中写要实现的方法
function myFunction(){
str.innerHTML = "监听事件内容";
};
// 添加监听事件,类型为点击事件,并调用函数
str.addEventListener("click",myFunction);
</script>
</body>
删除监听事件:removeEventListener()方法
使用方法:removeEventListener("事件名",事件处理函数,布尔值)
注:
- 事件名不含"on",如"click";
- 事件处理函数不可以加参数;
- 现在的版本可以省略第三个参数,默认值false,true表示事件捕获过程,false表示事件冒泡过程,true最先执行
<body>
<p class="content">段落文档</p>
<button class="remover">删除事件监听</button>
<script>
// 获取元素节点
var str = document.querySelector(".content");
var btn = document.querySelector(".remover");
// 添加鼠标点击的函数
function btnFunction(){
str.innerHTML = "测试内容";
};
// 使用事件监听,调用鼠标点击的函数
btn.addEventListener("click",btnFunction);
// 删除文本的点击事件
btn.removeEventListener("click",btnFunction);
</script>
</body>
DOM2级事件
用于指定元素添加事件,添加的事件不会覆盖以存在的事件,可以向一个元素添加多个事件。可以向同个元素添加同类型的事件。