前端笔试题总结（四） - 前端库框架篇

1. Dom对象与jQuery对象之间的互相转换：

jQuery 对象是通过 jQuery 包装 Dom 对象后产生的对象。jQuery 对象是 jQuery 独有的，其可以使用 jQuery 里的方法，但是不能使用 DOM 的方法；例如： $("#img").attr("src","test.jpg"); 这里的 $("#img")就是 jQuery 对象。

Dom 对象就是 JS 固有的一些对象操作。Dom 对象能使用 JS 固有的方法，但是不能使用 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对象：

var div1 = document.getElementById("div1"); // 获取Dom对象
var $div1 = $(div1); // 转化为 jQuery 对象

• jQuery转化为Dom对象：

// 先获取jQuery对象集合，然后选中对应的jQuery对象，再转化为对应的Dom对象
// 方法一：通过[index]选中集合中对应的jQuery对象
var div = $("#div")[0]; 

// 方法二：通过.get(index)选中集合中对应的jQuery对象（$div.get()[0] 也可以）
var div = $("#div").get(0); 

• 几个常见方法 js 与 jq 的使用对比：

操作	JavaScript	jQuery
获取、设置高度	jsObj.style.height;	jqObj.hieght();
设置显示隐藏属性	jsObj.style.diaplsy="block/none";	jqObj.show()/.hide();
获取显示内容	jsObj.innerHTML;	jqObj.html();
获取显示文本	jsObj.innerText;	jqObj.text();
获取自定义属性	jsObj.getAttribute('attributeName')	jqObj.attr('attributeName')

2. jQuery文档就绪函数的三种写法：（这三种写法是等效的）

// 方法一：
$(document).ready(function(){ });

// 方法二：// 不建议这样做
$().ready(function(){ });  

// 方法三：
$(function(){ }); 

3. jQuery 中 each 的作用：

格式是 $.each(par, function(index,value){})

效果是会将 par 中所有的参数都遍历一遍；假如 par 对应了一个选择器，则会将选择器选择出来的元素全部遍历一遍。举两个栗子：

// 例子一：
var arr1 = [[1, 4, 3], [4, 6, 6], [7, 20, 9]]     
$.each(arr1, function(i, item){     
   console.log(item[0]);  // 1 4 7
});   

// 例子二：
/*
<input name="aaa" type="hidden" value="111" />
<input name="bbb" type="hidden" value="222" />
<input name="ccc" type="hidden" value="333" />
*/
$.each($("input:hidden"), function(i,val){  
  console.log(i+" : "+val.name+", "+val.value);
}); 
/*
打印：
  1 ：aaa, 111
  2 ：bbb, 222
  3 ：ccc, 333
*/

4. jQuery中绑定事件的方法：

• target.click(function(){}); 绑定点击事件时使用click，就和JS中的方法差不多，就是少了个on；
• target.bind("click",function(){}); 
• target.live("click",function(){});

 live 方法其实是 bind 方法的变种，其基本功能就同 bind 方法的功能是一样的，都是为一个元素绑定某个事件，但是 bind 方法只能给当前存在的元素绑定事件，对于事后采用JS等方式新生成的元素无效，而live方法则正好弥补了bind方法的这个缺陷，它可以对后生成的元素也可以绑定相应的事件。原理就是借助了事件委托。