外贸怎么用网站开发新客户,asp网站缺点,中山网站制作公司,昆明网站定制开发4.12、BOM对象#xff08;了解#xff09; BOM:Broswer object model,即浏览器提供我们开发者在javascript用于操作浏览器的对象。 4.12.1、window对象 窗口方法 // BOM Browser object model 浏览器对象模型// js中最大的一个对象.整个浏览器窗口出现的所有东西都是win…4.12、BOM对象了解 BOM:Broswer object model,即浏览器提供我们开发者在javascript用于操作浏览器的对象。 4.12.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( raet );// close() 关闭当前浏览器窗口 window.close();//打开一个新的浏览器窗口 window.open(http://www.baidu.com,_blank,width800px,height500px,left200px,top200px); 4.12.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.hash} );console.log(完整的地址信息${location.href});function func2(){// location.hrefhttp://www.baidu.com; // 页面跳转location.assign(http://www.baidu.com); // 页面跳转}function func3(){location.reload(); // 刷新页面} /script /body /html4.12.3、history对象 代表当前窗口的浏览历史记录可以通过history操作浏览器的前进和后退。例如 // 向前进一步相当于点击浏览器的“前进”按钮 history.forward();// 向后退一步相当于点击浏览器的“后退”按钮 history.back(); 4.12.4、navigator对象 提供了浏览器的相关信息例如浏览器类型和版本、操作系统、语言等。例如 // 获取浏览器名称和版本信息 var browserName navigator.appName; var browserVersion navigator.appVersion; console.log(browserName browserVersion);// 获取操作系统类型 var osName navigator.platform; console.log(osName);// 获取语言设置 var language navigator.language; console.log(language);4.13、DOM对象(了解) DOM document Object Model 文档对象模型 // 整个html文档,会保存一个文档对象document // console.log( document ); // 获取当前文档的对象4.13.1、查找标签 直接查找标签 document.getElementsByTagName(标签名) document.getElementById(id值) document.getElementsByClassName(类名) //返回dom对象就是标签对象或者数组CSS选择器查找 document.querySelector(css选择器) //根据css选择符来获取查找到的第一个元素返回标签对象dom对象 document.querySelectorAll(css选择器); // 根据css选择符来获取查找到的所有元素,返回数组!DOCTYPE html html langen headmeta charsetUTF-8titleTitle/title /head bodydiv idi1DIV1/divdiv classc1DIV/div div classc1DIV/div div classc1DIV/divdiv classouterdiv classc1item/div /divdiv classc2div classc3ul classc4li classc5 idi2111/lili222/lili333/li/ul/div /divscript// 直接查找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);//定位outer下的c1对应的标签var outer document.getElementsByClassName(outer)[0];var te outer.getElementsByClassName(c1);console.log(te);// css选择器//层级定位(空格可以表示一个或多个层级)var dom document.querySelector(.c2 .c3 .c5);console.log(:::,dom);//层级定位var doms document.querySelectorAll(ul li);console.log(:::,doms);/script/body /html4.13.2、绑定事件 静态绑定 直接把事件写在标签元素中 div iddiv onclickfoo()click/divscriptfunction foo(){ console.log(foo函数); } /script 动态绑定在js中通过代码获取元素对象,然后给这个对象进行后续绑定 p idi1试一试!/pscriptvar eledocument.getElementById(i1);ele.onclickfunction(){console.log(ok);};/script一个元素本身可以绑定多个不同的事件, 但是如果多次绑定同一个事件,则后面的事件代码会覆盖前面的事件代码 在 JavaScript 中 this 不是固定不变的它会随着执行环境的改变而改变。 单独使用 this则它指向全局(Global)对象。在浏览器中window 就是该全局对象为 var x this;在函数中(作为函数的返回值)函数的所属者/调用者默认绑定到 this 上。 function myFunction() {return this; }对象方法中的this就是对象本身 var person {firstName : John,lastName : Doe,id : 5566,myFunction : function() {return this;} };事件中的this就是接收事件的 HTML 标签 button onclickthis.style.displaynone 点我后我就消失了 /button4.14 进阶操作重点 ES6新特性 ES6是JavaScript语言的下一代标准已经在2015年6月正式发布了。Mozilla公司将在这个标准的基础上推出JavaScript 2.0。 变量提升 查看以下代码, 是否可以被运行 function fn(){console.log(name);var name 大马猴; } fn()发现问题了么. 这么写代码, 在其他语言里. 绝对是不允许的. 但是在js里. 不但允许, 还能执行. 为什么呢? 因为在js执行的时候. 它会首先检测你的代码. 发现在代码中会有name使用. OK. 运行时就会变成这样的逻辑: function fn(){var name;console.log(name);name 大马猴; } fn();看到了么. 实际运行的时候和我们写代码的顺序可能会不一样…这种把变量提前到代码块第一部分运行的逻辑被称为变量提升. 这在其他语言里是绝对没有的. 并且也不是什么好事情. 正常的逻辑不应该是这样的. 那么怎么办? 在新的ES6中. 就明确了, 这样使用变量是不完善的. es6提出. 用let来声明变量. 就不会出现该问题了. function fn(){console.log(name); // 直接报错, let变量不可以变量提升.let name 大马猴; } fn()用let声明变量是新版本javascript提倡的一种声明变量的方案 let还有哪些作用呢? function fn(){var name 周杰伦;var name 王力宏;console.log(name); } fn()显然一个变量被声明了两次. 这样也是不合理的. var本意是声明变量. 同一个东西. 被声明两次. 所以ES6规定. let声明的变量. 在同一个作用域内. 只能声明一次. function fn(){let name 周杰伦;console.log(name);let name 王力宏;console.log(name); } fn()注意, 报错是发生在代码检查阶段. 所以. 上述代码根本就执行不了. 在同一个作用域内. let声明的变量只能声明一次. 其他使用上和var没有差别. eval函数 eval本身在js里面正常情况下使用的并不多. 但是很多网站会利用eval的特性来完成反爬操作. 我们来看看eval是个什么鬼? 从功能上讲, eval非常简单. 它可以动态的把字符串当成js代码进行运行. s console.log(我爱你); eval(s);也就是说. eval里面传递的应该是即将要执行的代码(字符串). 那么在页面中如果看到了eval加密该如何是好? 其实只要记住了一个事儿. 它里面不论多复杂. 一定是个字符串. 比如: eval(function(p,a,c,k,e,d){efunction(c){return(ca?:e(parseInt(c/a)))((cc%a)35?String.fromCharCode(c29):c.toString(36))};if(!.replace(/^/,String)){while(c--)d[e(c)]k[c]||e(c);k[function(e){return d[e]}];efunction(){return\\w};c1};while(c--)if(k[c])pp.replace(new RegExp(\\be(c)\\b,g),k[c]);return p}(0.1(\我爱你\),62,2,console|log.split(|),0,{}))这一坨看起来, 肯定很不爽. 怎么变成我们看着很舒服的样子呢? 记住. eval()里面是字符串. 记住~!! 那我想看看这个字符串长什么样? 就把eval()里面的东西拷贝出来. 执行一下. 最终一定会得到一个字符串. 要不然eval()执行不了的. 对不…于是就有了下面的操作. http://tools.jb51.net/password/evalencode, 在赠送你一个在线JS处理eval的网站. 大多数的eval加密. 都可以搞定了. 内置对象window window对象是一个很神奇的东西. 你可以把这东西理解成javascript全局的内置对象. 如果我们默认不用任何东西访问一个标识符. 那么默认认为是在用window对象. window.mm 爱你 //定义了一个全局变量 console.log(mm); 综上, 我们可以得出一个结论. 全局变量可以用window.xxx来表示. ok. 接下来. 注意看了. 我要搞事情了 想要在函数外部调用该函数内部定义的一个内置函数不可使用返回值的机制如何实现 (function(){let chi function(){console.log(我是吃)}window.w_chi chi //全局变量chi })(); //如何调用 w_chi() //chi()//换一种写法. 你还认识么? (function(w){let chi function(){console.log(我是吃)}w.chi chi })(window); chi()