1. JavaScript實現DOM樹的遍歷
function traversal(node){
if(node && node.nodeType ===1){ //對node的處理
console.log(node.tagName);
}
var i = 0, childNodes =node.childNodes,item;
for(; i < childNodes.length ; i++){
item = childNodes[i];
if(item.nodeType === 1){
traversal(item); //遞歸先序遍歷子節點
}
} }
functiontraverseNodes(node){
if(node.nodeType == 1){ //判斷是否是元素節點
display(node);
for(var i=0;i<node.attributes.length;i++){ //判斷是否有屬性節點
var attr =node.attributes.item(i); //得到屬性節點
if(attr.specified){ //判斷該節點是否存在
display(attr); //如果存在顯示輸出
}
}
if(node.hasChildNodes){ //判斷該元素節點是否有子節點
var sonnodes = node.childNodes; //得到所有的子節點
for (var i = 0; i < sonnodes.length; i++){ //遍歷所有的子節點
var sonnode = sonnodes.item(i); //得到具體的某個子節點
traverseNodes(sonnode); //遞歸遍歷
}
}
}else{
display(node);
}
}
DOM的廣度和深度遍歷
Tree.prototype.BFSearch = function(node,callback){
var queue=[];
while(node!=null){
callback(node);
if(node.children.length!=0){
for (var i=0;i<node.children.length;i++){
queue.push(node.children[i]);//藉助於隊列,暫存當前節點的所有子節點
}
}
node=queue.shift();//先入先出，藉助於數據結構：隊列
}
};
Tree.prototype.DFSearch = function(node,callback){
var stack=[];
while(node!=null){
callback(node);
if(node.children.length!=0){
for (var i=node.children.length-1;i>=0;i–){//按照相反的子節點順序壓入棧
stack.push(node.children[i]);//將該節點的所有子節點壓入棧
}
}
node = stack.pop();//彈出棧的子節點順序就是原來的正確順序(因爲棧是先入後出的)
}
};
2. javascript實現鏈表的操作
//Node類和LList類
function Node(element){
this.element=element;
this.next=null;
}
function LList(){
this.head=new Node(“head”);
this.find=find;
this.insert=insert;
this.display=display;
this.findPrevious=findPrevious;
this.remove=remove;
}
function display(){ //顯示
var currNode=this.head;
while(!(currNode.next==null)){
print(currNode.next.element);
currNode=currNode.next;
}
function find(item){ //查找
var currNode=this.head;
while(currNode.element!=item){
currNode=currNode.next;
}
return currNode;
}
functioninsert(newElement,item){ //插入
var newNode=new Node(newElement);
varcurrent=this.find(item);
newNode.next=current.next;
current.next=newNode;
}
function remove(item){ //移除
var preNode=this.findPrevious(item);
if(!(preNode.next==null)){
preNode.next=preNode.next.next;
}
}
3. javascript實現import動態導入節點：
1）
var $import =function(){
return function(rId, res, callback){
if(res && ‘string’ == typeofres){
if(rId){
if(
return;
}
}
var sType =res.substring(res.lastIndexOf(‘.’) + 1); //加載資源文件
if(sType && (‘js’ == sType || ‘css’== sType)){ // 支持js/css
var isScript = (sType == ‘js’);
var tag = isScript ? ‘script’ :’link’;
var head =document.getElementsByTagName(‘head’)[0];
var linkScript =document.createElement(tag); // 創建節點
linkScript.type = isScript ?’text/javascript’ : ‘text/css’;
linkScript.charset = ‘UTF-8’;
if(!isScript){
linkScript.rel = ‘stylesheet’;
}
isScript ? linkScript.src = res: linkScript.href = res;
if(callback &&’function’ == typeof callback){
if(linkScript.addEventListener){
linkScript.addEventListener(‘load’,function(){
callback.call();
}, false);
} else if(linkScript.attachEvent) {
linkScript.attachEvent(‘onreadystatechange’, function(){
var target =window.event.srcElement;
if(target.readyState == ‘complete’) {
callback.call();
}
}); } }
head.appendChild(linkScript);
} } }; }();
2）var JCore ={//構造核心對象
version:1.0,
$import:function(importFile){
var file =importFile.toString();
varIsRelativePath = (file.indexOf(“$”)==0 ||file.indexOf(“/”)==-1);//相對路徑(相對於JCore)
var path=file;
if(IsRelativePath){//計算路徑,$開頭表示使用當前腳本路徑，/開頭則是完整路徑
if(file.indexOf(“$”)==0)
file =file.substr(1);
path =JCore.$dir+file;
}
varnewElement=null,i=0;
var ext =path.substr(path.lastIndexOf(“.”)+1);
if(ext.toLowerCase()==”js”){
var scriptTags =document.getElementsByTagName_r(“script”);
for(var i=0;ilength;i++) {
if(scriptTags[i].src && scriptTags[i].src.indexOf(path)!=-1)
return;
}
newElement=document.createElement_x(“script”);
newElement.type=”text/javascript”;
newElement.src=path;
}
elseif(ext.toLowerCase()==”css”){
var linkTags = document.getElementsByTagName_r(“link”);
for(var i=0;ilength;i++) {
if(linkTags[i].href && linkTags[i].href.indexOf(path)!=-1)
return;
}
newElement=document.createElement_x(“link”);
newElement.type=”text/css”;
newElement.rel=”Stylesheet”;
newElement.href=path;
}
else
return;
var head=document.getElementsByTagName_r(“head”)[0];
head.appendChild(newElement);
},
$dir :function(){
var scriptTags = document.getElementsByTagName_r(“script”);
for(var i=0;ilength;i++) {
if(scriptTags[i].src &&scriptTags[i].src.match(/JCore/.js$/)) {
path = scriptTags[i].src.replace(/JCore/.js$/,”“);
return path;
} }
return “”;
}()
}
4. javascript實現分頁函數：
function goPage(pno,psize){
var itable =document.getElementById(“idData”);
var num = itable.rows.length;//表格所有行數(所有記錄數)
var totalPage = 0;//總頁數
var pageSize = psize;//每頁顯示行數
if(num/pageSize >parseInt(num/pageSize)){ //總共分幾頁
totalPage=parseInt(num/pageSize)+1;
}else{
totalPage=parseInt(num/pageSize);
}
var currentPage = pno;//當前頁數
var startRow = (currentPage - 1) *pageSize+1;//開始顯示的行 31
var endRow = currentPage * pageSize;//結束顯示的行 40
endRow = (endRow > num)? num :endRow; 40
for(var i=1;i<(num+1);i++){ //遍歷顯示數據實現分頁
var irow = itable.rows[i-1];
if(i>=startRow &&i<=endRow){
irow.style.display =”block”;
}else{
irow.style.display = “none”;
}
}
varpageEnd = document.getElementById(“pageEnd”);
var tempStr = “共”+num+”條記錄 分”+totalPage+”頁 當前第”+currentPage+”頁”;
if(currentPage>1){
tempStr += “<ahref=\”#\” onClick=\”goPage(“+(1)+”,”+psize+”)\”>首頁</a>”;
tempStr += “<a href=\”#\”onClick=\”goPage(“+(currentPage-1)+”,”+psize+”)\”><上一頁</a>”
}else{
tempStr += “首頁”;
tempStr += “<上一頁”;
}
if(currentPage<totalPage){
tempStr += “<a href=\”#\”onClick=\”goPage(“+(currentPage+1)+”,”+psize+”)\”>下一頁></a>”;
tempStr += “<a href=\”#\”onClick=\”goPage(“+(totalPage)+”,”+psize+”)\”>尾頁</a>”;
}else{
tempStr += “下一頁>”;
tempStr += “尾頁”;
}
5. String()與toString()的區別：
(1)null和undefined有String()轉換成字符串，而toString()不能；
(2)toString()能設定數值數據轉換的進制數，而String()不能；
(3)其他情況下：toString(val) === String(val)
6. 下面這個ul，如何點擊每一列的時候alert其index?（閉包）
<ul id=”test”>
<li>這是第一條</li>
<li>這是第二條</li>
<li>這是第三條</li>
</ul>
// 方法一：
var lis=document.getElementById(‘test’).getElementsByTagName(‘li’);
for(var i=0;i<3;i++)
{ lis[i].index=i;
lis[i].οnclick=function(){
alert(this.index);
};
}
//方法二：
var lis=document.getElementById(‘test’).getElementsByTagName(‘li’);
for(var i=0;i<3;i++){
lis[i].index=i;
lis[i].οnclick=(function(a){
return function() {
alert(a);
}
})(i);
}
7. javascript實現快排
選擇中間的元素作爲基準，其他的元素和基準比較，形成兩個子集，不斷重複，直到所有子集剩下一個元素爲止；
var quickSort = function(arr) {
if(arr.length <= 1) { return arr; }
varpivotIndex = Math.floor(arr.length / 2);
var pivot =arr.splice(pivotIndex, 1)[0];
var left =[];
var right =[];
for (var i= 0; i < arr.length; i++){
if(arr[i] < pivot) {
left.push(arr[i]);
} else {
right.push(arr[i]);
}
}
returnquickSort(left).concat([pivot], quickSort(right));
};
8. javascript實現冒泡排序
bubbleSort: function(array) {
var i = 0,
len = array.length,
j, d;
for (; i < len; i++) {
for (j = 0; j < len; j++) {
if (array[i] < array[j]) {
d = array[j];
array[j] = array[i];
array[i] = d;
}
}
}
return array;
},
9. 插入排序：
function insertSort(arr){
for(var i =1,j;i<arr.lenght;i++){
j=i;
v=arr[j];
while(arr[j-1]>v){
arr[j] = arr[j-1];
j–;
if(j == 0){
break;
}
}
arr[j]=v;
}
return arr;
}
10. 選擇排序:
function selectSort(arr){
var len=arr.length;
var temp;
for(var i=0;i<len-1;i++){
for(var j=i+1;j<len;j++){
if(arr[j]<arr[i]){
temp=arr[j];
arr[j]=arr[i];
arr[i]=temp;
}
}
i++;
}
returnarr;
}
11. 希爾排序：
function shallSort(array) {
varincrement = array.length;
vari
vartemp; //暫存
varcount = 0;
do {
//設置增量
increment = Math.floor(increment / 3) + 1;
for (i = increment ; i < array.length; i++) {
console.log(increment);
if (array[i] < array[i - increment]) {
temp = array[i];
for (var j = i - increment; j >= 0 && temp < array[j]; j-= increment) {
array[j + increment] = array[j];
}
array[j + increment] = temp;
}
}
}
while (increment > 1)
return array;
}
12. 堆排序：
Array.method(‘createHeap’, function(low,high){
var i=low, j=2*i, tmp=this[i];
while(j<=high){
if(j< high && this[j]<this[j+1]) j++; //從左右子節點中選出較大的節點
if(tmp < this[j]){ //根節點(tmp)<較大的節點
this[i] = this[j];
i = j;
j = 2*i;
}else break;
}
this[i] = tmp; //被篩選的元素放在最終的位置上
return this;
});
Array.method(‘heapSort’, function(){
var i, tmp, len=this.length-1;
for(i=parseInt(len/2); i>=1; i–) this.createHeap(i, len);
for(i=len; i>=2; i–){
tmp = this[1];
this[1] = this[i];
this[i] = tmp;
this.createHeap(1, i-1);
}
return this;
});
13. 歸併排序：
function mergeSort(items) {
if (items.length < 2) {
return items;
}
var middle = Math.floor(items.length / 2),
left = items.slice(0, middle),
right = items.slice(middle),
params = merge(mergeSort(left), mergeSort(right));
params.unshift(0, items.length);
items.splice.apply(items, params);
return items;
function merge(left, right) {
var result = [], il = 0, ir = 0;
while (il < left.length && ir < right.length) {
if (left[il] < right[ir]) {
result.push(left[il++]);
} else {
result.push(right[ir++]);
}
}
return result.concat(left.slice(il)) .concat(right.slice(ir));
}
}
14. javascript實現二分查找
function binarySearch(data, dest){
var h = data.length - 1,
l = 0;
while(l <= h){
var m = Math.floor((h + l) / 2);
if(data[m] == dest){
return m;
}
if(dest > data[m]){
l = m + 1;
}else{
h = m - 1;
}
}
return false;
}
15. XML 和 JSON 有過了解吧？能說一下分別介紹一下他們嗎？ JSON 有什麼優勢？
XML：擴展標記語言 (ExtensibleMarkup Language, XML) ，可以用來標記數據、定義數據類型，是一種允許用戶對自己的標記語言進行定義的源語言。 XML使用DTD(document type definition)文檔類型定義來組織數據;格式統一，跨平臺和語言，早已成爲業界公認的標準。
XML是標準通用標記語言 (SGML) 的子集，非常適合 Web 傳輸。XML 提供統一的方法來描述和交換獨立於應用程序或供應商的結構化數據。
1）應用廣泛，可擴展性強，被廣泛應用各種場合
2）讀取、解析沒有JSON快
3）可讀性強，可描述複雜結構
4）XML文件龐大，文件格式複雜，傳輸佔帶寬
JSON：(JavaScript ObjectNotation) 是一種輕量級的數據交換格式。易於人閱讀和編寫。同時也易於機器解析和生成。 JSON採用完全獨立於語言的文本格式。
JSON建構於兩種結構：“名稱/值”對
1）結構簡單，都是鍵值對。
2）讀取、解析速度快，很多語言支持
3）數據格式比較簡單，易於讀寫，格式都是壓縮的，佔用帶寬小；
4）描述複雜結構能力較弱
XML: <Student>張三</Student> 轉爲JSON: { “Student”: “張三” }
16. 斐波那契數
function fib(n){
if(n==1||n==2){
return 1;
}
return arguments.callee (n-1)+ arguments.callee (n-2);
}
17. String(), toString()的區別
數值，布爾值，對象和字符串值都有toString()方法，但是null和undefined沒有這個方法。
一般情況下沒有參數，但是可以傳遞一個參數，輸出數值的基數。
String()可以將任何類型的值轉化爲字符串，如果值有toString()的方法，則調用該方法並返回相應的結果。如果值是null，則返回null。如果值是undefined，則返回undefined。
18. 左邊固定，右邊自適應
1）#left{
float:left;
width:200px;
background-color:blue;
}
#right{
overflow:hidden;
background-color:gray;
}
2）#left{
float:left;
width:200px;
background-color:blue;
}
#right{
margin-left:200px;
background-color:red;
}
3）#left{
position:absolute;
top:0px;
left:0px;
width:200px;
background-color:blue;
}
#right{
margin-left:200px;
background-color:red;
}
4）#left{
position:absolute;
top:0px;
left:0px;
width:200px;
background-color:blue;
}
#right{
position:absolute;
top:0px;
left:200px;
width:100%;
background-color:gray;
}
右邊固定，左邊自適應：
1）#left{
float:left;
width:100%;
background-color:blue;
margin-left:-200px;
}
#right{
float:right;
width:200px;
background-color:gray;
}
