JavaScript学习

Posted on | Post modified: | In | | Visitors:

Js 是边编译边执行的语言,弱类型,严格区分大小写

在HTML中引用JavaScript

  1. 用<script>在标签中间直接写JS代码

    <script> var a=10; </script>

  2. <script src="test.js">引用js文件,标签中间不能加内容

  3. 用<a href="javascript: void(0);" onclick="alert('显示提醒')">在a标签中执行JavaScript内容

比较好的是方法二,模块化,利于后期修改

JavaScript引用HTML内容

  1. 直接通过标签中的id名字

    JavaScript中内置一个对象document,表示整个HTML文档

    1
    document.getElementById("idname")

    注意只有这个的Element是单数!! ID唯一性!

  2. 通过class获取多个元素

    1
    2
    document.getElementsByClassName("classname")
    document.getElementsByClassName("classname").length//获取个数

  3. 通过class获取多个元素

    1
    2
    3
    document.getElementsByClassName("classname")
    document.getElementsByClassName("classname").length//获取个数
    document.getElementsByClassName("classname")[0]//获取其中一个元素,比如class="list",就获取第一个<li>元素

  4. 同理,通过Tag Name获取多个元素

    1
    document.getElementsByTagName("tagname")//例如li/a/等标签均可,同样可以length,[0]

  5. 同理,通过Name获取多个元素

    (标签中的name=”xxx”参数)

    1
    document.getElementsByName("name")//同样可以length,[0]

获取对象后.可以直接.xxx属性对其进行修改等操作 比如修改class(.className=”newclassname”/ .id=”newid”)

1
2
3
4
var inp = document.getElementsByClassName("inp")[0];//<input>类型
inp.onkeyup = function(){//键盘每次抬起都打印log
  console.log(this.value);
}

变量

用var声明,无初始值则默认undefined

可以通过.innerXXX修改其内容

1
2
3
4
var a = document.getElementById("idname");
a.innerHTML = "Hello<a href=\"http://baidu.com\">跳转百度</a>";
a.innerText = "Hello";
a.innerText +="hello";//添加内容而不是覆盖
1
2
3
4
5
6
7
8
9
10
11
12
13
//对变量可以进行操作检测
//点击
a.onClick = function(){alert("Hello")};//点击
//鼠标划入
a.onmouseover = function(){console.log("Hello");}//在控制台输出结果
//鼠标划出
a.onmouseout
//左键双击
a.ondbclick
//键盘-某键 能够被输入内容的元素 e.g.input
a.onkeydown
a.onkeyup
...

数据类型

  1. Number

  2. String

  3. Boolean

  4. function

    var f = function(){alert(“hello”)}

  5. undefined 值也是undefined,无任何属性(不能.xxx)

    null是正确的空值-关键字,undefined是错误空值-预先声明的全局变量

1
xxx instanceof XXX //判断类型 true/false

function

函数需要通过变量引用

1
2
3
4
5
6
7
8
9
10
11
12
//声明
function f1(var1,var2) { ... }//函数名为f1
//调用收所有传进来的参数可以用 arguments[0]读取(存在该数组中)
//**即使函数声明时没有写形参,也能进行接收**
//定义- 函数表达式
var fvar = function() { ... }//匿名函数
var fvar = function f1(){ ... }//正常函数,但是已经有变量(接收返回值)指向这个函数了,所以没必要给函数命名
//匿名函数不能单独出现,但可以作为及时函数立马执行
//及时函数可以通过() - + ~表示
(function(){alert("hello");})();
(function(){alert(1)}());
//fvar用于接收返回值-若无默认undefined

this 关键字

驱动/调用该函数的对象

1
2
box.onClick = f1;//不加括号-否则会执行
则this->box

若没有用一个变量调用,则this指向window

定义和执行

var和function都是定义,js执行时先定义后执行/赋值;函数作用域优先于外部定义域(在函数定义域内同样是先定义后执行赋值操作,但注意是边编译边执行,只有运行到function时才会声明函数作用域内的变量)

闭包

1
2
return f2;
//直接将函数return回去,子函数f2可以访问父函数的变量,所以外界接收到后也可以访问父级变量了

数组

可选逗号结尾,可以在最后多一个逗号

1
2
3
4
5
var arr = [ , , ]//认为length=2
var arr1 = new Array([]);//空数组
var arr1 = new Array(10);//只有一个值:Length0
var arr1 = new Array(1,2,3);//元素(非长度)
var arr2 = Array.of(5)//只有一个元素5(非长度)
0%