JavaScript知识点总结

Posted lyhhary

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了JavaScript知识点总结相关的知识,希望对你有一定的参考价值。

1.javascript:一门客户端脚本语言

2.JavaScript的组成:1、ECMAScript:基本的语法和对象

                                 2、BOM:浏览器模型,与浏览器进行交互
                                 3、DOM:文档模型,与网页内容进行交互

变量

  • 定义:
var a = 123;
var b = ‘abc‘;
//连写
var a = 123,b=456;

注意:js为弱类型的解释型脚本语言,使用var关键字定义一个变量,数据类型自动判断。

注意:每句代码后可以不写分号,换行即可,习惯上最好加上,增强可读性。

  • 变量类型:

    • number:数字类型
    • string:字符串类型
    • boolean:布尔类型
    • undefined:未定义类型
    • null:空类型
    • object:复合类型,一般用来接收标签。
  • 命名规则:

    • 区分大小写;
    • 第一个字符必须是字母、下划线(_)或者美元符号($),不能输数字;
    • 其他字符可以是字母、下划线、美元符或数字;
    • 不能使用js的关键字或保留字。
    • 多个单词变量的命名使用小驼峰或单词加下划线。
    • 对于object对象一般使用匈牙利命名风格。
//小驼峰命名法
var getMyClass = "abc";
//字母加下划线
var get_my_name = "abc";
//匈牙利命名风格
object: oDiv = document.getElementById(‘div1‘);
string: sMyName = "abc"  //根据数据类型的第一个字母为开头的小驼峰命名法。

获取属性

<script>
window.onload = function(){
    //获取标签,通过id
    var oDiv = document.getElementById(‘div‘);
    //获取标签,通过class属性
    var oDiv = document.getElementByClassName(‘div‘);
    // 获取标签,写法和css一样
    var oDiv = document.querySlector("#id");//如果有多个,获取到第一个
    var oDiv = document.querySlectorAll()//获取所有,得到选择集
    // 读取属性值
    var name =oDiv.className;
    var oId = oDiv.id;
    // 写(设置)属性
    oDiv.style.color = ‘red‘;
    oDiv.style.fontSize = "20px";
    // 写属性值第二种
    var cor = oDiv.style.color;
    var oDiv.style[cor] = "red";//自己命名的属性需要通过[]方式
    var oDiv.style.cor = ""; //这种是无效的
    }
    </script>

注意1:代码需要写在window.onload =function(){};中,使得html和css加载完毕后才执行,防止报错。

注意2:如果style中的属性不是行内式,而是由css设置的,那么js第一次是获取不到的,但可以直接设置。

注意3:js代码需要用script标签包裹,可以放置在html代码的任何位置,但css嵌入式只能放在头部。

书写方法:

  1. 一般行内的属性写法一样;
  2. “class” 属性写成 “className”;
  3. “style” 属性里面的属性,有横杠的改成驼峰式,如:“font-size”,改成”style.fontSize”;

获取标签包裹的内容

    //读取
    var txt = oDiv.innerhtml;
    //写入
    oDiv.innerHTML = ‘<a href="">哈哈哈哈哈<a/>‘;

说明:写入的标签会被解析,从而可以动态添加标签;标签的属性可以在css中写,有效。

运算符

  1. 算术运算符: +(加)、 -(减)、 *(乘)、 /(除)、 %(求余);;
  2. 赋值运算符:=、 +=、 -=、 *=、 /=、 %=;
  3. 条件运算符:= =、===、>、>=、<、<=、!=、&&(而且)、||(或者)、!(否);
  4. 自加、自减:i++, i--;

==和===的区别:==不会判断数据的类型,直接比较值;=== 会先判断数据的类型,不是同一种类型则不相等。

if(3=="3"){
    alert("true")//判断为真
}
if(3==="3"){
    alert("true")//判断为假
}
    

条件语句

  • if; if else; if else if else; 和java的写法一样;
  • switch:选择语句,和java写法一样。
var a = 2;
switch (a){
    case 1:
        alert(‘1‘);
        break;
    case 2:
        alert(‘2‘);
        break;
    default:
        alert("else");

数组和操作数组

  • 定义方法:
//实例创建,和java相似
var aList = new Array(1,2,3);

//直接创建,内部数据可以是不同的类型;
var aList2 = [1,2,3,‘asd‘,true,null];

// 多维数组
var aList = [[1,2,3],[‘a‘,‘b‘,‘c‘]];
  • 操作方法:
var aList = [1,2,3,4];
var n1 = aList.length;  //获取数组的长度,n1=4;
var n2 = aList[0]; // 下标获取数据,n2 = 1;
var n3 = (aList.join(‘-‘)) // 数组成员通过分隔符拼接成字符串,n3="1-2-3-4";
var n4 = aList.push(5); //数组后面追加成员
var n5 = aList.pop();  //数组后删除成员
var n6 = aList.unshift(5); //数组前面增加成员
var n7 = aList.shift();; //数组前面面删除成员
var n8 = aList.reverse();//数组翻转
var n9 = aList.indexOf(1);//返回元素1在数组中第一次出现的索引,没有则返回-1;
var n10 = aList.splice(2,1,7,8,9);//从第2个元素开始,删除1个元素,然后在此位置增加‘7,8,9‘三个元素

注意点:

aList.join("") // 快速拼接成字符串;

aList.push(5,6,9); // 一次性添加多个成员
aList.pop(2);  // 2是没有作用的,里面的任何参数都不会起作用,但不会报错;

aList.unshift(5,8,9);// 在前面一次性增加多个数据 
aList.shift(5); //没有效果,这里没有参数,但不会报错。

aList.splice(2); //一个参数时,删除角标2后面的所有元素,包括角标2的元素;
aList.splice(2,1);  //两个参数代表从角标2后(包括角标)删除1个元素;

字符串处理

  • 相关方法:
var sName = "abcdfg";
var iNmr = "123456";
var s1 = sName + "dfgh"; //字符串合并操作:“ + ”
var sx = sName[0];//获取字符串角标为0的字符
var s2 = parseInt(iNmr) //将数字字符串转化为整数,得到新的数据
var s3 = parseFloat(iNmr) //将数字字符串转化为小数
var s4 = sName.split() //把一个字符串分隔成字符串组成的数组
var s5 = sName.charAt(3) //获取字符串中角标为3的字符
var s6 = sName.indexOf("g") //查找字符串是否含有某字符,如果没有就返回-1,有返回第一次出现的角标
var s7 = sName.substring() //截取字符串 
var s8 = sName.toUpperCase() // 字符串转大写
var s9 = sName.toLowerCase() // 字符串转小写
  • 方法扩展:
var sName = "abcdfg";

var s4 = sName.split() //参数为空时返回数组["abcdfg"]
var s4 = sName.split("") //参数为空字符返回数组["a","b","c","d","f","g"];

var s3 = parseFloat("5.6") // s3=5.59999999995,该方法转换数据时存在一定的精度问题
var s3 = parseFloat("5.6")*100/100; // s3 = 5.6

var s7 = sName.substring(start,end)// start为开始的字符串下标,end为结束下标,新的字符串包含start不包含end。
var s7 = sName.substring(start,)
var s7 = sName.substring(start)  //以上两种写法可获取从start角标到最后的所有字符;
  • 重要应用:字符串翻转
var str = ‘abcdefg‘;
//先切割成数组,翻转后拼接成字符串。
var str2 = str.split(‘‘).reverse().join(‘‘);

循环

  1. for循环:和java一样的使用方式
for(var i=0;i<length;i++)
{
    ......
}
  1. while循环:
while(i<length){
    ......
    i++;
}

一个扩展应用:数组去重

var aList = [1,2,3,4,4,3,2,1,2,3,4,5,6,5,5,3,3,4,2,1];

var aList2 = [];

for(var i=0;i<aList.length;i++)
{
    if (aList2.indexOf(aList[i]) == -1) {
        aList2.push(aList[i]);
    }
}//对数组进行遍历,如果数据在新的数组中不存在就加入。

数据类型转换

  • 直接转换
alert(‘12‘+7); //将7转换成"7",弹出127
alert(parseInt(‘1‘) + 7 );  //转换后,弹出8 
alert(parseInt(5.6));  // 去掉小数部分,不是四舍五入,弹出5
alert(‘5.6‘+2.3);  // 2.3转换成"2.3",弹出5.62.3
alert(0.1+0.2); //弹出 0.3000000000000004,精度有问题
alert((0.1*100+0.2*100)/100); //弹出0.3,需要计算处理一下
  • 隐式转换
"4" == 4; //判断为真,==将"4"转换成4;

"3"-2;  //结果1;

var s1 = parseInt(‘123abc‘) //结果为123
alert( parseInt(‘abc123‘) );  // 弹出NaN
//说明:以数字开头的字符串通过函数可以转换其中的数字为整形,如果不是开头 则转换失败

alert(isNaN(123abc)) //弹出true
//isNAN(string):判断是否是纯数字,是返回false,不是返回true

null==undefined:涉及隐式转换,null和undefind都被当做false处理,判断为真
null===undefined:判断为flase,null为Object类型,undefined类型是其本身

!(null):判断为真
!(undefined):判断为真

typeof():查看数据类型
  • 程序调试方法
alert("xxxx")//输出弹窗,但是阻止程序继续运行
console.log()//在控制台输出内容
document.title == "xxxx"//覆盖网页的标题,很少使用
document.write("xxxx")//覆盖body的内容,很少使用

定时器

作用:制作动画和异步操作

var time1 = setTimeout(function,1000)  //只执行一次的定时器,第一个参数为函数,第二个参数为定时时间,单位ms 
clearTimeout(time1) //关闭只执行一次的定时器
var time2 = setInterval(function,1000) // 反复执行的定时器
clearInterval(time2) //关闭反复执行的定时器

注意:反复执行的定时器一旦开启就不会停止,相当于启动了一个线程,会一直消耗cup资源,所有很多时候需要手动关闭。

var timer1 = setInterval(func1,2000);

function funnc1(){
    console.log("hhhh");
    
    clearInterval(timer1); //关闭定时器在函数内部
}

//clearInterval(timer1);在外部是无效的

注意:关闭定时器的操作需要在定时器函数的内部执行,否则不会成功。

函数

  • 命名函数
function myalert(){
        alert(‘ok!‘);//弹出OK的窗口
    }

说明:用function定义,其他的写法和java一样。

  • 匿名函数:
// 匿名函数赋值给绑定的事件

oBtn.onclick = function (){
    alert(‘ok!‘);
    }

说明:匿名函数不能单独存在,必须用一个变量将其引用。

  • 封闭函数:

定义:一个打开网页就立即执行的函数 。

作用:当需要在原来的代码基础上增加新的函数时,如果函数名相同,新的函数会覆盖原来的函数,为了避免覆盖,将后一个函数写成封闭函数,一开始就运行。

//写法一
(function(){
......
})();

//写法二
!function(){
    .....
}()

//写法三
~function(){
    .....
}()
  • 传参和返回值:和java一样。
function myalert(a,b){
        //return a+b;
        return [a,b]
    }
    myalert(1,2);
    

说明:返回多个参数时需要使用一个数组,不可以直接写return a,b;否则报错!

说明:return关键字可以结束函数运行、阻止程序的默认行为。

 

Array数组对象
创建:
var arr = new Array(元素列表);、
var arr = new Array(长度)
var arr = [元素列表];
方法;
join();将数组中的元素,按照一定的分隔符拼接为字符串
push():向数组的末尾添加一个元素或者多个,并返回新的长度
属性:
length:长度

注意:js中的数组长度是可变的,元素类型也是可以改变的

3、Date对象
创建:
var date = new Date();

方法:
toLocaleString:本地时间格式
getTime:毫秒值
4、Math对象
5、RegExp对象
var reg = new Reg("正则表达式")
reg.test();

JavaScript BOM:

window:所有跟window相关的方法和属性 都可以省略掉window 直接使用
弹框:
警告框:alert()
提示框:pormpt()
确定:返回输入值 取消:null
确认框:
confirm()
确定:true 取消:fasle
open():打开一个新的网页
close():关闭当前网页
<button onclick="window.close()">点</button>

定时器:
setTimtout(code,mills):延时多久时间后,执行一次

var id= window.setTimeout(function () {
alert("hello java")
},3000)
setInterval():每个多少时间,执行一次

clearTimeout(定时器的id)
clearInterval(定时器id)
注意:code可以是一段代码,也可以是一个方法

location:
href:设置或者获取url
location.href = "http://www.baidu.com"
reload():刷新

history:
back() :后退
forward():前进
go():
go(-1):后退
go(1):前进

JavaScript DOM:

在每个加载到浏览器的html文档 都会对应的形成一个document树
document对象 可以访问文档中的任意元素


节点(Node)
文档节点:document
元素节点:element
属性节点:attribute
文本节点:text

注意:如果我们可以获取到节点 那么就可以动态的修改节点的属性和方法

获取节点的方式:
getElementById():通过id获取
getElementsByClassName():通过class名
getElementsByName:通过name名获取
getElementsByTagName();通过标签名获取

设置获取节点的value:
节点对象.value;
节点对象.value= 值

设置获取节点的标签体
节点对象.innerHTML
节点对象.innerHTML = 值

innerHTML和innerText
innerText只针对于文本,如果文本中有html标签 ,会原样输出
innerHTML:如果文本中有html标签 ,会解析以后输出

设置获取节点的style属性
节点对象.style.属性;
节点对象.style.属性 = 值

设置获取节点的属性
节点对象.属性;
节点对象.属性 = 值

创建节点对象

document.createElement():创建元素节点
添加元素:
appendChild()
document.createTextNode():创建文本节点
添加文本节点:
appendChild()
document.createAttribute():创建属性节点
添加属性节点:
setAttributeNode()


事件介绍:
概念:某些组件,执行某些操作以后,触发了某一段代码的执行
事件:某些操作,单击,双击,按下,移动……
事件源:组件
监听器:代码
注册监听:将事件和事件源,监听器整合在一起的过程

常见事件:
1、点击事件
单击:onclick
双击:ondblclick

事件绑定:
1、通过标签本身的相关属性设置
<button id="btn1" class="aa" onclick="add1()" value="添加元素节点">点击</button>
2、通过element对象绑定事件
document.getElementById("btn2").ondblclick = function (ev) {
add2();
}
2、焦点事件
获取焦点:onfocus
失去焦点:onblur

//失去焦点
function a() {
var elementById = document.getElementById("in");
elementById.style.background = "red";
}
//获取焦点
function b() {
var elementById = document.getElementById("in");
elementById.style.background = "black";
}

3、加载事件
onload:页面加载完成触发
window.onload = function (ev) {}

4、鼠标事件
onmousedown 鼠标按钮被按下。
onmousemove 鼠标被移动。
onmouseover 鼠标移到某元素之上。
onmouseout 鼠标从某元素移开。
onmouseup 鼠标按键被松开。

5、键盘事件
onkeydown 某个键盘按键被按下。
onkeypress 某个键盘按键被按下并松开。
onkeyup 某个键盘按键被松开。

onkeydown:键盘上的所有按键
onkeypress:无法识别系统按键(回车,箭头)

6、选择和改变
onchange:内容改变
onselect:文本被选择

7、表单事件
onsubmit :提交




































































































































以上是关于JavaScript知识点总结的主要内容,如果未能解决你的问题,请参考以下文章

JavaScript必须了解的知识点总结。

JavaScript知识点总结

记录--九个超级好用的 Javascript 技巧

容易忽略的javascript知识点的总结

JavaScript 面向对象开发知识基础总结

JavaScript函数知识点总结