JavaScript高级篇之理论

最新推荐文章于 2019-07-06 05:02:52 发布

Public_csdn

最新推荐文章于 2019-07-06 05:02:52 发布

阅读量329

点赞数

本文链接：https://blog.csdn.net/Public_CSDN/article/details/53193723

版权

一丶函数

1.函数的定义方式:

a) 用js中的关键字function定义:

function 方法名(参数列表) {方法体和返回值;},注意事项:返回值可根据需求给出,参数列表可以不给,调用时函数内置arguments数组用来存储参数列表

b) 匿名函数:function() {方法体和返回值;}

C) 通过Function对象定义函数(不常用):

new Function(“参数列表”,”方法体和返回值”);

2.函数的重载

a) Js中没有函数的重载,同名后面执行的函数会覆盖前面的函数

b) 模拟Java中的函数重载:

i. JavaScript中函数内置一个arguments的数组,用来存储参数列表

ii. 通过arguments的数组即可模拟函数的重载

iii. 代码:

function add() {
  var sum=0;
  for(var i=0;i<arguments.length;i++)            {
      Sum+=arguments[i];
  }
Return sum;
}
add(1,5,7);
add(8,6,7,2);


二.JavaScript中的常用事件
a) onclick和onload事件
i. onclick鼠标点击事件 ,点击后就可触发,使其调用对应的函数
代码:
<body>
<input type=”text” id=”textId” οnclick=”stop();”/>
</body>
<script type=”text/javascript”>
funtion stop() {
 //点击输入框即显示123
 document.getElementById(“textId”).value=”123”;
}
</script>

ii. Onload页面加载完成后触发事件,调用对应函数
代码:
<body οnlοad="load();">
 </body>
<script type="text/javascript">
function load() {
  alert("页面加载完成");
}
</script>
b) Onmouseover()和onmouseout()事件

i. Onmouseover()鼠标悬浮事件


代码:
 <body>
<input type="text" id="textId" οnmοuseοver="over();" οnmοuseοut="out();">
 </body>
<script type="text/javascript">
function over() {
  document.getElementById("textId").value="把鼠标移到上面";
}
function out() {
  document.getElementById("textId").value="爱笑的人运气都不差";
}
</script>

c) Onkeypress事件
i. 键盘按压事件,点击键盘某个键时触发事件
代码:
 <body>
<input type="text" id="textId" οnkeypress="next(event);"/>
 </body>
<script type="text/javascript">
function next(obj) {
  if(obj.keyCode==13)
  alert("确定要继续么?");
}
</script>

d) Onblur和onfocus
i. Onblur元素失去焦点,onfocus获取焦点,焦点即鼠标光标
代码:
 <body>
<input type="text" id="textId" οnfοcus="focus1();" οnblur="blur1();"/>
 </body>
<script type="text/javascript">
function focus1() {
  document.getElementById("textId").value="获取焦点";
}
function blur1() {
  document.getElementById("textId").value="失去焦点";
}
</script>

三.DOM对象
a) 简介
i. DOM是Document object model缩写,文档对象模型
ii. 使用DOM中的属性或函数可以对HTML标记型语言进行操作
iii. 想要对HTML进行操作,必须先对其解析
iv. 解析过程:根据HTML的层级结构,在内存中分配一个树形结构
v. DOM中的四大对象:Document,Element,Attribute,Text
b) Document对象
i. 定义:代表整个文档对象
ii. 主要方法:
1. Write(),在页面中输出内容,也可以输出HTML代码
2. getElementById();通过标签id获取标签对象,返回对象
3. getElementsByname();通过标签中属性名字值获取标签的对象,返回对象的数组
4. getElementsByTagName();通过标签名获取标签的对象,返回对象的数组
四.innerTHML属性
a) 定义:是属于DOM中的属性,是获取HTML标签中的内容最简单的方法
b) 作用:获取HTML标签中的内容,对内容进行读,写操作
c) 对HTML标签读取功能:
代码:
 <body>
<div id="divid">你好</div>
 </body>
<script type="text/javascript">
  alert(document.getElementById("divid").innerHTML);
</script>

d) 对HTML标签写功能(注意:会覆盖原有值):
代码:
 <body>
<div id="divid">你好</div>
 </body>
<script type="text/javascript">
  alert(document.getElementById("divid").innerHTML="我很好");
</script>

五.表单提交方式
a) 在HTML中写form中写对应的方式提交
i. Submit按钮提交,
1. 在form中创建一个onsubmit的事件
2. 在body标签中创建一个submit按钮,及一个输入用户名的标签
3. 在script中写一个方法实现用户名判断不能为空操作 
4. 通过document中的getElementById()方法获取输入项的值
5. If语句判断值是否为空,空返回false,否则返回true
代码:
<body>
<form method="get" οnsubmit="return checkForm();">
<input type="text" name="username" id="usernameid"><br/>
<input type="submit" >
</form>
</body>
<script type="text/javascript">
function checkForm() {
  var un=document.getElementById("usernameid").value;
  if(un == ''){
     alert("用户名不能为空");
     return false;
  }else{
     return true;
  }
}
</script>





ii. Button按钮提交
1. 给form定义一个属性id
2. 定义输入username的标签,并且定义其id属性
3. 获取form标签的对象及username的值
4. 判断值是否为空,空则返回false并提升用户
5. 不为空,则提交,用submit()方法提交表单
代码:
<body>
<form method="get" id="formid">
<input type="text" name="userbname" id="textid"><br/>
<input type="button" value="提交表单" οnclick="fun();">
</form>
</body>
<script type="text/javascript">
function fun() {
  var username=document.getElementById("textid").value;
  var form=document.getElementById("formid");
  if(username == '') {
    alert("用户不能为空");
  }else{
    form.submit();
  }
}
</script>

六.Json
1.json简介
a) Json是数据交换格式,比xml更加轻巧
b) Json的数据格式
i. Json的对象的格式:
写法 {json数据的名称1:json数据的值1,json数据的名称2:json数据的值2.....}
ii. Json的数组形式:
写法 [json对象1,json对象2........]
iii. 复杂形式:由前两种组合
2.js解析json
a) Js解析json的对象的数据格式:通过json对象数据格式里面的name的名称得到name对应的值
b) js解析json的数组的数据格式:根据数组的下标得到json对象，解析json对象，根据数据的名称得到值