第八篇 JavaScript

 

本节模块的目的是让我们的页面可以动起来(HTML、CSS只能写出静态效果),并且可以添加一些用户交互交互的行为,例如:模态对话框、全选反选、可折叠菜单等。本节所有内容主要包含以下三部分:

  • JavaScript,他和Python一样是一门编程语言,而浏览器内置了JavaScript语言的解释器,所以JavaScript代码在浏览器上就可以运行。
  • DOM,(Document Object Model)是指文档对象模型,通过它,可以操作HTML文档的相关功能,例如:对标签内容进行删除和替换等。
  • BOM,(Browser Object Model)是指浏览器对象模型,通过他,可以操作浏览器相关的功能,例如:浏览器设置定时器,浏览器定时刷新页面。

他们三者之间的关系可以简单理解为:JavaScript是编程语言,DOM和BOM是两个模块,利用JavaScript语言再结合DOM、BOM模块可以让我们的页面出现动态的效果。

4.1 JavaScript

学习一门编程语言,需要了解他的编写方式以及语法规则,接下来开始学习新的一门编程语言JavaScript(简称JS)。

注意:JavaScript和Java没有任何关系。

4.1.1 代码存在形式

常见的JavaScript代码有两种存在形式:

  • Script代码块,只能在当前页面使用。
    应用场景:所有功能仅当前页面需要(如果代码太多也推荐放入js文件)。

    1. <!DOCTYPE html>
    2. <htmllang="en">
    3. <head>
    4. <metacharset="UTF-8">
    5. <title>JavaScript学习</title>
    6. <scripttype="text/javascript">
    7. // 内部编写JavaScript代码
    8. </script>
    9. </head>
    10. <body>
    11. </body>
    12. </html>
  • 独立js文件,可以被多个引入之后使用。
    应用场景:多个页面公共功能可以放入文件,避免重复编写。

    1. <!DOCTYPE html>
    2. <htmllang="en">
    3. <head>
    4. <metacharset="UTF-8">
    5. <title>JavaScript学习</title>
    6. <scripttype="text/javascript"src="JavaScript文件路径"></script>
    7. </head>
    8. <body>
    9. </body>
    10. </html>

4.1.2 推荐位置

上述我们了解JS的存在形式,而JS代码库和引入文件的存放位置也是有讲究,推荐大家把js代码都放在body标签的底部。

  1. <!DOCTYPE html>
  2. <htmllang="en">
  3. <head>
  4. <metacharset="UTF-8">
  5. <title>JavaScript学习</title>
  6. <!-- CSS代码推荐位置 -->
  7. <linkrel="stylesheet"href="CSS文件路径">
  8. <style>
  9. /* 内部编写CSS代码 */
  10. </style>
  11. </head>
  12. <body>
  13. <h1>HTML标签和样式</h1>
  14. <!-- JavaScript代码推荐位置 -->
  15. <scripttype="text/javascript"src="JavaScript文件路径"></script>
  16. <scripttype="text/javascript">
  17. // 内部编写JavaScript代码
  18. </script>
  19. </body>
  20. </html>

这是为什么呢?

因为浏览器在解析HTML、CSS、JavaScript文件时,是按照从上到下逐步解释并执行,如果JavaScript代码或文件放在head中可能会有因为耗时(网络请求或代码)导致页面显示速度太慢,影响用户感受,例如:

  1. <!DOCTYPE html>
  2. <htmllang="en">
  3. <head>
  4. <metacharset="UTF-8">
  5. <title>JavaScript学习</title>
  6. <scriptsrc="https://www.google.com"></script>
  7. <script>
  8. alert(123);
  9. </script>
  10. </head>
  11. <body>
  12. <h1>HTML标签和样式</h1>
  13. </body>
  14. </html>

注意:JS放在下面可以让用户快速看到页面上的 HTML和CSS效果,但JS的效果必须还要等耗时操作处理完才能用。

4.1.3 变量

JavaScript中变量的声明是一个非常容易出错的点,局部变量必须一个 var 开头,如果未使用var,则默认表示声明的是全局变量。

  1. <scripttype="text/javascript">
  2. // 全局变量
  3. name ='武沛齐';
  4. function func(){
  5. // 局部变量
  6. var age =18;
  7. // 全局变量
  8. gender ="男"
  9. }
  10. func();
  11. console.log(gender);// 男
  12. console.log(name);// 武沛齐
  13. console.log(age);// 报错:age是fun的局部变量,外部无法获取。
  14. </script>

提醒:js中单行注释用 // ;多行注释用 /* */

4.1.4 常见数据类型

1. 数字(Number)

JavaScript中不区分整数值和浮点数值,JavaScript中所有数字均用浮点数值表示。

  1. // 声明
  2. var page =111;
  3. var age =Number(18);
  4. var a1 =1,a2 =2, a3 =3;
  5. // 转换
  6. parseInt("1.2");// 将某值转换成数字,不成功则NaN
  7. parseFloat("1.2");// 将某值转换成浮点数,不成功则NaN
  8. /*
  9. NaN,非数字。可使用 isNaN(num) 来判断。
  10. Infinity,无穷大。可使用 isFinite(num) 来判断。
  11. */

扩展:可以用 typeof(“xx”) 查看数据类型。

2. 字符串(String)
  1. // 声明
  2. var name ="wupeiqi";
  3. var name =String("wupeiqi");
  4. var age_str =String(18);
  1. // 常用方法
  2. var name ="wupeiqi";
  3. var value = names[0]// 索引
  4. var value = name.length // 获取字符串长度
  5. var value = name.trim()// 去除空白
  6. var value = name.charAt(index)// 根据索引获取字符
  7. var value = name.substring(start,end)// 根据索引获取子序列
案例:标题跑马灯
  1. <!DOCTYPE html>
  2. <htmllang="en">
  3. <head>
  4. <metacharset="UTF-8">
  5. <title>真人比例充气老男孩</title>
  6. </head>
  7. <body>
  8. <h1>HTML标签和样式</h1>
  9. <scripttype="text/javascript">
  10. setInterval(function(){
  11. // 从HTML文档的title标签中获取标题文字
  12. var title = document.title;
  13. var lastChar = title.charAt(title.length -1);
  14. var preString = title.substring(0, title.length -1);
  15. var newTitle = lastChar + preString;
  16. // 新字符串赋值到HTML文档的title标签中。
  17. document.title = newTitle;
  18. },1000);
  19. </script>
  20. </body>
  21. </html>
3. 布尔类型(Boolean)

布尔类型仅包含真假,与Python不同的是其首字母小写。

  1. var status =true;
  2. var status =false;
  3. /*
  4. 在js中进行比较时,需要注意:
  5. == 比较值相等
  6. != 不等于
  7. === 比较值和类型相等
  8. !=== 不等于
  9. || 或
  10. && 且
  11. */
4. 数组(Array)

JavaScript中的数组类似于Python中的列表。

  1. // 声明
  2. var names =['武沛齐','肖峰','于超']
  3. var names =Array('武沛齐','肖峰','于超')
  1. // 常见方法
  2. var names =['武沛齐','肖峰','于超']
  3. names[0]// 索引
  4. names.push(ele)// 尾部追加元素
  5. var ele = names.obj.pop()// 尾部移除一个元素
  6. names.unshift(ele)// 头部插入元素
  7. var ele = obj.shift()// 头部移除一个元素
  8. names.splice(index,0,ele)// 在指定索引位置插入元素
  9. names.splice(index,1,ele)// 指定索引位置替换元素
  10. names.splice(index,1)// 指定位置删除元素
  11. names.slice(start,end)// 切片
  12. names.reverse()// 原数组反转
  13. names.join(sep)// 将数组元素连接起来以构建一个字符串
  14. names.concat(val,..)// 连接数组
  15. names.sort()// 对原数组进行排序
5. 字典(对象Object)

JavaScript中其实没有字典类型,字典是通过对象object构造出来的。

  1. // 声明
  2. info ={
  3. name:'武沛齐',
  4. "age":18
  5. }
  1. // 常用方法
  2. var val = info['name']// 获取
  3. info['age']=20// 修改
  4. info['gender']='male'// 新增
  5. delete info['age']// 删除
案例:动态表格
  1. <!DOCTYPE html>
  2. <htmllang="en">
  3. <head>
  4. <metacharset="UTF-8">
  5. <title>JavaScript学习</title>
  6. <style>
  7. table{
  8. /*边框合并*/
  9. border-collapse: collapse;
  10. }
  11. table th,table td{
  12. border:1px solid #ddd;
  13. padding:8px;
  14. }
  15. table th{
  16. font-weight: bold;
  17. }
  18. </style>
  19. </head>
  20. <body>
  21. <table>
  22. <thead>
  23. <tr>
  24. <th>学号</th>
  25. <th>姓名</th>
  26. <th>性别</th>
  27. </tr>
  28. </thead>
  29. <tbodyid="body">
  30. </tbody>
  31. </table>
  32. <scripttype="text/javascript">
  33. var userList =[
  34. {id:1,name:'武沛齐',gender:'男'},
  35. {id:2,name:'吴老板',gender:'男'},
  36. {id:3,name:'肖老板',gender:'男'}
  37. ];
  38. // 笨方法
  39. for(var i in userList){
  40. var row = userList[i];
  41. var trNode = document.createElement('tr');
  42. var tdNodeId = document.createElement('td');
  43. tdNodeId.innerText = row.id;
  44. trNode.appendChild(tdNodeId);
  45. var tdNodeName = document.createElement('td');
  46. tdNodeName.innerText = row.name;
  47. trNode.appendChild(tdNodeName);
  48. var tdNodeGender = document.createElement('td');
  49. tdNodeGender.innerText = row.gender;
  50. trNode.appendChild(tdNodeGender);
  51. var bodyNode = document.getElementById('body');
  52. bodyNode.appendChild(trNode);
  53. }
  54. // 简便方法
  55. /*
  56. for(var i in userList){
  57. var row = userList[i];
  58. var trNode = document.createElement('tr');
  59. for(var key in row){
  60. var tdNode = document.createElement('td');
  61. tdNode.innerText = row[key];
  62. trNode.appendChild(tdNode);
  63. }
  64. var bodyNode = document.getElementById('body');
  65. bodyNode.appendChild(trNode);
  66. }
  67. */
  68. </script>
  69. </body>
  70. </html>
6. 其他(null、undefine)
  • null是JavaScript语言的关键字,它表示一个特殊值,常用来描述“空值”,相当于Python的None。

  • undefined是一个特殊值,表示只是声明而变量未定义。

    1. var name;
    2. console.log(typeof(name));

4.1.5 条件

Python中的条件语句有两种,用于解决判断的问题。

  • if,else,用于判断。

    1. var age =18;
    2. if(age <18){
    3. }elseif(age>=18 and 1==1){
    4. }elseif(age>=30){
    5. }else{
    6. }
  • switch,case,用于判断等于某些值。

    1. var num =18;
    2. switch(num){
    3. case10:
    4. console.log('未成年');
    5. break;
    6. case18:
    7. console.log('成年');
    8. break;
    9. case35:
    10. console.log('油腻老男人');
    11. break;
    12. case100:
    13. console.log('....');
    14. break;
    15. default:
    16. console.log('太大了');
    17. }

4.1.6 循环语句

JavaScript中循环有两种写法,用于解决循环问题。

  • for(var i in ['国产','日韩','欧美']),默认生成索引,适用于:字符串、元组、字典。

    1. var names =['武沛齐','肖峰','于超']
    2. for(var index in names){
    3. console.log(index, names[index])
    4. }
  • for(var i=0;i<10;i++),自定义索引并设置增加步长,适用于:字符串、元组。(字典索引非有序)

    1. var names =['武沛齐','肖峰','于超']
    2. for(var i=0;i<names.lenght;i++){
    3. console.log(i, names[i])
    4. }

4.1.7 异常处理

在JavaScript的异常处理中有两个注意事项:

  • 主动抛异常 throw “xx” 或 throw Error({code:1000,error:’错了’})
  • catch只能破获一次,如果想要对异常精细化处理可以在catch代码块中再做类型判断。
  1. try{
  2. //这段代码从上往下运行,其中任何一个语句抛出异常该代码块就结束运行
  3. var name =''
  4. }
  5. catch(e){
  6. // 如果try代码块中抛出了异常,catch代码块中的代码就会被执行。
  7. //e是一个局部变量,用来指向Error对象或者其他抛出的对象
  8. }
  9. finally {
  10. //无论try中代码是否有异常抛出(甚至是try代码块中有return语句),finally代码块中始终会被执行。
  11. }

4.1.8 函数

JavaScript中的函数可以简单概括为以下三类:

  • 函数

    1. function func(arg){
    2. return arg +1;
    3. }
  • 匿名函数

    1. function(arg){
    2. return arg +1;
    3. }
    4. // 一般用于当做参数使用,例如:设置定时器 setInterval(function(){},1000)
  • 自执行函数,自动触发执行。

    1. (function(arg){
    2. console.log(arg);
    3. })('wupeiqi')
    1. <!--【可选部分】一般用于做数据隔离使用,因为JS中是以函数为作用域,所以当js代码比较多时,通过自执行函数做数据隔离(闭包)。 -->
    2. <!DOCTYPE html>
    3. <htmllang="en">
    4. <head>
    5. <metacharset="UTF-8">
    6. <title>JavaScript学习</title>
    7. </head>
    8. <body>
    9. <scripttype="text/javascript">
    10. funcList =[];
    11. (function(){
    12. var name ='武沛齐';
    13. function f1(){
    14. console.log(name);
    15. }
    16. funcList.push(f1);
    17. })();
    18. (function(){
    19. var name ='Alex';
    20. function f2(){
    21. console.log(name);
    22. }
    23. funcList.push(f2);
    24. })();
    25. funcList[0]()
    26. </script>
    27. </body>
    28. </html>

4.1.9 json 序列化

JavaScript提供了json序列化功能,即:将对象和字符串之间进行转换。

  • JSON.stringify(object) ,序列化

    1. var info ={name:'alex',age:19,girls:['钢弹','铁锤']}
    2. var infoStr = JSON.stringify(info)
    3. console.log(infoStr)#'{"name":"alex","age":19,"girls":["钢弹","铁锤"]}'
  • JSON.parse(str),反序列化

    1. var infoStr ='{"name":"alex","age":19,"girls":["钢弹","铁锤"]}'
    2. var info = JSON.parse(infoStr)
    3. console.log(info)

应用场景:网络中数据传输本质上是基于字符串进行,如果想要把一个js的对象通过网络发送到某个网站,就需要对对象进行序列化然后发送。(以后学习ajax会经常使用)。

总结

以上就是JavaScript语法部分要学习的所有内容。当然,JavaScript语法远不止这些,在以后的案例和学习中会继续扩展。

4.2 DOM

文档对象模型(Document Object Model,DOM)是一种用于HTML编程接口。它给文档提供了一种结构化的表示方法,可以改变文档的内容和呈现方式。更直白一点讲:DOM相当于是一个模块,提供了关于HTML文档中对标签进行操作的功能,JavaScript结合DOM可以对HTML中的标签进行操作。

4.2.1 选择器

DOM中提供了一些列的选择器用于在HTML文档中找到指定的相关标签对象。

  • 直接查找

    1. document.getElementById(arg)// 根据ID获取一个标签对象
    2. document.getElementsByClassName(arg)// 根据class属性获取标签对象集合
    3. document.getElementsByName(arg)// 根据name属性值获取标签对象集合
    4. document.getElementsByTagName(arg)// 根据标签名获取标签对象集合
  • 间接查找

    1. var tag = document.getElementById(arg);
    2. tag.parentElement // 找当前标签对象的父标签对象
    3. tag.children // 找当前标签对象的所有子标签对象
    4. tag.firstElementChild // 找当前标签对象的第一个子标签对象
    5. tag.lastElementChild // 找当前标签对象最后一个子标签对象
    6. tag.nextElementtSibling // 找当前标签对象下一个兄弟标签对象
    7. tag.previousElementSibling // 找当前标签对象上一个兄弟标签对象
案例:表格中删除案例

  1. <!DOCTYPE html>
  2. <htmllang="en">
  3. <head>
  4. <metacharset="UTF-8">
  5. <title>JavaScript学习</title>
  6. <style>
  7. table {
  8. /*边框合并*/
  9. border-collapse: collapse;
  10. }
  11. table th, table td {
  12. border:1px solid #ddd;
  13. padding:8px;
  14. }
  15. table th {
  16. font-weight: bold;
  17. }
  18. </style>
  19. </head>
  20. <body>
  21. <table>
  22. <thead>
  23. <tr>
  24. <th>学号</th>
  25. <th>姓名</th>
  26. <th>性别</th>
  27. <th>操作</th>
  28. </tr>
  29. </thead>
  30. <tbody>
  31. <tr>
  32. <td>1</td>
  33. <td>郭德纲</td>
  34. <td></td>
  35. <td>
  36. <inputtype="button"value="删除"onclick="deleteRow(this);">
  37. </td>
  38. </tr>
  39. <tr>
  40. <td>2</td>
  41. <td>于谦</td>
  42. <td></td>
  43. <td>
  44. <inputtype="button"value="删除"onclick="deleteRow(this);">
  45. </td>
  46. </tr>
  47. <tr>
  48. <td>3</td>
  49. <td>烧饼</td>
  50. <td></td>
  51. <td>
  52. <inputtype="button"value="删除"onclick="deleteRow(this);">
  53. </td>
  54. </tr>
  55. </tbody>
  56. </table>
  57. <scripttype="text/javascript">
  58. /*
  59. 删除表格中当前行的数据
  60. */
  61. function deleteRow(self){
  62. var rowTr = self.parentElement.parentElement;
  63. rowTr.remove();
  64. }
  65. </script>
  66. </body>
  67. </html>

4.2.2 文本操作

对标签内部文本进行操作时,可以通过 innerText 和 innerHTML来进行。

  • innerText
    • 标签对象.innerText,读取标签内容(仅文本)。
    • 标签对象.innerText="武",修改标签内容(仅文本)。
  • innerHTML
    • 标签对象.innerHTML,读取标签内容(含标签)。
    • 标签对象.innerText="<a href='#'>武</a>",修改标签内容(可标签、课文本)。
案例:读取表格文本内容
  1. <!DOCTYPE html>
  2. <htmllang="en">
  3. <head>
  4. <metacharset="UTF-8">
  5. <title>JavaScript学习</title>
  6. <style>
  7. table {
  8. /*边框合并*/
  9. border-collapse: collapse;
  10. }
  11. table th, table td {
  12. border:1px solid #ddd;
  13. padding:8px;
  14. }
  15. table th {
  16. font-weight: bold;
  17. }
  18. </style>
  19. </head>
  20. <body>
  21. <table>
  22. <thead>
  23. <tr>
  24. <th>ID</th>
  25. <th>网站</th>
  26. <th>介绍</th>
  27. <th>读取</th>
  28. </tr>
  29. </thead>
  30. <tbody>
  31. <tr>
  32. <td>1</td>
  33. <td>
  34. <ahref="http://www.baidu.com">百度</a>
  35. </td>
  36. <td>百度是一个流氓网站。</td>
  37. <td>
  38. <inputtype="button"value="读取网站innerText"onclick="readSite(this)">
  39. <inputtype="button"value="读取网站innerHTML"onclick="readSummary(this)">
  40. </td>
  41. </tr>
  42. </tbody>
  43. </table>
  44. <scripttype="text/javascript">
  45. function readSite(self){
  46. var tdTag = self.parentElement.previousElementSibling.previousElementSibling;
  47. console.log(tdTag.innerText);
  48. }
  49. function readSummary(self){
  50. var tdTag = self.parentElement.previousElementSibling.previousElementSibling;
  51. console.log(tdTag.innerHTML);
  52. }
  53. </script>
  54. </body>
  55. </html>

4.2.3 值操作

值操作针对与用户交互相关的标签,其中内部使用value属性进行操作。

  • 文本框

    1. <!DOCTYPE html>
    2. <htmllang="en">
    3. <head>
    4. <metacharset="UTF-8">
    5. <title>JavaScript学习</title>
    6. </head>
    7. <body>
    8. <inputid="user"type="text"value="张鹤伦">
    9. <scripttype="text/javascript">
    10. var userTag = document.getElementById('user');
    11. console.log('获取输入框中的值:',userTag.value);
    12. // 修改input中的值
    13. userTag.value ="骚浪贱";
    14. console.log('获取修改完输入框中的值:',userTag.value);
    15. </script>
    16. </body>
    17. </html>
  • 多行文本框

    1. <!DOCTYPE html>
    2. <htmllang="en">
    3. <head>
    4. <metacharset="UTF-8">
    5. <title>JavaScript学习</title>
    6. </head>
    7. <body>
    8. <h1>文章</h1>
    9. <textarea> id="article" cols="30" rows="10">从前有座山,山里有座庙。</textarea>
    10. <inputtype="button"onclick="showArticle();"value="点击获取"/>
    11. <inputtype="button"onclick="setArticle();"value="点击设置"/>
    12. <scripttype="text/javascript">
    13. function showArticle(){
    14. // 获取textarea的值
    15. console.log(document.getElementById('article').value);
    16. }
    17. function setArticle(){
    18. // 设置textarea的值
    19. document.getElementById('article').value ="秃驴";
    20. }
    21. </script>
    22. </body>
    23. </html>
  • 下拉框

    1. <!DOCTYPE html>
    2. <htmllang="en">
    3. <head>
    4. <metacharset="UTF-8">
    5. <title>JavaScript学习</title>
    6. </head>
    7. <body>
    8. <h1>城市</h1>
    9. <selectid="city">
    10. <optionvalue="10">上海</option>
    11. <optionvalue="20">北京</option>
    12. <optionvalue="30">深圳</option>
    13. </select>
    14. <inputtype="button"onclick="showCity();"value="点击获取选择"/>
    15. <inputtype="button"onclick="setCity();"value="点击设置"/>
    16. <scripttype="text/javascript">
    17. function showCity(){
    18. // 获取select下拉框选中项的值
    19. var cityTag = document.getElementById('city');
    20. console.log(cityTag.value);
    21. }
    22. function setCity(){
    23. // 设置select下拉框选中项的值,让select去选中。
    24. document.getElementById('city').value ="30";
    25. }
    26. </script>
    27. </body>
    28. </html>
  • 单选框,通过value可以取值。但在应用时常常是以选择形式出现,所以在使用过程中还会去判断他是否已被选中。
    扩展:标签对象.checked 可以对选中状态进行读取和设置。

    1. <!DOCTYPE html>
    2. <htmllang="en">
    3. <head>
    4. <metacharset="UTF-8">
    5. <title>JavaScript学习</title>
    6. </head>
    7. <body>
    8. <inputtype="radio"name="gender"value="11"/>
    9. <inputtype="radio"name="gender"value="33"/>
    10. <inputtype="radio"name="gender"value="66"/>
    11. <inputtype="button"onclick="showGender();"value="点击获取选择"/>
    12. <inputtype="button"onclick="setGender();"value="点击设置选择状态"/>
    13. <scripttype="text/javascript">
    14. function showGender(){
    15. var radios = document.getElementsByName('gender');
    16. // 循环所有的radio标签,找到被选中的radio,获取他的value值。
    17. for(var i =0; i < radios.length; i++){
    18. if(radios[i].checked){
    19. // 弹出选中值
    20. console.log(radios[i].value);
    21. // 选中后退出循环
    22. break;
    23. }
    24. }
    25. }
    26. function setGender(){
    27. var radios = document.getElementsByName('gender');
    28. // 循环所有的radio标签,找到被选中的radio,获取他的value值。
    29. for(var i =0; i < radios.length; i++){
    30. if(radios[i].value ==="33"){
    31. radios[i].checked =true;
    32. }
    33. }
    34. }
    35. </script>
    36. </body>
    37. </html>
  • 复选框,通过value可以取值。但在应用时常常是以多选形式出现,所以在使用过程中还会去判断他是否已被选中。
    扩展:标签对象.checked 可以对选中状态进行读取和设置。

    1. <!DOCTYPE html>
    2. <htmllang="en">
    3. <head>
    4. <metacharset="UTF-8">
    5. <title>JavaScript学习</title>
    6. </head>
    7. <body>
    8. <h1>爱好</h1>
    9. <inputclass="hobby"type="checkbox"value="1">足球
    10. <inputclass="hobby"type="checkbox"value="2">篮球
    11. <inputclass="hobby"type="checkbox"value="3">乒乓球
    12. <inputtype="button"onclick="showHobby();"value="点击获取选择"/>
    13. <inputtype="button"onclick="setHobby();"value="点击设置选择"/>
    14. <scripttype="text/javascript">
    15. function showHobby(){
    16. var valueList =[];
    17. var checkboxList = document.getElementsByClassName('hobby');
    18. for(var i =0; i < checkboxList.length; i++){
    19. if(checkboxList[i].checked){
    20. // 弹出选中值
    21. valueList.push(checkboxList[i].value);
    22. }
    23. }
    24. console.log(valueList);
    25. }
    26. function setHobby(){
    27. var checkboxList = document.getElementsByClassName('hobby');
    28. for(var i =0; i < checkboxList.length; i++){
    29. if(checkboxList[i].value ==='1'|| checkboxList[i].value ==='3'){
    30. checkboxList[i].checked =true;
    31. }else{
    32. checkboxList[i].checked =false;
    33. }
    34. }
    35. }
    36. </script>
    37. </body>
    38. </html>
案例:表格多选、反选、取消
  1. <!DOCTYPE html>
  2. <htmllang="en">
  3. <head>
  4. <metacharset="UTF-8">
  5. <title>JavaScript学习</title>
  6. <style>
  7. table {
  8. /*边框合并*/
  9. border-collapse: collapse;
  10. }
  11. table th, table td {
  12. border:1px solid #ddd;
  13. padding:8px;
  14. }
  15. table th {
  16. font-weight: bold;
  17. }
  18. </style>
  19. </head>
  20. <body>
  21. <div>
  22. <inputtype="button"value="全选"onclick="checkAll();"/>
  23. <inputtype="button"value="取消"onclick="cancelAll();"/>
  24. <inputtype="button"value="反选"onclick="reverseCheck();"/>
  25. </div>
  26. <table>
  27. <thead>
  28. <tr>
  29. <th>选择</th>
  30. <th>姓名</th>
  31. <th>性别</th>
  32. </tr>
  33. </thead>
  34. <tbodyid="tableBody">
  35. <tr>
  36. <td><inputtype="checkbox"value="1"/></td>
  37. <td>郭德纲</td>
  38. <td></td>
  39. </tr>
  40. <tr>
  41. <td><inputtype="checkbox"value="2"/></td>
  42. <td>于谦</td>
  43. <td></td>
  44. </tr>
  45. <tr>
  46. <td><inputtype="checkbox"value="2"/></td>
  47. <td>烧饼</td>
  48. <td></td>
  49. </tr>
  50. </tbody>
  51. </table>
  52. <scripttype="text/javascript">
  53. /* 全选 */
  54. function checkAll(){
  55. var trTagList = document.getElementById('tableBody').children;
  56. for(var i =0; i < trTagList.length; i++){
  57. var trTag = trTagList[i];
  58. var inputTag = trTagList[i].firstElementChild.firstElementChild;
  59. inputTag.checked =true;
  60. }
  61. }
  62. /* 取消 */
  63. function cancelAll(){
  64. var trTagList = document.getElementById('tableBody').children;
  65. for(var i =0; i < trTagList.length; i++){
  66. var trTag = trTagList[i];
  67. var inputTag = trTagList[i].firstElementChild.firstElementChild;
  68. inputTag.checked =false;
  69. }
  70. }
  71. /* 取消 */
  72. function reverseCheck(){
  73. var trTagList = document.getElementById('tableBody').children;
  74. for(var i =0; i < trTagList.length; i++){
  75. var trTag = trTagList[i];
  76. var inputTag = trTagList[i].firstElementChild.firstElementChild;
  77. // inputTag.checked = ! inputTag.checked;
  78. inputTag.checked = inputTag.checked ?false:true;
  79. }
  80. }
  81. </script>
  82. </body>
  83. </html>

4.3.4 class 属性操作

DOM中主要提供了三个帮助我们操作class属性值的功能:

  • 标签对象.className,class属性对应的值直接操作。
  • 标签对象.classList.remove(cls),class属性对应值删除某个样式。
  • 标签对象.classList.add(cls),class属性中添加样式。
案例:模态对话框
  1. <!DOCTYPE html>
  2. <htmllang="en">
  3. <head>
  4. <metacharset="UTF-8">
  5. <title>Title</title>
  6. <style>
  7. body{
  8. margin:0;
  9. }
  10. .container{
  11. width:980px;
  12. margin:0auto;
  13. }
  14. .header{
  15. height:48px;
  16. background-color:#499ef3;
  17. }
  18. .shade{
  19. position:fixed;
  20. top:0;
  21. bottom:0;
  22. left:0;
  23. right:0;
  24. background-color: black;
  25. opacity:0.7;
  26. }
  27. .login{
  28. width:400px;
  29. height:300px;
  30. background-color: white;
  31. border:1px solid #dddddd;
  32. position:fixed;
  33. top:60px;
  34. left:50%;
  35. margin-left:-200px;
  36. }
  37. .hide{
  38. display: none;
  39. }
  40. </style>
  41. </head>
  42. <body>
  43. <divclass="header">
  44. <divstyle="float: right;margin:10px;">
  45. <aonclick="showDialog();"style="padding:5px10px;background-color: goldenrod;color: white;">登录</a>
  46. </div>
  47. </div>
  48. <divclass="body">
  49. <divclass="container"style="text-align: center">
  50. <imgsrc="https://images.cnblogs.com/cnblogs_com/wupeiqi/662608/o_big_girl.png"alt="">
  51. </div>
  52. </div>
  53. <!--遮罩层-->
  54. <divid="shade"class="shade hide"></div>
  55. <!--登录框-->
  56. <divid="login"class="login hide">
  57. <h2style="text-align: center">用户登录</h2>
  58. <aonclick="hideDialog();"style="padding:5px10px;background-color: cornflowerblue;color: white;">关闭</a>
  59. </div>
  60. <scripttype="text/javascript">
  61. function showDialog(){
  62. document.getElementById('shade').classList.remove('hide');
  63. document.getElementById('login').classList.remove('hide');
  64. }
  65. function hideDialog(){
  66. document.getElementById('shade').classList.add('hide');
  67. document.getElementById('login').classList.add('hide');
  68. }
  69. </script>
  70. </body>
  71. </html>

4.3.5 style 样式操作

如果想要对样式操作的粒度更细一些,可以使用style样式操作,他比class属性对样式的操作粒度更细。

例如:修改下标签的背景颜色。

  1. <!DOCTYPE html>
  2. <htmllang="en">
  3. <head>
  4. <metacharset="UTF-8">
  5. <title>JavaScript学习</title>
  6. </head>
  7. <body>
  8. <divid="header"style="height:48px;background-color: red;"></div>
  9. <scripttype="text/javascript">
  10. document.getElementById('header').style.backgroundColor ='green';
  11. </script>
  12. </body>
  13. </html>
案例:点赞+1效果
  1. <!DOCTYPE html>
  2. <htmllang="en">
  3. <head>
  4. <metacharset="UTF-8">
  5. <title>JavaScript学习</title>
  6. <style>
  7. body {
  8. margin:0;
  9. }
  10. .container {
  11. width:980px;
  12. margin:0auto;
  13. }
  14. .item {
  15. height:120px;
  16. border:1px solid #dddddd;
  17. margin-top:20px;
  18. padding:10px;
  19. }
  20. .item .title {
  21. margin-bottom:10px;
  22. font-weight: bold;
  23. }
  24. .item img {
  25. width:60px;
  26. height:60px;
  27. }
  28. .item .favor {
  29. position: relative;
  30. cursor: pointer;
  31. }
  32. </style>
  33. </head>
  34. <body>
  35. <divclass="container">
  36. <divclass="item">
  37. <divclass="title">震惊了...</div>
  38. <imgsrc="https://images.cnblogs.com/cnblogs_com/wupeiqi/662608/o_20130809170025.png"alt="">
  39. <divclass="favor"onclick="doFavor(this);"></div>
  40. </div>
  41. <divclass="item">
  42. <divclass="title">冷酷无情,无理取闹...</div>
  43. <imgsrc="https://images.cnblogs.com/cnblogs_com/wupeiqi/662608/o_20130809170025.png"alt="">
  44. <divclass="favor"onclick="doFavor(this);"></div>
  45. </div>
  46. </div>
  47. <scripttype="text/javascript">
  48. function doFavor(self){
  49. var plusTag = document.createElement('span');
  50. var fontSize =10;
  51. var marginLeft =10;
  52. var marginTop =10;
  53. var opacity =1;
  54. plusTag.innerText ="+1";
  55. plusTag.style.color ='green';
  56. plusTag.style.position ='absolute';
  57. plusTag.style.fontSize = fontSize +'px';
  58. plusTag.style.marginLeft = marginLeft +'px';
  59. plusTag.style.marginTop = marginTop +'px';
  60. plusTag.style.opacity = opacity;
  61. self.appendChild(plusTag);
  62. var interval = setInterval(function(){
  63. fontSize +=5;
  64. marginLeft +=5;
  65. marginTop -=5;
  66. opacity -=0.2;
  67. plusTag.style.fontSize = fontSize +'px';
  68. plusTag.style.marginLeft = marginLeft +'px';
  69. plusTag.style.marginTop = marginTop +'px';
  70. plusTag.style.opacity = opacity;
  71. if(opacity <=0){
  72. self.removeChild(plusTag);
  73. clearInterval(interval);
  74. }
  75. },100)
  76. }
  77. </script>
  78. </body>
  79. </html>

4.3.6 事件

DOM中可以为标签设置事件,给指定标签绑定事件之后,只要对应事件被处罚,就会执行对应代码。常见事件有:

  • onclick,单击时触发事件

  • ondblclick,双击触发事件

  • onchange,内容修改时触发事件

  • onfocus,获取焦点时触发事件

  • onblur,失去焦点触发事件

  • 其他事件

     

     

案例:修改下拉框触发change事件
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <metacharset='utf-8'/>
  5. <title>DOM学习</title>
  6. </head>
  7. <body>
  8. <selectid="city"onchange="changeEvent(this);">
  9. <optionvalue="10">普通青年</option>
  10. <optionvalue="20">文艺青年</option>
  11. <optionvalue="30">二逼青年</option>
  12. </select>
  13. <scripttype="text/javascript">
  14. function changeEvent(self){
  15. console.log(self.value);
  16. }
  17. </script>
  18. </body>
  19. </html>
案例:左侧菜单点击切换
  1. <!DOCTYPE html>
  2. <htmllang="en">
  3. <head>
  4. <metacharset="UTF-8">
  5. <title>CSS学习</title>
  6. <style>
  7. body {
  8. margin:0;
  9. }
  10. .header {
  11. height:48px;
  12. background-color:#499ef3;
  13. }
  14. .body .menu {
  15. position:fixed;
  16. top:48px;
  17. left:0;
  18. bottom:0;
  19. width:220px;
  20. border-right:1px solid #dddddd;
  21. overflow: scroll;
  22. }
  23. .body .content {
  24. position:fixed;
  25. top:48px;
  26. right:0;
  27. bottom:0;
  28. left:225px;
  29. /* 超出范围的话,出现滚轮 */
  30. overflow: scroll;
  31. }
  32. .body .menu .title {
  33. padding:8px;
  34. border-bottom:1px solid #dddddd;
  35. background-color:#5f4687;
  36. color: white;
  37. }
  38. .body .menu .child {
  39. border-bottom:1px solid #dddddd;
  40. }
  41. .body .menu .child a {
  42. display: block;
  43. padding:5px10px;
  44. color: black;
  45. text-decoration: none;
  46. }
  47. .body .menu .child a:hover {
  48. background-color:#dddddd;
  49. }
  50. .hide {
  51. display: none;
  52. }
  53. </style>
  54. </head>
  55. <body>
  56. <divclass="header"></div>
  57. <divclass="body">
  58. <divclass="menu">
  59. <divclass="item">
  60. <divclass="title"onclick="showMenu(this);">国产</div>
  61. <divclass="child">
  62. <ahref="#">少年的你</a>
  63. <ahref="#">我不是药神</a>
  64. <ahref="#">我和我的祖国</a>
  65. </div>
  66. </div>
  67. <divclass="item">
  68. <divclass="title"onclick="showMenu(this);">欧美</div>
  69. <divclass="child hide ">
  70. <ahref="#">战争之王</a>
  71. <ahref="#">华尔街之狼</a>
  72. <ahref="#">聚焦</a>
  73. </div>
  74. </div>
  75. <divclass="item">
  76. <divclass="title"onclick="showMenu(this);">韩国</div>
  77. <divclass="child hide">
  78. <ahref="#">坏家伙们</a>
  79. <ahref="#">寄生虫</a>
  80. <ahref="#">燃烧</a>
  81. </div>
  82. </div>
  83. </div>
  84. <divclass="content"></div>
  85. </div>
  86. <scripttype="text/javascript">
  87. function showMenu(self){
  88. var childList = document.getElementsByClassName('child');
  89. for(var i =0; i < childList.length; i++){
  90. childList[i].classList.add('hide');
  91. }
  92. self.nextElementSibling.classList.remove('hide');
  93. }
  94. </script>
  95. </body>
  96. </html>
案例:请输入搜索关键字
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <metacharset='utf-8'/>
  5. <title>DOM</title>
  6. <style>
  7. .gray {
  8. color: gray;
  9. }
  10. .black {
  11. color: black;
  12. }
  13. </style>
  14. </head>
  15. <body>
  16. <inputtype='text'class='gray'value='请输入关键字'onfocus='getFocus(this);'onblur='leave(this);'/>
  17. <scripttype="text/javascript">
  18. function getFocus(self){
  19. self.className ='black';
  20. if(self.value ==='请输入关键字'|| self.value.trim().length ===0){
  21. self.value ='';
  22. }
  23. }
  24. function leave(self){
  25. if(self.value.length ===0){
  26. self.value ='请输入关键字';
  27. self.className ='gray';
  28. }else{
  29. self.className ='black';
  30. }
  31. }
  32. </script>
  33. </body>
  34. </html>

4.3 BOM

BOM(Browser Object Model)是指浏览器对象模型,通过他,可以操作浏览器相关的功能。更直白一点讲:BOM相当于是一个模块,提供了关于浏览器操作的功能。

4.3.1 提示框

  • alert,提示框。
  • confirm,确认框。
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <metacharset='utf-8'/>
  5. <title>BOM</title>
  6. </head>
  7. <body>
  8. <inputtype="button"value="提示框"onclick="showAlert();">
  9. <inputtype="button"value="确认框"onclick="showConfirm();">
  10. <scripttype="text/javascript">
  11. function showAlert(){
  12. alert('震惊了,Alex居然..');
  13. }
  14. function showConfirm(){
  15. // 显示确认框
  16. // result为true,意味着点击了确认。
  17. // result为false,意味着点击了取消。
  18. var result = confirm('请确认是否删除?');
  19. console.log(result);
  20. }
  21. </script>
  22. </body>
  23. </html>

4.3.2 浏览器URL

  • location.href,获取当前浏览器URL。
  • location.href = "url",设置URL,即:重定向。
  • location.reload(),重新加载,即:刷新页面。
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <metacharset='utf-8'/>
  5. <title>BOM</title>
  6. </head>
  7. <body>
  8. <inputtype="button"value="获取当前URL"onclick="getUrl();">
  9. <inputtype="button"value="重新加载页面"onclick="reloadPage();">
  10. <inputtype="button"value="重定向到百度"onclick="redirectToBaidu();">
  11. <scripttype="text/javascript">
  12. function getUrl(){
  13. console.log(location.href);
  14. }
  15. function reloadPage(){
  16. location.reload();
  17. }
  18. function redirectToBaidu(){
  19. location.href ="http://www.baidu.com";
  20. }
  21. </script>
  22. </body>
  23. </html>

4.3.3 定时器

  • setInterval(function(){},1000),创建多次定时器。
  • clearInterval(定时器对象),删除多次定时器。
  • setTimeout(function(){},1000),创建单次定时器。
  • clearTimeout(定时器对象),删除单次定时器。
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <metacharset='utf-8'/>
  5. <title>BOM</title>
  6. </head>
  7. <body>
  8. <h1>计时器:<spanid="time"></span></h1>
  9. <inputtype="button"value="开始计时"onclick="start();">
  10. <inputtype="button"value="停止计时"onclick="stop();">
  11. <scripttype="text/javascript">
  12. var time;
  13. function start(){
  14. time =0;
  15. document.getElementById('time').innerText = time;
  16. interval = setInterval(function(){
  17. time +=1;
  18. document.getElementById('time').innerText = time;
  19. },1000);
  20. }
  21. function stop(){
  22. clearInterval(interval)
  23. }
  24. </script>
  25. </body>
  26. </html>

 

posted @ 2021-05-09 20:22  风hua  阅读(52)  评论(0编辑  收藏  举报