本文详细讲解了JavaScript函数的多种定义方式，包括有参函数、隐性参数arguments，以及自定义对象、事件（如onload、onclick等）的注册。深入理解了DOM操作、正则表达式、DOM查询方法和事件响应机制。
函数定义的第二种方式
格式：
var 函数名=function(形参列表){函数体}
<script type="text/javascript">
var fun = function (a,b) {
var c =a+b;
alert("有参函数和="+c);
}
fun(1,2);
</script>
- JS不允许函数重载
函数的arguments隐形参数（只在function函数那）
就是在function函数中不需要定义，但却可以直接来获取
<!--
参数列别可以随便写，因为arguments可以获得所有参数
-->
<script type="text/javascript">
function fun(a,b,c) {
alert(arguments.length);
alert(arguments[0]);
alert(arguments[1]);
}
fun(111,"3333");
/*将参数中的数字相加*/
function sum() {
var result=0;
for (var i=0;i<arguments.length;i++){
if (typeof (arguments[i])=="number")
result+=arguments[i];
}
return result;
}
alert("参数之和为："+sum(1,2,3,4,5,6,7,8,9,'asc'));
JS中的自定义对象
Object形式的自定义对象
var 变量名=new Object();//对象实例（空对象）
变量名.属性名=值;//定义一个属性
变量名.函数名=function(){}//定义一个函数
对象的访问：变量名.属性/函数名();
<script type="text/javascript">
/*创建类
* 类变量
* 类函数
*/
var obj=new Object();
obj.name="白宇";
obj.age=81;
obj.fun=function () {
alert("姓名:"+obj.name+",年龄:"+this.age);
}
obj.fun();
</script>
{}形式自定义对象
var 变量名={
属性名：值，//定义一个属性
函数名:function(){}//定义一个函数
};
对象的访问：变量名.属性/函数名();
<script type="text/javascript">
/*{}方式定义类，注意里面属性用','分隔*/
var obj={
num:3,
name:"白宇",
fun:function () {
alert("姓名："+this.name+",年龄："+this.num);
}
};
a.obj();
</script>
JS中的事件
事件：电脑输入设备与页面进行交互的响应
常用时间：
onload 加载完成事件:页面加载完成后，常用于做页面JS代码初始化操作
onclick 单击事件：常用于按钮的点击相应操作
onblur 失去焦点事件：常用于输入框数去焦点后验证其输入内容是否合法
onchangge：内容发生改变事件：常用于下拉列表和输入框内容发生改变后操作
onsubmit 表单提交事件：常用于表单提交前，验证所有表单项是否合法
事件的注册
告诉浏览器，当事件响应后要执行哪些代码，叫事件注册或事件绑定
静态注册事件
通过html标签的时间属性直接赋予时间响应后的代码
动态注册事件
通过js代码得到的标签的dom对象，然后在通过dom对象.事件名=function(){}赋予事件响应后的代码
动态注册基本步骤：
1.获取标签对象
2.标签对象.事件名=function(){}
onload
1.静态注册
<body onload="alert('静态注册onload时间')">
<!--静态注册onload事件
onload事件是浏览器解析完页面之后就会自动出发的事件-->
</body>
一般只在里面写一句代码，如果要写大量代码，则写一个函数
<head>
<meta charset="UTF-8">
<title>onload</title>
<script type="text/javascript">
function fun() {
alert("大量代码的静态注册onloade")
}
</script>
</head>
<body onload="fun()">
<!--静态注册onload事件
onload事件是浏览器解析完页面之后就会自动出发的事件-->
</body>
2.动态注册onload
//onload时间动态注册，是固定写法
window.onload=function () {
alert("动态注册onload压页面");
}
onclick
1.静态注册onclick事件
var a=function () {
alert("静态注册onclick事件")
}
<!--静态注册onclick-->
<button onclick="a()">按钮1</button>
2.动态注册onclick事件
<head>
<script type="text/javascript">
/*动态注册onclick*/
window.onload =function () {
//1.获取标签对象
/*
* docunment是js提供的一个对象，表示整个页面所有内容
* */
var btnc=document.getElementById("bt2")
//2.通过标签对象.事件名=function(){}
btnc.onclick=function () {
alert("动态注册onclick事件")
}
}
</script>
</head>
<body>
<button id="bt2">按钮2</button>
失去焦点事件
1.静态注册
//静态注册失去焦点事件
function onblurfun() {
//consolve是控制台对象，是由JS提供，专门向浏览器控制器打印输出，用于测试
//log是打印的方法
console.log("静态注册失去焦点事件")
}
用户名：<input type="text" onblur="onblurfun()"/><br>
2.动态注册
//动态注册失去焦点事件
window.onload=function () {
//获取标签对象
var in2=document.getElementById("in2")
//通过标签对象.事件名=function(){}
in2.onblur=function () {
console.log("动态注册失去焦点事件")
}
}
密码：<input id="in2" type="text" >
onchange事件
1.静态注册
<script>
function onchangefun() {
alert("语言已改变")
}
</script>
请选择你会的语言：<br>
<!--静态注册onchange事件-->
<select onchange="onchangefun()">
<option>Java</option>
<option>Python</option>
<option>C++</option>
2.动态注册
<script>
window.onload=function () {
var a=document.getElementById("onc");
a.onchange=function () {
alert("职业以改变")
}
}
</script>
<!--动态注册onchange事件-->
<select id="onc">
<option>狂战士</option>
<option>弓箭手</option>
<option>法师</option>
</select>
表单提交onsubmit事件
1.静态注册
function ons() {
//要验证所有表单项是否合法，如果有一个不合法则阻止表单提交
alert("表单不合法，组织提交");
return false;
}
<form action="http：//localhost:8080" method="get" onsubmit="return ons();">
用户名：<input type="text" id="user"><br>
<input type="submit">
</form>
2.动态注册
window.onload=function () {
var formobj=document.getElementById("pas");
formobj.onsubmit=function () {
alert("表单不合法，组织提交");
return false;
}
}
<form action="http：//localhost:8080" method="get" onsubmit="return ons();">
密码：<input type="password" id="pas"><br>
<input type="submit">
</form>
DOM模型
全称Docunment Object Model 文档对象模型
将文档中的标签，属性，文本，转换成对象来管理
document对象
1.document管理了所有的HTML文档内容
2.document 它是一种树结构的文档，有层级关系
3.它让我们把所有的标签都对象化
4.我们可以通过document访问所有的标签对象
function onc() {
var inobj=document.getElementById("in");
var val = inobj.value;
//正则表达式技术
var patt=/^\w(5,12)$/;
//text()方法用于测试某个字符串，是不是匹配规则
//匹配返回true,否则false
if(patt.test(val))
{
alert("合法");
}
else alert("不合法");
}
<body>
<!--用户点击校验，要验证输入内容是否合法
校验规则：由字母，数字，下划线组成，并且长度5到12
-->
用户名<input type="text" id="in"/>
<button onclick="onc()">校验</button>
</body>
正则表达式对象
//要求字符串中是否包含字母e;
//var patt=new RegExp("e");
//var patt=/e/;//也是正则表达式对象
//var patt=/[abc]/;//查找方括号之间的任何字符
var patt=/[a-z]/;//要求字符串是否包含小写字母
var str="a2121";
if(patt.test(str))
alert(true);
else alert(false);
提示效果改进
用innerHTML,起始标签和结束标签中间的内容
var sp=document.getElementById("span");
sp.innerHTML="合法";
if(patt.test(val))
{
sp.innerHTML="合法";
}
else sp.innerHTML="不合法";
<span style="color: red" id="span"></span>
getElementByName
//getElementsByName根据指定的name属性查询返回多个标签对象集合
//操作和数组一样
//集合中每个元素都是dom对象
//顺序是html标签中上下顺序
//checked表示复选框的选中状态，如果选中是true，否则false
//checked这个属性可读，可写
var hob=document.getElementsByName("hobby");
function checkAll() {
for(var i=0;i<hob.length;i++){
hob[i].checked=true;
}
}
//全不选
function checkNo() {
for(var i=0;i<hob.length;i++){
hob[i].checked=false;
}
}
//反选
function checkRe() {
for(var k=0;k<hob.length;k++) {
hob[k].checked = !hob[k].checked;
}
}
<input type="checkbox" name="hobby" value="cpp">C++
<input type="checkbox" name="hobby" value="java">Java
<input type="checkbox" name="hobby" value="js">JavaScript
<br>
<button onclick="checkAll()">全选</button>
<button onclick="checkNo()">全不选</button>
<button onclick="checkRe()">反选</button>
getElementsByTagName按照指定标签名查询
//全选
//getElementsByTagName按照指定标签名查询
var hob=document.getElementsByTagName("input")
function checkAll() {
for(var i=0;i<hob.length;i++){
hob[i].checked=true;
}
}
<input type="checkbox" value="cpp">C++
<input type="checkbox" value="java">Java
<input type="checkbox" value="js">JavaScript
<br>
<button onclick="checkAll()">全选</button>
document查询的优先顺序
有id优先id,其次name，最后TagName
节点的常用属性方法
节点就是标签对象
方法：通过具体的元素节点调用getElementByTagName()方法，获取当前节点的指定标签名孩子节点
appendChile(onChildNode)方法，可以添加一个子节点，onChileNode是要添加的孩子节点
childNodes
属性，获取当前节点的所有子节点
firstChild
属性，获取当前节点的第一个子节点
lastChild
属性，获取当前节点的最后一个子节点
parentNode
属性，获取当前节点的父节点
nextSibling
属性，获取当前节点的下一个节点
previousSibling
属性，获取当前节点的上一个节点
className
用于获取或设置标签的 class 属性值
innerHTML
属性，表示获取/设置起始标签和结束标签中的内容
innerText
属性，表示获取/设置起始标签和结束标签中的文本
docunment添加标签
两种方式：
window.onload=function () {
//需要使用js代码创建html标签，并显示在页面上
var divobj=document.createElement("div");//在内存中
var text=document.createTextNode("Yes");
divobj.appendChild(text);
// divobj.innerHTML="World";//还在内存中
document.body.appendChild(divobj);
}
6365
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
