发帖
翼度科技»论坛 › 编程开发 › python › 查看内容

day30-JavaScript(2)

回忆过去珍惜现在

5

主题

5

帖子

15

积分

新手上路

Rank: 1

积分
15
显示全部楼层
1、BOM对象

BOM:Broswer object model,即浏览器提供我们开发者在javascript用于操作浏览器的对象。
1.1、window对象


  • 窗口方法
  1. // BOM  Browser object model 浏览器对象模型
  3. // js中最大的一个对象.整个浏览器窗口出现的所有东西都是window对象的内容.
  4. console.log( window );
  6. // alert()  弹出一个警告框
  7. window.alert("hello");
  9. //confirm  弹出一个确认框,点击确认,返回true, 点击取消,返回false
  10. var ret = confirm("您确认要删除当前文件么?");
  11. console.log( ret  );
  13. // 弹出一个消息输入框,当点击确认以后,则返回可以接收到用户在输入框填写的内容.如果点击取消,则返回null
  14. var ret = prompt("请输入一个内容","默认值");
  15. console.log( ret );
  17. // close() 关闭当前浏览器窗口
  18. window.close();
  20. //打开一个新的浏览器窗口
  21. window.open("http://www.baidu.com","_blank","width=800px,height=500px,left=200px,top=200px";
  22.             
复制代码

  • 定时方法
setInterval() 方法会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数。而setTimeout是在指定的毫秒数后调用code一次。
  1. // 设置循环定时器
  2. var ID = window.setInterval(code,millisec)   // 每millisec毫秒执行一次code
  3. // 取消循环定时器
  4. window.clearInterval(ID);
  6. // 设置单次定时器
  7. var ID = window.setTimeout(code,millisec) // millisec毫秒后执行code一次
  8. // 取消单次定时器
  9. window.clearTimeout(ID);
复制代码
其中，code为要调用的函数或要执行的代码串。millisec周期性执行或调用 code 之间的时间间隔，以毫秒计。
显示时间案例：
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6. </head>
  7. <body>
  9. <input id="ID1" type="text" >
  10. <button onclick="begin()">开始</button>
  11. <button onclick="end()">停止</button>
  15. </body>
  16. </html>
复制代码
1.2、Location (地址栏)对象
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6. </head>
  7. <body>
  8. <button onclick="func1()">查看Location对象</button>
  9. <button onclick="func2()">跳转到百度</button>
  10. <button onclick="func3()">F5</button>
  12. </body>
  13. </html>
复制代码
1.3、本地存储对象

使用存储对象的过程中, 对象数据会根据域名端口进行保存的,所以 js不能获取当前页面以外其他域名端口保存到本地的数据。也就是说,我们存储对象获取数据只能是自己当前端口或者域名下曾经设置过的数据,一旦端口或者域名改变,则无法获取原来的数据。
  1. localStorage    本地永久存储
  2.   localStorage.setItem("变量名","变量值");   保存一个数据到存储对象
  3.   localStorage.变量名 = 变量值               保存一个数据到存储对象
  5.   localStorage.getItem("变量名")   获取存储对象中保存的指定变量对应的数据
  6.   localStorage.变量名              获取存储对象中保存的指定变量对应的数据
  8.   localStorage.removeItem("变量名")   从存储对象中删除一个指定变量对应的数据
  9.   localStorage.clear()               从存储对象中删除所有数据
  11. sessionStorage  本地会话存储
  12.   sessionStorage.setItem("变量名","变量值");   保存一个数据到存储对象
  13.   sessionStorage.变量名 = 变量值               保存一个数据到存储对象
  15.   sessionStorage.getItem("变量名")   获取存储对象中保存的指定变量对应的数据
  16.   sessionStorage.变量名              获取存储对象中保存的指定变量对应的数据
  18.   sessionStorage.removeItem("变量名")   从存储对象中删除一个指定变量对应的数据
  19.   sessionStorage.clear()               从存储对象中删除所有数据
复制代码
练习：
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6. </head>
  7. <body>
  8. <button onclick="func1()">设置一个数据</button>
  9. <button onclick="func2()">查看一个数据</button>
  11. </body>
  12. </html>
复制代码
localStorage和sessionStorage的区别：
1、localStorage和sessionStorage一样都是用来存储客户端临时信息的对象。
2、他们均只能存储字符串类型的对象（虽然规范中可以存储其他原生类型的对象，但是目前为止没有浏览器对其进行实现）。
3、localStorage生命周期是永久，这意味着除非用户显示在浏览器提供的UI上清除localStorage信息，否则这些信息将永远存在。sessionStorage生命周期为当前窗口或标签页，一旦窗口或标签页被永久关闭了，那么所有通过sessionStorage存储的数据也就被清空了。
4、不同浏览器无法共享localStorage或sessionStorage中的信息。相同浏览器的不同页面间可以共享相同的 localStorage（页面属于相同域名和端口），但是不同页面或标签页间无法共享sessionStorage的信息。这里需要注意的是，页面及标 签页仅指顶级窗口，如果一个标签页包含多个iframe标签且他们属于同源页面，那么他们之间是可以共享sessionStorage的。
2、DOM对象(JS核心)

DOM  document Object Model 文档对象模型
  1. // 整个html文档,会保存一个文档对象document
  2. // console.log( document ); // 获取当前文档的对象
复制代码
2.1、查找标签


  • 直接查找标签
  1. document.getElementsByTagName("标签名")
  2. document.getElementById("id值")
  3. document.getElementsByClassName("类名")
复制代码
1、方法的返回值是dom对象还是数组
2、document对象可以是任意dom对象，将查询范围限制在当前dom对象


  • 导航查找标签
  1. elementNode.parentElement           // 父节点标签元素
  2. elementNode.children                // 所有子标签
  3. elementNode.firstElementChild       // 第一个子标签元素
  4. elementNode.lastElementChild        // 最后一个子标签元素
  5. elementNode.nextElementSibling     // 下一个兄弟标签元素
  6. elementNode.previousElementSibling  // 上一个兄弟标签元素
复制代码

  • CSS选择器查找
  1. document.querySelector("css选择器")  //根据css选择符来获取查找到的第一个元素，返回标签对象（dom对象）
  2. document.querySelectorAll("css选择器"); // 根据css选择符来获取查找到的所有元素,返回数组
复制代码
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6. </head>
  7. <body>
  10. DIV1
  12. DIV
  13. DIV
  14. DIV
  18.     item
  23.    
  24.         <ul >
  25.             <li  id="i2">111</li>
  26.             <li>222</li>
  27.             <li>333</li>
  28.         </ul>
  29.    
  34. </body>
  35. </html>
复制代码
2.2、绑定事件


  • 静态绑定 ：直接把事件写在标签元素中。
  1. click
复制代码

  • 动态绑定：在js中通过代码获取元素对象,然后给这个对象进行后续绑定。
  1. <p id="i1">试一试!</p>
复制代码
一个元素本身可以绑定多个不同的事件, 但是如果多次绑定同一个事件,则后面的事件代码会覆盖前面的事件代码
多个标签绑定事件
  1. <ul>
  2.     <li>111</li>
  3.     <li>222</li>
  4.     <li>333</li>
  5.     <li>444</li>
  6.     <li>555</li>
  7. </ul>
复制代码
2.3、操作标签
  1. <标签名 属性1=“属性值1” 属性2=“属性值2”……>文本</标签名>
复制代码

  • <标签名 属性1=“属性值1” 属性2=“属性值2”……>文本</标签名>操作
  1. click
复制代码

  • value操作
像input标签，select标签以及textarea标签是没有<标签名 属性1=“属性值1” 属性2=“属性值2”……>文本</标签名>的，但是显示内容由value属性决定
  1.     <input type="text" id="i1" value="yuan">
  2.     <textarea name="" id="i2" cols="30" rows="10">123</textarea>
  3.     <select  id="i3">
  4.         <option value="hebei">河北省</option>
  5.         <option value="hubei">湖北省</option>
  6.         <option value="guangdong">广东省</option>
  7.     </select>
复制代码

  • css样式操作
  1. <p id="i1">Hello world!</p>
复制代码
属性操作
  1. elementNode.setAttribute("属性名","属性值")   
  2. elementNode.getAttribute("属性名")      
  3. elementNode.removeAttribute("属性名");
复制代码
并不是所有属性都可以像value那样操作。


  • class属性操作**
  1. elementNode.className
  2. elementNode.classList.add
  3. elementNode.classList.remove
复制代码
案例：tab切换
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  7.    
  8. </head>
  9. <body>
  13.     <ul >
  14.         <li  index="0">商品介绍</li>
  15.         <li  index="1">规格与包装</li>
  16.         <li  index="2">售后保障</li>
  17.         <li  index="3">商品评价</li>
  18.     </ul>
  20.     <ul >
  21.         <li>商品介绍...</li>
  22.         <li >规格与包装...</li>
  23.         <li >售后保障...</li>
  24.         <li >商品评价...</li>
  25.     </ul>
  31. </body>
  32. </html>
复制代码

  • 节点操作
  1. // 创建节点：
  2. document.createElement("标签名")
  3. // 插入节点
  4. somenode.appendChild(newnode)             // 追加一个子节点（作为最后的子节点）
  5. somenode.insertBefore(newnode,某个节点)   // 把增加的节点放到某个节点的前边
  6. // 删除节点
  7. somenode.removeChild()：获得要删除的元素，通过父元素调用删除
  8. //替换节点
  9. somenode.replaceChild(newnode, 某个节点);
复制代码
案例：
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6. </head>
  7. <body>
  10. <button >添加节点</button>
  11. <button >删除节点</button>
  12. <button >替换节点</button>
  14.     <h3>hello JS!</h3>
  15.     <h3 >hello world</h3>
  21. </body>
  22. </html>
复制代码
2.4、常用事件


  • onload事件
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  8.    
  9.    
  10. </head>
  11. <body>
  13. yuan
  15. </body>
  16. </html>
复制代码

  • onsubmit事件
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  7. </head>
  8. <body>
  10. <form action="" id="i1">
  11.      用户名：<input type="text">
  12.      密码：  <input type="password">
  13.     <input type="submit">
  14. </form>
  18. </body>
  19. </html>
复制代码

  • onchange事件
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  7. </head>
  8. <body>
  10. <select name="provonce" id="s1">
  11.     <option value="hebei">请选择省份</option>
  12.     <option value="hubei">湖北省</option>
  13.     <option value="hunan">湖南省</option>
  14.     <option value="hebei">河北省</option>
  15. </select>
  17. <select name="provonce" id="s2">
  18.     <option value="hebei">请选择城市</option>
  20. </select>
  25. </body>
  26. </html>
复制代码

  • onmouse事件
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.    
  7. </head>
  8. <body>
  10.         使用了mouseout事件↓
  11.         
  12.                 第一行
  13.                 第二行
  14.                 第三行
  15.         
  18. </body>
  19. </html>
复制代码

  • onkey事件
  1. [/code]
  2. [list]
  3. [*]onblur和onfocus事件
  4. [/list][code]
复制代码

  • 冒泡事件
  1.    
复制代码
3、总结与作业


  • 总结

  • 作业

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  7.    
  8. </head>
  9. <body>
  11. <h3>员工管理系统</h3>
  14.     <table border="1" cellpadding="5px" >
  15.         <thead>
  16.         <tr>
  17.             <th>姓名</th>
  18.             <th>年龄</th>
  19.             <th>部门</th>
  20.             <th>删除</th>
  21.             <th>编辑</th>
  22.         </tr>
  23.         </thead>
  25.         <tbody >
  26.         <tr>
  27.             <td>张三</td>
  28.             <td>23</td>
  29.             <td>销售</td>
  30.             <td>
  31.                 <button onclick="del_tr(this)">删除</button>
  32.             </td>
  33.             <td>
  34.                 <button onclick="edit_tr(this)">编辑</button>
  35.             </td>
  36.         </tr>
  37.         <tr>
  38.             <td>李四</td>
  39.             <td>21</td>
  40.             <td>销售</td>
  41.             <td>
  42.                 <button onclick="del_tr(this)">删除</button>
  43.             </td>
  44.             <td>
  45.                 <button onclick="edit_tr(this)">编辑</button>
  46.             </td>
  47.         </tr>
  48.         <tr>
  49.             <td>王五</td>
  50.             <td>23</td>
  51.             <td>运营</td>
  52.             <td>
  53.                 <button onclick="del_tr(this)">删除</button>
  54.             </td>
  55.             <td>
  56.                 <button onclick="edit_tr(this)">编辑</button>
  57.             </td>
  58.         </tr>
  59.         </tbody>
  60.     </table>
  64. <fieldset >
  65.     <legend>添加员工</legend>
  66.     <p>姓名：<input type="text" ></p>
  67.     <p>年龄：<input type="text" ></p>
  68.     <p>部门：
  69.         <select name="" id="i1">
  70.             <option value="销售">销售部</option>
  71.             <option value="运营">运营部</option>
  72.             <option value="财务">财务部</option>
  73.         </select>
  74.     </p>
  75.     <button >添加</button>
  76. </fieldset>
  81. </body>
  82. </html>
复制代码
来源:https://www.cnblogs.com/sbhglqy/p/18170304
免责声明：由于采集信息均来自互联网，如果侵犯了您的权益，请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容，谢谢合作！

本帖子中包含更多资源

您需要 登录 才可以下载或查看，没有账号？立即注册

x

上一篇: 快速了解Django：核心概念解析与实践指南

下一篇: 从零开始：Django项目的创建与配置指南

发表于 2024-5-2 21:05:48 来自手机

举报 回复 使用道具

返回列表 发新帖

Archiver|手机版|小黑屋|翼度科技

Copyright © 2001-2020, Tencent Cloud.　Powered by Discuz! X3.4