JavaScript(二)

最新推荐文章于 2022-10-23 21:36:15 发布

bobob_

最新推荐文章于 2022-10-23 21:36:15 发布

阅读量196

点赞数

分类专栏： web

本文链接：https://blog.csdn.net/dubo_csdn/article/details/86713169

版权

web 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

目录内容

【1】js函数创建【2】js事件【3】js常用事件【4】DOM

【5】innerHTML属性【6】表单数据提交方式【7】表单的校验【8】json格式与其解析

【js函数创建】

使用function关键字或者new Function
方式一：

function funName(param_list){
//js代码
}
调用：
funName(param_list);

方式二：

右边是匿名函数，左边变量接收
var funName = function(param_list){
//js代码
};//严格地说，这里需要加分号，因为这是一条赋值语句
调用：
funName(param_list);

方式三：

动态函数创建
var funName = new Function(param_list,jsCode);
调用：
funName(param_list,jsCode);

按钮调用代码：
<input type="button" value="测试 var funName = funName(){}" οnclick="funName3(1,2);">

函数的重载 这里重点说一个arguments，做好一个功能，有很多时候会用到这个arguments数组，
这个arguments一般使用的情况是：创建函数的时候参数列表是空的，但是使用的时候我们传递了参数，这时候就需要用到arguments数组来得到参数列表的具体参数。
实例代码：
function funName(){//这里没有参数
//js代码
}
//函数调用
funName(1,2,3);//调用传递了参数,这是如果要使用这些参数，就需要在 js代码中使用到arguments

【js事件】

js的事件是事件驱动的使用。这里的事件都是通过操作我们学过的html的标签来触发的，
比如，一个按钮标签

<input type="button" value="按钮" οnclick="clickEvent();"

我们通过点击这个按钮，就触发了按钮的点击事件(οnclick="clickEvent();"),其中clickEvent()是我们自己定义创建的函数

事件和html标签的绑定方式

1、使用html标签的事件属性

    一个普通文本输入项
    <input type="text" onclick="test1()">
//定义的函数:
    function test1(){
//js代码
    }

红色的为标签事件属性(点击事件)

2、动态绑定(赋值函数名称)

一个普通文本输入项
<input type="text" id="testInput">

js代码：

    document.getElementById("testInput").onclick = test1;//注意，这里不写 ()//定义的函数:
    function test1(){
//js代码
    }

3、动态绑定(匿名函数赋值)

一个普通文本输入项
<input type="text" id="testInput">

js代码：

// = 右边是匿名函数
document.getElementById("testInput").onclick = function(){//js代码}

【js常用事件】

onload事件：使用在<body>标签上

<body οnlοad="bodyOnload();"></body>
js代码：
alert("body load");

实际代码已注释掉了，不然每次刷新都会弹窗
———————————————
onclick事件：几乎所有的标签，除了特殊的看不到的标签

alert("input点击事件");

点击：
———————————————
onfocus事件：获取焦点后触发；凡是可以获取焦点的标签

alert("input获取焦点事件");

点击(获取焦点)：
———————————————
onblur事件：失去焦点后触发；凡是可以获取焦点的标签都可释放焦点

alert("input失去焦点事件");

点击里面，再点击页面其他地方(失去焦点)：
———————————————
onmouseover事件：鼠标经过其上触发

鼠标放到上面：
———————————————
onmouseout事件：鼠标离开时触发

鼠标放到上面再离开：
———————————————
onkeypress事件：按下键盘某个键(自己选择)时触发

点击进去按回车键：

【DOM】

DOM是js的三大组成部分之一，另外两个：ECMAScript和BOM
DOM是用来解析标记型文档的(如：html、xml等)。

这里提到了几个对象：document(DOM中的核心对象，代表当前html页面)、Element(元素对象在，这里指的是html标签对象)、文本对象和属性对象，这些都属于一个最高对象Node对象

目前我们使用DOM解析html文档，加载html页面时，其实就已经存在了这个document核心对象，并且html页面内容加载到内存，会得到一个 document对象，同时存在了页面中的标签对象，这里的每一个标签都会变成一个Element对象，成了对象就有了响应的方法，把这里理解好了，DOM入门就very easy了。

dom 参考文档点击后选择打开即可

document对象
write方法:向页面输出内容(很可能会把原来的数据在同一页面覆盖掉)

document.write("<input type="button" οnclick='history.back();'>返回前一页面</>");

Element getElementById方法：根据属性id的值获取页面上唯一一个标签元素对象

<input id="testById" type="text" value="aaa">
<input id="testById" type="text" value="bbb">
js代码：
var element = document.getElementById("testById");
alert(element.value);
特点：有多个id属性值相同的标签元素，只得到最前面的一个,id属性一般都只留给开发人员使用，精准获取某个标签元素对象

Element[] getElementsByName方法：根据name属性值获取页面中所有对应name属性值的标签元素对象

<input name="testByName" type="text" value="aaa">
<input name="testByName" type="text" value="bbb">
js代码：
var elements = document.getElementsByName("testByName");
alert("长度："+elements.length);
alert(elements[0].value+" "+elements[1].value);

Element[] getElementsByTagName方法：根据标签名称获取页面中所有对应标签名的标签元素对象

<div>111<>
<div>222<>
js代码：
var elements = document.getElementsByTagName("div");
alert("长度："+elements.length);
alert(elements[0].innerHTML+" "+elements[1].innerHTML);

111

222

【innerHTML属性】

1、获取标签包围的数据(包括里面的标签代码)

<sapn id="getInnerHTML">
<p style="color:red">哈哈</p>
</sapn>

js代码：
var spanE = document.getElementById("getInnerHTML");
var innerText = spanE.innerHTML;
alert(innerText);

哈哈

2、将数据(标签或普通文本内容)放到对应的标签中

<sapn id="setInnerHTML">把内容替换</sapn>

js代码：
var spanE = document.getElementById("setInnerHTML");
spanE.innerHTML = "<p style='color:green'>innerHTML 真好用</p>";

把内容替换

【表单数据的提交方式】

统一使用表单：

用户名：

密码：

1、使用input type="submit"提交
2、使用input type="button" 按钮提交
var formObj = document.getElementsByTagName("form")[0];
//formObj.action="";
formObj.submit();
3、使用超链接方式
//获取表单数据:使用location(BOM对象)的href属性
var username = document.getElementById("username").value;
var password = document.getElementById("password").value;
location.href = "#?username="+username+"&password="+password;

【表单的校验】

这里的校验主要是指，对表单数据填写是否为空，比如用户名不能为空，如果为空了，则给予提示信息

表单：

用户名：

密码：

【json格式与其解析】

json数据格式书写：

	|--json对象格式
		var jsonObj = {"username":"zhangsan","age":23};
		
	|--json数组格式
		var jsonArr = [
			{"username":"zhangsan","age":23},{"username":"lisi","age":24}
		];

json对象解析：

	var jsonObj = {"username":"zhangsan","age":23};
	var name = jsonObj.username;
	var age = jsonObj.age;
	alert(name+" : "+age);


json数组解析：

	var jsonArr = [
		{"username":"zhangsan","age":23},{"username":"lisi","age":24}
	];
	//比那里jsonArr数组
	for(var i=0;i<jsonArr.length;i++){
		var name = jsonArr[i].username;
		var age = jsonArr[i].age;
		alert(name+" : "+age);
	}
	//获取单个可以使用：jsonArr[0].username ...