文章目录
一、js中的函数
1.函数的定义
- 功能：一段特定功能的代码块
- 定义方式：函数定义使用关键字 function
2.函数的种类
2.1.命名函数
函数声明必须始终带有一个标识符，也就是我们所说的函数名，而函数表达式则可以省略。
函数声明会给函数指定一个名字，会在代码执行以前被加载到作用域中，所以调用函数在函数声明之前或之后都是可以的：
function func1(){
console.log('我是一个函数');
return '我是函数的返回值，如果没有返回值，我会返回undefined';
}
func1();
b=func1();
console.log(b);
2.2.函数表达式
函数表达式，创建一个匿名函数，然后将这个匿名函数赋给一个变量，在代码执行到函数表达式的时候才会有定义，所以调用函数在函数表达式之后才能正确运行，否则是会报错的
var func2=function(){
console.log('我是匿名函数')
}
func2();
2.3.自执行函数
不需要启动，自己会运行的函数。格式众多
①匿名函数前面加上一元操作符，后面加上 ()
!function () {
console.log("自执行函数")
}();
-function () {
console.log("自执行函数")
}();
+function () {
console.log("自执行函数")
}();
~function () {
console.log("自执行函数")
}();
②匿名函数后面加上 ()，然后再用 () 将整个括起来：
(function () {
console.log("I AM IIFE")
}());
③先用 () 将匿名函数括起来，再在后面加上 ()：
(function () {
console.log("I AM IIFE")
})();
④使用箭头函数表达式，先用 () 将箭头函数表达式括起来，再在后面加上 ()：
(() => {
console.log("I AM IIFE")
})()
⑤匿名函数前面加上 void 关键字，后面加上 ()， void 指定要计算或运行一个表达式，但是不返回值：
void function () {
console.log("I AM IIFE")
}();
⑥有的时候，我们还有可能见到立即执行函数前面后分号的情况，例如：
;(function () {
console.log("I AM IIFE")
}())
;!function () {
console.log("I AM IIFE")
}()
这是因为立即执行函数通常作为一个单独模块使用一般是没有问题的，但是还是建议在立即执行函数前面或者后面加上分号，这样可以有效地与前面或者后面的代码进行隔离，否则可能出现意想不到的错误。
将参数放在末尾的 () 里即可实现参数传递
var text = "I AM IIFE";
var dict = {name: "Bob", age: "20"};
var list = [1, 2, 3, 4];
(function (param) {
console.log(param)
})(text);
(function () {
console.log(dict.name);
})(dict);
(function () {
var sum = 0;
for (var i = 0; i < list.length; i++) {
sum += list[i];
}
console.log(sum);
})(list);
3.函数的参数
js传递参数往往会遇到形参和实参数量不一致的情况
- 形参少，传多个实参
- 形参多，传少量实参
- 无形参，传实参
- 无实参，写形参
function fun1(a,b){
console.log(a,b);
}
function fun2(){
console.log('没有形参的函数');
}
//1.定义函数时候有形参，调用函数时候不传参数
fun1(); //undefined undefined
//2.传多个实参，按照位置传参，多余的实参自动忽略
fun1(1,2,3); //1,2
//3.定义函数2个形参，只传一个实参
fun1(1); //1 undefined
// 4.没有形参的函数传实参
fun2(1,2,3); //没有形参的函数
4.参数的作用域
- 全局变量：在函数外部定义的变量和在函数内部不使用var定义的变量是全局变量（在任何位置都可以使用）
- 局部变量：在函数内部使用var定义的变量（只在当前函数内部可以使用）
var a=1;//函数外部定义一个全局变量
function fun3(){
a+=1//js可以直接修改全局变量
console.log(a);
b=2;//函数内部定义一个全局变量
console.log(b);
}
console.log(a);
//console.log(b);//此处报错，函数没执行，还没有声明b
fun3();
console.log(a);//全局变量被修改
b+=2;
console.log(b);
二、对象的使用
对象的三种声明方法和关键字this
//1.使用系统提供的object（）实例化对象
var obj1= new Object();
//对象的操作
//添加成员属性和成员方法
obj1.name='张三';
obj1.say=function(){
console.log('我太难了');
}
//修改name属性的值
obj1.name='李四';
//删除
delete obj1.name;
console.log(obj1);
//2.直接定义
var obj2={
name:'萌萌'
,say:function(){console.log('我太难了');
}
}
console.log(obj2);
//3.使用构造函数实例化对象
function Student(){
this.name='小哈';
this.say=function(){
console.log('我是一头驴');
}
}
//实例化
var haha=new Student();//类似python中的class
console.log(haha);
console.log(haha.name);
//this关键字,谁调用this，this就指向谁，在全局中指向window
console.log(this);
//什么时候用[]
//①当键存在变量中时，使用[]，其实是给字符串定义了一个变量名
var obj4={name:1,age:2};
var key='gender';
obj4[key]='男';
console.log(obj4);
console.log(obj4[key]);
console.log(obj4.gender);
//②当键是字符串时候，使用[]
// obj4.'height'='180';//报错
obj4['height']='100';
console.log(obj4);
三、js操作元素
1.获取html元素和修改css样式
| 获取元素 | 方法 |
|---|---|
| 通过标签名 | document.getElementsByTagName() |
| 通过id名 | document.getElementById() |
| 通过类名 | doucument.getElementsByClassName() |
<body>
<div id='box' class="item1">1</div>
<div id='box' class="item1">2</div>
<script type="text/javascript">
//----------------------获取元素------------------------------
//1.通过id获取元素对象，返回元素对象，多个id同名会只获取第一个，每天返回null
var oDiv=document.getElementById('box');//获取元素
console.log(oDiv,typeof(oDiv));
//2.通过标签名获取元素，反回类数组对象(因为可能有多个标签名)
var oDivs=document.getElementsByTagName('div');
console.log(oDivs,typeof(oDivs));
//3.通过类名获取元素,返回类数组对象(因为可能有多个类名)
var oDivcs=document.getElementsByClassName('item1');
console.log(oDivcs,typeof(oDivcs));
//--------------------设置元素的样式-------------------
//设置js设置的都是行间样式
oDiv.style.width='200px';
oDiv.style.height='200px';
oDiv.style.backgroundColor='red';//中划线要去掉换为小驼峰
//注意通过标签或类名获取的需要先遍历获取某个元素，再设置样式
for(var i =0;i<oDivs.length;i++){
// console.log(oDivs[i]);
if(i%2==0){
oDivs[i].style.width='200px';
oDivs[i].style.height='200px';
oDivs[i].style.backgroundColor='yellow';//中划线要去掉换为小驼峰
oDivs[i].style.border='1px solid black';
oDivs[i].style.textAlign='center';
oDivs[i].style.lineHeight='30px';}
else{
oDivs[i].style.width='400px';
oDivs[i].style.height='400px';
oDivs[i].style.backgroundColor='blue';//中划线要去掉换为小驼峰
oDivs[i].style.border='5px dotted black';
oDivs[i].style.textAlign='center';
oDivs[i].style.lineHeight='30px'
}
}
</script>
</body>
2.js修改元素的属性：
使用js增删改元素的属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>js获取元素的增删改</title>
<style>
#Div{
width: 200px;
height: 200px;
background: green;
}
</style>
</head>
<body>
<img src="电视.png" id='img' name='haha'>
<input type="text" value="12333" id='tex'>
<div id='Div'>哈哈哈哈哈哈哈哈</div>
<script type="text/javascript">
//-----getAttribute(),setAttribute(),removeAttribute()
//-------------------操作图片-----------------------------
var Img=document.getElementById('img');
console.log(Img);
//获取src属性
console.log(Img.getAttribute('src'));
//src本身就是img的默认属性
console.log(Img.src);
//设置属性,修改属性
Img.setAttribute('data','电视');
Img.name='xixi';
//删除属性
Img.removeAttribute('data');
//---------------------操作表单值----------------------
var Tex=document.getElementById('tex');
console.log(Tex.value);
Tex.value='456';
console.log(Tex.value);
//----------------文本值的操作--------------------
var oDiv=document.getElementById('Div');
console.log(oDiv.innerHTML);//会连标签一起获取
console.log(oDiv.innerText);//值获取纯文本
//设置文本内容
//修改的时候会覆盖原先内容，但是还能加入标签并且解析
oDiv.innerHTML='<h1>切断了所有退路</h1>';
//修改的时候会覆盖原先内容，不能解析标签
// oDiv.innerText='<h1>我的心情已落幕</h1>';
</script>
</body>
</html
四、鼠标键盘常用的事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>常用的事件</title>
<style type="text/css">
#box{
width: 200px;
height: 200px;
border: 1px solid red;
}
</style>
</head>
<body>
<div id='box'>点击触发变色，移入移出触发提醒，键盘按下抬起触发提醒</div>
<form action="" id="form">
客户名：<input type="text" name="username">
<select name='sel'>
<option value="小张">小张</option>
<option value="小李">小李</option>
<option value="小王">小王</option>
</select>
<input type="submit" name="sub" value="完事了，走人">
</form>
<script type="text/javascript">
var oDiv=document.getElementById('box');
//绑定鼠标单击事件
var flag=1;
oDiv.onclick=function(){
if(flag==1){
//改变背景颜色
oDiv.style.background='red';
flag=0
}else{
oDiv.style.background='white';
flag=1;
}
}
//鼠标事件
//绑定鼠标移入事件
oDiv.onmouseover=function(){
console.log('我进来了');
}
//绑定鼠标移出事件
oDiv.onmouseout=function(){
console.log('我出来了');
}
//绑定鼠标移动事件
oDiv.onmousemove=function(){
console.log('我移动了');
}
//键盘事件
//键盘按下事件
window.onkeydown=function(){
console.log('按下键盘了');
}
//键盘抬起事件
window.onkeyup=function(){
console.log('抬起键盘了');
}
//表单事件
var Form=document.getElementById('form');
//获取焦点
Form.username.onfocus=function(){
console.log('你得到我了');
}
//失去焦点
Form.username.onblur=function(){
console.log('掏完钱再走');
}
//onchange 当value值发生变化时候触发
Form.sel.onchange=function(){
console.log('选我啊');
//获取当前选中的value值,谁触发的事件，this就代表哪个元素对象
console.log(this.value);
}
//提交事件，一般绑定给form元素，当单击提交按钮时候则触发
Form.onsubmit=function(){
alert(Form.sel.value+':靓仔还没给钱');
}
</script>
</body>
</html>
五、定时器
定时器一般用来完成动画效果
定时器不会阻塞程序执行，并行执行的
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>定时器</title>
</head>
<body>
<script>
//1.单次定时器setTimeout(回调函数，等待时间值毫秒），
//有返回值，返回定时器的标符
//-----------启动一个单次定时器
var a=1
var b=setTimeout(function(){
console.log('我是单次定时器',a)
},3000)
console.log(a,'我是a');
//------------清除单次定时器
console.log(b,'我是单次定时器的标符');
clearTimeout(b);
//-----------------------------------------------------------------------------------
//2.多次定时器/循环定时器setInterval(回调函数,间隔时间毫秒)
//有返回值，返回定时器的标符
var a=1;
c=setInterval(function(){
a++;
console.log('我是多次定时器',a)
},3000)
console.log(a);
//-----------清除多次定时器
// 配合单次定时器使用 让多次定时器执行3次后清除
setTimeout(function(){
// 清除多次定时器
clearInterval(c);
},9001)
</script>
</body>
</html>
4005
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
