美文网首页
面试题之JavaScript+Jquery

面试题之JavaScript+Jquery

作者: 1263536889 | 来源:发表于2018-07-05 09:41 被阅读0次

    问题:body中的onload()函数和jQuery中的document.ready()有什么区别?

    回答:onload()和document.ready()的区别有以下两点:
    1、我们可以在页面中使用多个document.ready(),但只能使用一次onload()。
    2、document.ready()函数在页面DOM元素加载完以后就会被调用,而onload()函数则要在所有的关联资源(包括图像、音频)加载完毕后才会调用。

    Jquery选择器:
    大概归纳为9种。
    (1)基本:
    id

    element
    .class

    (2)层次选择器:
    ancestor descendant
    parent > child
    prev + next
    prev ~ siblings()选取每个匹配元素的所有同辈元素(不包括自己) nextAll(): 选取每个匹配元素之后的所有同辈元素。
    (3)基本过滤器选择器
    :first
    :last
    :not
    :even
    :odd
    :eq
    :gt
    :lt
    :header
    :animated
    (4)内容过滤器选择器
    :contains
    :empty
    :has
    :parent
    (5)可见性过滤器选择器
    :hidden
    :visible
    (6)属性过滤器选择器
    [attribute]
    [attribute=value]
    [attribute!=value]
    [attribute^=value]
    [attribute$=value]
    [attribute*=value]
    [attrSel1][attrSel2][attrSelN]
    (7)子元素过滤器选择器
    :nth-child
    :first-child
    :last-child
    :only-child
    (8)表单选择器
    :input
    :text
    :password
    :radio
    :checkbox
    :submit
    :image
    :reset
    :button
    :file
    :hidden
    (9)表单过滤器选择器
    :enabled
    :disabled
    :checked
    :selected

    问题:jQuery中的Delegate()函数有什么作用?
    回答:delegate()会在以下两个情况下使用到:
    1、如果你有一个父元素,需要给其下的子元素添加事件,这时你可以使用delegate()了,代码如下:
    (“ul”).delegate(“li”, “click”, function(){

    (this).hide();
    });
    2、当元素在当前页面中不可用时,可以使用delegate()

    问题:怎样用jQuery编码和解码URL?
    回答:在jQuery中,我们可以使用以下方法实现URL的编码和解码。
    encodeURIComponent(url) and decodeURIComponent(url)

    问题:如何用jQuery禁用浏览器的前进后退按钮?
    回答:实现代码如下:
    $(document).ready(function() { window.history.forward(1); window.history.forward(-1); });

    jQuery绑定事件的四种方式:
    jQuery中提供了四种事件监听方式,分别是bind、live、delegate、on,对应的解除监听的函数分别是unbind、die、undelegate、off。
    1、bind用法:
    (‘#myol li’).bind(‘click’,getHtml);
    bind的特点就是会把监听器绑定到目标元素上,有一个绑一个,在页面上的元素不会动态添加的时候使用它没什么问题。但如果列表中动态增加一个“列表元素5”,点击它是没有反应的,必须再bind一次才行。
    2、live()用法:
    (‘#myol li’).live(‘click’,getHtml);
    live将监听器绑定到document上,事件的处理需要等待层层冒泡,一直到根节点,才开始执行。优于根节点的子节太多,易导致混乱。已弃用。
    3、delegate()用法
    (‘#myol’).delegate(‘li’,’click’,getHtml);
    参数多了一个selector,用来指定触发事件的目标元素,监听器将被绑定在调用此方法的元素上。
    4、on()的用法

    (‘#myol li’).on(‘click’,getHtml);
    on与delegate差不多但还是有细微的差别,首先type与selector换位置了,其次selector变为了可选项。

    注意:因为其他方法都是内部调用on来完成的,直接使用on可以提高效率,而且你完全可以用on来代替其他三种写法。

    1、JavaScript基础数据类型
    JavaScript数据类型包括原始类型和引用类型,原始类型有五个:
    Number(数值) String(字符串) Boolean(布尔) Null(空) Undefined(未定义)
    引用类型有一个:
    Object(对象)
    通过typeof(x)可以返回一个变量x的数据类型“number”、“string”、“boolean”、“undefined”、”object”,这里要注意一点:typeof运算符对于null类型返回的是object

    2 谈一谈JavaScript作用域链
    当执行一段JavaScript代码(全局代码或函数)时,JavaScript引擎会创建为其创建一个作用域又称为执行上下文(Execution Context),在页面加载后会首先创建一个全局的作用域,然后每执行一个函数,会建立一个对应的作用域,从而形成了一条作用域链。每个作用域都有一条对应的作用域链,链头是全局作用域,链尾是当前函数作用域。
    作用域链的作用是用于解析标识符,当函数被创建时(不是执行),会将this、arguments、命名参数和该函数中的所有局部变量添加到该当前作用域中,当JavaScript需要查找变量X的时候(这个过程称为变量解析),它首先会从作用域链中的链尾也就是当前作用域进行查找是否有X属性,如果没有找到就顺着作用域链继续查找,直到查找到链头,也就是全局作用域链,仍未找到该变量的话,就认为这段代码的作用域链上不存在x变量,并抛出一个引用错误(ReferenceError)的异常。

    6 new构建对象的本质
    function User(){
    this.name = “Vicfeel”;
    this.age = 23;
    }
    var user = new User();
    通过new操作符,实际上在构造函数User中完成了如下操作:
    创建一个新的对象,这个对象的类型是object;
    设置这个新的对象的内部、可访问性和prototype属性为构造函数(指prototype.construtor所指向的构造函数)中设置的;
    执行构造函数;
    返回新创建的对象。
    function User(){
    //this = {};
    //this.constructor = User;
    this.name = “Vicfeel”;
    this.age = 23;
    //return this;
    }
    var user = new User();
    如果构造函数默认返回的新创建的this对象,如果手动return 一个变量的话,如果该变量是原始类型则无效,如果是对象,则返回该对象。

    2.javascript是面向对象的,怎么体现javascript的继承关系?
    使用prototype来实现。

    4.form中的input可以设置为readonly和disable,请问2者有什么区别?
    readonly不可编辑,但可以选择和复制;值可以传递到后台
    disabled不能编辑,不能复制,不能选择;值不可以传递到后台

    5.js中的3种弹出式消息提醒(警告窗口,确认窗口,信息输入窗口)的命令式什么?
    alert
    confirm
    prompt

    7.javaScript的2种变量范围有什么不同?
    全局变量:当前页面内有效
    局部变量:方法内有效

    8、innerHTML,innerText,outerHTML,innerText的区别?
    1)、innerHTML与outerHTML在设置对象的内容时包含的HTML会被解析,而innerText与outerText则不会。
    2)、在设置时,innerHTML与innerText仅设置标签内的文本,而outerHTML与outerText设置包括标签在内的文本。
    特别说明:
      innerHTML是符合W3C标准的属性,而innerText、outerText、outerHTML只适用于IE浏览器,因此,尽可能地去使用innerHTML,而少用innerText,如果要输出不含HTML标签的内容,可以使用innerHTML取得包含HTML标签的内容后,再用正则表达式去除HTML标签,

    神马是 NaN,它的类型是神马?怎么测试一个值是否等于 NaN?
    NaN 是 Not a Number 的缩写,Javascript 的一种特殊数值,其类型是 Number,可以通过 isNaN(param) 来判断一个值是否是 NaN:
    console.log(isNaN(NaN)); //true
    console.log(isNaN(23)); //false
    console.log(isNaN(‘ds’)); //true
    console.log(isNaN(‘32131sdasd’)); //true
    console.log(NaN === NaN); //false
    console.log(NaN === undefined); //false
    console.log(undefined === undefined); //false
    console.log(typeof NaN); //number
    console.log(Object.prototype.toString.call(NaN)); //[object Number]

    isNaN() 成为了 Number 的静态方法:Number.isNaN().

    js中几种实用的跨域方法原理详解
    这里说的js跨域是指通过js在不同的域之间进行数据传输或通信,比如用ajax向一个不同的域请求数据,或者通过js获取页面中不同域的框架中(iframe)的数据。只要协议、域名、端口有任何一个不同,都被当作是不同的域。
    一、通过jsonp跨域
    在js中,我们直接用XMLHttpRequest请求不同域上的数据时,是不可以的。但是,在页面上引入不同域上的js脚本文件却是可以的,jsonp正是利用这个特性来实现的。
    这样jsonp的原理就很清楚了,通过script标签引入一个js文件,这个js文件载入成功后会执行我们在url参数中指定的函数,并且会把我们需要的json数据作为参数传入。所以jsonp是需要服务器端的页面进行相应的配合的。

    2、通过修改document.domain来跨子域
    浏览器都有一个同源策略,其限制之一就是第一种方法中我们说的不能通过ajax的方法去请求不同源中的文档。 它的第二个限制是浏览器中不同域的框架之间是不能进行js的交互操作的。有一点需要说明,不同的框架之间(父子或同辈),是能够获取到彼此的window对象的,但蛋疼的是你却不能使用获取到的window对象的属性和方法(html5中的postMessage方法是一个例外,还有些浏览器比如ie6也可以使用top、parent等少数几个属性),总之,你可以当做是只能获取到一个几乎无用的window对象。

    3、使用window.name来进行跨域
    window对象有个name属性,该属性有个特征:即在一个窗口(window)的生命周期内,窗口载入的所有的页面都是共享一个window.name的,每个页面对window.name都有读写的权限,window.name是持久存在一个窗口载入过的所有页面中的,并不会因新页面的载入而进行重置。

    4、使用HTML5中新引进的window.postMessage方法来跨域传送数据
    window.postMessage(message,targetOrigin) 方法是html5新引进的特性,可以使用它来向其它的window对象发送消息,无论这个window对象是属于同源或不同源,目前IE8+、FireFox、Chrome、Opera等浏览器都已经支持window.postMessage方法。
    调用postMessage方法的window对象是指要接收消息的那一个window对象,该方法的第一个参数message为要发送的消息,类型只能为字符串;第二个参数targetOrigin用来限定接收消息的那个window对象所在的域,如果不想限定域,可以使用通配符 * 。
    需要接收消息的window对象,可是通过监听自身的message事件来获取传过来的消息,消息内容储存在该事件对象的data属性中。
    上面所说的向其他window对象发送消息,其实就是指一个页面有几个框架的那种情况,因为每一个框架都有一个window对象。

    相关文章

      网友评论

          本文标题:面试题之JavaScript+Jquery

          本文链接:https://www.haomeiwen.com/subject/zapuuftx.html