JS中的函数
函数: function(){}
函数声明:
function name(){
}
函数执行:
name();
函数类型的划分
一、根据调用环境的不同来划分:
1、事件函数 (绑定在事件中的函数,叫做事件函数,触发该事件时,函数才会被执行)
事件调用时,不需要加括号
2、非事件函数 非事件调用:
非事件调用时,需要加括号
二、根据有无名字划分:
有名字的函数
匿名函数
变量和函数的命名:
1. 不能以数字开头
2. 绝大部分的特殊字符都不能使用,目前只能用(_,$)
3. 建议不要用中文
4. 不能使用关键字和保留字
5. 最好都带有含义
6. js中一般使用驼峰命名(从第二个单词开始首字母大写)
函数书写的位置:
1、行间样式
eg. <input type = "button" onclick = "alert('弹出框')">
2、外部样式
eg. <script type = "text/javascript" src = "js/index.js" ></script>
3、内部样式
3-1 紧接着页面的结构书写
eg. <input type = "button" id = "btn" >
<script type = "text/javascript">
btn.onclick = function(){
alert('弹出框');
}
</script>
3-2 引用window.onload 可以写在html中的任何位置
eg. <script type = "text/javascript" >
window.onload = function(){
btn.onclick = function(){
alert('弹出框');
}
}
</script>
函数事件:
1、事件包括:
onclick、onmouseover、onmouseout
2、事件绑定:
eg. el.onclick = function(){}
注意:事件绑定是会前后覆盖的,一个元素的某个事件 只能添加一个操作
若想有多种显示结果,可以考虑用函数调用
eg. btn.onclick = function(){ // btn这一个元素的点击事件可以有多种操作
fn1(); // 弹出1(调用下面的函数)
fn2(); // 弹出2(调用下面的函数)
};
function fn1(){
alert(1);
};
function fn2(){
alert(2);
};
属性操第一种操作:(通过.的操作,此处的 . = "的" )
一、读操作
eg. console.log(div.id);
console.log(div.className);
console.log(div.innerHTML);
console.log(text.value);
console.log(select.value);
注意问题:
1. class不叫class,叫作className
2. 要获取元素的内容的话,可以使用innerHTML
- innerHTML代表元素的开始标签和闭合标签之间的所有内容(如:包含在元素中的标签,也属于innerHTML)
- 获取textarea 既可以用innerHTML 也可以用value
- 获取select 选中的值 用value
3. style 获取元素的行间样式
- cssText 行间所写的所有样式
- 具体的样式名
4. js中不能出现"-",去掉"-"之后,后边的单词首字母大写
5. 注意 img 和 link 等外链内容,获取路径时,获取到的是绝对路径
二、属性的写操作
在js中 包含在一对引号之间的一串字符叫做“字符串”,引号可以是单引号‘ ’,也可以是双引号“ ”。
eg. var box = document.getElementById("box")
box.innerHTML = '百度';
box.style.cssText = "border: 2px solid #000";
box.style.border = "2px solid #000";
注意问题:
1. 直接设置innerHTML,会直接替换掉之前的所有内容
2. 直接设置cssText,会直接替换掉之前的所有内容
3. 一般不要修改id名
属性操第二种操作:(通过[‘属性名’]操作,此处的 [] = "的" )
eg. console.log(box['innerHTML'])
box['innerHTML'] = box.innerHTML
var s = "innerHTML"; //属性名可以是个变量
box[s] = "马上就要秋天了" === box.innerHTML="马上就要秋天了"