JavaScript基本知识点目录
1.控制样式
var box = document.getElementById(“box”);
box.style.width = “200px”;
2.变量作用域
局部变量和全局变量,其中全局变量注意不用var 声明的变量也属于全局变量
3.事件三要素
btn.onclick = function(){
//事件处理程序
}
4.display属性
display:none;隐藏不占位置
visible:none;隐藏占位置
5.函数的声明
- 1.function calc(){}
- 2.var calc = function(){}
- 3.利用Function来构造
6.变量提升
function calc(){ console.log(num); var num = 2; } 会将var num = 2;这一句中var num;提升到函数内部最顶上,即声明头的提升。
7.关于value和innerHTML
- value是针对于表单类型的,如input输入框里面设置value=5;
- innerHTML是标签元素里面的内容,如XXXX,设置span.innerHTML = “恭喜!输入正确”;
8.文字的隐藏和显示
先获取文字 var input_txt = document.getElementById("input_txt"); input_txt.onfocus = function(){ input_txt.value = ""; // 输入框获得焦点,隐藏掉提示信息 } input_txt.onblur = function(){ if(input_txt == ""){ input_txt = "我是提示信息"; // 输入框没有内容改变,则提示信息恢复显示 } }
9.表单自动获得焦点函数
txt.focus();
onfocus是事件,focus()是函数
10.鼠标经过选择表单
txt.select();
11.getElementsByTagName()
这里主要注意tag出来是一个数组,所以要用[0],[1],[2]…等等来遍历。
12.表单元素之checked
for(var i=0; i小于inputs.length; i++){ inputs[i].checked = true; } 其中,checked是表单元素的checked属性,表示被选中
13.三个循环
- 1.for()
- 2.while(){}
- 3.do{}while()
14.switch()语句
注意,要有break;
15.下拉菜单
- onchange事件
春意绵绵 夏日炎炎 秋风瑟瑟 冬雪皑皑
- selc.onchange = function(){}
16.数组常用操作
- 1.尾部追加push()
- 2.头部添加unshift()
- 3.尾部删除pop()
- 4.头部删除shift()
- 5.连接两个数组concat(),返回被连接的一个数组副本,不改变原数组
- 6.数组转化为字符串join()
var arr = ["aaa","bbb","ccc"]; console.log(arr.join("-")); // aa-bb-cc console.log(arr); // 还是原数组,本身没变
- 7.把字符串转化为数组split()
var str = "aa-bb-cc"; console.log(str.spilt("-")); // 输出["aa","bb","c"],注意split的参数要和str的分隔符一致
17.字符串常用操作
- 1.返回前面起第一个字符的位置indexOf(“字符”)
var txt = "abcdef"; alert(txt.indexOf("c")); // 输出2 // 如果找不到则返回-1
- 2.返回后面起第一个字符的位置lastIndexOf(“字符”)
var txt = "abcdef"; var txt1 = "abcdefce"; alert(txt.lastIndexOf("c")); // 输出2 alert(txt1.lastIndexOf("c")); // 输出6 // 虽然是从后面开始数,但是下表标还是从前开始算起
- 3.连接字符串concat()
- 4.截取字符串
- slice(“起始位置”,[结束位置]);
var txt = "my name is tom"; console.log(txt.slice(1)); // y name is tom console.log(txt.slice(1,5)); // y na 到5就截止了,取不到 console.log(txt.slice(-2)); // 倒着数
- substr(“起始位置”,[取的个数]);
console.log(txt.substr(3)); // name is tom console.log(txt.substr(3,6)); // name i
18.height:auto和height:100%区别
auto和100%的参照对象不同 auto: 根据盒子自身内容来定义大小 100%: 根据父亲的高度来定义大小 例子: .father { width: 200px; height: 200px; border: 1px solid #ccc; } .son { height: auto; // 粉色为字的高度 height: 100%; // 粉色为父盒子的高度 background-color: pink; }你好