来自 澳门金莎娱乐手机版 2019-09-19 11:52 的文章
当前位置: 金沙澳门官网网址 > 澳门金莎娱乐手机版 > 正文

跨浏览器开发经验总结,js的一些笔试面试题

简单事件模型和高级事件模型

1. 判断字符串是否是这样组成的,第一个必须是字母,后面可以是字母、数字、下划线,总长度为5-20

简单事件模型和高级事件模型简单事件,就是事件与页面元素直观的绑定在一起的形式,如:

  1. var reg = /^[a-zA-Z][a-zA-Z_0-9]{4,19}$/;
  2. reg.test("a1a__a1a__a1a__a1a__");

复制代码 代码如下:

2. 截取字符串abcdefg的efg

<div onclick="alert(this.innerHTML);">
element.onclick = function(){alert(this.innerHTML);}

  1. var str = "abcdefg";
  2. if (/efg/.test(str)) {
  3.      var efg = str.substr(str.indexOf("efg"), 3);
  4.      alert(efg);
  5. }

只要不是用了个别浏览器独有的事件,一般的click,mouseover事件等在各浏览器中都可以这么使用。

3. 判断一个字符串中出现次数最多的字符,统计这个次数

但是当一个事件需要绑定多个监听,或者需要动态注册/移出监听时,简单事件模型就不够用了,需要使用高级事件模型(IE和其他浏览器在使用高级事件模型时就有区别了):

  1. //将字符串的字符保存在一个hash table中,key是字符,value是这个字符出现的次数
  2. var str = "abcdefgaddda";
  3. var obj = {};
  4. for (var i = 0, l = str.length; i < l; i++) {
  5.         var key = str[i];
  6.               if (!obj[key]) {
  7.                  obj[key] = 1;
  8.             } else {
  9.                  obj[key]++;
  10.               }
  11. }
  12.  
  13. /*遍历这个hash table,获取value最大的key和value*/
  14. var max = -1;
  15. var max_key = "";
  16. var key;
  17. for (key in obj) {
  18.          if (max < obj[key]) {
  19.                    max = obj[key];
  20.                    max_key = key;
  21.        }
  22. }
  23.  
  24. alert("max:"+max+" max_key:"+max_key);

复制代码 代码如下:

4. IE与FF脚本兼容性问题

//注册
function addEventHandler(element, evtName, callback, useCapture) {
//DOM标准
if (element.addEventListener) {
element.addEventListener(evtName, callback, useCapture);
} else {
//IE方式,忽略useCapture参数
element.attachEvent('on' + evtName, callback);
}
}

(1) window.event:
表示当前的事件对象,IE有这个对象,FF没有,FF通过给事件处理函数传递事件对象

//移除
function removeEventHandler(element, evtName, callback, useCapture) {
//DOM标准
if (element.removeEventListener) {
element.removeEventListener(evtName, callback, useCapture);
} else {
//IE方式,忽略useCapture参数
element.dettachEvent('on' + evtName, callback);
}
}

(2) 获取事件源
IE用srcElement获取事件源,而FF用target获取事件源

标签中onclick事件与href属性的调用顺序关系
在a标签响应点击事件时,会先进行onclick事件的响应,再执行href中的跳转方法。如以下标签点击后会先后提示“button”和“href”:

(3) 添加,去除事件
IE:element.attachEvent(“onclick”, function) element.detachEvent(“onclick”, function)
FF:element.addEventListener(“click”, function, true) element.removeEventListener(“click”, function, true)

<a href=”javascript:alert(“href”);” onclick="alert(this.innerHTML);"> button </a>

(4) 获取标签的自定义属性
IE:div1.value或div1[“value”]
FF:可用div1.getAttribute(“value”)

但是,最好不要在href中定义具体的javascript方法,因为这个是定义跳转的链接地址的属性,如果需要先后执行两个javascript方法,应该这样写:

(5) document.getElementByName()和document.all[name]
IE;document.getElementByName()和document.all[name]均不能获取div元素
FF:可以

<a href=”#” onclick="alert(this.innerHTML); alert(“href”);"> button </a>

(6) input.type的属性
IE:input.type只读
FF:input.type可读写

但是上面的写法中如果onclick绑定的响应方法中并没有提交请求跳转至别的页面,那么会发现当前网页做了一次刷新,因为以上代码中href=“#”表示跳转到当前页的顶部,但是并没有发出新的html请求。有的时候,我们并不希望页面在响应onclick事件后又跳回顶部(尤其是页面高度较长,出现滚动条,并且该链接位于页面底部时,跳转至顶部后用户还需要拖动滚动条找回原来位置继续操作时),那么应该在onclick后返回false值,阻止继续进行href定义的动作,如:

(7) innerText textContent outerHTML
IE:支持innerText, outerHTML
FF:支持textContent

<a href=”#” onclick="alert(this.innerHTML); alert(“href”);return false;"> button </a>

(8) 是否可用id代替HTML元素
IE:可以用id来代替HTML元素
FF:不可以

或者将#替换成空的javascript语句:

5. 规避javascript多人开发函数重名问题
(1) 可以开发前规定命名规范,根据不同开发人员开发的功能在函数前加前缀
(2) 将每个开发人员的函数封装到类中,调用的时候就调用类的函数,即使函数重名只要类名不重复就ok

<a href=”javascript:void(0)” onclick="alert(this.innerHTML); alert(“href”);"> button </a>

6. javascript面向对象中继承实现
javascript面向对象中的继承实现一般都使用到了构造函数和Prototype原型链,简单的代码如下:

onload事件的调用顺序

  1. function Animal(name) {
  2.    this.name = name;
  3. }
  4.  
  5. Animal.prototype.getName = function() {alert(this.name)}
  6. function Dog() {};
  7. Dog.prototype = new Animal("Buddy");
  8. Dog.prototype.constructor = Dog;
  9. var dog = new Dog();

    7. FF下面实现outerHTML
    FF不支持outerHTML,要实现outerHTML还需要特殊处理
    思路如下:

有的时候在页面初始化时需要调用一些脚本来设置页面元素的初始状态,最标准的做法是用<body onload=””>方式或者document.onload方式调用。onload的事件的触发会在页面元素渲染完毕之后调用,这样就保证了不会出现脚本执行时找不到未渲染的页面元素的情况。如果是在<head>区域的<script>块中执行脚本,并使用了页面元素时,就很有可能出现找不到元素的错误。如果是在<body>区域的<script>块中执行脚本,只能使用该<script>块之前的页面元素,因为<body>区域的元素基本是顺序解析的。

在页面中添加一个新的元素A,克隆一份需要获取outerHTML的元素,将这个元素append到新的A中,然后获取A的innerHTML就可以了。

onchange事件

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ";
  2. <html xmlns=";
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
  5. <title>获取outerHMTL</title>
  6. <style>
  7. div{ background:#0000FF;width:100px;height:100px;}
  8. span{ background:#00FF00;width:100px;height:100px;}
  9. p{ background:#FF0000;width:100px;height:100px;}
  10. </style>
  11. </head>
  12. <body>
  13. <div id="a"><span>SPAN</span>DIV</div>
  14. <span>SPAN</span>
  15. <p>P</p>
  16. <script type="text/javascript">
  17. function getOuterHTML(id){
  18. var el = document.getElementById(id);
  19. var newNode = document.createElement("div");
  20. document.appendChild(newNode);
  21. var clone = el.cloneNode(true);
  22. newNode.appendChild(clone);
  23. alert(newNode.innerHTML);
  24. document.removeChild(newNode);
  25. }
  26. getOuterHTML("a");
  27. </script>
  28. </body>
  29. </html>
  30.  

<input>元素和<select>的<option>元素都支持onchangge事件,但是经常我们会发现元素的内容值变化了却没有触发onchangge事件。这是因为onchange事件的触发还有另一个条件:当前元素处于失去焦点(onblur)的状态。所以,onchange事件只能捕获用户操作时的值变化,对于使用javascript脚本动态改变元素value的情况,它是捕获不到的。

8. 编写一个方法 求一个字符串的字节长度
假设:一个英文字符占用一个字节,一个中文字符占用两个字节

事件截获

  1. function GetBytes(str){
  2.          var len = str.length;
  3.          var bytes = len;
  4.       for(var i=0; i<len; i++){
  5.                     if (str.charCodeAt(i) > 255) bytes++;
  6.       }
  7.          return bytes;
  8. }
  9. alert(GetBytes("你好,as"));

因除了IE之外的浏览器不能识别window.event所以要使用以下方式来获取当前事件和事件发生的目标元素:
var evt = e?e:(window.event?window.event:null);
var el = evt.srcElement?evt.srcElement:evt.target;

9. 编写一个方法 去掉一个数组的重复元素

这里有一些其它相关的文章,非常值得参考下
JavaScript Event事件学习第一章 Event介绍
javascript 跨浏览器的事件系统

  1. var arr = [1 ,1 ,2, 3, 3, 2, 1];
  2. Array.prototype.unique = function(){
  3.          var ret = [];
  4.          var o = {};
  5.          var len = this.length;
  6.          for (var i=0; i<len; i++){
  7.                    var v = this[i];
  8.                    if (!o[v]){
  9.                                 o[v] = 1;
  10.                                 ret.push(v);
  11.                   }
  12.        }
  13.         return ret;
  14. };
  15. alert(arr.unique());

您可能感兴趣的文章:

  • 详解javascript跨浏览器事件处理程序
  • js事件处理程序跨浏览器解决方案
  • js跨浏览器的事件侦听器和事件对象的使用方法
  • 详细解读JavaScript的跨浏览器事件处理
  • JavaScript实现跨浏览器的添加及删除事件绑定函数实例
  • javascript高级程序设计第二版第十二章事件要点总结(常用的跨浏览器检测方法)
  • myEvent.js javascript跨浏览器事件框架
  • javascript打造跨浏览器事件处理机制[Blue-Dream出品]
  • javascript 跨浏览器的事件系统
  • JavaScript中的跨浏览器事件操作的基本方法整理

10. 写出3个使用this的典型应用
(1)在html元素事件属性中使用,如:

  1. <input type=”button” onclick=”showInfo(this);” value=”点击一下”/>

(2)构造函数

  1. function Animal(name, color) {
  2.          this.name = name;
  3.          this.color = color;
  4. }

(3)

  1. <input type="button" id="text" value="点击一下" />
  2. <script type="text/<a href=")" class="st_tag internal_tag" rel="tag" title="Posts tagged with Javascript">javascript</a>">
  3. var btn = document.getElementById("text");
  4. btn.onclick = function() {
  5. alert(this.value); //此处的this是按钮元素
  6. }
  7. </script>

(4)CSS expression表达式中使用this关键字

  1. <table width="100px" height="100px">
  2.      <tr>
  3.               <td>
  4.              <div style="width:expression(this.parentNode.width);">div element</div>
  5.              </td>
  6.      </tr>
  7. </table>

12. 如何显示/隐藏一个DOM元素?

  1. el.style.display = "";
  2. el.style.display = "none";

el是要操作的DOM元素

13. JavaScript中如何检测一个变量是一个String类型?请写出函数实现

String类型有两种生成方式:
(1)Var str = “hello world”;
(2)Var str2 = new String(“hello world”);

  1. function IsString(str){
  2.            return (typeof str == "string" || str.constructor == String);
  3. }
  4. var str = "";
  5. alert(IsString(1));
  6. alert(IsString(str));
  7. alert(IsString(new String(str)));

14. 网页中实现一个计算当年还剩多少时间的倒数计时程序,要求网页上实时动态显示“××年还剩××天××时××分××秒”

  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" ";
  2. <html>
  3. <head>
  4.    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  5.    <title>倒计时</title>
  6. </head>
  7. <body>
  8. <input type="text" value="" id="input" size="1000"/>
  9. <script type="text/javascript">
  10.    function counter() {
  11.       var date = new Date();
  12.       var year = date.getFullYear();
  13.       var date2 = new Date(year, 12, 31, 23, 59, 59);
  14.       var time = (date2 - date)/1000;
  15.       var day =Math.floor(time/(24*60*60))
  16.       var hour = Math.floor(time%(24*60*60)/(60*60))
  17.       var minute = Math.floor(time%(24*60*60)%(60*60)/60);
  18.       var second = Math.floor(time%(24*60*60)%(60*60)%60);
  19.       var str = year + "年还剩"+day+"天"+hour+"时"+minute+"分"+second+"秒";
  20.       document.getElementById("input").value = str;
  21.    }
  22.    window.setInterval("counter()", 1000);
  23. </script>
  24. </body>
  25. </html>
  26.  

15. 补充代码,鼠标单击Button1后将Button1移动到Button2的后面

  1. <div> <input type=”button” id =”button1″ value=”1″ onclick=”???”>
  2. <input type=”button” id =”button2″ value=”2″ /”> </div>

  3. <div>

  4.           <input type="button" id ="button1" value="1" onclick="moveBtn(this);">
  5.            <input type="button" id ="button2" value="2" />
  6. </div>
  7. <script type="text/javascript">
  8. function moveBtn(obj) {
  9.           var clone = obj.cloneNode(true);
  10.           var parent = obj.parentNode;
  11.           parent.appendChild(clone);
  12.           parent.removeChild(obj);
  13. }
  14. </script>

本文由金沙澳门官网网址发布于澳门金莎娱乐手机版,转载请注明出处:跨浏览器开发经验总结,js的一些笔试面试题

关键词: