基本类型
变量的基本类型有Number,String,Boolean,Undefined,Null。
var a = 1 ;
var b = "1" ;
var c = false ;
var d;
var e = null;
在Java中,当一个变量未被初始化的时候,Java中是null或者基本数据类型的默认值。
在JavaScript中,当一个变量未被初始化的时候,它的值为undefined。
引用类型
var student = { id: 11 , name: "xiaoxuan" , age: 12 } ;
var student1 = { hobby: [ "篮球" , "足球" ] , name: "xiaoming" , age: 12 } ;
数组类型
var a= [ 1 , 2 , 3 , 4 ] ;
var students = [
{ id: 1 , name: "张三" , age: 18 } ,
{ id: 2 , name: "李四" , age: 18 } ,
{ id: 3 , name: "王五" , age: 19 }
] ;
document. write ( students[ 0 ] . id) ;
document. write ( students[ 0 ] . name) ;
document. write ( students[ 0 ] . age) ;
运算符
逻辑运算
关系运算
=== 既比较类容,又比较类型
== 只比较内容,不比较类型。只要内容相同,"1"和 1 是true
单目运算
双目运算符
三目运算符
var kk= 100 ;
document. write ( kk> 100 ? true : false ) ;
条件分支结构
var a= 1 ;
var b= 1 ;
if ( a== b) {
document. write ( "相等" ) ;
} else {
document. write ( "不相等" ) ;
}
null,undefined代表false,非null,非undefined代表真
0代表false,非0代表真。"0"也是真。"",空字符串为假。
switch
var a= 2 ;
switch ( a) {
case 1 :
document. write ( "值为1" ) ;
break ;
case 2 :
document. write ( "值为2" ) ;
break ;
case 3 :
document. write ( "值为3" ) ;
break ;
default :
document. write ( "值不是3也不是2也不是1" ) ;
}
循环结构
for循环
var a= 0 ;
for ( var i= 1 ; i<= 100 ; i++ ) {
a+= i;
}
document. write ( a) ;
while循环
var a= 0 ;
var i= 1 ;
while ( i<= 100 ) {
a+= i;
i++ ;
}
document. write ( a) ;
do while 循环
var a= 0 ;
var i= 1 ;
do {
a+= i;
i++ ;
} while ( i<= 100 ) ;
document. write ( a) ;
break:结束循环
continue:结束本次循环
函数
函数定义:用function关键字来声明,后面是方法名字,参数列表里不写var。整个方法不写返回值类型。
function add ( a, b) {
return a+ b;
}
var a = 10 ;
var b = 11 ;
var c = add ( a, b) ;
document. write ( c) ;
如果你写了返回值,那么有返回值,如果没写return,就没有返回值。
常见的弹窗函数
alert("xxx"):只能点击确定按钮的弹窗,没有返回值。如果用一个变量去接受返回值,也只会得到undefined。
comfirm("xxx"):可以点击确定或者取消的弹窗。它的返回值是boolean,点击的是确定时,返回true,点击的是取消或者是右上角的”X”关闭,都返回false。
事件
事件名称 描述 onchange HTML 元素内容改变,焦点发生改变 onclick 点击HTML元素事件 onmouseover 鼠标移入HTML元素中 onmousemove 移出HTML元素 onkeyup 按下并松开键盘 onkeydown 按下键盘 onload 页面加载完成之后在运行。具体用法:window.onload = function(){执行的内容} onsubmit 表单提交 onblur 失去焦点 onfocus 得到焦点
onsubmit:
< form action= "js05.html" onsubmit= "return result()" >
用户名: < input type= "text" name = "username" >
< input type= "submit" value= "提交" >
< / form>
< script>
function result ( ) {
return confirm ( "确定吗?" )
}
< / script>
正则表达式
var re = /\w+/ ;
修饰符 描述 i 执行对大小写不敏感的匹配。var a = /[abc]/i; ignore case g 执行全局匹配(查找所有匹配而非在找到第一个匹配后停止)。var a = /[abc]/g m 执行多行匹配。
表达式 描述 [abc] 查找方括号之间的任何字符。 [^abc] 查找任何不在方括号之间的字符。 [0-9] 查找任何从 0 至 9 的数字。 [a-z] 查找任何从小写 a 到小写 z 的字符。 [A-Z] 查找任何从大写 A 到大写 Z 的字符。 [A-z] 查找任何从大写 A 到小写 z 的字符。 (red|blue|green) 查找任何指定的选项。var a = /(aa|bb|cc)123/;
正则表达式的方法
方法 描述 exec 检索字符串中指定的值。返回找到的值,并确定其位置。如果没有发现匹配,则返回 null。 test 检索字符串中指定的值。返回 true 或 false。
var a = / ( aa|| bb|| cc) qwer/ ;
a. exec ( "dddddaaqwerddsvdf" ) ;
[ "aaqwer" , "aa" , index: 5 , input: "dddddaaqwerddsvdf" , groups: undefined]
var a = / ( aa|| bb|| cc) qwer/ ;
a. test ( "dddddaaqwerddsvdf" ) ;
true
String方法支持正则表达式
方法 描述 search 检索与正则表达式相匹配的值。 match 找到一个或多个正则表达式的匹配。 replace 替换与正则表达式匹配的子串。replace(,) split 把字符串分割为字符串数组。
var a = "aaaaaaaaadddddvccccccc" ;
a. search ( / ad/ ) ;
8
a. match ( / ad/ ) ;
[ "ad" , index: 8 , input: "aaaaaaaaaddddadvccccccc" , groups: undefined]
DOM
JavaScript
JavaScript 能够改变页面中的所有 HTML 元素。 JavaScript 能够改变页面中的所有 HTML 属性。 JavaScript 能够改变页面中的所有 CSS 样式。 JavaScript 能够对页面中的所有事件做出反应。
查找HTML元素
通过id:document.getElementById("id属性值");
通过元素:getElementsByTagName("合法的元素名");
通过类名:getElementsByClassName("class属性的值")
改变HTML
document.write() 可用于直接向 HTML 输出流写内容
改变HTML内容:使用 innerHTML 属性:document.getElementById("p1").innerHTML="abcd";
innerHTML:指的是标签里面包含的所有的内容。如果innerHTML="";则该标签里面的所有的标签和内容全部清空。
innerText:指的是标签里面包含的所有的文本内容。只有文本。
改变HTML属性:document.getElementById(id).attribute=新属性值
将attribute替换成真实的属性名:document.getElementById("image").src="2.jpg";
对象.style.property=新样式
将property替换成真实的css属性名:document.getElementById("p2").style.color="blue";
DOM事件
点击事件
第一种
< button type= "button" onclick= "function()" >
< button type= "button" onclick= "function(this)" >
第二种
document. getElementById ( "myBtn" ) . onclick= function ( ) { displayDate ( ) } ;
第三种
document. getElementById ( "myBtn" ) . addEventListener ( "click" , displayDate) ;
addEventListener() 方法用于向指定元素添加事件句柄。
addEventListener() 方法添加的事件句柄不会覆盖已存在的事件句柄
你可以向一个元素添加多个事件句柄。
你可以向同个元素添加多个同类型的事件句柄,如:两个 "click" 事件
你可以向任何 DOM 对象添加事件监听,不仅仅是 HTML 元素。如: window 对象。
addEventListener() 方法可以更简单的控制事件(冒泡与捕获)。
可以使用 removeEventListener() 方法来移除事件的监听。
element. addEventListener ( event, function, useCapture) ;
参数名 描述 event 事件的类型 (如 “click” 或 “mousedown”) function 事件触发后调用的函数 useCapture 用于描述事件是冒泡还是捕获。该参数是可选的
在 *冒泡 *中,内部元素的事件会先被触发,然后再触发外部元素,即:p 元素的点击事件先触发,然后会触发 div 元素的点击事件。
在 *捕获 *中,外部元素的事件会先被触发,然后才会触发内部元素的事件,即:div 元素的点击事件先触发 ,然后再触发 p元素的点击事件。
默认值为 false, 即冒泡传递,当值为 true 时, 事件使用捕获传递
addEventListener() 方法允许向同个元素添加多个事件,且不会覆盖已存在的事件:
element. addEventListener ( "click" , myFunction) ;
element. addEventListener ( "click" , mySecondFunction) ;
你可以向同个元素添加不同类型的事件:
element. addEventListener ( "mouseover" , myFunction) ;
element. addEventListener ( "click" , mySecondFunction) ;
element. addEventListener ( "mouseout" , myThirdFunction) ;
removeEventListener() 方法移除由 addEventListener() 方法添加的事件句柄:
element. removeEventListener ( "mousemove" , myFunction) ;
操作元素
创建元素:document.createElement()
追加元素:appendChild()
创建文本节点:document.creatTextNode("内容");
文本节点:比如<p>这个就是文本节点</p>标签之间的内容就是文本节点。
var para= document. createElement ( "p" ) ;
var node= document. createTextNode ( "这是一个新段落。" ) ;
para. appendChild ( node) ;
删除已有的 HTML
元素使用方法:removeChild()
var parent= document. getElementById ( "div1" ) ;
var child= document. getElementById ( "p1" ) ;
parent. removeChild ( child) ;
浏览器BOM
location.href 属性返回当前页面的 URL
location.assign() 方法加载新的文档
function newDoc ( )
{
window. location. assign ( "http://www.baidu.com/" )
}
JavaScript定时器
定义定时器:
setInterval('调用函数',毫秒时间):每间隔固定毫秒值就执行一次函数
setTimeout('调用函数',毫秒时间):在固定时间之后执行一次调用函数
关闭定时器
clearInterval(定时器名称)
clearTimeout(定时器名称)
var i = 0
function display ( ) {
i++ ;
var textarea1 = document. getElementById ( "area" ) ;
textarea1. value = "xiuxiuxiu" + i;
}
var interval = window. setInterval ( display, 1000 ) ;
function stopInterval ( ) {
window. clearInterval ( interval) ;
}
var i = 0
function display ( ) {
i++ ;
var textarea1 = document. getElementById ( "area" ) ;
textarea1. value = "xiuxiuxiu" + i;
}
var timeout = window. setTimeout ( display, 2000 ) ;
function stopInterval ( ) {
window. clearTimeout ( timeout) ;
}