事件
? ? ? ? 事件是js应用跳动的心脏，进行交互，使网页动起来，事件可能是用户在某些内容上的点击、鼠标经过某个特定元素或者按下键盘上的某些按键。事件可能是在web浏览器中发生的事情，比如说某个web页面的加载完成，或者是用户滚动窗口或者改变窗口大小。
? ? ? ? 所以我们可以使用JavaScript，可以监听特定事件的发生，并规定让某些事件发生以及对这些事件做出响应
作用
- ?验证用户输入的数据
- 增加页面的动感效果
- 增强用户的体验度
内容
- 事件源：是谁触发的事件
- 事件名：触发了什么事件
- 事件监听和事件处理
? ? ? ?当我们?户在??中进?的点击动作，?标移动的动作，????加载完成的动作等，都可以称之为事件名称
????????即：click、mousemove、load 等都是事件名称，具体的执?代码处理，响应某个事件的函数
<body onload="loadWindow();"></body>
<script>
function loadWindow(){
alert("加载窗体");
}
</script>
事件类型
- 鼠标事件
- 单击事件（onclick）
- 双击事件（ondblclick）
- 移入事件
- 移出事件
- 键盘事件
- 键盘按下事件
- 键盘抬起事件
- 焦点事件
- 聚焦事件
- 失焦事件
- 文档事件
- window.onload 带内面内容全部加载完成之后才出发函数的执行
- 表单事件
- 焦点事件
- change 表单元素内容改变触发的事件
?
<div class="box1">div1</div>
<div class="box2" onmouseover="func_over();">div2</div>
<div class="box3" >div3</div>
<div class="box4">div4</div>
<div class="box5">div5</div>
<input type="text" id="username" name="username" onfocus="func_focus()" onblur="func_blur()"><span id="info"></span>
<script>
var box1 = document.getElementsByClassName("box1")[0];
var box2 = document.getElementsByClassName("box2")[0];
var box3 = document.getElementsByClassName("box3")[0];
var box4 = document.getElementsByClassName("box4")[0];
var box5 = document.getElementsByClassName("box5")[0];
var info = document.getElementById("info");
var username = document.getElementById("username");
//为元素节点绑定事件
box1.ondblclick = function(){
console.log("12345");
}
function func_over(){
console.log("鼠标移入事件");
}
function func_focus(){
info.innerHTML = "请输入用户名,不能为null";
}
function func_blur(){
if(username.value==""){
info.innerHTML = "用户名不合法不能为null";
console.log(123);
}
}
</script>
?
JS对象和JSON
? ? JS对象
? ? ? ? 是用{ } 括起来的里面存储的键值对数据的集合
? ? ? ? 键值对：KAY ：VALUE 每两个键值对使用，分隔，做后一个键值对不需要加键值对
? ? ? ? KEY：字符串，引号可以省略，当KEY的标识符为非标准的命名形态，那么引号就不能省略
? ? ? ? VAlUE：可以是JS中的任意类型
??JSON
????????是一种轻量级的数据交换格式，采用完全独立于编程语言的文本格式来存储和表示数据。他易于人的阅读和编写，同时也易于机器解析和生成，便于有效的提升网络传输的效率。
? ? ? ? JSON是JS对象的字符串表示法，它使用文本表示一个JS对象的信息，本质上是一个字符串
? ? ? ? 表现形式为
????????????????'{键值对}'
? ? ? ? ????????key是是字符串 ""
? ? ? ? ????????value : 数值型,字符串"",对象,数组,null,boolean
<script>
/*1.字面量创建方式*/
var obj = {
name : "laopei",
age : 18,
son : [
{name:"xiaopei",age:5},
{name:"xiaoxiaopei",age:2}
],
car : null,
teach : function(){
console.log("裴校越讲越嗨,越嗨越快!!!");
}
};
console.log(obj);
//获取对象的属性值
console.log(obj.name);
//2.new Object() 创建一个空对象
var obj2 = new Object();
/*为对象添加属性*/
obj2.name='haha';
obj2.age=18;
console.log(obj2);
//3.Object.create(null) 创建一个空对象
var obj3 = Object.create(null);
console.log(obj3);
// JSON解析器 : 通过JSON解析器解析json效率较高
/*json串-->js对象*/
var json = '{"a": "Hello", "b": "World"}';
console.log(JSON.parse(json));
/*js对象-->json串*/
var obj4 = {name:"zhangsan",age:18,'gender':true};
console.log(JSON.stringify(obj4));
</script>
定时器?
? ? ? ?JS中定时器有以下两个方法：
????????setInterval() ：按照指定的周期（以毫秒计）来调用函数或计算表达式。方法会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭。
????????setTimeout() ：在指定的毫秒数后调用函数或计算表达式。
setInterval()
? ? ? ? 重复执行定时器?setInterval(code,millisec,lang)? ??
| 参数 | 描述 |
|---|
| code | 必需。要调用的函数或要执行的代码串。 | | millisec | 必须。周期性执行或调用 code 之间的时间间隔，以毫秒计。 | | lang | 可选。 JScript | VBScript | JavaScript |
?setTimeout()
????????延迟执行定时器?setTimeout(code,millisec,lang)
| 参数 | 描述 |
|---|
| code | 必需。要调用的函数后要执行的 JavaScript 代码串。 | | millisec | 必需。在执行代码前需等待的毫秒数。 | | lang | 可选。脚本语言可以是：JScript | VBScript | JavaScript |
?停止重复执行定时器：
? ? ? ? 定时器都有一个自己的编号就是定时器编号
????????定时器编号 = setInterval()
? ? ? ?clearInterval(定时器的编号)?
<div id="box"></div>
<script>
var box = document.getElementById("box");
//延迟执行定时器
/*5秒中之后div中显示文本哈哈*/
setTimeout(function (){
box.innerHTML="哈哈";
中 },5000);
/*重复执行定时器*/
//每隔1s钟div中显示数字,每次叠加
var timer = setInterval(fn,1000);
var i = 0;
function fn(){
i++;
box.innerHTML = i;
if(i==10){
/*清除定时器*/
clearInterval(timer);
}
}
</script>
?例子
????????心动案例
? ? ? ? ? ? ? ? 模仿心跳
<style>
#box{
text-align: center;
/*距离上面元素之间的外边距为200px*/
margin-top: 200px;
}
.heart1{
font-size: 32px;
color: plum;
}
.heart2{
font-size: 64px;
color: skyblue;
}
.heart3{
font-size: 85px;
color: salmon;
}
.heart4{
font-size: 128px;
color: palegreen;
}
.heart5{
font-size: 156px;
color: lemonchiffon;
}
</style>
</head>
<body>
<!--
心动案例
-->
<div id="box" class="heart">?</div>
<script>
//重复执行定时器
window.onload = function (){
var box = document.getElementById("box");
var i = 1;
setInterval(function (){
box.className="heart"+i++;
if(i==5){
i=1;
}
},100);
}
</script>
</body>
DOM节点
? ? ? ? dom Document Object Model ?档对象模型
? ? ? ? 他赋予了我们操作文档中内容的能力，我们可以通过DOM操作页面中的节点，进行想要的操作
?节点
????????加载 HTML ??时，Web 浏览器?成?个树型结构，?来表示??内部结构
? ? ? ? 在页面中的所有内容都以节点为单位
? ? ? ? 节点的分类：
? ? ? ? ? ? ? ? 文档为文档节点
? ? ? ? ? ? ? ? 元素为元素标签节点
? ? ? ? ? ? ? ? 属性为属性节点
? ? ? ? ? ? ? ? 文本为文本节点
节点的获取
- ?getElementById() 根据id获取dom对象，如果id重复，那么以第?个为准
- getElementsByTagName() 根据标签名获取dom对象数组
- getElementsByClassName() 根据样式名获取dom对象数组（主语可以是document或者父节点）
- getElementsByName() 根据name属性值获取dom对象数组，常?于多选获取值（主语可以是document或者父节点）
div id="box">
<p id="item"> 我是box中的p标签</p>
</div>
<p id="p1" class="para">这是?个段落<span>?本</span></p>
<p id="p2" class="para">这?是?个段落</p>
<input type="text" name="txt" />
<input type="checkbox" name="hobby" value="游泳" />游泳
<input type="checkbox" name="hobby" value="篮球" />篮球
<input type="checkbox" name="hobby" value="?球" />?球
<hr /> <!--水平线-->
<br> <!--换行-->
<a href="javascript:void(0)" onclick="testById()">按照id获取</a>
<a href="javascript:void(0)" onclick="testByName()">按照name获取</a>
<a href="javascript:void(0)" onclick="testByTagName()">按照标签名获取</a>
<a href="javascript:void(0);" onclick="testByClass();">按照class获取</a>
<script>
/*父节点*/
var box = document.getElementById("box");
//getElementsByTagName
var ps = document.getElementsByTagName("p");
console.log(box.getElementsByTagName("P"));
//getElementsByClassName
console.log(document.getElementsByClassName("para"));
console.log(box.getElementsByClassName("para"));
//getElementsByName
console.log(document.getElementsByName("hobby"));
</script>
节点的插入
? ? ? ? 节点的创建
| 方法 | 描述 | | document.createEelement("标签名")? | 创建?个新的节点，需要传?节点的标签名称，返回创建的元素对象 | | document.createTextNode("文本")? | 创建?个?本节点，可以传??本内容 | | innerHTML | 也能达到创建节点的效果，直接添加到指定位置 |
? ? ? ? 节点的插入?
| ?法 | 描述 | | write() | 将任意的字符串插?到?档中 | | 父节点.appendChild(子节点) | 向元素中添加新的?节点，作为最后?个?节点 | | 父节点.insertBefore(新节点,参考节点) | 参数1节点插入到父节点中的参数2的前面 |
<script>
//创建节点
var box = document.createElement("div");
box.style.width = "200px";
box.style.height = "200px";
box.style.background = "pink";
console.log(box);
var item = document.createElement("p");
item.style.width = "100px";
item.style.height = "100px";
item.style.background = "cyan";
//为节点元素标签对中添加内容
//1)创建一个文本节点
var text = document.createTextNode("明天的你会感谢今天努力的自己!!!!");
//插入节点
//追加
box.appendChild(item);
item.appendChild(text);
console.log(box);
//插入到htmlbody内容的最后
//document.body.appendChild(box);
//insertBefore
//参考节点
var image = document.getElementsByTagName("img")[0];
document.body.insertBefore(box,image);
</script>
间接查找节点? ? ?
| childNodes | 返回元素的?个?节点的数组 | | firstChild | 返回元素的第?个?节点 | | lastChild | 返回元素的最后?个?节点 | | nextSibling | 返回元素的下?个兄弟节点 | | parentNode | 返回元素的?节点 | | previousSibling | 返回元素的上?个兄弟节点 |
<div id="box">
<ul>
<li>li1</li>
<li>li2</li>
<li>li3</li>
</ul>
<ol>
<li>li1</li>
<li>li2</li>
<li>li3</li>
</ol>
</div>
<script>
var box = document.getElementById("box");
console.log(box.childNodes);
console.log(box.firstChild); /*第一个节点*/
console.log(box.firstElementChild); /*第一个元素子节点*/
console.log(box.firstElementChild.nextSibling); /*返回元素的下?个兄弟节点*/
console.log(box.firstElementChild.nextElementSibling); /*返回元素的下?个元素兄弟节点*/
console.log(box.firstElementChild.parentNode); /* 返回元素的?节点*/
box.firstElementChild.parentNode.style.background = "green";
</script>
两个例子
????????需求:通过点击子节点,把父节点隐藏
? ? ? ? ? ? 点击span,隐藏所在的li标签
<body>
<ul>
<li><span>隐藏1</span></li>
<li><span>隐藏2</span></li>
<li><span>隐藏3</span></li>
<li><span>隐藏4</span></li>
<li><span>隐藏5</span></li>
</ul>
<script>
//获取所有span
var spans = document.getElementsByTagName("span");
//遍历数组,拿到每一个span,绑定点击事件
for(var i = 0;i<spans.length;i++){
spans[i].onclick = function(){
this.parentNode.style.display="none";
}
}
</script>
?需求:点击按钮发布消息，每次消息都出现在第一行
<title>发布留言</title>
<style>
#ul{
width: 500px;
height: 100px;
border: 1px solid red;
/*内边距 : 内容与边框之间的距离*/
padding: 20px;
/*超出部分隐藏*/
overflow: hidden;
}
</style>
</head>
<body>
<input type="text" name="words" id="words">
<button type="button" id="btn">发布</button>
<!--留言展示区域-->
<ul id="ul">
</ul>
<script>
var btn = document.getElementById("btn");
var words = document.getElementById("words");
var ul = document.getElementById("ul");
btn.onclick=function(){
var value = words.value;
if(value!=""){
/*清空输入框*/
words.value = "";
/*创建新的li节点*/
var li = document.createElement("li");
//把value数据插入到新节点li中
li.innerHTML = value;
//把li插入到ul的第一个节点
ul.insertBefore(li,ul.firstElementChild);
}
}
</script>
操作节点
- 替换
- 父节点.replaceChild(新节点,原节点)
- ?使用新节点替换源节点
- 返回被替换的节点
- 注意: 当新节点是原页面中的已经存在的节点,实现移动的效果,被替换的元素节点删除???????????????????????
- 删除
- 父节点.removeChild(子节点)
- ?返回被删除的节点
- 克隆
- 源节点.cloneNode(boolean)
- ?true : 克隆当前元素包含所有的子元素->深拷贝
- ?false : 只克隆当前元素不可隆子元素->浅拷贝
<script>
var box = document.getElementById("box");
//替换
//创建新节点,替换久节点
var newLi = document.createElement("li");
newLi.innerHTML = "紫色";
//console.log(box.replaceChild(newLi,box.firstElementChild));
box.replaceChild(box.lastElementChild,box.firstElementChild);
//删除
console.log(box.removeChild(box.lastElementChild));
//克隆
console.log(box.lastElementChild.cloneNode(true));
</script>
操作表单?
?通过JSDOM操作表单?
- 获取表单节点
- 根据id,class,name...
- document.表单name属性值
- 获取表单中的表单元素
- 根据id,class,name...
- 表单节点.表单元素name属性值
- 获取表单元素的值
- 表单元素.value
常用的事件
| oninput | 只要输入内容就触发 | | onchange | 在失去焦点的时候校验如果内容有改变就触发 | | onsubmit | 当前表单被提交的时候触发绑定给表单而不是提交按钮的 |
?表单的提交方式
- 按钮 onclick + ?submit()在按钮的点击事件中做数据的校验,满足条件调用表单submit()方法做提交
- 提交按钮 onclick + return boolean->不满足要求做拦截表单的提交
- 表单添加onsubmit事件,当表单被提交时候触发,配合return 函数名()的调用->拦截提交
<form action="" name="form_info" onsubmit="return func_submit3()">
<p>
姓名 : <input type="text" name="username" value="zhangsan"> <button type="button" onclick="func_01()">按钮</button>
</p>
<p>
微信密码 : <input type="password" name="userpwd">
</p>
<p>
性别 :
<input type="radio" name="gender" value="man"> 男
<input type="radio" name="gender" value="woman"> 女
<button type="button" onclick="func_02()">按钮</button>
</p>
<p>
爱好 :
<input type="checkbox" name="hobby" value="code"> 敲代码
<input type="checkbox" name="hobby" value="read"> 读书
<input type="checkbox" name="hobby" value="basketball"> 篮球
<button type="button" onclick="func_03()">按钮</button>
</p>
<p>
家乡:
<select name="home">
<option value="hegang">鹤岗</option>
<option value="xianggang">香港</option>
<option value="lianyungang">连云港</option>
</select>
<button type="button" onclick="func_04()">按钮</button>
</p>
<p>
<input type="submit" onclick="return func_submit2()">
<input type="button" value="按钮" onclick="func_submit1()">
<input type="reset" value="重置">
<button>submit</button>
</p>
</form>
<script>
//获取表单节点
var form = document.form_info;
//获取表单元素节点
function func_01(){
console.log(form.username.value);
}
form.username.oninput=function(){
console.log("输入名字啦!!!!");
}
/*单选框*/
function func_02(){
console.log(form.gender); /*获取一组单选框中被选中的那个单选框的值*/
}
//多选框
function func_03(){
var hobbys = form.hobby; /*多选框可能同时选中多个,不能通过value直接获取被选中的值*/
for(var i = 0;i<hobbys.length;i++){
//获取被选中的多选框的值
if(hobbys[i].checked){
console.log(hobbys[i].value);
}
}
}
//下拉框
function func_04(){
var home = form.home;
var options = home.options;
for(var i = 0;i<options.length;i++){
//获取被选中的多选框的值
if(options[i].selected){
console.log(options[i].value);
}
}
}
/*表单提方式1 : */
function func_submit1(){
//对表单中的数据做校验
if(form.username.value!=''){
/*满足条件提交表单*/
form.submit();
}
}
/*表单提交方式2*/
function func_submit2(){
//对表单中的数据做校验
if(form.username.value!=''){
/*满足条件提交表单*/
return true;
}
return false;
}
/*表单提交方式2*/
function func_submit3(){
//对表单中的数据做校验
if(form.username.value!=''){
/*满足条件提交表单*/
return true;
}
return false;
}
</script>
BOM对象
????????BOM的核?对象是window，它表示浏览器的?个实例。window对象有双重??，它既是通过 JavaScript访问浏览器窗?的?个接?，?是ECMAScript规定的Global对象。这意味着在??中定义的任 何?个对象、变量和函数，都以window作为其Global对象，因此有权访问parseInt()等?法。如果??中 包含框架，则每个框架都拥有??的window对象，并且保存在frames集合中。在frames集合中，可以通 过数值索引（从0开始，从左?右，从上到下）或者框架的名称来访问相应的window对象。
Window对象方法
????????系统对话框
????????????????浏览器通过（实际是window对象的?法）alert()、confirm()、prompt()?法可以调?系统对话框向用户显示消息
????????（1）消息框:alert， 常?。 alert() ?法?于显示带有?条指定消息和?个 OK 按钮的警告框。
????????（2）输?框:prompt，返回提示框中的值。 prompt() ?法?于显示可提示?户进?输?的对话框。 参数（可选）： 第?个参数：要在对话框中显示的纯?本。 第?个参数：默认的输??本。
????????（3）确认框:confirm，返回 true/false. confirm() ?法?于显示?个带有指定消息和 OK 及取消按钮的对话框
<style type="text/css">
#aa{
border: 1px solid red;
height: 100px;
}
</style>
<body>
<div id="aa">
This is a div
</div>
<button onclick="testAlert();">警告</button>
<button onclick="testComfirm();">修改</button>
<button onclick="testPrompt();">输?</button>
<script type="text/javascript">
// 1.警告框
function testAlert(){
alert('警告框！！！');
}
/*
2.输?框
返回值：输?的内容
* */
function testPrompt(){
var item = prompt('请输?年龄'); // item得到输?的值
// console.log(item)
// alert(prompt('请输?年龄',18)); // 将输?的值输出
}
/*
3.确认框
返回值：boolean（true|false）
* */
function testComfirm(){
var result = confirm('真的要改吗？');
if(result){
var ele = document.getElementById("aa");
ele.style.color="red";
ele.innerHTML="<span>fdsfsd</span>";
}else{
alert("没事别瞎点。。。");
}
}
</script>
</body>
??打开窗口
????????window.open()?法既可以导航到?个特定的URL也可以?来打开?个新的窗?
<script type="text/javascript">
function openBaidu(){
window.open('http://www.baidu.com','_self'); // _self、_blank等
// window.open(); //空?窗?
}
</script>
<input type="button" name="open" value="百度" onclick='openBaidu();' />
history对象
????????history 对象是历史对象。包含?户（在浏览器窗?中）访问过的 URL。history 对象是 window 对象的 ?部分，可通过 window.history 属性对其进?访问。
???????? history对象的属性：length，返回浏览器历史列表中的 URL 数量。
????????history对象的?法：
???????????????? back()：加载 history 列表中的前?个 URL。
????????????????forward()：加载历史列表中的下?个 URL。当??第?次访问时，还没有下?个url。
????????????????go(number|URL): URL 参数使?的是要访问的 URL。? number 参数使?的是要访问的 URL 在 History 的 URL 列表中的相对位置。go(-1)，到上?个??
<body>
<a href="013-history-a.html">013-history-a.html</a>
<h1>我是第?个??</h1>
<input type="button" value="前进" onclick="window.history.forward();" />
<script>
console.log(window.history);
</script>
</body>
<body>
<a href="013-history-b.html">013-history-b.html</a>
<h1>我是A??</h1>
<input type="button" value="后退" onclick="window.history.back();"/>
</body>
<body>
<h1>我是B??</h1>
<input type="button" value="第?个??" onclick="window.history.go(-2);"/>
<input type="button" value="后退" onclick="window.history.back();"/>
</body>
location对象
????????location 对象是window对象之?，提供了与当前窗?中加载的?档有关的信息，还提供了?些导航功能。也可通过 window.location 属性来访问。 l
????????ocation 对象的属性 href：设置或返回完整的 URL
????????location 对象的?法
????????reload()：重新加载当前?档。
???????? replace()：?新的?档替换当前?档。
<script type="text/javascript">
function openBaidu(){
// 没有历史记录,?新的?档替换当前?档
// window.location.replace("http://www.baidu.com");
// console.log(window.location.href); // 获取完整的url
window.location.href = "http://www.baidu.com";
}
</script>
<body>
<input type="text" value="" />
<input type="button" value="刷新" onclick="window.location.reload();" />
<input type="button" value="百度" onclick="openBaidu();" />
</body
|