主頁 > 前端設計 > JS 基礎面試題

JS 基礎面試題

2021-04-18 10:28:33 前端設計

JS 基礎面試題

1、什么是JavaScript?

基于物件和事件驅動可解釋性腳本語言

2、JavaScript與ECMAScript的關系?

JavaScript是ECMAScript的表現,ECMAScript是JavaScript的規范

3、變數的命名規則?

1.名字見名知義,遵循駝峰標識,例:userName passWord

2.變數名只能以字母,_,$開頭

3.不能使用關鍵和保留字

4.變數名不要相同(后面的會覆寫前面)

4、window.onload的作用?

window.onload是等檔案和資源都加載完成后呼叫的事件,保證js獲取元素

的時候,已經加載,

1、js資料型別?

6大型別

基本資料型別:Number String Boolean null undefined

復雜型別:Object(array,function,object)

2、null和undefined的區別?

Null訪問一個不存在物件回傳的值,表示空物件

Undefined:訪問一個未初始化變數(宣告完沒有賦值的變數)回傳的值,表示空變數

3、運算子的種類?

算術運算子,賦值運算子,比較運算子,邏輯運算子,三目運算子

4、var a = 10;var b = a++; a、b最后的結果是?

a=11 b=10

5、“”與“=”的區別?

==,判斷相等,判斷的程序中會隱式轉換為number型別進行比較 “10”==10 true

=== 恒等,嚴格相等,“10”===10 false

6、console.log(0.1+0.2 == 0.3),

False,有些小數在運算的程序中會出現偏差,因此最好不要用小數作為判斷條件

7、NaN會在什么樣的情況下出現呢?列舉出現這種情況的代碼,

NaN:not a number

A.自己定義

B.運算程序中出現錯誤,原本應該是數字的地方出現一些不能轉換為數字的值

10+“s” ,Number(“s”),

8、列舉三種強制型別轉換和2種隱式型別轉換,

Number(“10”); 強轉為Number

parseInt(“10.5”);強轉為number,取整

parseFloat(“10.5”);強轉為number,保留小數

String(10); 強轉為字串

10.toString(); 強轉為字串

“10”+20 ; 1020 +號遇到字串變成連接符,20隱式轉換為字串

1+true; 2 true隱式轉換為1

10==“10” “10”隱式轉換為10

1.document.write()與innerHTML的區別?

document.write:

操作body的內容

會覆寫之前已經存在的body中的內容,document.write添加的內容會疊加

innerHTML:

操作所有閉合標簽的內容

會覆寫之前的所有內容

2.break 與 continue 的區別,舉例說明并解釋原因?

break陳述句是結束整個回圈程序,不再判斷執行回圈的條件是否成立,

continue陳述句只是結束本次的回圈,而不是終止整個的執行,接著進行下一次是否執行回圈的判定,

3.使用 for 回圈列印由星號組成的菱形?

var alt = "";

var _num = 5;

for (var i = 1; i <= _num; i++) {

  var blank = "";

  for (var j = 1; j <= _num - i; j++) {  //列印空格

?    blank += " ";

  }

  var stars = "";

  for (var m = 1; m <= 2 * i - 1; m++) {  //列印*

?    stars += "*";

  }

  alt += blank + stars + "\n";  //字串的拼接,拼為一行

}

for (var i = _num - 1; i > 0; i--) {  //列印的行數要減1

  var blank = "";

  for (var j = 1; j <= _num - i; j++) {  //列印空格

?    blank += " ";

  }

  var stars = "";

  for (var m = 1; m <= 2 * i - 1; m++) {  //列印*

?    stars += "*";

  }

  alt += blank + stars + "\n";  //字串的拼接,拼為一行

}

console.log(alt);

1.談談對this物件的理解?

this存在任何地方,不同環境代表不同的含義,取決于呼叫時的環境,

A.事件處理函式中的this—觸發事件的物件

document.onclick = function(){ alert(this) }

B.普通函式中的this—window

function sum(){ alert(this)} sum()

2.宣告函式的方式有哪些?分別舉例,

使用function關鍵字宣告函式 function fun () {}

使用函式運算式宣告 var f = function () {}

1.寫一個獲取非行間樣式的函式

function getStyle(elem,attr) {//elem元素,attr屬性
  	if(elem.currentStyle){//ie
    return elem.currentStyle[attr];
  	}else{//標準
    return getComputedStyle(elem)[attr];
  	}
}

 

2.說說你對作用域鏈的理解?

作用域鏈是js中的一種查找機制,從當前作用域查找,當前作用域沒有往上一級作用域查找,一直到最外層,如果都找不到則是is not define

var i = 10;
function f() {
  var i = 20;
  function ff() {
    console.log(i); //20 當前作用域沒有,往上一級作用域查找
  }
  ff()
}
f()

3.下面代碼執行完以后的結果為?

var x = 1, y = z = 0;
function add(n) {
  n = n + 1;
};
y = add(x);
function add(n) {
  n = n + 3;
};
z = add(x);
console.log(x,y,z);

var x = 1, y = z = 0;
function add(n) {
  n = n + 1;
};
y = add(x); //undefined 函式沒有回傳值,默認結果為undefined
function add(n) {
  n = n + 3;
};
z = add(x); //undefined函式沒有回傳值,默認結果為undefined
console.log(x,y,z);//1 undefined undefined

4.請解釋變數提升?

瀏覽器決議js代碼至少會經過兩個程序,預決議和逐步執行

預決議:找東西var,function,如果找到var,會在記憶體中存盤變數沒有值,function則會存盤整個函式

逐步執行:逐行執行代碼

console.log(a); //undefined 不會報錯 找到var存盤了變數a,但是沒有賦值默認為undefined
var a = 10; //給記憶體中的a賦值10
console.log(a); //10

//2.function
console.log(sum); //整個函式,找到函式會將整個函式都存盤在記憶體中
sum(); //存盤了整個函式,因此可以在前面呼叫
function sum() {
  console.log(10+20);
}

 

?

5.函式宣告和函式運算式宣告的區別?

函式宣告:

sum(); //10

function sum(){ console.log(10)}

運算式宣告

  s(); //報錯 s is not a function

  var s = function(){ console.log(20)}

在預決議的程序中,函式會存盤整個,因此可以在之前呼叫,運算式是var宣告,只會存盤undefined

6.JavaScript兩種變數范圍有什么不同?

Js中兩種變數,全域變數和區域變數

全域變數:函式外宣告,在任何地方都能被修改和訪問,會一直存盤在記憶體中

區域變數:函式內宣告,只能在函式內部使用,出了函式{}就會被銷毀

1.定時器的分類?他們的區別及用法是什么?

Js中有兩種定時器:setInterval:間歇執行,setTimeout:延遲執行

setInterval(函式,時間) 時間單位ms,

語法:setInterval(function(){},1000); 隔一秒執行函式一次

一般用于倒計時,輪播圖

 

setTimeout(函式,時間) 時間單位ms,

語法:setTimeout(function(){},1000); 延遲一秒執行函式一次,只會執行一次

一般用于廣告,廣告彈出層

1.js有哪些物件?

原生物件:Object,Function ,Array, String, Date, Boolean, Number,RegExp,Error

內置物件:Global(全域 window,documet),Math

宿主物件:DOM  BOM

全域物件:window

2.把下面的字串去重,并去除掉特殊字符按照數字在前字母在后的順序排序字串

如下:“1233fddfd&3434fdsaff&454545&4545444rfdsfds&545gdsgs”

var str = "1233fddfd&3434fdsaff&454545&4545444rfdsfds&545gdsgs";
 var n = "";
 var s="";
for(var i=0;i<str.length;i++){
  if((str[i]>=0&&str[i]<=9)&&n.indexOf(str[i])==-1){
    n+=str[i];
  }else if((str.charCodeAt(i)>=97&&str.charCodeAt(i)<=122)&&s.indexOf(str[i])==-1){
    s+=str[i];
  }
}
console.log(n+s); //12345fdsarg

3.截取字串“abcdefg”中的def,

var str = "abcdefg"; if(str.indexOf("def")!=-1){ console.log(str.substr(str.indexOf("def"),3)); }

4.有這樣一個url:http://item.taobo.com/item.html?a=1&b=2&c=&d=xxx&e,請寫一段js程式提取url中各個get引數(引數名和引數個數不確定),將其key-value形式回傳到一個json結構中,如{a:“1”,b:“2”,c:“”,d:“xxx”,e:undefined}


var str = "http://item.taobo.com/item.html?a=1&b=2&c=&d=xxx&e";
var json = {}; //存盤
var arr = str.substring(str.indexOf("?")+1).split("&");//獲取?后面的,并且按&分割
for(var i = 0;i<arr.length;i++){
  var a = arr[i].split("=");
  json[a[0]] = a[1]||"";
}
console.log(json);

1.陣列方法pop() push() unshift() shift()?

push:在陣列末尾添加一個或多個元素,回傳當前陣列下標

Pop:在陣列末尾洗掉一個元素,回傳被洗掉的元素

unshift:在陣列的頭部添加或洗掉元素,回傳當前陣列下標

shift:在陣列頭部洗掉一個元素,回傳被洗掉的元素

2.split() join() 的區別?

split是字串的方法,將字串按照特定標志分割成陣列

例:“u&s”.split(&) ------  [“u”,”s”]

Join:是陣列方法,將陣列按標志組合成字串  [“u”,”s”].join(“-”)--‘u-s’

3.撰寫一個陣列去重的方法,

function sort(arr) {
  for(var i = 0;i<arr.length;i++){
    for(var j = i+1;j<arr.length;j++){
      if(arr[i] == arr[j]){
        arr.splice(j,1);
        j--; //洗掉一個元素后,后面的元素會依次往前,下標也需要依次往前
      }
    }
  }
  return arr
}

4.冒泡演算法排序?

for(var i = 0;i<arr.length;i++){
  for(var j = 0;j<arr.length-i;j++){
    if(arr[j] > arr[j+1]){ //
      var temp = arr[j];
      arr[j] = arr[j+1];
      arr[j+1] = temp;
    }
  }
}

1.DOM怎樣添加、移除、移動、復制、創建和查找節點

獲取子節點
 父節點.children
 父節點.childNodes
獲取父節點
 子節點.parentNode
 子節點.offsetParent

創建
 document.createElement(‘標簽名’)
 document.createTextNode(‘文本內容’)

添加
 父節點.appendChild(子節點)
 父節點.insertBefore(newChild,refChild)
復制
 被復制的節點.cloneNode(true)
洗掉:
  節點.remove()
  父節點.removeChild(子節點)
替換
  父節點.replaceChild(newChild,refChild)

1.什么是window物件? 什么是document物件?

window是js中最大的物件,表示視窗,包含document

document檔案物件,表示HTML

2.offsetWidth、clientWidth、scrollTop的區別?

offsetWidth:占位寬,包含 內容寬+左右padding+左右border

clientWidth:可視寬,包含 內容寬+左右padding

scrollTop:頁面被卷去的高

3.如何獲取url地址中搜索內容?

window.location.search

1.事件、IE與火狐的事件機制有什么區別?

IE的事件流是冒泡流,而火狐同時支持冒泡流和捕獲流,

2.如何阻止冒泡?

ev.stopPropagation?ev.stopPropagation():ev.cancelBubble = true;

3.事件系結和普通事件有什么區別,

標簽.事件:如果給同一個元素添加同一個事件,后面的會覆寫前面
事件系結:可以給同一個元素添加同一個事件,不會被覆寫

4.如何用原生js給元素系結兩個click事件?

oDiv.addEventListener('click',fun1);
oDiv.addEventListener('click',fun2);

5.解釋一下事件流?

事件捕獲階段:當事件發生的時候,將事件從window依次往子元素傳遞
確定目標階段:確定事件目標
事件冒泡階段:事件目標開始處理事件,處理完以后會將事件依次傳遞給父元素,一直到window
事件都是在事件冒泡處理,ie只有冒泡

6.事件委托是什么,

將所有的操作交給父元素,將事件添加給父元素,父元素接收到這個事件的發生,找到具體觸發事件的子元素,讓子元素處理事件

oUl.onclick = function (ev) {
  var ev = window.event || ev;
  var target = ev.target || ev.srcElement;//ev.srcElement:ie獲取事件目標
  target.style.background = "orange";
}

7.給10000個li添加點擊事件,

oUl.onclick = function (ev) {
  var ev = window.event || ev;
  var target = ev.target || ev.srcElement;//ev.srcElement:ie獲取事件目標
  target.style.background = "orange";
}

1.拖拽效果中有幾種事件?

按下onmousedown,拖拽onmousemove,彈起onmouseup

2.什么是回呼函式?

某個動作做完以后執行的函式

1.使用正則運算式驗證郵箱,

^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/

2.請用js去除字串空格 var str = “ fdf er re545 6565 2fdfd ”

var reg = /\s/g;

Consloe.log(str.replace(reg,””));

3.判斷字串是否是這樣組成的,第一個字符必須是字母,后面可以是字母、數字、下劃線,總長度5-20,

var reg  = /^[a-z]\w{4,19}$/ig;

If(reg.test(reg)){

console.log(“是”)

}else{

console.log(“否”)

}

4.cookie的利弊?

優點:極高的擴展性和可用性

1.通過良好的編程,控制保存在cookie中的session物件的大小,

2.通過加密和安全傳輸技術(SSL),減少cookie被破解的可能性,

3.只在cookie中存放不敏感資料,即使被盜也不會有重大損失,

4.控制cookie的生命期,使之不會永遠有效,偷盜者很可能拿到一個過期的cookie,

缺點:

1.Cookie數量和長度的限制,每個domain最多只能有20條cookie,每個cookie長度不能超過4KB,否則會被截掉,

2.安全性問題,如果cookie被人攔截了,那人就可以取得所有的session資訊,即使加密也與事無補,因為攔截者并不需要知道cookie的意義,他只要原樣轉發cookie就可以達到目的了,

3.有些狀態不可能保存在客戶端,例如,為了防止重復提交表單,我們需要在服務器端保存一個計數器,如果我們把這個計數器保存在客戶端,那么它起不到任何作用,
因為這些弊端(主要是cookie的大小和多少都受限制,并且每次你請求一個新的頁面的時候Cookie都會被發送過去,這樣無形中浪費了帶寬,另外cookie還需要指定作用域,不可以跨域呼叫),IE8以后,就出現一個web storage;它僅僅是為了本地快取資料而存在;但是Cookie也是不可以或缺的:Cookie的作用是與服務器進行互動,作為HTTP規范的一部分而存在,

5.封裝一個獲取cookie的函式,

function getCookie(key) {
  var json = {};
  var cookies = document.cookie.split("; ");//["userName=web0311", "passWord=123"]
  for(var i = 0;i<cookies.length;i++){
    var arr = cookies[i].split("=");
    json[arr[0]] = arr[1];
  }
  return json[key];
}

1.new運算子具體干了什么呢?

1.先創建了一個新的空物件

2.然后讓這個空物件的__proto__指向函式的原型prototype
	3.將物件作為函式的this傳進去,如果return 出來東西是物件的話就直接回傳 return 的內容,沒有的話就回傳創建的這個物件

2.call()和apply()的區別和作用?

都是用來改變this的指向,在傳值的程序中會有些區別

call(this的指向,引數1,引數2...)

apply(this的指向,[引數1,引數2..]

3.JavaScript物件的幾種創建方式?

1.字面量創建

var obj = {
  name:"web",
  eat:function(){}
}
缺點:代碼冗余,適合單個物件創建

2.實體創建

var obj = new Object();
obj.name = "web";
obj.eat = function(){}
缺點:代碼冗余,適合單個物件創建

3.工廠模式創建

function createObj(name){
  var obj = new Object();
  obj.name = name;
  obj.eat = function(){}
  return obj
}
createObj(“web”);
缺點:識別不明確

4.建構式創建

function Student(name){
  //new Object
  this.name = name;
  this.eat = function(){}
}
new Student(name)
缺點:浪費記憶體

5.原型創建

原型物件:prototype ,建構式中,共享的一塊區域
原型屬性:__proto__,實體物件中,指向原型物件
function Student(){}
Student.prototype.name = "web";
Student.prototype.eat = function(){}

new Student();
缺點:不能傳參

6.混合創建,建構式(可變的)+原型(共享,不變的)

function Student(name){
  this.name = name;
}
Student.prototype.eat = function(){

}

4.JavaScript物件的幾種繼承方式?

//3.原型鏈繼承
function Student(name,age){
  this.name = name;
  this.age = age;
}
Student.prototype.study = function () {

  console.log("Fd");
}

function SmallStudent(name,age){
  //物件冒充繼承
  Student.call(this,name,age);
}
//原型鏈繼承:
SmallStudent.prototype = new Student("web",18);

5.JavaScript原型,原型鏈 ?

js每宣告一個function,都有prototype原型,prototype原型是函式的一個默認屬性,在函式的創建程序中由js編譯器自動添加,

也就是說:當生產一個function物件的時候,就有一個原型prototype,原型中存盤物件共享的屬性和方法,

在這里插入圖片描述

原型鏈:

當你定義一個函式物件的時候,其內部就有這樣一個鏈表關系,宣告foo物件,自帶了_proto_的屬性,而這個屬性指向了prototype,從而實作物件的擴展(例如繼承等操作)

在這里插入圖片描述

6.小賢有一條可愛的狗(Dog),它的叫聲很好聽(wow),每次看到主人的時候就會乖乖叫一聲(yelp),從這段描述可以得到以下物件: function Dog(){

this.wow = function(){

alert(‘wow’);

}

this.yelp = function(){

this.wow();

}

}

小芒和小賢一樣原來也有一條可愛的狗,可是突然有一點瘋了(MadDog),一看到人就會每隔半秒叫一聲(wow)地不停叫喚(yelp),請根據描述,按示例形式用代碼來實作,(繼承,原型,setInterval)

function Dog(){
  this.wow = function(){
    alert('wow');
  }
  this.yelp = function(){
    this.wow();
  }
}
function MadDog(){
  Dog.call(this);
  var _this = this;
  this.yelp = function(){
    setInterval(function () {
      _this.wow();
    },500);
  }
}

 

或者

function MadDog(){
  Dog.call(this);
  this.yelp = function(){
    setInterval(this.wow,500);
  }
}

 

1.什么是閉包,閉包有什么作用,說說你對閉包的理解,

閉包:就是能夠讀取其他函式內部變數的函式(函式里面套函式,內部函式訪問外部函式變數),
在本質上,閉包是將函式內部和函式外部連接起來的橋梁,
作用:閉包中使用的變數會一直存盤在記憶體中,類似全域變數 ,避免全域污染,可以解決全域變數的問題,

function fun(){
  var c = 10;
  return function(){
    console.log(c++);
  }
}
var f = fun(); //f = function(){ console.log(c++); }
f();//10
f();//11

 

2.用閉包方式完成下面代碼的修改,使得屬性user,id外界不可見

User = function(){}

User.prototype = {

id:””,

name:””,

getId:function(){return this.id},

setId:function(){this.id = id},

getName:function(){return this.name},

setName:function(){this.name=name}

}

 //直接宣告兩個變數,這兩個變數的作用域只是在這個函式體之中所以外界是不能訪問的  

var User = function () {
  var id = "id";
  var name = "name";
  this.__proto__ = {
    getId:function () {
      return id;
    },
    setId:function (_id) {
      id = _id;
    },
    getName:function () {
      return name;
    },
    setName:function (_name) {
      name = _name;
    }
  }
}

var u = new User();
u.setId("007");
u.setName("tom");
console.log(u.name,u.getName()); //undefined,tom

 

3.創建ajax的程序,

function ajax(json) {
  json.data = json.data||""; //如果沒有請求引數,為空
  json.contentType = json.contentType || "application/x-www-form-urlencoded"; //如果沒有字符編碼,用默認的
  //1.創建物件
  if(window.XMLHttpRequest){ //正常
    var ajax = new XMLHttpRequest();
  }else { //兼容ie6
    var ajax = new ActiveXObject("Microsoft.XMLHTTP");
  }

  //2.建立連接
  if(json.type.toUpperCase() =="get".toUpperCase()){
    ajax.open("GET",json.url+"?"+json.data,true);
    //3.發送請求
    ajax.send();
  }else {
    ajax.open("POST",json.url,true);
    //3.設定請求頭   ajax.setRequestHeader("Content-type",json.contentType+";charset=utf-8");
    //4.發送請求
    ajax.send(json.data);
  }

  //4.監聽結果
  ajax.onreadystatechange = function () {
    if(ajax.readyState == 4){
      if(ajax.status == 200){
        json.success(ajax.response);
      }
    }
  }
}

 

4.ajax請求的時候get 和post方式的區別,什么時候用post,

1GET請求會將引數跟在URL后進行傳遞,而POST請求則是作為HTTP訊息的物體內容發送給WEB服務器,當然在Ajax請求中,這種區別對用戶是不可見的

2、GEt傳輸資料容量小,不安全,post傳輸資料內容大,更加安全;

當向服務器發送一些資料的時候選擇post比較安全

5.ajax請求時,如何解釋json資料,

如果是字串形式的json:eval("("+ajax.response+")")

如果是本地的json檔案:JSON.parse(data)

6.同步和異步的區別?

異步:客戶端與服務器請求資料的程序中,可以做其他的事情
同步:客戶端與服務器請求資料的程序中,不能做其他的事情

7.常見的http狀態碼?

不需要知道全部,常見的就可以,比如200 404 503

200狀態碼:表示請求已成功,請求所希望的回應頭或資料體將隨此回應回傳
201狀態碼:表示請求成功并且服務器創建了新的資源,且其 URI 已經隨Location 頭資訊回傳,假如需要的資源無法及時建立的話,應當回傳 ‘202 Accepted’

202狀態碼:服務器已接受請求,但尚未處理

301狀態碼:被請求的資源已永久移動到新位置,服務器回傳此回應(對 GET 或 HEAD 請求的回應)時,會自動將請求者轉到新位置,

302狀態碼:請求的資源臨時從不同的URI回應請求,但請求者應繼續使用原有位置來進行以后的請求

304自從上次請求后,請求的網頁未修改過,服務器回傳此回應時,不會回傳網頁內容, 如果網頁自請求者上次請求后再也沒有更改過,您應將服務器配置為回傳此回應(稱為 If-Modified-Since HTTP 標頭),

301狀態碼:被請求的資源已永久移動到新位置,服務器回傳此回應(對 GET 或 HEAD 請求的回應)時,會自動將請求者轉到新位置,

302狀態碼:請求的資源臨時從不同的URI回應請求,但請求者應繼續使用原有位置來進行以后的請求

304自從上次請求后,請求的網頁未修改過,服務器回傳此回應時,不會回傳網頁內容, 如果網頁自請求者上次請求后再也沒有更改過,您應將服務器配置為回傳此回應(稱為 If-Modified-Since HTTP 標頭),

401狀態碼:請求要求身份驗證, 對于需要登錄的網頁,服務器可能回傳此回應,
403狀態碼:服務器已經理解請求,但是拒絕執行它,與401回應不同的是,身份驗證并不能提供任何幫助,而且這個請求也不應該被重復提交,

404狀態碼:請求失敗,請求所希望得到的資源未被在服務器上發現,沒有資訊能夠告訴用戶這個狀況到底是暫時的還是永久的,假如服務器知道情況的話,應當使用410狀態碼來告知舊資源因為某些內部的配置機制問題,已經永久的不可用,而且沒有任何可以跳轉的地址,404這個狀態碼被廣泛應用于當服務器不想揭示到底為何請求被拒絕或者沒有其他適合的回應可用的情況下,
500狀態碼:服務器遇到了一個未曾預料的狀況,導致了它無法完成對請求的處理,一般來說,這個問題都會在服務器的程式碼出錯時出現,
503狀態碼:由于臨時的服務器維護或者過載,服務器當前無法處理請求,通常,這個是暫時狀態,一段時間會恢復

8.eval的作用是?

eval:計算某個字串,并且執行其中的JavaScript代碼

console.log(eval("2+3")); //5

console.log(res); //'["img/1.jpg","img/2.jpg","img/3.jpg","img/4.jpg"]'
console.log(eval(res)); //(4) ["img/1.jpg", "img/2.jpg", "img/3.jpg", "img/4.jpg"]

1.js哪些操作會造成記憶體泄露?

1)意外的全域變數引起的記憶體泄露

function leak(){

leak=“xxx”;//leak成為一個全域變數,不會被回收

}

2)被遺忘的定時器或者回呼

3)閉包引起的記憶體泄漏

1.$(document).ready() 方法和window.onload 有什么區別?

window.onload與ready的區別
1.window.onload會覆寫之前的
ready的區別,不會覆寫,會疊加
2.window.onload等檔案和資源都加載完成以后呼叫
ready只要檔案加載完成以后就會呼叫

2.jQuery 的屬性拷貝(extend)的實作原理是什么,如何實作深拷貝?

在默認情況下,通過$.extend()合并操作不是遞回的(淺拷貝);如果第一個物件的屬性本身是一個物件或陣列,那么它將完全用第二個物件相同的key重寫一個屬性,這些值不會被合并,然而,如果將 true 作為該函式的第一個引數,那么會在物件上進行遞回的合并(深拷貝),

淺拷貝(false 默認):如果第二個引數物件有的屬性第一個引數物件也有,那么不會進行相同引數內部的比較,直接將第一個物件的相同引數覆寫,

深拷貝(true):如果第二個引數物件有的屬性第一個引數物件也有,還要繼續在這個相同的引數向下一層找,比較相同引數的物件中是否還有不一樣的屬性,如果有,將其繼承到第一個物件,如果沒有,則覆寫,

1. ( ) . a t t r 與 ().attr與 ().attr().prop()的區別?

對于HTML元素本身就帶有的固有屬性,在處理時,使用prop方法,

對于HTML元素我們自己自定義的DOM屬性,在處理時,使用attr方法,

$("#chk1").prop("checked") == false
$("#chk2").prop("checked") == true
如果上面使用attr方法,則會出現:
$("#chk1").attr("checked") == undefined

1.怎么解決跨域問題?

通過jsonp解決跨域,即通過script標簽的src屬性引入一個js檔案,通過回呼函式將資料回傳

$(“head”).append(<script src=’url&callback=showData’><\/script>)

function showData(data){

console.log(data);

}

在jQuery的$.ajax()方法中,只需配置一個dataType:'jsonp',就可以發起一個跨域請求

2.ajax如何實作異步定時5秒重繪?

setInterval(function(){
  host = window.location.host
  $.post("http://"+host+"/index.php/Article/cpMes/value/1");
},5000);

3.頁面編碼和被請求的資源編碼如果不一致如何處理?

比如:http://www.yyy.com/a.html 中嵌入了一個http://www.xxx.com/test.js

a.html 的編碼是gbk或gb2312的, 而引入的js編碼為utf-8的 ,那就需要在引入的時候

<script src="http://www.xxx.com/test.js" charset="utf-8"></script>同理,如果你的頁面是utf-8的,引入的js是gbk的,那么就需要加上charset="gbk".

4.Ajax的缺點?

1、ajax不支持瀏覽器back按鈕,

2、安全問題 AJAX暴露了與服務器互動的細節,

3、對搜索引擎的支持比較弱,

4、破壞了程式的例外機制,

5.jquery中 . g e t ( ) 提 交 和 .get()提交和 .get().post()提交有區別嗎?

get一般用來進行查詢操作,url地址有長度限制,請求的引數都暴露在url地址當中,如果傳遞中文引數,需要自己進行編碼操作,安全性較低,

post請求方式主要用來提交資料,沒有資料長度的限制,提交的資料內容存在于http請求體中,資料不會暴漏在url地址中,

6、jquery.extend 與 jquery.fn.extend的區別?

\1. jquery.extend(object); 為擴展jQuery類本身.為類添加新的方法,
2.jquery.fn.extend(object);給jQuery物件添加方法,
$.extend({
  add:function(a,b){return a+b;}
});
//$.add(3,4);
jQuery添加一個為 add的“靜態方法”,之后便可以在引入 jQuery 的地方,使用這個方法了.

.Query.fn.extend(object); 對jQuery.prototype進得擴展,就是為jQuery類添加“成員函式”,jQuery類的實體可以使用這個“成員函式”,
$.fn.extend({
  alertClick:function(){
    $(this).click(function(){
      alert($(this).val());
    });
  }
});

//頁面上為:
<input id="input1" type="text"/>

 //使用
$("#input1").alertClick();

00);




### 3.頁面編碼和被請求的資源編碼如果不一致如何處理?

比如:http://www.yyy.com/a.html 中嵌入了一個http://www.xxx.com/test.js

a.html 的編碼是gbk或gb2312的, 而引入的js編碼為utf-8的 ,那就需要在引入的時候

`<script src="http://www.xxx.com/test.js" charset="utf-8"></script>同理,如果你的頁面是utf-8的,引入的js是gbk的,那么就需要加上charset="gbk".`

### 4.Ajax的缺點?

1、ajax不支持瀏覽器back按鈕,

 2、安全問題 AJAX暴露了與服務器互動的細節,

 3、對搜索引擎的支持比較弱,

 4、破壞了程式的例外機制,

 

### 5.jquery中$.get()提交和$.post()提交有區別嗎?

get一般用來進行查詢操作,url地址有長度限制,請求的引數都暴露在url地址當中,如果傳遞中文引數,需要自己進行編碼操作,安全性較低,

post請求方式主要用來提交資料,沒有資料長度的限制,提交的資料內容存在于http請求體中,資料不會暴漏在url地址中,

 

### 6、jquery.extend 與 jquery.fn.extend的區別?

```js
\1. jquery.extend(object); 為擴展jQuery類本身.為類添加新的方法,
2.jquery.fn.extend(object);給jQuery物件添加方法,
$.extend({
  add:function(a,b){return a+b;}
});
//$.add(3,4);
jQuery添加一個為 add的“靜態方法”,之后便可以在引入 jQuery 的地方,使用這個方法了.

.Query.fn.extend(object); 對jQuery.prototype進得擴展,就是為jQuery類添加“成員函式”,jQuery類的實體可以使用這個“成員函式”,
$.fn.extend({
  alertClick:function(){
    $(this).click(function(){
      alert($(this).val());
    });
  }
});

//頁面上為:
<input id="input1" type="text"/>

 //使用
$("#input1").alertClick();

轉載請註明出處,本文鏈接:https://www.uj5u.com/qianduan/277347.html

標籤:其他

上一篇:瀑布流簡介與JS簡易實作

下一篇:通過JS來實作簡單控制視頻播放倍速

標籤雲
其他(157675) Python(38076) JavaScript(25376) Java(17977) C(15215) 區塊鏈(8255) C#(7972) AI(7469) 爪哇(7425) MySQL(7132) html(6777) 基礎類(6313) sql(6102) 熊猫(6058) PHP(5869) 数组(5741) R(5409) Linux(5327) 反应(5209) 腳本語言(PerlPython)(5129) 非技術區(4971) Android(4554) 数据框(4311) css(4259) 节点.js(4032) C語言(3288) json(3245) 列表(3129) 扑(3119) C++語言(3117) 安卓(2998) 打字稿(2995) VBA(2789) Java相關(2746) 疑難問題(2699) 细绳(2522) 單片機工控(2479) iOS(2429) ASP.NET(2402) MongoDB(2323) 麻木的(2285) 正则表达式(2254) 字典(2211) 循环(2198) 迅速(2185) 擅长(2169) 镖(2155) 功能(1967) .NET技术(1958) Web開發(1951) python-3.x(1918) HtmlCss(1915) 弹簧靴(1913) C++(1909) xml(1889) PostgreSQL(1872) .NETCore(1853) 谷歌表格(1846) Unity3D(1843) for循环(1842)

熱門瀏覽
  • vue移動端上拉加載

    可能做得過于簡單或者比較low,請各位大佬留情,一起探討技術 ......

    uj5u.com 2020-09-10 04:38:07 more
  • 優美網站首頁,頂部多層導航

    一個個人用的瀏覽器首頁,可以把一下常用的網站放在這里,平常打開會比較方便。 第一步,HTML代碼 <script src=https://www.cnblogs.com/szharf/p/"js/jquery-3.4.1.min.js"></script> <div id="navigate"> <ul> <li class="labels labels_1"> ......

    uj5u.com 2020-09-10 04:38:47 more
  • 頁面為要加<!DOCTYPE html>

    最近因為寫一個js函式,需要用到$(window).height(); 由于手寫demo的時候,過于自信,其實對前端方面的認識也不夠體系,用文本檔案直接敲出來的html代碼,第一行沒有加上<!DOCTYPE html> 導致了$(window).height();的結果直接是整個document的高 ......

    uj5u.com 2020-09-10 04:38:52 more
  • WordPress網站程式手動升級要做好資料備份

    WordPress博客網站程式在進行升級前,必須要做好網站資料的備份,這個問題良家佐言是遇見過的;在剛開始接觸WordPress博客程式的時候,因為升級問題和博客網站的修改的一些嘗試,良家佐言是吃盡了苦頭。因為購買的是西部數碼的空間和域名,每當佐言把自己的WordPress博客網站搞到一塌糊涂的時候 ......

    uj5u.com 2020-09-10 04:39:30 more
  • WordPress程式不能升級為5.4.2版本的原因

    WordPress是一款個人博客系統,受到英文博客愛好者和中文博客愛好者的追捧,并逐步演化成一款內容管理系統軟體;它是使用PHP語言和MySQL資料庫開發的,用戶可以在支持PHP和MySQL資料庫的服務器上使用自己的博客。每一次WordPress程式的更新,就會牽動無數WordPress愛好者的心, ......

    uj5u.com 2020-09-10 04:39:49 more
  • 使用CSS3的偽元素進行首字母下沉和首行改變樣式

    網頁中常見的一種效果,首字改變樣式或者首行改變樣式,效果如下圖。 代碼: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, ......

    uj5u.com 2020-09-10 04:40:09 more
  • 關于a標簽的講解

    什么是a標簽? <a> 標簽定義超鏈接,用于從一個頁面鏈接到另一個頁面。 <a> 元素最重要的屬性是 href 屬性,它指定鏈接的目標。 a標簽的語法格式:<a href=https://www.cnblogs.com/summerxbc/p/"指定要跳轉的目標界面的鏈接">需要展示給用戶看見的內容</a> a標簽 在所有瀏覽器中,鏈接的默認外觀如下: 未被訪問的鏈接帶 ......

    uj5u.com 2020-09-10 04:40:11 more
  • 前端輪播圖

    在需要輪播的頁面是引入swiper.min.js和swiper.min.css swiper.min.js地址: 鏈接:https://pan.baidu.com/s/15Uh516YHa4CV3X-RyjEIWw 提取碼:4aks swiper.min.css地址 鏈接:https://pan.b ......

    uj5u.com 2020-09-10 04:40:13 more
  • 如何設定html中的背景圖片(全屏顯示,且不拉伸)

    1 <style>2 body{background-image:url(https://uploadbeta.com/api/pictures/random/?key=BingEverydayWallpaperPicture); 3 background-size:cover;background ......

    uj5u.com 2020-09-10 04:40:16 more
  • Java學習——HTML詳解(上)

    HTML詳解 初識HTML Hyper Text Markup Language(超文本標記語言) 1 <!--DOCTYPE:告訴瀏覽器我們要使用什么規范--> 2 <!DOCTYPE html> 3 <html lang="en"> 4 <head> 5 <!--meta 描述性的標簽,描述一些 ......

    uj5u.com 2020-09-10 04:40:33 more
最新发布
  • 我的第一個NPM包:panghu-planebattle-esm(胖虎飛機大戰)使用說明

    好家伙,我的包終于開發完啦 歡迎使用胖虎的飛機大戰包!! 為你的主頁添加色彩 這是一個有趣的網頁小游戲包,使用canvas和js開發 使用ES6模塊化開發 效果圖如下: (覺得圖片太sb的可以自己改) 代碼已開源!! Git: https://gitee.com/tang-and-han-dynas ......

    uj5u.com 2023-04-20 07:59:23 more
  • 生產事故-走近科學之消失的JWT

    入職多年,面對生產環境,盡管都是小心翼翼,慎之又慎,還是難免捅出簍子。輕則滿頭大汗,面紅耳赤。重則系統停擺,損失資金。每一個生產事故的背后,都是寶貴的經驗和教訓,都是專案成員的血淚史。為了更好地防范和遏制今后的各類事故,特開此專題,長期更新和記錄大大小小的各類事故。有些是親身經歷,有些是經人耳傳口授 ......

    uj5u.com 2023-04-18 07:55:04 more
  • 記錄--Canvas實作打飛字游戲

    這里給大家分享我在網上總結出來的一些知識,希望對大家有所幫助 打開游戲界面,看到一個畫面簡潔、卻又富有挑戰性的游戲。螢屏上,有一個白色的矩形框,里面不斷下落著各種單詞,而我需要迅速地輸入這些單詞。如果我輸入的單詞與螢屏上的單詞匹配,那么我就可以獲得得分;如果我輸入的單詞錯誤或者時間過長,那么我就會輸 ......

    uj5u.com 2023-04-04 08:35:30 more
  • 了解 HTTP 看這一篇就夠

    在學習網路之前,了解它的歷史能夠幫助我們明白為何它會發展為如今這個樣子,引發探究網路的興趣。下面的這張圖片就展示了“互聯網”誕生至今的發展歷程。 ......

    uj5u.com 2023-03-16 11:00:15 more
  • 藍牙-低功耗中心設備

    //11.開啟藍牙配接器 openBluetoothAdapter //21.開始搜索藍牙設備 startBluetoothDevicesDiscovery //31.開啟監聽搜索藍牙設備 onBluetoothDeviceFound //30.停止監聽搜索藍牙設備 offBluetoothDevi ......

    uj5u.com 2023-03-15 09:06:45 more
  • canvas畫板(滑鼠和觸摸)

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>canves</title> <style> #canvas { cursor:url(../images/pen.png),crosshair; } #canvasdiv{ bo ......

    uj5u.com 2023-02-15 08:56:31 more
  • 手機端H5 實作自定義拍照界面

    手機端 H5 實作自定義拍照界面也可以使用 MediaDevices API 和 <video> 標簽來實作,和在桌面端做法基本一致。 首先,使用 MediaDevices.getUserMedia() 方法獲取攝像頭媒體流,并將其傳遞給 <video> 標簽進行渲染。 接著,使用 HTML 的 < ......

    uj5u.com 2023-01-12 07:58:22 more
  • 記錄--短視頻滑動播放在 H5 下的實作

    這里給大家分享我在網上總結出來的一些知識,希望對大家有所幫助 短視頻已經無數不在了,但是主體還是使用 app 來承載的。本文講述 H5 如何實作 app 的視頻滑動體驗。 無聲勝有聲,一圖頂百辯,且看下圖: 網址鏈接(需在微信或者手Q中瀏覽) 從上圖可以看到,我們主要實作的功能也是本文要講解的有: ......

    uj5u.com 2023-01-04 07:29:05 more
  • 一文讀懂 HTTP/1 HTTP/2 HTTP/3

    從 1989 年萬維網(www)誕生,HTTP(HyperText Transfer Protocol)經歷了眾多版本迭代,WebSocket 也在期間萌芽。1991 年 HTTP0.9 被發明。1996 年出現了 HTTP1.0。2015 年 HTTP2 正式發布。2020 年 HTTP3 或能正... ......

    uj5u.com 2022-12-24 06:56:02 more
  • 【HTML基礎篇002】HTML之form表單超詳解

    ??一、form表單是什么

    ??二、form表單的屬性

    ??三、input中的各種Type屬性值

    ??四、標簽 ......

    uj5u.com 2022-12-18 07:17:06 more