学习Java的日子 Day49 函数，DOM

Day48

1.流程控制语句

if else

for

for-in(遍历数组时，跟Java是否一样)

While

do while

break 语句用于跳出循环

continue 用于跳过循环中的一个迭代

2.函数

2.1 JavaScript 函数语法

函数就是包裹在花括号中的代码块，前面使用了关键词 function

function 函数名(参数列表){
…代码块…
}

分类：

无参无返回值的函数

带参数的函数

带返回值的方法

注意：函数就是方法

<body>
<script type="text/javascript">//无参无返回值的函数function fun01(){console.log("用良心做教育1");}fun01();//带参数的函数//注意：形参不需要加类型，调用方法时可以传参也可以不传参function fun02(a,b){console.log("用良心做教育2：" + a + " -- " + b);}fun02();fun02(10,20);fun02("xxx","yyy");fun02("abc",12345);//带返回值的方法//注意：JS函数里的返回值不用像Java方法里必须指定返回值类型function fun03(){return "用良心做教育3";}var v = fun03();console.log(v);
</script>
</body>

2.1.1 函数也是数据

函数也是一种数据，我们可以把函数赋值给一个变量

var add = function(a,b,c){return a+b+c;}

2.1.2 函数的重载

注意：JS的函数里没有重载的概念

<body>
<script type="text/javascript">function fun(a,b){alert(a+b);}function fun(a,b,c){alert(a+b+c);}//a - 10//b - 20//c - undefindfun(10,20);
</script>
</body>

2.2.3 函数的递归

注意：递归是一种思想，只要是面向对象的语言都有这个思想

需求：设计一个函数，传入n，求n的阶乘

<body>
<script type="text/javascript">function fun(n){if(n != 1){return fun(n-1)*n;}else{return 1;}}var num = fun(5);alert(num);
</script>
</body>

2.2 系统提供的预定义函数

parseInt()：试图将其收到的任何输入值转换成整数类型，转换失败则返回NaN

parseFloat()：同上类似

isNaN(xxx)：判断是否为非数字

isFinite(xxxx)：判断输入的是否是一个既非Infinity也非NaN的数字

eval()：会将其输入的字符串当作javascript代码来执行 (重要！！！！)

<body>
<script type="text/javascript">console.log("判断参数是否是数字：" + isFinite("abc"));//falseconsole.log("判断参数是否不是数字：" + isNaN("abc"));//trueconsole.log("将字符串转换为整数：" + parseInt("100.123"));//100console.log("将字符串转换为小数：" + parseFloat("100.123"));//100.123var str = "alert('用良心做教育');";eval(str);//认为字符串为js代码去执行</script>
</body>

3.DOM

采用DOM的方式来操作网页的元素

通过 HTML DOM，可访问 JavaScript HTML 文档的所有元素。

3.1 HTML DOM （文档对象模型）

当网页被加载时，浏览器会创建页面的文档对象模型

HTML DOM 模型被构造为对象的树。

3.2 HTML DOM 树

在这里插入图片描述

通过可编程的对象模型，JavaScript 获得了足够的能力来创建动态的 HTML

JavaScript 能够改变页面中的所有 HTML 元素

JavaScript 能够改变页面中的所有 HTML 属性

JavaScript 能够改变页面中的所有 CSS 样式

JavaScript 能够对页面中的所有事件做出反应

3.3 查找元素

通常，通过 JavaScript，您需要操作 HTML 元素

为了做到这件事情，您必须首先找到该元素，有三种方法来做这件事：

通过 id 找到 HTML 元素

通过标签名找到 HTML 元素

通过类名找到 HTML 元素

注意：document表示该文档，就是dom树

3.3.1 通过id查找 getElementById

在 DOM 中查找 HTML 元素的最简单的方法，是通过使用元素的 id

注意：getElementById获取到的是单个对象

<body><span id="span01">用良心做教育</span>
<br />
<span>做真实的自己</span><script type="text/javascript">//通过id获取元素var span01 = document.getElementById("span01");//绑定单击事件span01.onclick = function(){//设置内容span01.innerHTML = "做真实的自己";}</script>
</body>

3.3.2 通过标签名查找 getElementsByTagName

通过标签名查找 HTML 元素

注意：getElementsByTagName获取到的是数组，要用[0]，[1]去选择

<body><span>用良心做教育</span>
<br />
<span>做真实的自己</span><script type="text/javascript">//通过标签获取元素数组var span01 = document.getElementsByTagName("span")[0];//绑定单击事件span01.onclick = function(){//设置内容span01.innerHTML = "xxxx";}</script>
</body>

3.3.3 通过class查找 getElementsByClassName

通过class查找 HTML 元素

注意：getElementsByClassName获取到的是数组，要用[0]，[1]去选择

<body><span class="myclass">用良心做教育</span>
<br />
<span class="myclass">做真实的自己</span><script type="text/javascript">//通过class属性获取元素数组var span01 = document.getElementsByClassName("myclass")[0];//绑定单击事件span01.onclick = function(){//设置内容span01.innerHTML = "xxxx";}</script>
</body>

3.3.4 通过name查找 getElementsByName

注意：getElementsByName获取到的是数组，要用[0]，[1]去选择

<body><img name="xxx" src="../../img/小米.jpg" />
<img name="xxx" src="../../img/小米.jpg" /><script type="text/javascript">//通过name属性获取元素数组var img = document.getElementsByName("xxx")[0];//绑定单击事件img.onclick = function(){//设置属性img.src = "../../img/华为.jpg";}</script>
</body>

3.4 DOM_HTML 操作元素

3.4.1 操作内容

修改 HTML 内容的最简单的方法时使用 innerHTML 属性

如需改变 HTML 元素的内容，请使用这个语法：

document.getElementById(id).innerHTML=new HTML

<body><button onclick="fun01()">获取内容 - innerText</button>
<button onclick="fun02()">设置内容 - innerText</button>
<br />
<span>用良心做教育</span>
<br /><button onclick="fun03()">获取内容 - innerHTML</button>
<button onclick="fun04()">设置内容 - innerHTML</button>
<br />
<span>用良心做教育</span><script type="text/javascript">var span01 = document.getElementsByTagName("span")[0];var span02 = document.getElementsByTagName("span")[1];function fun01(){console.log(span01.innerText);}function fun02(){span01.innerText = "<h1>做真实的自己</h1>";}function fun03(){console.log(span02.innerHTML);}function fun04(){//把文本当做html标签设置span02.innerHTML = "<h1>做真实的自己</h1>";}</script>
</body>

innerHTML，innerText的区别：

innerHTML：把文本当做html标签设置

innerText：文本就是文本

3.4.2 操作属性

如需改变 HTML 元素的属性，请使用这个语法：

document.getElementById(id).attribute=new value

获取属性值：getAttribute

修改属性值：setAttribute

<body><button onclick="fun01()">获取属性</button>
<button onclick="fun02()">设置属性</button>
<br />
<img src="../../img/小米.jpg" width="100px" height="100px" />
<br /><script type="text/javascript">var img1 = document.getElementsByTagName("img")[0];var img2 = document.getElementsByTagName("img")[1];function fun01(){console.log(img2.getAttribute("src"));console.log(img2.getAttribute("width"));console.log(img2.getAttribute("height"));}function fun02(){img2.setAttribute("src","../../img/华为.jpg");img2.setAttribute("width","100%");img2.setAttribute("height","100%");}</script>
</body>

3.4.3 操作css样式

如需改变 HTML 元素的css样式，请使用这个语法：

document.getElementById(id).style.property=new style

<body><button onclick="fun01()">获取样式</button>
<button onclick="fun02()">设置样式</button>
<br />
<span>用良心做教育</span><script type="text/javascript">var span = document.getElementsByTagName("span")[0]function fun01(){console.log(span.style.color);console.log(span.style.fontSize);}function fun02(){span.style.color = "red";span.style.fontSize = "50px";}</script>
</body>

3.5 事件

对事件做出反应

我们可以在事件发生时执行 JavaScript，比如当用户在 HTML 元素上点击时。

如需在用户点击某个元素时执行代码，请向一个 HTML 事件属性添加 JavaScript 代码：

οnclick=JavaScript

HTML 事件的例子：

l 当用户点击鼠标时

l 当网页已加载时

l 当鼠标移动到元素上时

l 当输入字段被改变时

l 当提交 HTML 表单时

3.5.1 onclick 单击事件

点击之后，更改标题内容

this代表当前被点击的对象

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title></head><body><h1 onclick="fun01()">用良心做教育</h1><script type="text/javascript">var h1 = document.getElementsByTagName("h1")[0];function fun01(){h1.innerText = "做真实的自己";}</script></body>
</html>

换一种写法：

this代表当前被点击的对象

obj是随便写的一个对象

<body><h1 onclick="fun01(this)">用良心做教育</h1><script type="text/javascript">function fun01(obj){obj.innerText = "做真实的自己";}</script>
</body>

换一种写法：

<body><h1>用良心做教育</h1><script type="text/javascript">var h1 = document.getElementsByTagName("h1")[0];//绑定单击事件h1.onclick = function(){this.innerText = "做真实的自己";}</script>
</body>

3.5.2 onload 页面加载事件

onload 一般可以来做一些网页的环境准备工作

页面加载事件：事件会在页面元素和图像加载完成后立即发生

注意：js是一行一行去执行的

<title></title><script type="text/javascript">//页面加载事件：事件会在页面元素和图像加载完成后立即发生window.onload = function(){var h1 = document.getElementsByTagName("h1")[0];h1.onclick = function(){this.innerText = "做真实的自己";}}</script></head>
<body><h1>用良心做教育</h1>		</body>

3.5.3 键盘事件

监听器：

onkeydown：键盘按下事件

onkeypress：键盘按下事件 - 功能键(上下左右、删除键…)是不会被触发的

onkeyup：键盘松开事件

<body><input type="text" onkeydown="myDown()"onkeypress="myPress()"onkeyup="myUp()"
/><script type="text/javascript">function myDown(){//键盘按下事件console.log("down");}function myPress(){//键盘按下事件 - 功能键(上下左右、删除键...)是不会被触发的console.log("press");}function myUp(){//键盘松开事件console.log("up");}</script>
</body>

案例，设置一个文本框，每敲一个字母，会触发将输入文本转换为大写的函数

<body><input type="text" onkeyup="myUp(this)"
/><script type="text/javascript">function myUp(obj){//获取value属性var v = obj.value;//转大写v = v.toUpperCase();//设置value属性obj.value = v;}			</script>
</body>

3.5.4 鼠标移动事件

onMouseDown 按下鼠标时触发
onMouseOver 鼠标经过时触发
onMouseUp 按下鼠标松开鼠标时触发
onMouseOut 鼠标移出时触发
onMouseMove 鼠标移动时触

<body><img src="../../img/小米.jpg" width="100px" height="100px"onmousedown="myDown()"onmouseup="myUp()"onmousemove="myMove()"onmouseover="myOver()"onmouseout="myOut()"
/><script type="text/javascript">function myDown(){//鼠标按下事件console.log("down");}function myUp(){//鼠标松开事件console.log("up");}function myMove(){//鼠标移动事件console.log("move");}function myOver(){//鼠标移入事件console.log("over");}function myOut(){//鼠标移出事件console.log("out");}</script>
</body>

案例：图片，移入图片中就设置高亮，移出就暗沉

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style type="text/css">img{width: 100px;height: 100px;opacity: 0.3;/*设置透明度*/}</style></head><body><img src="../../img/touxiang01.jpg" /><img src="../../img/touxiang02.jpg" /><img src="../../img/touxiang03.jpg" /><img src="../../img/tx1.jpg" /><img src="../../img/tx2.jpg" /><img src="../../img/tx3.jpg" /><img src="../../img/波多野结衣.jpg" /><script type="text/javascript">//动态绑定事件var imgArr = document.getElementsByTagName("img");for(var i = 0;i<imgArr.length;i++){var img = imgArr[i];img.onmouseover = function(){this.style.opacity = 1;}img.onmouseout = function(){this.style.opacity = 0.3;}}</script></body>
</html>

运行结果：

在这里插入图片描述

3.5.5 焦点事件 onfocus/onblur

onfocus：获取焦点事件

onblur：失去焦点事件

<body><input type="text"onfocus="myFocus()"onblur="myBlur()"	
/><script type="text/javascript">function myFocus(){//获取焦点事件console.log("focus");}function myBlur(){//失去焦点事件console.log("blur");}			</script>	
</body>

案例：写一个注册的文本框，默认显示“请输入账号…”，光标定位到之后，自动将里面的信息清除掉

<body><input type="text"value="请输入账号..."//value的内容可以直接显示在文本框里面οnfοcus="myFocus(this)"οnblur="myBlur(this)"	
/><script type="text/javascript">function myFocus(obj){//获取焦点事件if(obj.value == "请输入账号..."){obj.value = "";}}function myBlur(obj){//失去焦点事件//获取该函数里的代码，如果当前浏览器支持该函数，就返回函数里的代码（字符串），如果不支持就返回undefined//alert(obj.value.trim);//判断浏览器是否兼容次方法if(obj.value.trim){if(obj.value.trim() == ""){obj.value = "请输入账号...";}}else{//注意：IE老版本是不支持trim()//将字符串的首尾空格的字符替换成空字符串，以达到去空格的目的if(obj.value.replace(/(^\s+)|(\s+$)/g,"") == ""){obj.value = "请输入账号...";}}}</script>
</body>