javascript高级编程

最新推荐文章于 2024-04-14 22:16:51 发布

Danny_Fan

最新推荐文章于 2024-04-14 22:16:51 发布

阅读量478

点赞数

分类专栏：技术整理文章标签： javascript

本文链接：https://blog.csdn.net/fand1011/article/details/53195221

版权

技术整理专栏收录该内容

4 篇文章 0 订阅

订阅专栏

javascript高级
1、js的函数
（1）java里面
public void/int 方法名（参数列表）{
方法体和返回值
}

（2）在js里面的函数定义有三种
第一种：function 方法名（参数列表）{
方法体和返回值
}
注意一：js里面的参数不需要写var，直接写名称
注意二：返回值，根据实际需要，可以有可以无
function test(){ //无参
alert("adas");
}
//调用函数
test();

function test(a,b){ //有参
var sum = a+b;
return sum;
}
alert(test(2,3));

第二种：匿名函数，直接使用function（参数列表）{方法体和返回值}
var test1 = function(a,b){
return a+b;
}
//调用函数
alert（test1（3,4））；

第三种：动态函数 new Function(参数列表，方法体和返回值)；
var test2 = new Function("a,b","return a+b;")
alert(test2(5,6));

2、js里面的函数重载
（1）java里面的函数重载，函数名相同，参数列表不同，与返回值无关
（2）js里面是否存在函数的重载不存在可以通过arguments来模拟实现
//模拟重载的效果
function add(){
//js函数里面有一个内置的数组arguments，它是用来存储传进来的参数
var sum = 0;
for(var i = 0 ; i < arguments.length;i++){
sum += arguments[i];
}
return sum;
}
//调用函数
alert(add(1,2));
alert(add(2,3,4,5));

补充：同名函数会覆盖前面的，这是由于js的加载顺序导致的

3、js的事件
（1）事件：在HTML的元素里面可以触发事件调用js里面的函数执行
（2）HTML标签上如何使用事件
第一种：在标签里面加上事件属性，调用js方法
<input type="button" value="第一种方式" οnclick="add1();" />

第二种：得到事件的标签，再使用属性
document.getElementById("buttonid").onclick = add1; //注意add1别写(),否则没点击就执行了;

第三种：得到事件标签，使用属性，用匿名函数创建执行动作
document.getElementById("buttonid2").onclick = function(){
alert("adsa");
}

4、js里面常用事件
（1）onload和onclick事件
onload HTML页面在加载的时候触发的事件，调用js方法
<body οnlοad="test1();"></body>
onclick 点击事件
<input type="text" οnclick="test2();">

（2）onfocus 和 onblur 事件
onfocus 获取焦点
function focus1() {
alert("调用onfocus方法");
}
onblur 失去焦点
function blur1() {
alert("调用onblur方法");
}

（3）onmouseover 和 onmouseout
onmouseover 鼠标移上
function over1(){
//alert("onmouseover")
document.getElementById("t1").value = "您好";
}
onmouseout 鼠标移开
function out1() {
//alert("onmouseout");
document.getElementById("t1").value="恭喜发财！";
}

（4）onkeypress事件点击键盘上的某个键，调用方法
function key1(abc){ //使用onkeypress属性的时候需要传参数
//alert(abc.keyCode);
if(abc.keyCode==32){
alert("哈哈");
document.getElementById("t2").value="您好！！！";
}
}

5、js的dom对象
（1）dom :document object model 文档对象模型
使用dom里面的提供的对象里面的属性和方法，对标记型文档进行操作

要想使用dom对象对标记型文档进行操作，首先要解析标记型文档
html中包含：标签、属性、文本内容

（2）使用dom解析html
解析过程，根据html的层级结构在内存中分配一个树形结构
document对象-整个文档
element对象-标签
attribute对象-属性
text对象-文本
Node节点对象-是以上对象的父对象，在找不到想用的方法时就在这里面中找

（3）DHTML
很多技术的简称，包含：html css ECMAScript DOM

6、document对象
（1）document代表整个文档
（2）主要方法：
第一：write();
document.write("aa");
document.write("<hr/>");

第二：getElementById();

第三：getElementsByName():根据name值获取标签对象，返回对象数组
var inputs1 = document.getElementByName("name1");
//获取每一个input里面的value值
for(var i = 0 ;i < inputs1.length;i++){
var input = inputs1[i];
alert(input.value)
}
如果只有一个标签，使用getElementByName(),也是返回一个数组
可以直接用下标来获取属性值：inputs1[0].value

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

7、innerHTML属性
（1）innerHTML属性不是dom里面的属性
（2）实现的功能
第一：获取标签里面的文本内容
document.
第二：向标签里面设置内容（可以写html代码）

8、动态表单

9、表单的提交方式
html中form标签的提交方式
第一种：使用<input type="submit"/>
<form method="get">
username:<input type="text" name="username" placeHolder="请输入用户名"/>
<br/>
<input type="submit" value="提交">
</form>

第二种：使用<input type="button"/>
<form id="form1" method="get">
username:<input type="text" name="username" placeHolder="请输入用户名"/>
<br/>
<input type="button" id="but" value="提交">
</form>

document.getElementById("but").onclick = function(){
document.getElementById("form1").submit();
}
第三种：使用超链接提交
<a href="要提交的地址？username=ww&password=123">提交</a>

10、表单的校验
（1）规范数据输入的格式
（2）如何校验
第一、使用submit提交表单，进行校验
使用 onsubmit 事件，写在form标签里面
<form method="get" οnsubmit="return click();"></form>
function click(){
var username=document.getElementById("usernameid1").value;
if(username==""){
alert("用户名不能为空")
return false；
} else{
return true;
}
}

第二、使用普通button的onclick 进行校验
function click(){
var username = document.getElementById("butid").value;
if(username == ""){
alert("用户名不能为空");
} else{
document.getElementById("formid1").submit();
}
}

11、json简介
（1）javascript Object Notation，javascript对象表示法，json是数据交换格式，比xml更轻巧
json是js的原生的格式，通过js操作json不需要依赖其他的东西
（2）json的数据格式
第一种：json的对象的格式
var json1={"name":"zhangwuji","age":23,"addr":"beijing"};
类似于key-value 名称和值之间用“：”隔开
json数据的名称是字符串的类型，json数据的值string, number, object, array, true, false, null

第二种：jsonde 数组的格式
var json=[{},{},{}];

第三种：复杂格式
var json3={"class":[{"name":"dd","age":23},{"name":"dd","age":23}]}

12、js解析json
（1）js解析json的对象的数据格式
var json1={"name":"zhangwuji","age":23,"addr":"beijing"};
document.write(json1.name);
document.write(json1.age);

（2）js解析json数组
先遍历，再利用下标输出

13、json练习：人员信息的显示
（1）把多个人员的信息存到json的数据格式里面，通过js解析json的数据格式，把所有的人员显示到页面的表格里面。
（2）[{"name":"zhangsan","age":20,"addr":"beijing"},
{"name":"lisi","age":30,"addr":"tinajin"},
{"name":"wangwu","age":40,"addr":"nanjing"}]
（3）代码
//创建json的数据的格式，用于存储人员的信息
var persons = [{"name":"zhangsan","age":20,"addr":"beijing"},
{"name":"lisi","age":30,"addr":"tinajin"},
{"name":"wangwu","age":40,"addr":"nanjing"}];
//使用js解析persons格式，把这些人员信息显示到页面上
//遍历json的数组，得到每个人员的信息
//生成表格，把数据放到表格里面，把表格显示到页面上
function showData() {
var tab = "<table border='1' cellpadding='10'>";
//添加表头
tab += "<tr><th>姓名</th><th>年龄</th><th>地址</th></tr>";
for(var i=0;i<persons.length;i++) {
//得到数组里面的每个json对象
var person = persons[i];
//得到每个json对象里面值
var name = person.name;
var age = person.age;
var addr = person.addr;
//生成表格
tab += "<tr><td>"+name+"</td><td>"+age+"</td><td>"+addr+"</td></tr>";
}
tab += "</table>";
//alert(tab);
//把table表格的代码显示到页面上，使用innerHTML属性
//得到div标签
var div1 = document.getElementById("div1");
//向div里面写table代码
div1.innerHTML = tab;
}

Danny_Fan

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
javascript高级编程

javascript高级1、js的函数（1）java里面public void/int 方法名（参数列表）{方法体和返回值}（2）在js里面的函数定义有三种第一种：function 方法名（参数列表）{方法体和返回值}注意一：js里面的参数不需要写var，直接写名称注意二：返回值，根据实际需要，可以有可以无function test(){
复制链接

扫一扫