JavaScript高级

最新推荐文章于 2024-09-21 11:29:05 发布

ZPHuanLove

最新推荐文章于 2024-09-21 11:29:05 发布

阅读量427

点赞数

分类专栏：前端开发文章标签： javascript 开发 html android

本文链接：https://blog.csdn.net/u013703461/article/details/64923502

版权

前端开发专栏收录该内容

6 篇文章 0 订阅

订阅专栏

JavaScript高级

1、js的函数

（1）在java里面定义方法

public void/int 方法名称(参数列表) {

方法体和返回值;

}

（2）在js里面定义函数有三种方式

第一种：使用关键字 function 方法名称(参数列表){ 方法体和返回值 }

注意一：参数列表，不需要写类型（var），直接写参数名称
注意二：返回值，根据实际需要可以有也可以没有

示例代码：

functiontest1() {

alert("123456");

}

//test1();

//实现两个数的相加

functionadd1(a,b) {

varsum = a+b;

returnsum;

}

alert(add1(2,3));

第二种：匿名函数，使用关键字function(参数列表) { 方法体和返回值; }

示例代码：

vartest1 = function(a,b) {

returna+b;

}

//调用函数

alert(test1(3,4));

第三种：动态函数（方法体和返回值，包含参数列表都是通过参数传递进来的）

使用js里面的内置对象 new Function("参数列表","方法体和返回值")

示例代码：

varparam = "a,b";

varmethod = "var sum;sum=a+b;return sum;";

vartest2 = new Function(param,method);

//调用函数

alert(test2(5,6));

2、js的函数的重载

（1）在java里面存在重载，方法名称相同，参数列表不同

（2）js里面是否存在函数的重载？

在js中不存在重载
可以使用js函数里面arguments数组模拟重载的效果

（3）模拟重载的效果

在js里面有一个数组arguments，保存传递进来的参数，使用这个数组模拟重载的效果

示例代码：

functionadd1() {

//alert(arguments.length);

//遍历数组

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

alert(arguments[i]);

}*/

//模拟重载的效果（有几个参数，实现这几个参数的相加）

varsum = 0;

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

sum+= arguments[i];

}

returnsum;

}

//调用

alert(add1(1,2));

alert(add1(1,2,3));

alert(add1(1,2,3,4));

3、js的事件

（1）什么是事件：在html的元素里面可以触发事件调用js里面的函数

（2）在html的标签上面如何使用事件

有三种方式：

第一种：使用事件属性调用js方法

示例代码：

<inputtype="button" value="第一种方式"οnclick="add1();"/>

第二种：首先得到要绑定的标签，再使用事件的属性

示例代码：

document.getElementById("buttonid").οnclick= add1;

第三种：首先得到要绑定的标签，写js的代码

示例代码：

document.getElementById("buttonid1").οnclick= function() {

alert("aaaaa");

};

4、js的常用的事件

（1）onload事件和onclick事件

onload：html页面在加载时候触发事件，调用响应的js方法

onclick：鼠标点击事件

示例代码：

<html>

<head>

<title>html示例</title>

</head>

<inputtype="text" οnclick="test2();"/>

</body>

//onload和onclick事件

functiontest1() {

alert("load");

}

functiontest2() {

alert("onclick");

}

</script>

</html>

（2）onfocus事件和onblur事件

onfocus：获取焦点

onblur：失去焦点

（3）onmouseover 鼠标被移到某元素之上

（4）onmouseout 鼠标从某元素移开

（5）onkeypress：点击键盘上面的某个键，调用方法

示例代码:

<html>

<head>

<title>html示例</title>

</head>

<body>

<inputtype="text" οnfοcus="focus1();"οnblur="blur1();"/>

<br/>

<inputtype="text" id="textid" οnmοuseοver="over1();"οnmοuseοut="out1();"/>

<br/>

<inputtype="text" id="textid1" οnkeypress="key1(event);"/>

</body>

<scripttype="text/javascript">

//onkeypress

function key1(obj) {

//alert(obj.keyCode);

//如果点击键盘上面的回车键，调用方法 13

if(obj.keyCode==13) {

alert("key1");

}

//onmouseoveronmouseout

function over1() {

document.getElementById("textid").value ="调用onmouseover方法";

}

function out1() {

document.getElementById("textid").value ="调用onmouseout方法";

}

//onfocus事件和onblur事件

function focus1() {

alert("调用onfocus方法");

}

function blur1() {

alert("调用onblur方法");

}

</script>

</html>

5、js的dom对象

（1）什么是dom：Document ObjectModel：文档对象模型

文档：指的是标记型文档（html、xml）

对象：在对象里面有属性和方法

使用dom里面提供的对象里面的属性和方法，对标记型文档进行操作。要想使用dom对象标记型文档进行操作，首先需要解析标记型文档（html为例）：html中包含标签、属性、文本内容

（2）使用dom解析html

解析过程：根据html的层级结构在内存中分配一个树形结构

document对象，代表整个文档
element对象，代表标签
属性对象
文本对象
Node节点对象，是这些对象的父对象，在找不到想要使用的方法，到Node里面找

（3）DHTML的简介

不是一种技术，是很多技术的简称。

包含的技术：

html：封装数据
css：使用属性和属性值修改数据的样式
ECMAScript：语句和语法
DOM：对标记型文档进行操作

6、document对象

（1）document对象代表整个文档

（2）方法

第一个：write()，向页面输出内容，可以输出html代码

比如：

document.write("aa");

document.write("<hr/>");

第二个：getElementById():获取标签对象，通过标签的id值进行获取

示例代码：

<body>

</body>

varinput1 = document.getElementById("textid");

document.write(input1.value);

</script>

第三个：getElementsByName():根据标签里面name属性的值得到标签对象，返回数组

示例代码：

<body>

<inputtype="text" name="name1" value="aaa"/>

<inputtype="text" name="name1" value="bbb"/>

<inputtype="text" name="name1" value="ccc"/>

</body>

<scripttype="text/javascript">

var inputs1 = document.getElementsByName("name1");

//alert(inputs1.length);可以得到有相同name的标签个数

//获取每个input里面的value值

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

var input1= inputs1[i];

//得到value值

alert(input1.value);

}

</script>

注意：

如果只有一个标签，使用getElementsByName返回的也是一个数组，不需要遍历，直接使用数组的下标获取值

varinputs2 = document.getElementsByName("name2");

alert(inputs2[0].value);

第四个：getElementsByTagName()：根据标签的名称获取标签对象，返回数组

示例代码：

<body>

<inputtype="text" value="AAA"/>

<inputtype="text" value="BBB"/>

<inputtype="text" value="CCC"/>

</body>

varinputs3 = document.getElementsByTagName("input");

//alert(inputs3.length);

//遍历数组

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

var input3 =inputs3[i];

//得到标签的value

alert(input3.value);

}

</script>

注意：

如果只有一个标签，使用getElementsByTagName返回的也是一个数组，不需要遍历，直接使用数组的下标获取值

vararr = document.getElementsByTagName("input");

alert(arr[0].value);

7、innerHTML属性

（1）innerHTML属性不是dom里面属性

（2）实现什么功能

第一，获取标签里面的文本内容
第二，向标签里面设置内容（可以写html代码）

示例代码：

<body>

<hr/>

<divid="div1"></div>

</body>

<scripttype="text/javascript">

//获取标签里面的文本内容

var span1 = document.getElementById("spanid");

//alert(span1.innerHTML);

functionadd1() {

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

div1.innerHTML= "<tableborder='1'><tr><td>aaa</td><td>bbb</td></tr></table>";

}

</script>

8、表单的提交

提交表单有三种方式

第一种方式：在form标签里面，写提交按钮 <inputtype="submit"/>

示例代码：

username: <input type="text"name="username"/>

<br/>

password: <input type="password"name="password"/>

<br/>

</form>

第二种方式：在form标签里面，写普通按钮 <inputtype="button"/>

示例代码：

//使用button进行表单的提交

function form01() {

//得到form标签

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

//提交form表单

form01.submit();

}

第三种方式：使用超链接提交数据

如<a href="15-表单的提交方式二.html?username=ccc&password=123456">超链接提交数据</a>

9、表单校验

（1）规范数据的输入的格式

（2）如何进行表单的校验

第一，使用submit进行表单提交，进行表单校验

使用事件 onsubmit事件，写在form标签里面

<formmethod="get" οnsubmit="return checkForm();">

如果return返回的值true可以提交表单，如果返回false不会提交表单

示例代码：

//submit表单的校验

functioncheckForm() {

//判断用户名不能为空

var username = document.getElementById("usernameid").value;

var password =document.getElementById("passwordid").value;

if(username == "") {

alert("用户名不能为空");

return false;

}

if(password == "") {

alert("密码不能为空");

return false;

}

return true;

}

第二，使用button进行表单校验

示例代码

//使用button提交表单，进行校验

functionform01() {

//得到输入项里面的值，判断值是否为空，如果为空不进行提交

varusername = document.getElementById("usernameid").value;

varpassword = document.getElementById("passwordid").value;

//如果值为空，不进行提交

if(username== "") {

alert("用户名不能为空");

}else if(password == "") {

alert("密码不能为空");

}else {

//得到form标签

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

form01.submit();

}

10、json的简介

（1）JavaScript Object Notation，JavaScript 对象表示法。

json是一种数据的交换格式，比xml更加轻巧。

json是js的原生的格式，通过js操作json不需要依赖其他东西，直接对json格式进行操作。

（2）json数据格式

json有两种数据格式

第一种：json的对象的格式

写法{json数据的名称1:json数据的值1,json数据的名称2:json数据的值2.....}

类似于key-value形式

名称和值之间使用冒号隔开，多个值之间使用逗号隔开

json数据的名称是字符串的类型，json数据的值 string, number, object, array,true, false, null

具体数据的格式{"name":"zhangsan","age":20,"addr":"nanjing"}

第二种：json的数组的格式

写法[json对象1,json对象2........]

在数组里面有多个json对象，多个json对象之间使用逗号进行隔开

具体数据的格式[{"name":"lucy","age":20},{"name":"mary","age":30}]

（3）可以使用json的这两种格式组成更加复杂json的格式

复杂的格式{"name":[{"name":"zhangsan","addr":"beijing"},{"name":"lisi","addr":"tianjin"}]}

11、js解析json

（1）js解析json的对象的数据格式

通过json对象数据格式里面的name的名称得到name对应的值

示例代码：

//js解析json的对象格式的数据

varjson1 = {"username":"lucy","age":20,"addr":"nanjing"};

//对json的对象格式数据进行操作

document.write(json1.username);

document.write("<br/>");

document.write(json1.age);

document.write("<br/>");

document.write(json1.addr);

（2）js解析json的数组的数据格式

根据数组的下标得到json对象，解析json对象，根据数据的名称得到值

遍历json数组，得到json数组里面每个json对象，解析每个json对象，根据json对象的数据的名称得到值

示例代码：

//js解析json数组格式的数据

varjson2 =[{"username":"zhangsan","age":20,"addr":"beijing"},

{"username":"lisi","age":30,"addr":"tianjin"},

{"username":"wangnwu","age":40,"addr":"nanjing"}];

//js操作数组，遍历数组，根据数组的下标得到值

//遍历json数组格式，得到的是一个json对象，解析json对象（根据名称得到值）

//得到第二个json对象里面的age的值数组下标从0开始的

document.write(json2[1].age);

//得到第一个json对象里面的addr的值

document.write("<br/>");

document.write(json2[0].addr);

//遍历json数组的格式

document.write("<hr/>");

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

//得到数组里面的每一个json对象

varperson = json2[i];

//得到每个对象里面的值

varusername = person.username;

varage = person.age;

varaddr = person.addr;

document.write("username:"+username+"; age:"+age+" ; addr:"+addr);

document.write("<br/>");

}

ZPHuanLove

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录