面试常见技术问题

若如初见. 提交于 2019-12-06 04:15:21

---------       JQ        ---------

1.jq 常见选择器?
,号选择器,分组选择器。空格,祖父选择器。>大于号,父子选择器。+号选择器,紧接下一个兄弟选择器。~号,元素之后所有的 siblings 元素。
:first,:last,:not,:first-child,:last-child,:animated.:checked
2.jQuery 插件实现方式,分别介绍?
jQuery.fn.extend 封装直接在$下面的方法,就是根下面,
扩展 jQuery 元素集来提供新的方法(通常用来制作插件)。
$.extend 用来在 jQuery 命名空间上增加新函数。用一个或多个其他对象来扩展一个对象,返回被扩展的对象
批量的方法用 fn,静态的用$.extend(),不建议用扩展到根下面。
3.bind 和 live 的区别?
live 方法其实是 bind 方法的变种,其基本功能就同 bind 方法的功能是一样的,都是为一个元素绑定某个事件,但是 bind 方法只能给当前存在的元素绑定事件,对于事后采用 JS 等方式新生成的元素无效,而 live 方法则正好弥补了 bind 方法的这个缺陷,它可以对后 生成的元素也可以绑定相应的事件。
4.js 和 jq 如何转换?
jQuery 对象是通过 jQuery 包装 DOM 对象后产生的对象。jQuery 对象是 jQuery 独有
的,其可以使用 jQuery 里的方法,但是不能使用 DOM 的方法;例如:
$("#img").attr("src","test.jpg"); 这里的 $("#img")就是 jQuery 对象。
DOM 对象就是 Javascript 固有的一些对象操作。DOM 对象能使用 Javascript 固有的方法,但是不能使用 jQuery 里的方法。例如:document.getElementById("img").src=“test.jpg";这里的 document.getElementById("img") 就是 DOM 对象。
$("#img").attr("src","test.jpg"); 和 document.getElementById("img").src="test.jpg"; 是等价的,是正确的,但是 $("#img").src="test.jpg";或者document.getElementById("img").attr("src","test.jpg"); 都是错误的。
 
DOM 对象转成 jQuery 对象
对于已经是一个 DOM 对象,只需要用 $() 把 DOM 对象包装起来,就可以获得一个jQuery 对象了,$(DOM 对象)
如: var v=document.getElementById("v"); //DOM 对象
var $v=$(v); //jQuery 对象
转换后,就可以任意使用 jQuery 的方法。
 
jQuery 对象转成 DOM 对象
两种转换方式讲一个 jQuery 对象转换成 DOM 对象: [index] 和.get(index);
(1) jQuery 对象是一个数据对象,可以通过 [index] 的方法,来得到相应的 DOM 对象。
如: var $v=$("#v"); //jQuery 对象
var v=$v[0]; //DOM 对象
alert(v.checked); //检测这个 checkbox 是否被选中
(2) jQuery 本身提供,通过.get(index) 方法得到相应的 DOM 对象
如:var $v=$("#v"); //jQuery 对象
var v=$v.get(0); //DOM 对象 ( $v.get()[0] 也可以 )
alert(v.checked); //检测这个 checkbox 是否被选中
通过以上方法,可以任意的相互转换 jQuery 对象和 DOM 对象,需要再强调的是:
DOM 对象才能使用 DOM 中的方法,jQuery 对象是不可以使用DOM中的方法。

---------      JS     ---------

1. BFC是什么?

BFC(块级格式化上下文),一个创建了新的BFC的盒子是独立布局的,盒子内元素的布局不会影响盒子外面的元素。在同一个BFC中的两个相邻的盒子在垂直方向发生margin重叠的问题

BFC是指浏览器中创建了一个独立的渲染区域,该区域内所有元素的布局不会影响到区域外元素的布局,这个渲染区域只对块级元素起作用。

2. Doctype作用? 严格模式与混杂模式-如何触发这两种模式,区分它们有何意义?

    1)、<!DOCTYPE> 声明位于文档中的最前面,处于 <html> 标签之前。告知浏览器的解析器,用什么文档类型 规范来解析这个文档。

    2)、严格模式的排版和 JS 运作模式是  以该浏览器支持的最高标准运行。

    3)、在混杂模式中,页面以宽松的向后兼容的方式显示。模拟老式浏览器的行为以防止站点无法工作。

    4)、DOCTYPE不存在或格式不正确会导致文档以混杂模式呈现

3. 行内元素有哪些?块级元素有哪些? (void)元素有那些?

1)CSS规范规定,每个元素都有display属性,确定该元素的类型,每个元素都有默认的display值,比如div默认display属性值为“block”,成为“块级”元素;span默认display属性值为“inline”,是“行内”元素。  

2)行内元素有:a b span img input select strong(强调的语气) 块级元素有:div ul ol li dl dt dd h1 h2 h3 h4…p  

3)知名的空元素:      <br><hr><img><input><link><meta>鲜为人知的是: <area><base><col><command>

<embed><keygen><param><source><track><wbr>

4. CSS 选择符有哪些?哪些属性可以继承?优先级算法如何计算? CSS3新增伪类有那些?

    *   1.id选择器( # myid)

        2.类选择器(.myclassname)

        3.标签选择器(div, h1, p)

        4.相邻选择器(h1 + p)

        5.子选择器(ul > li)

        6.后代选择器(li a)

        7.通配符选择器( * )

        8.属性选择器(a[rel = "external"])可扩展的属性值

        9.伪类选择器(a: hover, li: nth - child)link vitetd hover active

    *   可继承: font-size font-family color, UL LI DL DD DT;

    *   不可继承 :border padding margin width height ;

    *   优先级就近原则,样式定义最近者为准;

    *   载入样式以最后载入的定位为准;

优先级为:

       !important >  id > class > tag  

       important 比 内联优先级高

CSS3新增伪类举例:

    p:first-of-type 选择属于其父元素的首个 <p> 元素的每个 <p> 元素。

    p:last-of-type  选择属于其父元素的最后 <p> 元素的每个 <p> 元素。

    p:only-of-type  选择属于其父元素唯一的 <p> 元素的每个 <p> 元素。

    p:only-child    选择属于其父元素的唯一子元素的每个 <p> 元素。

    p:nth-child(2)  选择属于其父元素的第二个子元素的每个 <p> 元素。

    :enabled、:disabled 控制表单控件的禁用状态。

    :checked,单选框或复选框被选中。

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!