JavaScript学习笔记

最新推荐文章于 2025-01-31 12:43:53 发布

勇气9601

最新推荐文章于 2025-01-31 12:43:53 发布

阅读量282

点赞数

分类专栏： Web

本文链接：https://blog.youkuaiyun.com/mafang9601/article/details/80287979

版权

Web 专栏收录该内容

16 篇文章

订阅专栏

JavaScript是基于对象的语言，而基于对象的基本特征，就是采用事件驱动。通常鼠标或键盘的动作称之为事件，由鼠标或键盘引发的一连串程序的动作，称之为事件驱动。而对事件进行处理的程序或函数，则称之为

事件处理程序。

1、onClick事件

鼠标单击onClick事件是最常用的事件之一，当用户单击鼠标时，产生onClick事件，同时onClick指定的事件处理程序或代码将被调用执行；

2、onChange事件

它是一个与表单相关的事件，当利用text或textarea元素输入的字符值改变时发生该事件，同时当在select表格中的一个选项状态改变后也会引发该事件。

3、onSelect事件

onSelect事件是当文本框中的内容被选中时所发生的事件。在文本框中选中文字后，会弹出选择文字的提示对话框；

4、onFocus事件

当单击表单对象时，即将光标放在文本框或选择框上时产生onFocus事件

5、onLoad事件

当加载网页文档时，会产生该事件。onLoad事件的作用是在首次载入一个页面文件时检测cookie的值，并用一个变量为其赋值，使其可以被源代码使用。

6、onUnload事件

当退出网页时引发onUnload事件，并可更新cookie的状态。

7、onBlur事件

失去焦点onBlur事件正好与获得焦点事件相对，当text对象、textarea对象或select对象不再拥有焦点而退到后台时，引发该事件。

8、onMouseOver事件

onMouseOver是当鼠标指针移动到某对象范围的上方时触发的事件

9、onMouseOut事件

onMouseOut是当鼠标指针离开某对象范围时触发的事件。

10、onDblClick事件

onDblClick是鼠标双击时触发的事件

js笔记

一、js简介

1、js是什么

2、js作用

3、组成

4、引入方式

二、基本语法

1、变量

2、原始数据类型

3、引入数据类型

4、运算符

5、逻辑语句

三、js内建对象

(1)Number

创建方式：

varmyNum=new Number(value);

varmyNum=Number(value);

属性和方法：

toString():转成字符串

valueOf()：返回一个 Number 对象的基本数字值

(2)Boolean

创建方式：

varbool = new Boolean(value);

varbool = Boolean(value);

属性和方法：

toString():转成字符串

valueOf()：返回一个 Boolean 对象的基本值(boolean)

(3)String

创建方式：

varstr = new String(s);

varstr = String(s);

属性和方法：

length:字符串的长度

charAt():返回索引字符

charCodeAt:返回索引字符unicode

indexOf():返回字符的索引

lastIndexOf();逆向返回字符的索引

split();将字符串按照特殊字符切割成数组

substr():从起始索引号提取字符串中指定数目的字符

substring():提取字符串中两个指定的索引号之间的字符

toUpperCase();转大写

示例：

(4)Array

创建方式：

var arr = new Array();//空数组

var arr = new Array(size);//创建一个指定长度的数据

var arr = new Array(element0, element1, ...,elementn);//创建数组直接实例化元素

var arr = [];//空数组

var arr = [1,2,5,"java"];//创建数组直接实例化元素

属性和方法：

length:数组长度

join()：把数组的所有元素放入一个字符串。元素通过指定的分隔符进行分隔一个

pop():删除并返回最后元素

push()：向数组的末尾添加一个或更多元素，并返回新的长度

reverse();反转数组

sort();排序

(5)Date

创建方式：

varmyDate = new Date();

var myDate = new Date(毫秒值);//代表从1970-1-1到现在的一个毫秒值

属性和方法

getFullYear():年

getMonth():月 0-11

getDate():日 1-31

getDay()：星期 0-6

getTime():返回1970年1月1日午夜到指定日期（字符串）的毫秒数

toLocalString();获得本地时间格式的字符串

(6)Math

创建方式：

Math 对象并不像 Date 和 String 那样是对象的类，因此没有构造函数 Math()，像 Math.sin() 这样的函数只是函数，

不是某个对象的方法。您无需创建它，通过把 Math 作为对象使用就可以调用其所有属性和方法。

属性和方法

PI：圆周率

abs():绝对值

ceil():对数进行上舍入

floor():对数进行下舍入

pow(x,y)：返回 x 的 y 次幂

random():0-1之间的随机数

round():四舍五入

(7)RegExp

创建方式：

varreg = new RegExp(pattern);

var reg = /^正则规则$/;

规则的写法：

[0-9]

[A-Z]

[a-z]

[A-z]

\d 代表数据

\D 非数字

\w 查找单词字符

\W 查找非单词字符

\s 查找空白字符

\S 查找非空白字符

n+ 出现至少一次

n* 出现0次或多次

n? 出现0次或1次

{5} 出现5

{2,8} 2到8次

方法：

test(str):检索字符串中指定的值。返回 true 或 false

需求：

校验邮箱：

varemail = haohao_827@163.com

varreg = /^[A-z]+[A-z0-9_-]*\@[A-z0-9]+\.[A-z]+$/;

reg.test(email);

四、js的函数

1、js函数定义的方式

(1)普通方式

语法：function函数名(参数列表){函数体}

示例：

functionmethod(){

alert("xxx");

}

method();

(2)匿名函数

语法：function(参数列表){函数体}

示例：

varmethod = function(){

alert("yyy");

};

method();

(3)对象函数

语法：newFunction(参数1,参数2,...,函数体);

注意：参数名称必须使用字符串形式、最后一个默认是函数体且函数体需要字符串形式

示例：

varfn = new Function("a","b","alert(a+b)");

fn(2,5);

2、函数的参数

(1)形参没有var去修饰

(2)形参和实参个数不一定相等

(3)arguments对象是个数组会将传递的实参进行封装

functionfn(a,b,c){

//varsum = a+b+c;

//alert(sum);

//arguments是个数组会将传递的实参进行封装

for(vari=0;i<arguments.length;i++){

alert(arguments[i]);

}

fn(1,2,4,8);

3、返回值

(1)在定义函数的时候不必表明是否具有返回值

(2)返回值仅仅通过return关键字就可以了 return后的代码不执行

functionfn(a,b){

returna+b;

//alert("xxxx");

}

alert(fn(2,3));

4、js的全局函数

(1)编码和解码

encodeURI() decodeURI()

encodeURIComponet() decodeURIComponent()

escape() unescape()

三者区别：

进行编码的符号范围不同吧，实际开发中常使用第一种

(2)强制转换

Number()

String()

Boolean()

(3)转成数字

parseInt()

parseFloat()

(4)eval()方法

将字符串当作脚本进行解析运行

//varstr = "var a=2;var b=3;alert(a+b)";

//eval(str);

functionprint(str){

eval(str);

}

print("自定义逻辑");

五、js的事件

事件

事件源

响应行为

1、js的常用事件

onclick:点击事件

onchange:域内容被改变的事件

需求：实现二级联动

<selectid="city">

</select>

<selectid="area">

</select>

<scripttype="text/javascript">

varselect = document.getElementById("city");

select.οnchange= function(){

varoptionVal = select.value;

switch(optionVal){

case'bj':

vararea = document.getElementById("area");

area.innerHTML = "<option>海淀</option><option>朝阳</option><option>东城</option>";

break;

case'tj':

vararea = document.getElementById("area");

area.innerHTML = "<option>南开</option><option>西青</option><option>河西</option>";

break;

case'sh':

vararea = document.getElementById("area");

area.innerHTML = "<option>浦东</option><option>杨浦</option>";

break;

default:

alert("error");

}

};

</script>

onfoucus:获得焦点的事件

onblur:失去焦点的事件

需求：当输入框获得焦点的时候，提示输入的内容格式

当输入框失去焦点的时候，提示输入有误

<labelfor="txt">name</label>

<inputid="txt" type="text" /><spanid="action"></span>

<scripttype="text/javascript">

vartxt = document.getElementById("txt");

txt.οnfοcus= function(){

//友好提示

varspan = document.getElementById("action");

span.innerHTML = "用户名格式最小8位";

span.style.color= "green";

};

txt.οnblur= function(){

//错误提示

varspan = document.getElementById("action");

span.innerHTML = "对不起格式不正确";

span.style.color= "red";

};

</script>

onmouseover:鼠标悬浮的事件

onmouseout:鼠标离开的事件

需求：div元素鼠标移入变为绿色移出恢复原色

#d1{background-color:red;width:200px;height: 200px;}

<divid="d1"></div>

<scripttype="text/javascript">

vardiv = document.getElementById("d1");

div.οnmοuseοver= function(){

this.style.backgroundColor= "green";

};

div.οnmοuseοut= function(){

this.style.backgroundColor= "red";

};

</script>

onload:加载完毕的事件

等到页面加载完毕在执行onload事件所指向的函数

<spanid="span"></span>

<scripttype="text/javascript">

window.οnlοad= function(){

varspan = document.getElementById("span");

alert(span);

span.innerHTML= "hello js";

};

</script>

2、事件的绑定方式

(1)将事件和响应行为都内嵌到html标签中

<inputtype="button" value="button" οnclick="alert('xxx')"/>

(2)将事件内嵌到html中而响应行为用函数进行封装

<inputtype="button" value="button" οnclick="fn()" />

<scripttype="text/javascript">

functionfn(){

alert("yyy");

}

</script>

(3)将事件和响应行为与html标签完全分离

<inputid="btn" type="button" value="button"/>

<scripttype="text/javascript">

varbtn = document.getElementById("btn");

btn.οnclick= function(){

alert("zzz");

};

</script>

****this关键字

this经过事件的函数进行传递的是html标签对象

<inputid="btn" name="mybtn" type="button"value="button123" οnclick="fn(this)"/>

<scripttype="text/javascript">

functionfn(obj){

alert(obj.name);

}

</script>

3、阻止事件的默认行为

IE：window.event.returnValue = false;

W3c: 传递过来的事件对象.preventDefault();

//ie：window.event.returnValue = false;

//W3c：传递过来的事件对象.preventDefault();

//W3c标准

if(e&&e.preventDefault){

alert("w3c");

e.preventDefault();

//IE标签

}else{

alert("ie");

window.event.returnValue= false;

}

//通过事件返回false也可以阻止事件的默认行为

4、阻止事件的传播

IE：window.event.cancelBubble = true;

W3c: 传递过来的事件对象.stopPropagation();

if(e&&e.stopPropagation){

alert("w3c");

e.stopPropagation();

//IE标签

}else{

alert("ie");

window.event.cancelBubble= true;

}

六、js的bom

(1)window对象

弹框的方法：

提示框：alert("提示信息");

确认框：confirm("确认信息");

有返回值：如果点击确认返回true 如果点击取消返回false

var res = confirm("您确认要删除吗？");

alert(res);

输入框：prompt("提示信息");

有返回值：如果点击确认返回输入框的文本点击取消返回null

var res = prompt("请输入密码？");

alert(res);

open方法：

window.open("url地址");

open("../jsCore/demo10.html");

定时器：

setTimeout(函数,毫秒值);

setTimeout(

function(){

alert("xx");

3000

);

clearTimeout(定时器的名称);

vartimer;

varfn = function(){

alert("x");

timer= setTimeout(fn,2000);

};

varcloser = function(){

clearTimeout(timer);

};

fn();

setInterval(函数,毫秒值);

clearInterval(定时器的名称)

vartimer = setInterval(

function(){

alert("nihao");

2000

);

varcloser = function(){

clearInterval(timer);

};

需求：注册后5秒钟跳转首页

恭喜您注册成功，<span id="second" style="color:red;">5</span>秒后跳转到首页，如果不跳转请<a href="../jsCore/demo10.html">点击这里</a>

<scripttype="text/javascript">

vartime = 5;

vartimer;

timer= setInterval(

function(){

varsecond = document.getElementById("second");

if(time>=1){

second.innerHTML= time;

time--;

}else{

clearInterval(timer);

location.href="../jsCore/demo10.html";

}

1000

);

</script>

(2)location

location.href="url地址";

(3)history

back();

forward();

go();

七、js的dom

1、理解一下文档对象模型

html文件加载到内存之后会形成一颗dom树，根据这些节点对象可以进行脚本代码的动态修改

在dom树当中一切皆为节点对象

2、dom方法和属性

笔记见代码