ToB企服应用市场:ToB评测及商务社交产业平台

标题: day30-JavaScript(2) [打印本页]

作者: 干翻全岛蛙蛙 时间: 2024-5-19 00:44
标题: day30-JavaScript(2)
1、BOM对象

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

窗口方法

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

复制代码

定时方法

setInterval() 方法会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数。而setTimeout是在指定的毫秒数后调用code一次。

// 设置循环定时器
var ID = window.setInterval(code,millisec) // 每millisec毫秒执行一次code
// 取消循环定时器
window.clearInterval(ID);
// 设置单次定时器
var ID = window.setTimeout(code,millisec) // millisec毫秒后执行code一次
// 取消单次定时器
window.clearTimeout(ID);

复制代码

其中，code为要调用的函数或要实行的代码串。millisec周期性实行或调用 code 之间的时间间隔，以毫秒计。
显示时间案例：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input id="ID1" type="text" >
<button onclick="begin()">开始</button>
<button onclick="end()">停止</button>
</body>
</html>

复制代码

1.2、Location (地址栏)对象

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<button onclick="func1()">查看Location对象</button>
<button onclick="func2()">跳转到百度</button>
<button onclick="func3()">F5</button>
</body>
</html>

复制代码

1.3、本地存储对象

利用存储对象的过程中, 对象数据会根据域名端口进行保存的,以是 js不能获取当前页面以外其他域名端口保存到本地的数据。也就是说,我们存储对象获取数据只能是自己当前端口或者域名下曾经设置过的数据,一旦端口或者域名改变,则无法获取原来的数据。

localStorage 本地永久存储
localStorage.setItem("变量名","变量值"); 保存一个数据到存储对象
localStorage.变量名 = 变量值保存一个数据到存储对象
localStorage.getItem("变量名") 获取存储对象中保存的指定变量对应的数据
localStorage.变量名获取存储对象中保存的指定变量对应的数据
localStorage.removeItem("变量名") 从存储对象中删除一个指定变量对应的数据
localStorage.clear() 从存储对象中删除所有数据
sessionStorage 本地会话存储
sessionStorage.setItem("变量名","变量值"); 保存一个数据到存储对象
sessionStorage.变量名 = 变量值保存一个数据到存储对象
sessionStorage.getItem("变量名") 获取存储对象中保存的指定变量对应的数据
sessionStorage.变量名获取存储对象中保存的指定变量对应的数据
sessionStorage.removeItem("变量名") 从存储对象中删除一个指定变量对应的数据
sessionStorage.clear() 从存储对象中删除所有数据

复制代码

练习：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<button onclick="func1()">设置一个数据</button>
<button onclick="func2()">查看一个数据</button>
</body>
</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 文档对象模型

// 整个html文档,会保存一个文档对象document
// console.log( document ); // 获取当前文档的对象

复制代码

2.1、查找标签

直接查找标签

document.getElementsByTagName("标签名")
document.getElementById("id值")
document.getElementsByClassName("类名")

复制代码

1、方法的返回值是dom对象还是数组
2、document对象可以是恣意dom对象，将查询范围限定在当前dom对象

导航查找标签

elementNode.parentElement // 父节点标签元素
elementNode.children // 所有子标签
elementNode.firstElementChild // 第一个子标签元素
elementNode.lastElementChild // 最后一个子标签元素
elementNode.nextElementSibling // 下一个兄弟标签元素
elementNode.previousElementSibling // 上一个兄弟标签元素

复制代码

CSS选择器查找

document.querySelector("css选择器") //根据css选择符来获取查找到的第一个元素，返回标签对象（dom对象）
document.querySelectorAll("css选择器"); // 根据css选择符来获取查找到的所有元素,返回数组

复制代码

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
DIV1
DIV
DIV
DIV
item
<ul >
<li id="i2">111</li>
<li>222</li>
<li>333</li>
</ul>
</body>
</html>

复制代码

2.2、绑定变乱

静态绑定：直接把变乱写在标签元素中。

click

复制代码

动态绑定：在js中通过代码获取元素对象,然后给这个对象进行后续绑定。

<p id="i1">试一试!</p>

复制代码

一个元素自己可以绑定多个不同的变乱, 但是假如多次绑定同一个变乱,则后面的变乱代码会覆盖前面的变乱代码

多个标签绑定变乱

<ul>
<li>111</li>
<li>222</li>
<li>333</li>
<li>444</li>
<li>555</li>
</ul>

复制代码

2.3、操作标签

<标签名属性1=“属性值1” 属性2=“属性值2”……>文本</标签名>

复制代码

<标签名属性1=“属性值1” 属性2=“属性值2”……>文本</标签名>操作

click

复制代码

value操作

像input标签，select标签以及textarea标签是没有<标签名属性1=“属性值1” 属性2=“属性值2”……>文本</标签名>的，但是显示内容由value属性决定

<input type="text" id="i1" value="yuan">
<textarea name="" id="i2" cols="30" rows="10">123</textarea>
<select id="i3">
<option value="hebei">河北省</option>
<option value="hubei">湖北省</option>
<option value="guangdong">广东省</option>
</select>

复制代码

css样式操作

<p id="i1">Hello world!</p>

复制代码

属性操作

elementNode.setAttribute("属性名","属性值")
elementNode.getAttribute("属性名")
elementNode.removeAttribute("属性名");

复制代码

并不是所有属性都可以像value那样操作。

class属性操作**

elementNode.className
elementNode.classList.add
elementNode.classList.remove

复制代码

案例：tab切换

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<ul >
<li index="0">商品介绍</li>
<li index="1">规格与包装</li>
<li index="2">售后保障</li>
<li index="3">商品评价</li>
</ul>
<ul >
<li>商品介绍...</li>
<li >规格与包装...</li>
<li >售后保障...</li>
<li >商品评价...</li>
</ul>
</body>
</html>

复制代码

节点操作

// 创建节点：
document.createElement("标签名")
// 插入节点
somenode.appendChild(newnode) // 追加一个子节点（作为最后的子节点）
somenode.insertBefore(newnode,某个节点) // 把增加的节点放到某个节点的前边
// 删除节点
somenode.removeChild()：获得要删除的元素，通过父元素调用删除
//替换节点
somenode.replaceChild(newnode, 某个节点);

复制代码

案例：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<button >添加节点</button>
<button >删除节点</button>
<button >替换节点</button>
<h3>hello JS!</h3>
<h3 >hello world</h3>
</body>
</html>

复制代码

2.4、常用变乱

onload变乱

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
yuan
</body>
</html>

复制代码

onsubmit变乱

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form action="" id="i1">
用户名：<input type="text">
密码： <input type="password">
<input type="submit">
</form>
</body>
</html>

复制代码

onchange变乱

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<select name="provonce" id="s1">
<option value="hebei">请选择省份</option>
<option value="hubei">湖北省</option>
<option value="hunan">湖南省</option>
<option value="hebei">河北省</option>
</select>
<select name="provonce" id="s2">
<option value="hebei">请选择城市</option>
</select>
</body>
</html>

复制代码

onmouse变乱

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
使用了mouseout事件↓
第一行
第二行
第三行
</body>
</html>

复制代码

onkey变乱

[/code]
[list]
[*]onblur和onfocus变乱
[/list][code]

复制代码

冒泡变乱

复制代码

3、总结与作业

总结
作业

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h3>员工管理系统</h3>
<table border="1" cellpadding="5px" >
<thead>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>部门</th>
<th>删除</th>
<th>编辑</th>
</tr>
</thead>
<tbody >
<tr>
<td>张三</td>
<td>23</td>
<td>销售</td>
<td>
<button onclick="del_tr(this)">删除</button>
</td>
<td>
<button onclick="edit_tr(this)">编辑</button>
</td>
</tr>
<tr>
<td>李四</td>
<td>21</td>
<td>销售</td>
<td>
<button onclick="del_tr(this)">删除</button>
</td>
<td>
<button onclick="edit_tr(this)">编辑</button>
</td>
</tr>
<tr>
<td>王五</td>
<td>23</td>
<td>运营</td>
<td>
<button onclick="del_tr(this)">删除</button>
</td>
<td>
<button onclick="edit_tr(this)">编辑</button>
</td>
</tr>
</tbody>
</table>
<fieldset >
<legend>添加员工</legend>
<p>姓名：<input type="text" ></p>
<p>年龄：<input type="text" ></p>
<p>部门：
<select name="" id="i1">
<option value="销售">销售部</option>
<option value="运营">运营部</option>
<option value="财务">财务部</option>
</select>
</p>
<button >添加</button>
</fieldset>
</body>
</html>

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。

欢迎光临 ToB企服应用市场:ToB评测及商务社交产业平台 (https://dis.qidao123.com/)