南京建设工程招聘信息网站,网站备案最多需要多久,网站建设杭州哪家便宜,东莞公司展厅设计公司目录
Day28 JavaScript(2)
1、BOM对象
1.1 window对象
1.2 Location ( 地址栏)对象
1.3 本地存储对象
2、DOM对象(JS核心)
2.1 查找标签
2.2 绑定事件
2.3 操作标签
2.4 常用事件 Day28 JavaScript(2)
1、BOM对象
BOM:Broswer object model,即浏览器提供我们开发者…目录
Day28 JavaScript(2)
1、BOM对象
1.1 window对象
1.2 Location ( 地址栏)对象
1.3 本地存储对象
2、DOM对象(JS核心)
2.1 查找标签
2.2 绑定事件
2.3 操作标签
2.4 常用事件 Day28 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,width800px,height500px,left200px,top200px; 定时方法
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 langen
headmeta charsetUTF-8titleTitle/title
/head
body
input idID1 typetext
button onclickbegin()开始/button
button onclickend()停止/button
scriptfunction showTime(){var nowd2new Date().toLocaleString();var tempdocument.getElementById(ID1);temp.valuenowd2;
}var ID;function begin(){if (IDundefined){showTime();IDsetInterval(showTime,1000);}}function end(){clearInterval(ID);IDundefined;}
/script
/body
/html
1.2 Location ( 地址栏)对象
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/title
/head
body
button onclickfunc1()查看Location对象/button
button onclickfunc2()跳转到百度/button
button onclickfunc3()F5/button
scriptfunction func1(){console.log( location );}// 地址栏对象控制和操作地址栏// 所谓的地址就是当前页面所在地址// 地址结构:// 协议://域名:端口/路径/文件名?查询字符串#锚点console.log( 协议${location.protocol} );console.log( 端口${location.port} );console.log( 域名${location.hostname} );console.log( 域名:端口${location.host} );console.log( 路径${location.pathname} );console.log( 查询字符串${location.search} );console.log(完整的地址信息${location.href});
function func2(){// location.hrefhttp://www.baidu.com; // 页面跳转location.assign(http://www.baidu.com); // 页面跳转}
function func3(){location.reload(); // 刷新页面}
/script
/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 langen
headmeta charsetUTF-8titleTitle/title
/head
body
button onclickfunc1()设置一个数据/button
button onclickfunc2()查看一个数据/button
scriptfunction func1(){localStorage.setItem(name,yuan);}
function func2(){var ret localStorage.getItem(name);console.log(ret);}
/script
/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 langen
headmeta charsetUTF-8titleTitle/title
/head
body
div idi1DIV1/div
div classc1DIV/div
div classc1DIV/div
div classc1DIV/div
div classouterdiv classc1item/div
/div
div classc2div classc3ul classc4li classc5 idi2111/lili222/lili333/li/ul/div
/div
script// 直接查找
var ele document.getElementById(i1); // ele就是一个dom对象console.log(ele);
var eles document.getElementsByClassName(c1); // eles是一个数组 [dom1,dom2,...]console.log(eles);
var eles2 document.getElementsByTagName(div); // eles2是一个数组 [dom1,dom2,...]console.log(eles2);
var outer document.getElementsByClassName(outer)[0];var te outer.getElementsByClassName(c1);console.log(te);
// 导航查找
var c5 document.getElementsByClassName(c5)[0];console.log(c5); // c5是一个DOM对象
console.log(c5.parentElement.lastElementChild); // 返回值是dom对象console.log(c5.parentElement.children); // 返回值是dom对象数组console.log(c5.nextElementSibling.nextElementSibling);console.log(c5.parentElement.children);
// css选择器
var dom document.querySelector(.c2 .c3 .c5);console.log(:::,dom);
var doms document.querySelectorAll(ul li);console.log(:::,doms);/script
/body
/html
2.2 绑定事件 静态绑定 直接把事件写在标签元素中。
div iddiv onclickfoo(this)click/div
scriptfunction foo(self){ // 形参不能是this;console.log(foo函数);console.log(self); }
/script 动态绑定在js中通过代码获取元素对象,然后给这个对象进行后续绑定。
p idi1试一试!/p
script
var eledocument.getElementById(i1);
ele.onclickfunction(){console.log(ok);console.log(this); // this直接用};
/script 一个元素本身可以绑定多个不同的事件, 但是如果多次绑定同一个事件,则后面的事件代码会覆盖前面的事件代码 多个标签绑定事件
ulli111/lili222/lili333/lili444/lili555/li
/ul
script
var eles document.querySelectorAll(ul li);for(var i0;ieles.length;i){eles[i].onclick function (){console.log(this.innerHTML)// console.log(eles[i].innerHTML) // 结果}}
/script 2.3 操作标签
标签名 属性1“属性值1” 属性2“属性值2”……文本/标签名 文本操作
div classc1spanclick/span/div
script
var ele document.querySelector(.c1);
ele.onclick function (){// 查看标签文本console.log(this.innerHTML)console.log(this.innerText)}
ele.ondblclick function (){// 设置标签文本this.innerHTML a href#yuan/a//this.innerText a href#yuan/a}
/script value操作
像input标签select标签以及textarea标签是没有文本的但是显示内容由value属性决定 input typetext idi1 valueyuantextarea name idi2 cols30 rows10123/textareaselect idi3option valuehebei河北省/optionoption valuehubei湖北省/optionoption valueguangdong广东省/option/select
script
// input标签var ele1 document.getElementById(i1);console.log(ele1.value);ele1.onmouseover function (){this.value alvin}
// textarea标签var ele2 document.getElementById(i2);console.log(ele2.value);ele2.onmouseover function (){this.innerText welcome to JS worldthis.value welcome to JS world}// select标签var ele3 document.getElementById(i3);console.log(ele3.value);ele3.value hubei
/script css样式操作
p idi1Hello world!/p
scriptvar ele document.getElementById(i1);ele.onclick function (){this.style.color red}
/script
属性操作
elementNode.setAttribute(属性名,属性值) //设置属性
elementNode.getAttribute(属性名)
elementNode.removeAttribute(属性名); 并不是所有属性都可以像value那样操作。 class属性操作**
elementNode.className
elementNode.classList.add
elementNode.classList.remove
案例tab切换
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/title
style*{margin: 0;padding: 0;}
.tab{width: 800px;height: 300px;/*border: 1px solid red;*/margin: 200px auto;}
.tab ul{list-style: none;}
.tab-title{background-color: #f7f7f7;border: 1px solid #eee;border-bottom: 1px solid #e4393c;}
.tab .tab-title li{display: inline-block;padding: 10px 25px;font-size: 14px;}
li.current {background-color: #e4393c;color: #fff;cursor: default;}
.hide{display: none;}
/style
/head
body
div classtabul classtab-titleli classcurrent index0商品介绍/lili class index1规格与包装/lili class index2售后保障/lili class index3商品评价/li/ul
ul classtab-contentli商品介绍.../lili classhide规格与包装.../lili classhide售后保障.../lili classhide商品评价.../li/ul
/div
scriptvar titles document.querySelectorAll(.tab-title li);var contents document.querySelectorAll(.tab-content li);for (var i 0;ititles.length;i){titles[i].onclick function () {// (1) 触发事件标签拥有current样式for (var j 0;jtitles.length;j){titles[j].classList.remove(current)}
console.log(this);this.classList.add(current);
// (2) 显示点击title对应的详情内容var index this.getAttribute(index);// console.log(this.getAttribute(index));// console.log(contents[index]);
for (var z 0;zcontents.length;z){contents[z].classList.add(hide);}
contents[index].classList.remove(hide);}}
/script
/body
/html 节点操作
// somenode代指父标签且是一个dom对象利用document找到父标签
// 创建节点
document.createElement(标签名)
// 插入节点
somenode.appendChild(newnode) // 追加一个子节点作为最后的子节点
somenode.insertBefore(newnode,某个节点) // 把增加的节点放到某个节点的前边
// 删除节点
somenode.removeChild()获得要删除的元素通过父元素调用删除
//替换节点
somenode.replaceChild(newnode, 某个节点);
案例
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/title
/head
body
button classadd_btn添加节点/button
button classdel_btn删除节点/button
button classreplace_btn替换节点/button
div classc1h3hello JS!/h3h3 classc2hello world/h3
/div
script
var add_btn document.querySelector(.add_btn);var del_btn document.querySelector(.del_btn);var replace_btn document.querySelector(.replace_btn);
var c1 document.querySelector(.c1);var c2 document.querySelector(.c2);add_btn.onclick function () {// 创建节点
var ele document.createElement(img); // imgele.src https://img2.baidu.com/it/u1613029778,1507777131fm26fmtautogp0.jpgconsole.log(ele);
// 添加节点// c1.appendChild(ele);
c1.insertBefore(ele, c2)
};
del_btn.onclick function () {// 删除子节点c1.removeChild(c2);};
replace_btn.onclick function () {
// 创建替换节点
var ele document.createElement(img); // imgele.src https://img2.baidu.com/it/u1613029778,1507777131fm26fmtautogp0.jpgconsole.log(ele);
// 替换节点c1.replaceChild(ele, c2);
}
/script
/body
/html
2.4 常用事件 onload事件
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/title
scriptwindow.onload function (){ele document.getElementById(i1)console.log(ele.innerHTML);}/script/head
body
div idi1yuan/div
/body
/html onsubmit事件
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/title
/head
body
form action idi1用户名input typetext密码 input typepasswordinput typesubmit
/form
script
var ele document.getElementById(i1);var user document.querySelector(#i1 [typetext])var pwd document.querySelector(#i1 [typepassword])ele.onsubmit function (e){console.log(user.value);console.log(pwd.value);
return false; // 终止事件执行// e.preventDefault() // 阻止元素默认行为}
/script
/body
/html onchange事件
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/title
/head
body
select nameprovonce ids1option valuehebei请选择省份/optionoption valuehubei湖北省/optionoption valuehunan湖南省/optionoption valuehebei河北省/option
/select
select nameprovonce ids2option valuehebei请选择城市/option
/select
script
var data{hunan:[长沙,岳阳,张家界],hubei:[武汉,襄阳,荆州],hebei:[石家庄,保定,张家口]};console.log(data);var ele document.getElementById(s1);var ele2 document.getElementById(s2);ele.onchangefunction () {console.log(this.value);var citys data[this.value];console.log(citys);// 清空操作ele2.options.length1;// 创建标签for (var i0;icitys.length;i){var option document.createElement(option); // /option/optionoption.innerHTMLcitys[i];ele2.appendChild(option)}}
/script
/body
/html onmouse事件
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/titlestyle#container{width: 300px;}#title{cursor: pointer;background: #ccc;}#list{display: none;background:#fff;}
#list div{line-height: 50px;}#list .item1{background-color: green;}
#list .item2{background-color: rebeccapurple;}
#list .item3{background-color: lemonchiffon;}
/style
/head
body
div idcontainerdiv idtitle使用了mouseout事件↓/divdiv idlistdiv classitem1第一行/divdiv classitem2第二行/divdiv classitem3第三行/div/div
/div
script
// 1.不论鼠标指针离开被选元素还是任何子元素都会触发 mouseout 事件。
// 2.只有在鼠标指针离开被选元素时才会触发 mouseleave 事件。
var containerdocument.getElementById(container);var titledocument.getElementById(title);var listdocument.getElementById(list);title.onmouseoverfunction(){list.style.displayblock;};
container.onmouseleavefunction(){ // 改为onmouseout试一下list.style.displaynone;};
/*
因为mouseout事件是会冒泡的也就是onmouseout事件可能被同时绑定到了container的子元素title和list
上所以鼠标移出每个子元素时也都会触发我们的list.style.displaynone;
*/
/script
/body
/html onkey事件
input typetext idt1/
script typetext/javascript
var eledocument.getElementById(t1);
ele.onkeydownfunction(e){console.log(onkeydown,e.key)};
ele.onkeyupfunction(e){console.log(onkeyup,e.key)};
/script onblur和onfocus事件
input typetext classc1
script
var ele document.querySelector(.c1);
// 获取焦点事件ele.onfocus function () {console.log(in)};
// 失去焦点事件ele.onblur function () {console.log(out)}
/script 冒泡事件
div classc1div classc2/div
/div
script
var ele1 document.querySelector(.c1);ele1.onclick function () {alert(c1区域)};
var ele2 document.querySelector(.c2);ele2.onclick function (event) {alert(c2区域);// 如何阻止事件冒泡event.stopPropagation();}
/script
