JavaScript笔记

js 结合方式一

<script type="text/javascript"> ------------------弹出提示框

alert("hello world!");

</script>

js 结合方式二

<script type="text/javascript" src="hello.js" ></script> ------------------代码卸载另一个文件中

JS 语法 一

<script type="text/javascript">

//1 声明变量, 变量的类型是随时可以变化的

var a = 1;

a = "haha";

a = false;

//2 注释 注释写法与java一模一样.没有文档注释. // /**/

//3 声明变量

var b=2,c=3;

//4 js中每行语句的结束使用 ";" 号来表示. 也可以不使用";".(推荐都加上)

//5 声明变量时,也可以不加var => 加var声明,作用范围在代码块中.不加var声明,作用范围为全局

//6 字母大小写.语法区分大小写

function fun1(){

var d = "hello"

e = "heihei";

}

fun1();

alert(e);//

</script>

JS 语句

//java中的语句

//1 判断

// if else/ switch

//2 循环

// for / while do / do while

//js中的语句(语法种类等都与java的一模一样)

//1 判断

// if else/ switch

//2 循环

// for / while do / do while

//js中的运算符

// 使用+法时, 如果相加的值包含字符串,会自动转换为字符串类型

var a = "1"+1;

alert(a);

//其他数学运算符中,字符串会自动转换为数字

var b = "2"-1;

三元运算符.

var a = 100;

var b =20;

alert(a>b?"a厉害":"b厉害");

获取 window 对象并使用

//1 如何获得window对象

//window对象 由浏览器创建.当浏览器加载页面时,浏览器会立刻自动创建window对象.

// 如果要获得,直接使用即可.

//alert(window); // 就可以拿到

//2 window中的方法

// alert

// confirm 弹出确认框

// prompt 弹出一个输入框 返回值为str. 点击取消返回null.

//---------------------------------

var b = confirm("您确定要删除吗?");

alert(b);

//---------------------------------

//var str = prompt("请输入一个整数!","0");

//alert(typeof str);

Function 对象的功能

//1 对象的功能

//Function对象=>特殊=>相当于java中的方法

/* function fun1(){

alert("hello");

}

alert(fun1.toString());

alert(fun1);

fun1(); */

//2 对象的创建

方法调用

function fun1(a,b){

alert(a+b);

}

//调用

fun1(1,2);//3

fun1(1,2,3,4);//3

fun1();//NaN

//结论: js中的函数在调用时,只看函数名称.不看参数

JS 三大包装对象

js中5个原始类型,有3个包装类. => Number String Boolean

//java中 有自动拆装箱机制来方便基本数据类型的转换,已经包装方法的调用.

//js中 有伪对象的概念.原始类型可以直接调用 对应包装类型的属性或函数.

var str = new String("hello");

//2 属性

/* alert(str.length);

alert("world".length); */

var str2 = new String("hello world");

//charAt

alert(str2.charAt(1));

//indexof

alert(str2.indexOf("e", 0));

//lastindexof

//substring

alert(str2.substring(0, 5));

//toLowerCase/toUpperCase

var str = new String("abc");

alert(str instanceof String);//true

alert("abc" instanceof String);//false

// encodeURI/decodeURI 可以将中文Url编码 例如: 汤姆=>%E6%B1%A4%E5%A7%86

// encodeURIComponent/decodeURIComponent 转换的范围更大,包括一些url中的字符. & : /

//username=%E6%B1%A4%E5%A7%86

var str ="http://www.baidu.com?wd=&汤?姆";

var encodeStr = encodeURIComponent(str);

alert(encodeStr);

// parseInt 转换成整数 => 从左到右依次转换.转换到遇到不能转换的字符为止

// parseFloat 转换成浮点数

var str = "123";

var num1 = parseInt(str);

var num2 = +str;

var num3 = new Number(str);

//alert(typeof num);

//------------------------------------------

var str2 = "123a";

//alert(+str2);

//alert(parseInt(str2));//123

//-------------------------------------------

var str3 = "a123";

//alert(parseInt(str3));//NaN

//-------------------------------------------

var str4= "3.14";

//alert(parseFloat(str4));//3.14

//alert(parseInt(str4));//3

//isNaN() 判断一个值是否是NaN

var num = NaN;

/* if(isNaN(num)){

alert("是NaN");

}else{

alert("不是NaN");

} */

//-------------------------------------------------

//eval() 解析运行 方法

alert(eval("1+1"));//2

alert(eval("new String('abc')"));// abc

Math 对象

//math 数学工具类

/方法

// random 随机数

var num = Math.random();

//alert(num);

// round 四舍五入

var num2 = Math.round(3.54);

//alert(num2);

var num3 = Math.pow(2, 3);

//alert(num3);8

// min/max 返回最小/最大数

var num4 = Math.min(1,2,3);

alert(num4);

var num5 = Math.max(1,2,3);

alert(num5);

//数组

//对象的创建

var arr1 = [1,2,3,4];

var arr2 = new Array(1,2,3,4);

var arr3 = new Array(4);// 如果调用数组构造,只传递一个参数,并且参数的值是数字.那么该值将作为数组初始化长度

//对象的属性

//alert(arr1.length);//4

//alert(arr2.length);//4

//alert(arr3.length);//4

//进阶 js中的array没什么原则

//1 数组中元素的类型可以任意

//2 数组的长度是可以随时变化的.

var arr6 = ["haha",3.14,true,null,undefined,new Object()];

alert(arr6.length);

arr6[10] = "itcast";

alert(arr6[10]);//itcast

alert(arr6.length);// 11

alert(arr6[9]);//undefined

Date对象

//1 创建

var date1 = new Date();

var date2 = new Date(12983798123121);

//2 方法

//1.new Date() 获取当前时间

//2.getFullYear() 获取年份

alert(date2.getFullYear());

//3.getMonth() 获取月份注意 1月份结果为0

alert(date2.getMonth());

//4.getHours() 小时

alert(date2.getHours());

//5.getDate() 日期

alert(date2.getDate());

//6.getMinutes() 分钟

alert(date2.getMinutes());

//7.getSeconds() 获取秒

alert(date2.getSeconds());

//8.getTime() 获取毫秒值.

alert(date2.getTime());

//9.toLocaleString() 获取本地的时间格式字符串.

alert(date2.toLocaleString());

正则表达式

/表单校验时会用到正则

//1 创建

//参数1: 正则表达式

//参数2: 匹配模式. g: 全局 i: 忽略大小写

var reg1 = new RegExp("e","gi");

var reg2 = /z/g;

//2 方法

// test 方法 => 校验 字符串是否能与正则表达式匹配

//alert(reg2.test("hello"));//true

//------------------------------------------------------------------------

// String 与正则结合的 4个方法

var str = "hello world";

//split 切割

alert(str.split(/o/g));

//replace 替换

alert(str.replace(/l/g, "a"));

//match 匹配并获得 => 找不到就返回null

alert(str.match(/or/g));//or

//search 查找索引

alert(str.search(/e/g));//1

Window对象

// close方法 => 关闭当前窗口

function close2(){

window.close();

}

// open方法 => 打开一个新的窗口

//参数1: 打开的url

//参数2: 窗口名称=> name属性

//参数3: 窗口的特征=> 长宽(其他属性未必好使)...

//参数4: 是否将新窗口的地址加入到浏览器历史记录中

// 返回值: 返回一个window对象. 新打开的窗口的window对象

function open2(){

window.open("../猜数字.html", "",'width=100,height=100');

}

<input type="button" onclick="close2();" value="关闭当前窗口" />

<input type="button" onclick="open2();" value="打开猜数字窗口" />

定时器

//window对象

//定时器方法

// setInterval 设置定时器

// clearInterval 清除定时器

//-----------------------------------------------

//参数1: 可以是一段string, 内容是js代码

//参数2: 毫秒单位的时间

//返回值: 当前开启的定时器id

// 功能: 每个参数2毫秒,执行参数1代码.

var id = window.setInterval("alert('abc');", 2000);

//------------------------------------------------

function stop(){

window.clearInterval(id);

}

<input type="button" onclick="stop();" value="停止" />

function fun1(){

alert("fun1!!!!");

}

//参数1: 也可以接受一个函数类型的对象

// 如下两行代码,执行效果是一样的

window.setInterval(fun1, 2000)

//window.setInterval("fun1()", 2000)

History 对象

<input type="button" onclick="window.history.back()" value="后退" />

<input type="button" onclick="window.history.go(-1)" value="后退" />

location 对象

<input type="button" onclick="window.location.href='01-Window对象.html'" value="01-Window对象.html" />

<input type="button" onclick="window.location.assign('01-Window对象.html')" value="01-Window对象.html" />

<input type="button" onclick="window.location.reload()" value="刷新" />

Dom

//dom的所有对象会在页面打开时,由浏览器负责创建.

// 浏览器把 dom的定点对象 Document对象的引用交给了 window对象

//element 的获得 (重点)

var div1 = document.getElementsByTagName("div")[0]

var div2 = document.getElementById("one");

var div3 = document.getElementsByClassName("two")[0];

var div4 = document.getElementsByName("three")[0];

//演示 给id为one的 按钮 添加事件的方法

//方式1:

/* //1 获得要添加的元素对象

var one = document.getElementById("one");

//2 添加事件函数属性

one.onclick=function(){

alert("haha");

} */

//方式2:

// <input type="button" value="点我" id="one" onclick="alert("heihei")" />

dom中的事件

<body>

<input type="text" id="one" />

<select id="two" >

<option>大专</option>

<option>本科</option>

</select>

</body>

<script type="text/javascript">

var one = document.getElementById("one");

one.onchange=function(){

alert("被改变了!");

}

var two = document.getElementById("two");

two.onchange=function(){

alert("被改变了!");

}

</script>

var one = document.getElementById("one");

one.onkeydown=function(event){

//1 获得摁下的按键

var key = event.keyCode;

//2 判断按键按下的是否是回车

if(key==13){

//是=>表单提交

alert("表单被提交了");

}

}

鼠标监听

<script type="text/javascript">

/* onmousedown 鼠标按钮被按下。 4 1 9 Yes

onmouseup 鼠标按键被松开。

onmouseout 鼠标从某元素移开。 4 1 9 Yes

onmouseover 鼠标移到某元素之上。 3 1 9 Yes

onmousemove 鼠标被移动。 3 1 9 Yes

*/

var one = document.getElementById("one");

/* one.onmousedown =function(event){

alert(event.button);

}

one.onmouseout =function(event){

alert("onmouseout");

}

one.onmouseover =function(event){

alert("onmouseover");

} */

one.onmousemove =function(event){

alert(event.clientX+"==>"+event.clientY);

}

表单提交事件

<body >

<form action="#" id="one" >

用户名:<input type="text" /><br>

<input type="submit" value="提交" />

</form>

</body>

<script type="text/javascript">

//onsubmit 当表单提交时触发

//作用: 表单验证

//onsubmit="return fun();"

var one = document.getElementById("one");

one.onsubmit = function (event){

//校验

//校验通过

alert("校验不通过!");

//校验不通过 => 拦截表单提交

//return false;

// 阻止默认事件的发生

event.preventDefault();

}

</script>

//阻断事件的继续传播

<body >

<div id="one">

<div id="two">

</div>

</div>

</body>

<script type="text/javascript">

//event.stopPropagation();

//组织事件的继续传播

document.getElementById("two").onclick=function (event){

alert("two");

// event.stopPropagation();

}

document.getElementById("one").onclick=function (){

alert("one");

}

</script>

重要例子

<style type="text/css">

div {

border:#0099FF 1px solid;

height:60px;

width:120px;

margin:20px 0px 20px 20px;

padding:10px 0px 0px 20px;

}

#div_1{

background-color:#00FFFF;

}

#div_2{

background-color:#FF3399;

}

#div_3{

background-color:#0000FF;

}

#div_4{

background-color:#FFFF66;

}

</style>

</head>

<body>

<div id="div_1">

</div>

<div id="div_2">

div区域2

</div>

<div id="div_3">

div区域3

</div>

<div id="div_4">

div区域4

</div>

<hr />

<input type="button" value="创建并添加节点" onclick="addNode()" />

<input type="button" value="删除节点" onclick="deleteNode()" />

<input type="button" value="替换节点" onclick="updateNode()" />

<input type="button" value="克隆节点" onclick="copyNode()" />

</body>

<script type="text/javascript">

//创建并添加节点

function addNode(){

// 1 创建A标签对象 <a></a>

var a = document.createElement("a");

// 2 为创建的a标签增加属性

a.setAttribute("href", "http://www.itcast.cn");

// 3 为a标签添加标签体

a.innerHTML = "点我";

// 4 找到div标签

var div_1 = document.getElementById("div_1");

// 5 添加

div_1.appendChild(a);

}

//删除节点

function deleteNode(){

//1 获得要删除的div

var div_2 = document.getElementById("div_2");

//2 获得div的父元素

var parent = div_2.parentNode;

//3 通过爹删除孩子

parent.removeChild(div_2);

}

//替换节点

function updateNode(){

//1 获得被替换的div

var div_3 = document.getElementById("div_3");

//2 创建img元素对象<img />

var img = document.createElement("img");

//3 为img添加属性

img.setAttribute("src", "mn.jpg");

img.setAttribute("width", "300");

//4 找到爹

var parent = div_3.parentNode;

//5 替换

parent.replaceChild(img, div_3);

}

//克隆节点

function copyNode(){

// 1.获得div4

var div_4 = document.getElementById("div_4");

// 2.调用克隆方法克隆

var div_copy = div_4.cloneNode(true);

// 3.获得父亲\

var parent = div_4.parentNode;

// 4.添加到最后一个div之前

//parent.appendChild(div_copy);

parent.insertBefore(div_copy, div_4);

}

</script>

//表单提交的例子

<script type="text/javascript">

//如果校验不符合规则,拦截表单的提交

//1 用户名不能为空,并且长度在6到10位之间.只能以英文字母开头. 用户名中只能使用"_"符号.

function fun1(){

var flag = true;

if(!checkEmail()){

flag = false;

}

if(!checkName()){

flag = false;

}

alert(flag);

return flag;

}

//验证邮箱

function checkEmail(){

//1 获得用户输入的邮箱

var email = document.form1.email.value;

//2 定义正则

var reg = /^([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$/g;

//3 校验

if(!reg.test(email)){

//失败=>提示,并返回false

addError(document.form1.email,"邮箱不符合规则!");

return false;//拦截表单提交

}else{

removeError(document.form1.email);

return true;

}

}

//验证用户名

function checkName(){

//1 获得文本输入框中的内容

//var nameInput= document.getElementsByName("name")[0];

var nameInput = document.form1.name;

//var name = nameInput.getAttribute("value");

var name = nameInput.value; //DHTML属性

//2 定义正则表达式对象

var reg = /^[a-zA-Z][a-zA-Z0-9_]{5,9}$/g;

//3 校验

if(!reg.test(name)){

//校验失败=> 提示用户.

//alert("用户需要6到10位,不能以数字开头!");

addError(nameInput,"用户需要6到10位,不能以数字开头!");

return false;//拦截表单提交

}else{

//验证成功=>清除错误信息

removeError(nameInput);

return true;

}

}

//添加错误

//参数1 : 标识往那里添加

//参数2 : 错误信息是什么

function addError(where,what){

where.nextSibling.innerHTML=what;

}

//清除错误

function removeError(where){

where.nextSibling.innerHTML="";

}

</script>

</head>

<body>

<form action="" name="form1" onsubmit="return fun1();" >

<table border="1" width="30%" >

<tr>

<th colspan="2" align="center" >

用户注册

</th>

</tr>

<tr>

<td>用户名:</td>

<td><input type="text" name="name" onblur="checkName();" /><font color="red" ></font></td>

</tr>

<tr>

<td>邮箱:</td>

<td><input type="text" name="email" /><font color="red" ></font></td>

</tr>

<tr>

<td colspan="2" align="center" >

<input type="submit" value="提交" />

</td>

</tr>

</table>

</form>

</body>

二级联动

var json = {"河北省":["石家庄","廊坊","沧州"],

"山西省":["太原","大同","运城"],

"黑龙江省":["哈尔滨","齐齐哈尔","佳木斯"]};

// 初始化省的下拉选

function fun1(){

//1 获得省的select对象

var province = document.getElementById("province");

//2 遍历json的所有键

for(var key in json){

// 创建一个option

var option = document.createElement("option");

option.innerHTML = key; // <option>河北省</option>

// 将option添加到select中

province.appendChild(option);

}

}

function fun2(){

//1 获得市的select对象

var province = document.getElementById("province");

var city = document.getElementById("city");

//2 清空市级下拉选的数据

city.length =1;

//3 获得用户选择的省

if(!province.selectedIndex){

//用户选择的是提示选项=>什么也不做

return;

}

var options = province.options;

var pName = options[province.selectedIndex].innerHTML;

//4 从json中根据省获得 省下的市数据

var cities = json[pName];

//5 遍历市级的数组

for(var i = 0 ; i<cities.length;i++){

var cityName = cities[i];

//创建市的option

var option = document.createElement("option");

option.innerHTML = cityName;

// 将option添加到select中

city.appendChild(option);

}

}

</script>

</head>

<body onload="fun1();" >

<select id="province" onchange="fun2();" >

<option>---请选择省---</option>

</select>

<select id="city" >

<option>---请选择市---</option>

</select>

</body>