面试常见技术问题

--------- 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 对象是不可以使用ＤＯＭ中的方法。

--------- 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）知名的空元素： <hr><img><input><link><meta>鲜为人知的是： <area><base><col><command>

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:last-of-type 选择属于其父元素的最后 元素的每个 元素。

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

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

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

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

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