1、本質上的區別
1.JavaScript 是經過<script></script>標籤插入到HTML頁面，可由全部的現代瀏覽器執行的一種輕量級的編程語言。javascript能作到的，jQuery不必定能作到.jQuery能作到的，javascript必定能作到。
2.JQuery是一個JavaScript輕量級函數庫。
語法上的差別
1.操做元素節點
a.JavaScript使用javascript
getElement系列css
JQuery使用html
大量的選擇器同時使用$()包裹選擇器前端
操做屬性節點
a.JavaScript使用 html5
getAttribute("屬性名") 、 setAttribute("屬性名","屬性值")java
document.getElementById("first").getAttribute("id");
document.getElementById("first").setAttribute("name","nafirst");
JQuery使用node
.attr()傳入一個參數獲取，傳入兩個參數設置python
.prop()jquery
prop和attr同樣均可以對文本的屬性進行讀取和設置；web
二者的不一樣 在讀取checked，disabled，等屬性名=屬性值的屬性時
attr返回屬性值或者undefined，當讀取的checked屬性時不會根據是否選中而改變
prop返回true和false 當讀取的checked屬性時會根據是否選中而改變
也就是說attr要取到的屬性必須是在標籤上寫明的屬性，不然不能取到
$("#first").attr("id");
$("#first").attr("name","nafirst");
$("#first").removeAttr("name");
$("#first").prop("id");
$("#first").prop("name","nafirst");
$("#first").removeProp("name");
3.操做文本節點
a.JavaScript使用
innerHTML：取到或設置一個節點的HTML代碼,能夠取到css，以文本的形式返回
innerText：取到或設置一個節點的HTML代碼，不能取到css
value:取到input[type='text']輸入的文本
document.getElementById("serven_times").innerHTML;
document.getElementById("serven_times").innerHTML = "<span style='color: #ff3a29'>呵呵</span>";
document.getElementById("eight_times").innerText;
document.getElementById("eight_times").innerText = "啦啦";
JQuery使用
.html()取到或設置節點中的html代碼
.text()取到或設置節點中的文本
.val()取到或設置input的value屬性值
$("#serven_times").html();
$("#serven_times").html("<span style='color: #ff3a29'>呵呵</span>");
$("#eight_times").text();
$("#eight_times").text("啦啦");
$("#input").val();
$("#input").val("哈哈");
4.操做css樣式的時候
JavaScript:
* 1.使用setAttribute設置class和style
* document.getElementById("first").setAttribute("style","color:red");
* 2.使用.className添加一個class選擇器
* document.getElementById("third").className = "san";
* 3.使用.style.樣式直接修改單個樣式。注意樣式名必須使用駝峯命名法
* document.getElementById("four_times").style.fontWeight = "900";
* 4.使用.style或.style.cssText添加一串行級樣式：
* document.getElementById("five_times").style = "color: blue;";//IE不兼容
* document.getElementById("six_times").style.cssText = "color: yellow;font-size : 60px;";
JQuery:
$("#div2").css("color","yellow");
$("#div2").css({
"color" : "white",
"font-weight" : "bold",
"font-size" : "50px",
});
5.操做層次節點
JavaScript:
*1.childNodes：獲取當前節點的全部子節點（包括元素節點和文本節點）
* children：獲取當前節點的全部元素子節點（不包括文本節點）
*2.parentNode:獲取當前節點的父節點
*3.firstChild:獲取第一個元素節點，包括回車等文本節點
* firstElementChild:獲取第一個元素節點，不包括回車節點
* lastChild、lastElementChild 同理
*4.previousSibling：獲取當前元素的前一個兄弟節點
* previousElementSibling：：獲取當前元素的前一個兄弟節點
* nextSibling、nextElementSibling
JQuery:
1.提供了大量的選擇器：
2.除此以外也提供了對應的函數：
first() last() children() parents() parent() siblings()
給一個節點綁定事件
JavaScript:
使用了Dom0事件模型和Dom2事件模型，具體內容見我上一篇博客
JQuery：
①.事件綁定的快捷方式
<body>
<button>按鈕</button>
</body>
<script src="js/jquery-1.10.2.js"></script>
<script>
$("button:eq(0)").click(function () {
alert(123);
});
</script>
使用on進行事件綁定
<body>
<button>按鈕</button>
</body>
<script src="js/jquery-1.10.2.js"></script>
<script>
//①使用on進行單事件的綁定
$("button:eq(0)").on("click",function () {
alert(456);
});
//②使用on同時給同一對象綁定多個事件
$("button:eq(0)").on("click dblclick mouseover",function () {
console.log(123);
});
//③使用on，給一個對象綁定多個事件
$("button:eq(0)").on({
"click":function () {
console.log("click");
},
"mouseover":function () {
console.log("mouseover");
},
"mouseover":function () {
console.log("mouseover2");
}
});
//④使用on給回調函數傳參，要求是對象格式，傳遞的參數能夠在e.data中取到；jquery中的e只能經過參數傳進去，不能用window.event
$("button:eq(0)").on("click",{"name":"zhangsan","age":15},function (e) {
console.log(e);
console.log(e.data);
console.log(e.data.name);
console.log(e.data.age);
console.log(window.event);//js中的事件因子
});
</script>
7.JQuery的文檔就緒函數和window.onload的區別
*①.window.onload必須等待網頁資源（包括圖片等）所有加載完成後，才能執行；
* 而文檔就緒函數只須要等到網頁DOM結構加載完成後，便可執行
*②.window.onload在一個頁面中，只能寫一次，寫屢次會被最後一次覆蓋
* 而文檔就緒函數在一個頁面中能夠有N個
3、JavaScript對象和JQuery對象的方法不能混用。
1.JavaScript對象和JQuery對象
① 使用$("")取到的節點爲JQuery對象，只能調用JQuery方法，不能調用JavaScript方法；
* $("#div").click(function(){})√
* $("#div").onclick = function(){}× 使用JQuery對象調用JavaScript方法
*
* 同理，使用、document.getElement系列函數取到的對象爲JavaScript對象，也不能調用JQery函數
2.JavaScript對象和JQuery對象互轉
*① JQuery ---> JavaScript :使用get(index)或者[index]選中的就是JavaScript對象
* $("div").get(0).onclick = function(){}
* $("div").[0].onclick = function(){}
* ② JavaScript ---> JQuery :使用$()包裹JavaScript對象 (咱們發現JQuery無論得到幾個對象都是一個數組，能夠直接給整個數組都添加某一事件)
* var div = document.getElementById("div");
* $(div).click(function(){});
交集選擇器：由兩個選擇器鏈接構成，選擇兩者範圍的交集，兩個選擇器之間不能有空格，第一個必須是標籤選擇器，第二個必須是類選擇器或者ID選擇器。
標準文檔流的微觀現象：一、空白摺疊現象，二、高矮不齊底邊對齊，三、一行寫不完，自動換行寫
浮動元素四大特性：一、浮動元素，脫標，二、浮動元素互相貼靠。3浮動元素，「字圍」效果。
浮動元素不會擋住沒有浮動元素中的文字, 沒有浮動的文字會自動給浮動的元素讓位置,這個就是浮動元素字圍現象
四、收縮的效果，沒有設置寬度就收縮成文字的寬度。
清除浮動的四種方法：一、給父盒子設置高度。二、clear:both
三、僞元素清除法
css 僞元素即插入的虛僞元素 像:before :after 插入元素
css 僞類 就是 操做class 樣式
利用僞元素清除浮動
ps 利用僞 元素插入的dom 在dom結構中是看不到的 不過能夠在css 中看到
.clearfix::after {
content: ".";
clear: both;
display: block;
overflow: hidden;
font-size: 0;
height: 0;
}
.clearfix {
zoom: 1;
}
---------------------
四、overflow:hidden
固然，咱們之前用的最多的仍是使用overflow:hidden來隱藏子元素相對於父元素的超界溢出
所以咱們能夠嘗試這樣總結：當父元素的高度是靠子元素撐開的時候，子元素浮動時，則在父元素使用overflow: hidden能夠清除浮動，使得父元素的高度依舊是靠子元素撐開。
當父元素自身設置了height屬性值，則在父元素使用overflow: hidden可使子元素超出父元素的那部分隱藏。
visibility屬性用來肯定元素是顯示仍是隱藏的，這用visibility="visible|hidden"來表示（visible表示顯示，hidden表示隱藏）。
當visibility被設置爲"hidden"的時候，元素雖然被隱藏了，但它仍然佔據它原來所在的位置
最後是display被設置：none，這時元素實際上就從頁面中被移走，它下面所在的元素就會被自動跟上填。（此時應用display: none;的元素至關於消失，而visibility: hidden;則只表示隱藏，位置還在。）
opacity設置0-1之間的小數。0爲透明，佔位。與visibility同樣只是隱藏。
脫離文檔標準流三種方式?有什麼區別，並演示
一、浮動；2；絕對定位；三、固定定位
清除浮動其實主要解決的就是高度塌陷問題，具體在此再也不贅述~~~那些年咱們一塊兒清除過的浮動（大佬博客，寫的挺不錯）
方法小結：1.
1）添加額外標籤
這是在學校老師就告訴咱們的 一種方法，經過在浮動元素末尾添加一個空的標籤例如 <div style=」clear:both」></div>，其餘標籤br等亦可。
2)父元素設置 overflow：hidden
經過設置父元素overflow值設置爲hidden；在IE6中還須要觸發 hasLayout ，例如 zoom：1；
|
1
2
3
4
5
6
|
<
div
class="wrap" id="float3" style="overflow:hidden; *zoom:1;">
<
h2
>3)父元素設置 overflow </
h2
>
<
div
class="main left">.main{float:left;}</
div
>
<
div
class="side left">.side{float:right;}</
div
>
</
div
>
<
div
class="footer">.footer</
div
>
|
優勢：不存在結構和語義化問題，代碼量極少
缺點：內容增多時候容易形成不會自動換行致使內容被隱藏掉，沒法顯示須要溢出的元素；04年POPO就發現overflow:hidden會致使中鍵失效，這是我做爲一個多標籤瀏覽控所不能接受的。因此仍是不要使用.
3）父元素也設置浮動
優勢：不存在結構和語義化問題，代碼量極少
缺點：使得與父元素相鄰的元素的佈局會受到影響，不可能一直浮動到body，不推薦使用
4）使用:after 僞元素
須要注意的是 :after是僞元素（Pseudo-Element），不是僞類（某些CSS手冊裏面稱之爲「僞對象」）.
因爲IE6-7不支持:after，使用 zoom:1觸發 hasLayout。
固定定位：脫標，不佔位置，以瀏覽器爲參考點，固定位置，滑動滾動條不動
總結:固定定位於絕對定位最根本的區別仍是偏移基準的不一樣固定定位是相對於瀏覽器而絕對定位的基準則是父級元素，固定定位滑動滾動條不動。並且最好還要注意ie6不兼容固定定位而兼容絕對定位。
- 查詢一下對div和span標籤的理解
div盒子標籤，能夠把文檔分割爲獨立的、不一樣的部分，因此div是塊級元素。另外，每塊區域表示獨立的一塊。
span 標籤是行內元素，span標籤能夠單獨摘出某塊內容，結合css設置相應的樣式
- 如何理解標籤的嵌套結構？它們的規則是怎樣的？
-
塊元素能夠包含內聯元素或某些塊元素，但內聯元素卻不能包含塊元素，它只能包含其它的內聯元素，例如：
<div><div></div><h1></h1><p><p></div> ✔️
<a href=」#」><span></span></a> ✔️
<span><div></div></span> ❌
塊級元素不能放在p標籤裏面，好比
<p><ol><li></li></ol></p> ❌
<p><div></div></p> ❌
有幾個特殊的塊級元素只能包含內嵌元素，不能再包含塊級元素，這幾個特殊的標籤是：
h一、h二、h三、h四、h五、h六、p
li元素能夠嵌入ul，ol，div等標籤
- 若是給你一個網站，讓你只用div來畫塊的畫，如何畫？好比京東
-
把京東劃分紅N個模塊，用div去設置相同的大小，例如，頭部-container-導航 ,註冊 logo
主體-container-內容1，內容2 底部-container-地址欄，其它信息等
- 一個html文件包含幾部分？
-
<html></html> 稱爲根標籤，全部的網頁標籤都在<html></html>中。
<head></head> 標籤用於定義文檔的頭部，它是全部頭部元素的容器。常見的頭部元素有<title>、<script>、<style>、<link>和<meta>等標籤，頭部標籤在下一節中會有詳細介紹。
在<body>和</body>標籤之間的內容是網頁的主要內容，如<h1>、<p>、<a>、<img>等網頁內容標籤，在<body>標籤中的內容（圖中淡綠色部份內容）最終會在瀏覽器中顯示出來。
- 當使用p標籤的使用，應該注意什麼？
- p標籤是一個特殊的塊元素,只能包含內嵌元素，不能包含塊元素。
- 闡述一下form標籤的做用？form標籤的屬性有哪些？
-
通俗的講 form標籤是用來進行 顯示 和表單提交給服務器用的
表單標籤 form
表單是一個包含表單元素的區域
表單元素是容許用戶在表單中輸入內容，好比：文本域(textarea)、輸入框(input)、單選框（）
form標籤裏面的常見屬性以下
action: 表單提交的地址, 確定是要提交給某個服務器的,action的地址就是要提交的服務器的地址
method:以何種方式提交,常見的爲get和post. 區別在於一個是明文(在url中顯示),一個是暗文
form標籤是和服務器交互用的, 以用戶註冊爲例
用戶在瀏覽器中的註冊頁面添加信息後,點擊提交,此時是將這些信息提交至某個服務器
服務器根據提交的信息將註冊信息保存. 這個過程就須要使用form標籤了
form中action屬性應該是服務器註冊模塊的地址
form標籤下應該有input,textarea,select等表單標籤以及<input type=" submit"標籤
當點擊submit按鈕時,瀏覽器會自動將表單信息封裝提交至action中的地址
所謂的提交就是訪問action中地址並攜帶着form表單中input,textarea,select的信息
form 表單中get和post的
-
表單提交中get和post方式的區別有5點
1.get是從服務器上獲取數據，post是向服務器傳送數據。
2.get是把參數數據隊列加到提交表單的ACTION屬性所指的URL中，值和表單內各個字段一一對應，在URL中能夠看到。post是經過HTTPpost機制，將表單內各個字段與其內容放置在HTML HEADER內一塊兒傳送到ACTION屬性所指的URL地址。用戶看不到這個過程。
3.對於get方式，服務器端用Request.QueryString獲取變量的值，對於post方式，服務器端用Request.Form獲取提交的數據。
4.get傳送的數據量較小，不能大於2KB。post傳送的數據量較大，通常被默認爲不受限制。但理論上，IIS4中最大量爲80KB，IIS5中爲100KB。
5.get安全性很是低，post安全性較高。
HTTP請求：get與post方法的區別
HTTP 定義了與服務器交互的不一樣方法，最基本的方法是 get 和 post。事實上 get 適用於多數請求，而保留 post僅用於更新站點。根據 HTTP 規範，get 用於信息獲取，並且應該是安全的和冪等的。所謂安全的意味着該操做用於獲取信息而非修改信息。換句話說，get 請求通常不該產生反作用。冪等的意味着對同一 URL的多個請求應該返回一樣的結果。完整的定義並不像看起來那樣嚴格。從根本上講，其目標是當用戶打開一個連接時，她能夠確信從自身的角度來看沒有改變資源。好比，新聞站點的頭版不斷更新。雖然第二次請求會返回不一樣的一批新聞，該操做仍然被認爲是安全的和冪等的，由於它老是返回當前的新聞。反之亦然。post請求就不那麼輕鬆了。post 表示可能改變服務器上的資源的請求。仍然以新聞站點爲例，讀者對文章的註解應該經過 post請求實現，由於在註解提交以後站點已經不一樣了（比方說文章下面出現一條註解）；
在FORM提交的時候，若是不指定Method，則默認爲get請求，Form中提交的數據將會附加在url以後，以?分開與url分開。字母數字字符原樣發送，但空格轉換爲「+「號，其它符號轉換爲%XX,其中XX爲該符號以16進製表示的ASCII（或ISOLatin-1）值。get請求請提交的數據放置在HTTP請求協議頭中，而post提交的數據則放在實體數據中；
get方式提交的數據最多隻能有1024字節，而post則沒有此限制。
在表單裏使用」post」和」get」有什麼區別
在Form裏面，可使用post也可使用get。它們都是method的合法取值。可是，post和get方法在使用上至少有兩點不一樣：
一、get方法經過URL請求來傳遞用戶的輸入。post方法經過另外的形式。
二、get方式的提交你須要用Request.QueryString來取得變量的值，而post方式提交時，你必須經過Request.Form來訪問提交的內容。 |
- ul的孩子元素必定是li麼？
- 不必定，能夠放其它塊元素和，內嵌元素。
- 如何理解語義化的標籤？
-
1.通俗易懂
標籤語義化就是給某塊內容用上最恰當合適的標籤
2.對搜索引擎友好
網頁良好的結構和語義天然容易被搜索引擎捕捉
網頁比如一棟房子，HTML爲牆，標籤爲磚，CSS爲裝飾材料
- 標籤的分類
標籤分類
HTML中標籤元素三種不一樣類型：塊狀元素，行內元素，行內塊狀元素。
經常使用的塊狀元素：
<div> <p> <h1>~<h6> <ol> <ul> <table><form> <li>
經常使用的行內元素
<a> <span> <br> <i> <em> <strong> <label>
經常使用行內塊元素
<img> <input>
塊級元素特色：display:block;
一、每一個塊級元素都重新的一行開始，而且其後的元素也另起一行。獨佔一行
二、元素的高度、寬度、行高以及頂和底邊距均可設置。
三、元素寬度在不設置的狀況下，是它自己父容器的100%（和父元素的寬度一致），除非設定一個寬度。
行內元素特色：display:inline;
一、和其餘元素都在一行上；
二、元素的高度、寬度及頂部和底部邊距不可設置；
三、元素的寬度就是它包含的文字或圖片的寬度，不可改變。
行內塊狀元素的特色：display:inline-block;
一、和其餘元素都在一行上；
二、元素的高度、寬度、行高以及頂和底邊距均可設置
一、列舉你知道的css選擇器
說道css選擇器，你們都知道有許多種，可是真要你去掰着手指頭數一數的話，你可能須要數幾分鐘。其實這麼多選擇器，徹底能夠分爲兩類：
- 標籤選擇器（*是特殊狀況），可但標籤，也可上下文多標籤；
- 通用選擇器 * 你們應該都比較熟悉了，最經常使用的就是 *{margin:0; box-sizing:border-box;}。mragin:0我們在上一節已經說過
- 多標籤
-
多標籤選擇器通常和html上下文有關，它有如下集中分類
- 選擇一個祖先的全部子孫節點，例如 div p{…}
- 選擇一個父元素的全部子屬節點，例如 div > p{…}
- 選擇某一個元素緊挨着的兄弟節點，例如 li + li{…}
- 選擇某一個元素的全部同胞節點，例如 span ~ a{…}
- 屬性選擇器（id和class都是屬性，特殊的屬性）；
特殊1：id選擇器
特殊2：class選擇器
3. 僞類和僞元素
上文提到了若干種選擇器類型，僞類和僞元素可針對任何一種選擇器使用。
3.1. 僞類
僞類分爲UI僞類和結構化僞類。
3.1.1 UI僞類
UI僞類都比較簡單經常使用，我下面簡單寫幾句代碼，就再也不詳細說了。
2.分別闡述類選擇器和id選擇器的做用
ID選擇器只能應用一個對象，而類選擇器是能夠應用到多個樣式中的
ID選擇器經過元素的ID值選擇元素：
類先擇器經過樣式類選擇元素
3.如何重置網頁樣式
第一種方式
* {margin:0px; padding:0px;}
如今衆多的設計師發現，這行代碼雖然簡單，但卻讓網頁解析太慢，呵呵，固然了，本身是業餘的，不用太在乎。
因而出現了幾種CSS重置方法：
第二種方式
NETTUTS上的 Jeffrey Way寫了篇文章Weekend Quick Tip: Create Your Own Simple Reset.css File
釋出本身用來重置CSS樣式表的方法
body, html, div, blockquote, img, label, p, h1, h2, h3, h4, h5, h6, pre, ul, ol,
li, dl, dt, dd, form, a, fieldset, input, th, td
{margin: 0; padding: 0; border: 0; outline: none;}
body{line-height: 1;font-size: 88% /* Decide for yourself if you want to include this. */;}
h1, h2, h3, h4, h5, h6{font-size: 100%;padding: .6em 0;margin: 0 15px;}
ul, ol{list-style: none;}
a{color: black;text-decoration: none;}
a:hover
{text-decoration: underline;}
.floatLeft{float: left;padding: .5em .5em .5em 0;}
.floatRight{float: right;padding: .5em 0 .5em .5em;}
這個方法適用於大多數的網頁設計。
第三種方式
一部分人追求完全抹去瀏覽器影響
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
body {line-height: 1;}
ol, ul {list-style: none;}
blockquote, q {quotes: none;}
blockquote:before, blockquote:after,
q:before, q:after {content: '';content: none;}
/* remember to define focus styles! */
:focus {outline: 0;}
/* remember to highlight inserts somehow! */
ins {text-decoration: none;}
del { text-decoration: line-through;}
/* tables still need 'cellspacing="0"' in the markup */
table {border-collapse: collapse;border-spacing: 0;}
第四種方式
還有今天sofish提到的Yahoo的YUI提供的CSS重置文件
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td {
margin:0;
padding:0;
}
table {border-collapse:collapse;border-spacing:0;}
fieldset,img { border:0;}
address,caption,cite,code,dfn,em,strong,th,var {font-style:normal;
font-weight:normal;}
ol,ul {list-style:none;}
caption,th {text-align:left;}
h1,h2,h3,h4,h5,h6 {font-size:100%;font-weight:normal;}
q:before,q:after {content:'';}
abbr,acronym { border:0;}
4.對盒模型是怎麼理解的？它們的屬性有哪些？
HTML文檔中的每一個元素都被描繪成矩形盒子，這些矩形盒子經過一個模型來描述其佔用空間，
這個模型稱爲盒子模型。 盒子模型經過四個邊界來描述：margin（外邊距），border（邊框），padding（內填充），content（內容區域）
border邊框的經常使用值：
| 值 |
描述 |
| none |
無邊框。 |
| dotted |
點狀虛線邊框。 |
| dashed |
矩形虛線邊框。 |
| solid |
實線邊框。 |
5.什麼是標準文檔流？
標準文檔流
說白了就是一個「默認」狀態。文檔流指的是元素排版佈局過程當中，元素會自動從左往右，從上往下的流式排列。
並最終窗體自上而下分紅一行行，並在每行中從左至右的順序排放元素
6.浮動盒子的特色？浮動的好處？如何清除浮動？
元素浮動之後能夠向左或向右移動，直到它的外邊緣碰到包含它的框或者另一個浮動元素的邊框爲止。元素浮動之後會脫離正常的文檔流，因此文檔的普通流中的框就變現的好像浮動元素不存在同樣。
浮動的好處：
- 在圖片周圍包含文字
-
建立網頁佈局
浮動的缺點：
-
沒法撐起父元素。
- 同級別的兄弟元素會圍繞在周圍。
使用僞元素清除浮動:after（推薦使用）
示例
//在css中添加:after僞元素
.parent:after{
content:"";
visibility:hidden;
display:block;
width:100%;
height:0;
clear:both;
}
<div class="parent"> <div class="f"></div> </div>
7.精靈圖的好處是什麼？
CSS Sprites 的優勢：
一、減小圖片的字節
二、減小了網頁的http請求，從而大大的提升了頁面的性能
三、解決了網頁設計師在圖片命名上的困擾，只需對一張集合的圖片上命名就能夠了，不須要對每個小元素進行命名，從而提升了網頁的製做效率。
四、更換風格方便，只須要在一張或少張圖片上修改圖片的顏色或樣式，整個網頁的風格就能夠改變。維護起來更加方便。
8.定位有幾種？闡述一下「父相子絕」定位是怎樣理解的？
位有三種：
1.相對定位 2.絕對定位 3.固定定位
這三種定位，每一種都暗藏玄機，因此咱們要一一單講。
相對定位
相對定位:相對於本身原來的位置定位
現象和使用：
1.若是對當前元素僅僅設置了相對定位，那麼與標準流的盒子什麼區別。
2.設置相對定位以後，咱們纔可使用四個方向的屬性： top、bottom、left、right
特性：
1.不脫標
2.形影分離
3.老家留坑（佔着茅房不拉屎，噁心人）
因此說相對定位 在頁面中沒有什麼太大的做用。影響咱們頁面的佈局。咱們不要使用相對定位來作壓蓋效果
用途：
1.微調元素位置
2.作絕對定位的參考（父相子絕）絕對定位會說到此內容。
參考點：
本身原來的位置作參考點。
絕對定位
特性：
1.脫標 2.作遮蓋效果，提成了層級。設置絕對定位以後，不區分行內元素和塊級元素，都能設置寬高。
參考點(重點)：
1、單獨一個絕對定位的盒子
1.當我使用top屬性描述的時候 是以頁面的左上角（跟瀏覽器的左上角區分）爲參考點來調整位置
2.當我使用bottom屬性描述的時候。是以首屏頁面左下角爲參考點來調整位置。
2、以父輩盒子做爲參考點
1.父輩元素設置相對定位，子元素設置絕對定位，那麼會以父輩元素左上角爲參考點，這個父輩元素不必定是爸爸，它也能夠是爺爺，曾爺爺。
2.若是父親設置了定位，那麼以父親爲參考點。那麼若是父親沒有設置定位，那麼以父輩元素設置定位的爲參考點
3.不只僅是父相子絕，父絕子絕 ，父固子絕,都是以父輩元素爲參考點
注意了：父絕子絕，沒有實戰意義，作站的時候不會出現父絕子絕。由於絕對定位脫離標準流，影響頁面的佈局。相反‘父相子絕’在咱們頁面佈局中，是經常使用的佈局方案。由於父親設置相對定位，不脫離標準流，子元素設置絕對定位，僅僅的是在當前父輩元素內調整該元素的位置。
還要注意，絕對定位的盒子無視父輩的padding
做用：頁面佈局常見的「父相子絕」，必定要會！！！！
絕對定位的盒子居中
當作公式記下來吧！
固定定位
固定當前的元素不會隨着頁面滾動而滾動
特性:
1.脫標 2.遮蓋，提高層級 3.固定不變
參考點：
設置固定定位，用top描述。那麼是以瀏覽器的左上角爲參考點
若是用bottom描述，那麼是以瀏覽器的左下角爲參考點
做用： 1.返回頂部欄 2.固定導航欄 3.小廣告
9.什麼樣的盒子脫離了文檔標準流？脫離文檔標準流的盒子的特色是怎樣的？
浮動的盒子脫標
脫標：就是脫離了標準文檔流,提高層級
那麼浮動若是你們想學好，必定要知道它的四大特性
1.浮動的元素脫標 ，
2.浮動的元素互相貼靠,塊級元素浮動將並排顯示，再也不獨佔一行
3.浮動的元素由"字圍"效果
4.收縮的效果 .一個浮動元素。若是沒有設置width，那麼就自動收縮爲文字的寬度
內聯樣式浮動將支持設置寬高，不只支持margin-left(right)，並且開始支持margin-top(bottom)
10.z-index的規則是怎樣的？
這個東西很是簡單，它有四大特性，每一個特性你記住了，頁面佈局就不會出現找不到盒子的狀況。
- z-index 值表示誰壓着誰，數值大的壓蓋住數值小的，
- 只有定位了的元素，纔能有z-index,也就是說，無論相對定位，絕對定位，固定定位，均可以使用z-index，而浮動元素不能使用z-index
- z-index值沒有單位，就是一個正整數，默認的z-index值爲0若是你們都沒有z-index值，或者z-index值同樣，那麼誰寫在HTML後面，誰在上面壓着別人，定位了元素，永遠壓住沒有定位的元素。
- 從父現象：父親慫了，兒子再牛逼也沒用
11.display屬性值有哪些？分別描述他們的意思？
PS:標準流裏面的限制很是多，致使不少頁面效果沒法實現。若是咱們如今就要並排、而且就要設置寬高，那該怎麼辦呢？辦法是：移民！脫離標準流！
經常使用的有：
none：此元素不顯示。
block：將元素顯示爲塊級元素，先後會帶換行符。
inline:默認值，元素會被顯示爲內聯元素，先後沒有換行符。
inline-block:行內塊級元素。
css中一共有三種手段，使一個元素脫離標準文檔流：
一，HTML部分
1，XHTML和HTML有什麼區別
|
1
2
3
4
5
6
7
8
9
|
HTML是一種基本的WEB網頁設計語言，XHTML是一個基於XML的置標語言最主要的不一樣：
XHTML 元素必須被正確地嵌套。
XHTML 元素必須被關閉。
標籤名必須用小寫字母。
XHTML 文檔必須擁有根元素。
|
2，前端頁面有哪幾層構成，分別是什麼?做用是什麼?
|
1
2
3
4
5
|
1
, 結構層 Html(頁面結構內容，骨架) 表示層
2
, CSS（網頁的樣式和外觀）
3
, js（實現網頁的交互，動畫效果）
|
3，請描述一下 cookies，sessionStorage 和 localStorage 的區別？
|
1
2
3
4
5
6
|
cookie在瀏覽器和服務器間來回傳遞。
sessionStorage和localStorage不會
sessionStorage和localStorage的存儲空間更大；
sessionStorage和localStorage有更多豐富易用的接口；
sessionStorage和localStorage各自獨立的存儲空間；
|
4，form表單中input標籤的readonly和disabled屬性有何區別？
|
1
2
3
|
readonly
=
「readonly」是隻讀，不能夠修改，
disabled
=
「disabled」是禁用，整個文本框是顯示灰色狀態
form 中method是數據傳遞的方式，action是與後臺數據庫提交的
|
input標籤的屬性有哪些？
屬性值
描述
button 定義可點擊按鈕（多數狀況下，用於經過 JavaScript 啓動腳本）。
checkbox 定義複選框。
file 定義輸入字段和 "瀏覽"按鈕，供文件上傳。
hidden 定義隱藏的輸入字段。
image 定義圖像形式的提交按鈕。
password 定義密碼字段。該字段中的字符被掩碼。
radio 定義單選按鈕。
reset 定義重置按鈕。重置按鈕會清除表單中的全部數據。
submit 定義提交按鈕。提交按鈕會把表單數據發送到服務器。
text 定義單行的輸入字段，用戶可在其中輸入文本。默認寬度爲 20 個字符。
5，內聯標籤有哪些？塊級標籤有哪些？
|
1
2
3
|
行內標籤：a b img em br i span
input
select
塊級標籤：div p h1
-
h6 form ul dl ol table
|
6，內聯標籤和塊級標籤有什麼區別？
|
1
2
3
|
內聯標籤不能夠設置寬高，不獨佔一行；
塊級標籤能夠設置寬高，獨佔一行。
|
| 塊級元素 |
行內元素 |
| 獨佔一行,默認狀況下，其寬度自動填滿其父元素寬度 |
相鄰的行內元素會排列在同一行裏，直到一行排不下，纔會換行，其寬度隨元素的內容而變化 |
| 能夠設置width，height屬性 |
行內元素設置width，height屬性無效 |
| 能夠設置margin和padding屬性 |
行內元素起邊距做用的只有margin-left、margin-right、padding-left、padding-right，其它屬性不會起邊距效果。 |
| 對應於display:block |
對應於display:inline； |
7，簡述form標籤的功能和屬性？
|
1
2
3
4
5
6
|
功能：表單用於向服務器傳輸數據，從而實現用戶與Web服務器的交互 屬性：
1
，action: 表單提交到哪.通常指向服務器端一個程序,程序接收到表單提交過
來的數據（即表單元素值）做相應處理；
2
，method: 表單的提交方式 post
/
get默認取值就是get。
|
8，圖形標籤是什麼，它的主要屬性有哪些？
|
1
2
3
4
5
6
|
<img>標籤 主要屬性：
src: 要顯示圖片的路徑.
alt: 圖片沒有加載成功時的提示.
title: 鼠標懸浮時的提示信息.
width: 圖片的寬
height:圖片的高 (寬高兩個屬性只用一個會自動等比縮放.)
|
9，input標籤都有哪些類型？
|
1
2
3
4
5
6
7
|
type
： text 文本輸入框
password 密碼輸入框
radio 單選框
checkbox 多選框
submit 提交按鈕
button 按鈕(須要配合js使用.)
file
提交文件
|
10，input標籤都有哪些屬性？
|
1
2
3
4
5
6
|
name：表單提交項的鍵
value：表單提交項的值.對於不一樣的輸入類型，
value 屬性的用法也不一樣
checked：radio 和 checkbox 默認被選中
readonly：只讀. text 和 password
disabled：對所用
input
都好使
|
11，src和href的區別？
|
1
2
3
|
src指向外部資源的位置, 用於替換當前元素, 好比js腳本, 圖片等元素
href指向網絡資源所在的位置, 用於在當前文檔和引用資源間肯定聯繫, 加載css
|
12，選擇器中 id，class有什麼區別？
|
1
|
在網頁中 每一個
id
名稱只能用一次，
class
能夠容許重複使用
|
13，兩種=HTTP方法：get和post的區別
`<b></b>`：加粗
2. `<i></i>`：斜體
3. `<u></u>`：下劃線
4. `<s></s>`：刪除線
5. `<sup></sup>`：上標
6. `<sub></sub>`：下標
二，CSS部分
1，css的基本語法？
2，css的引入方式有哪些？
|
1
2
3
4
5
6
7
|
1.
內嵌式 <h1 style
=
"font-size: 10px;color: yellow"
>我是h1戰爭熱誠<
/
h1>
2.
內鏈式 <style
type
=
"text/css"
> h2{font
-
size:
30px
;color:red;} <
/
style>
3.
外鏈式 連接式： <link rel
=
"stylesheet"
type
=
"text/css"
href
=
"./css/index.css"
>
4.
導入式： <style
type
=
"text/css"
> @
import
url(
'./css/index.css'
); <
/
style>
|
3，css的選擇器有哪些？
|
1
2
3
4
5
|
1基本選擇器： 通配符選擇器 標籤選擇器
id
選擇器 類選擇器
2
，組合選擇器: 子代選擇器 後代選擇器 毗鄰選擇器 兄弟選擇器
3
，屬性選擇器 交集選擇器（兩個選擇器鏈接構成，中間不能有空格，第一個必須是標籤選擇器
第二個必須是類選擇器或者是ID選擇器，選中兩者範圍的交集）
|
4，css僞類的做用？
|
1
2
3
4
5
6
7
8
9
10
|
CSS僞類是用來添加一些選擇器的特殊效果。
a:link{ background
-
color: blue;} 超連接 未被訪問時的狀態
a:hover{ color: green;} 鼠標懸停時的狀態
a:visited{ color: yellow;} 鼠標單擊時的狀態
a:active{ color:blue;} 鼠標不鬆手的狀態
input
:focus{ background
-
color:red;} 獲取焦點時的狀態
|
5，什麼是css優先級，其基本規則是什麼？
還有一種不講道理的!import方式來強制讓樣式生效，可是不推薦使用。由於大量使用!import的代碼是沒法維護的。
第一等：表明內聯樣式，如: style=」」，權值爲1000。
第二等：表明ID選擇器，如：#content，權值爲100。
第三等：表明類，僞類和屬性選擇器，如.content，權值爲10。
第四等：表明類型選擇器和僞元素選擇器，如div p，權值爲1。
6，CSS隱藏元素的幾種方法（至少說出三種）
|
1
2
3
4
5
6
7
8
9
10
11
12
|
1
，Opacity:元素自己依然佔據它本身的位置並對網頁的佈局起做用。它也將響應用戶交互;
2
，Visibility:與 opacity 惟一不一樣的是它不會響應任何用戶交互。此外，元素在讀屏軟件
中也會被隱藏;
3
，Display:display 設爲 none 任何對該元素直接打用戶交互操做都不可能生效。此外，
讀屏軟件也不會讀到元素的內容。這種方式產生的效果就像元素徹底不存在;
4
，Position:不會影響佈局，能讓元素保持能夠操做;
5
，Clip
-
path:clip
-
path 屬性尚未在 IE 或者 Edge 下被徹底支持。若是要在你的
clip
-
path 中使用外部的 SVG 文件，瀏覽器支持度還要低;
|
7，CSS清除浮動的幾種方法（至少兩種）
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
1
，給父元素添加overflow:hidden （推薦使用）
.wrap{ overflow:hidden;}
2.
:after僞元素； (官方推薦)
.wrap:after{
content:"";
clear:both;
display:block;
height:
0
;
visibility:hidden;
}
3.
給父盒子設定固定高度；缺點：不靈活；
4.
給浮動元素最後一個加一個空的塊級元素，且該元素爲不浮動
float
:none，
設置clear:both,就會撐開盒子。
缺點：結構冗餘
|
8，頁面導入樣式時，使用link和@import有什麼區別？
|
1
2
3
4
5
6
7
8
9
|
<link rel
=
"stylesheet"
type
=
"text/css"
href
=
"./css/index.css"
>
<style
type
=
"text/css"
> @
import
url(
'./css/index.css'
); <
/
style>
1
，link屬於XHTML標籤，除了加載CSS外，還能用於定義RSS, 定義rel鏈接屬性等做用；
而@
import
是CSS提供的，只能用於加載CSS;
2
，頁面被加載的時，link會同時被加載，而@
import
引用的CSS會等到頁面被加載完再加載;
3
，
import
是CSS2.
1
提出的，只在IE5以上才能被識別，而link是XHTML標籤，無兼容問題;
|
9，介紹一下CSS的盒子模型？
|
1
2
3
|
有兩種，
IE 盒子模型和標準 W3C 盒子模型； IE的content部分包含了 border 和 pading;
盒模型： 內容(content)、填充(padding)、邊界(margin)、 邊框(border)
|
10，display:none和visibility:hidden的區別是什麼？
|
1
2
3
|
visibility：hidden
-
-
-
-
將元素隱藏，可是還佔着位置
display：none
-
-
-
-
將元素的顯示設爲無，不佔任何的位置
|
11，設置一個div的最小寬度爲100像素，最大高度爲50像素
|
1
|
min
-
width：
100px
;
max
-
height：
50px
;
|
12，在編寫css樣式的時候，若是想要設置標記容器和主容器之間的補白，用什麼來表示？
13，CSS屬性是否區分大小寫？
|
1
2
|
不區分。（HTML, CSS都不區分，但爲了更好的可讀性和團隊協做，通常都小寫，
而在XHTML 中元素名稱和屬性是必須小寫的。）
|
14，對行內元素設置margin-top 和margin-bottom是否起做用？
|
1
2
3
|
不起做用。（須要注意行內元素的替換元素img、
input
，他們是行內元素，
可是能夠爲其設置寬高，而且margin屬性也是對其起做用的，有着相似
於Inline
-
block的行爲） img
input
行內塊元素 能夠設置；
|
15，對內聯元素設置padding-top和padding-bottom是否會增長它的高度？
|
1
|
不會。同上題，要注意行內元素的替換元素，img設置padding
-
top
/
bottom是會起做用的。
|
16，screen關鍵詞是指設備的物理屏幕大小仍是指瀏覽器的視窗。
17，rgba()和opacity的透明效果有什麼不一樣？
|
1
2
3
|
rgba()和opacity都能實現透明效果，但最大的不一樣是opacity做用於元素，
以及元素內的全部內容的透明度，
而rgba()只做用於元素的顏色或其背景色。（設置rgba透明的元素的子元素不會繼承透明效果！）
|
18，css中可讓文字在垂直和水平方向上重疊的兩個屬性是什麼？
|
1
2
|
垂直方向：line
-
height
水平方向：letter
-
spacing
|
19，關於letter-spacing的妙用知道嗎？
|
1
|
能夠用於消除inline
-
block元素間的換行符空格間隙問題。
|
20，px和em的區別？
|
1
2
3
4
5
6
|
px和em都是長度單位，
區別是，px的值是固定的，指定是多少就是多少，計算比較容易。
em的值不是固定的，而且em會繼承父級元素的字體大小。
瀏覽器的默認字體高都是
16px
。因此未經調整的瀏覽器都符合:
1em
=
16px
。那麼
12px
=
0.75em
,
10px
=
0.625em
|
21，知道css有個content屬性嗎？有什麼做用？有什麼應用？
|
1
2
|
css的content屬性專門應用在 before
/
after 僞元素上，用於來插入生成內容。
最多見的應用是利用僞類清除浮動。
|
22，簡述css動畫的優缺點？
|
1
2
3
4
5
6
|
優勢：
1.
在性能上會稍微好一些，瀏覽器會對CSS3的動畫作一些優化（好比專門新建一個圖層用來跑動畫）
2.
代碼相對簡單
缺點：
1.
在動畫控制上不夠靈活
2.
兼容性很差
3.
部分動畫功能沒法實現（如滾動動畫，視差滾動等）
|
三，JavaScript部分
1，js的引入方式有哪些？
|
1
2
|
1，內鏈式 <script type= "text/javascript"></script>
2，導入文件<script type="text/javascript" scr="js/index.js"></script>
|
2，如何在js中定義使用變量？
|
1
2
3
4
5
6
7
8
|
var a; //先定義
a = 100; // 後賦值
//也能夠直接定義變量+賦值
var a = 100;
變量的命名規範
變量名有命名規範：只能由英語字母、數字、下劃線、美圓符號$構成，且不能以數字開頭，而且不能是JavaScript保留字
4，變量命名,首字符只能是字母,下劃線,$美圓符 三選一，餘下的字符
能夠是下劃線、美圓符號或任何字母或數字字符且區分大小寫，x與X是兩個變量
|
3，js的基本數據類型有哪些？
|
1
2
3
4
5
|
1，數字類型(number)
2，字符串類型(
string
)
3，布爾類型(boolean)
4，Null類型
5，Undefined類型
|
4，Null和Undefined的區別？
|
1
2
3
|
null
是一個表示」無」的對象，轉爲數值時爲0；
undefined是一個表示」無」的原始值，轉爲數值時爲NaN
|
5，js有哪些運算符？
|
1
2
3
4
5
|
1，算術運算符(+ - * / % ++ -- )
2，比較運算符(> >= < <= != == === !==)
3，邏輯運算符(&& || ！)
4，賦值運算符(= += -= *= /=)
5，字符串運算符(+ 鏈接，兩邊操做數有一個或兩個是字符串就作鏈接運算)
|
6，js的typeof返回哪些數據類型？
|
1
|
number
string
Object function boolean underfind
|
7，分別解釋數組方法pop()、push()、unshift()、shift()的功能？
|
1
2
|
shift()頭部刪除 pop()尾部刪除
Unshift()頭部添加 push()尾部添加
|
var x = 1.234;
//天花板函數 表示大於等於 x，而且與它最接近的整數是2
var a = Math.ceil(x);
console.log(a);//2
var x = 1.234;
// 小於等於 x，而且與它最接近的整數 1
var b = Math.floor(x);
console.log(b);//1
//求 兩個數的最大值 最小值
console.log(Math.max(2,5));//5
console.log(Math.min(2,5));//2
var ran = Math.random();
console.log(ran);[0,1)
若是讓你取100-200之間的隨機數，怎麼作？
背過公式：min - max之間的隨機數： min+Math.random()*(max-min);
var str = 'alex';
var charset = str.charAt(1);
console.log(charset);//l
- concat 返回字符串值，表示兩個或多個字符串的拼接
var str1 = 'al';
var str2 = 'ex';
console.log(str1.concat(str2,str2));//alexex
- replace(a,b) 將字符串a替換成字符串b
var a = '1234567755';
var newStr = a.replace("4567","****");
console.log(newStr);//123****755
- indexof() 查找字符的下標，若是找到返回字符串的下標，找不到則返回-1 。跟seach()方法用法同樣
var str = 'alex';
console.log(str.indexOf('e'));//2
console.log(str.indexOf('p'));//-1
- slice(start，end) 左閉右開 分割字符串
var str = '小馬哥';
console.log(str.slice(1,2));//馬
- split('a',1) 以字符串a分割字符串，並返回新的數組。若是第二個參數沒寫，表示返回整個數組，若是定義了個數，則返回數組的最大長度
var str = '個人天呢,a是嘛,你在說什麼呢?a哈哈哈';
console.log(str.split('a'));//["個人天呢,", "是嘛,你在說什麼呢?", "哈哈哈"]
var str = '個人天呢,a是嘛,你在說什麼呢?a哈哈哈';
console.log(str.substr(0,4));//個人天呢
var str = 'XIAOMAGE';
console.log(str.toLowerCase())；//xiaomage
var str = 'xiaomage';
console.log(str.toUpperCase());//XIAOMAGE
//建立了一個date對象 返回本地時間
var myDate = new Date();
//返回本地時間
console.log(myDate.toLocaleDateString());
在JSON中，有兩種結構：對象和數組。
var packJSON= {"name":"alex", "password":"123"};
一個對象以「{」開始，「}」結束，「key/value」之間運用 「,」分隔。
var packJSON = [{"name":"alex", "password":"123"}, {"name":"wusir", "password":"456"}];
JSON對象和JSON字符串轉換
在數據傳輸過程當中，JSON是以字符串的形式傳遞的，而JS操做的是JSON對象，因此，JSON對象和JSON字符串之間的相互轉換是關鍵。例如：
var jsonStr ='{"name":"alex", "password":"123"}' ;
var jsonObj = {"name":"alex", "password":"123"};
- JSON字符串轉換JSON對象
var jsonObject= jQuery.parseJSON(jsonstr);
- JSON對象轉化JSON字符串
var jsonstr =JSON.stringify(jsonObject );
遍歷JSON對象和JSON數組
- 遍歷JSON對象代碼以下：
var packAlex = {"name":"alex", "password":"123"} ;
for(var k in packAlex ){//遍歷packAlex 對象的每一個key/value對,k爲key
alert(k + " " + packAlex[k]);
}
- 遍歷JSON數組代碼以下
var packAlex = [{"name":"alex", "password":"123"}, {"name":"wusir", "password":"456"}];
for(var i in packAlex){//遍歷packJson 數組時，i爲索引
alert(packAlex[i].name + " " + packAlex[i].password);
}
8，ajax請求的時候get 和post方式的區別？
9，ajax請求時，如何解釋json數據？
|
1
|
使用eval parse,鑑於安全性考慮 使用parse更靠譜
|
10，事件委託是什麼？
事件的概念
HTML中與javascript交互是經過事件驅動來實現的，例如鼠標點擊事件、頁面的滾動事件onscroll等等，能夠向文檔或者文檔中的元素添加事件偵聽器來預訂事件。想要知道這些事件是在何時進行調用的，就須要瞭解一下「事件流」的概念
什麼是事件流
事件流描述的是從頁面中接收事件的順序
一、DOM事件流
「DOM2級事件」規定的事件流包括三個階段：
① 事件捕獲階段；
② 處於目標階段；
③ 事件冒泡階段
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>事件流</title>
<script>
window.onload = function(){
var oBtn = document.getElementById('btn');
oBtn.addEventListener('click',function(){
console.log('btn處於事件捕獲階段');
}, true);
oBtn.addEventListener('click',function(){
console.log('btn處於事件冒泡階段');
}, false);
document.addEventListener('click',function(){
console.log('document處於事件捕獲階段');
}, true);
document.addEventListener('click',function(){
console.log('document處於事件冒泡階段');
}, false);
document.documentElement.addEventListener('click',function(){
console.log('html處於事件捕獲階段');
}, true);
document.documentElement.addEventListener('click',function(){
console.log('html處於事件冒泡階段');
}, false);
document.body.addEventListener('click',function(){
console.log('body處於事件捕獲階段');
}, true);
document.body.addEventListener('click',function(){
console.log('body處於事件冒泡階段');
}, false);
};
</script>
</head>
<body>
<a href="javascript:;" id="btn">按鈕</a>
</body>
</html>
11，javascript添加 刪除 替換 插入到某個節點的方法分別是什麼？
|
1
2
3
4
|
添加：obj.appendChild()
刪除：obj.removeChild()
替換：obj.replaceChild()
插入：obj.insertBefore()
|
jQuery添加 刪除 替換 插入到某個節點的方法分別是什麼？
obj.append()
obj.remove() //刪除
$(".c").insertAfter($(".a")); //插入實例
$(".c").replaceWith($(".a")) //a節點替換掉c節點
12，簡述一下什麼是javascript的同源策略？
|
1
2
|
一段腳本只能讀取來自於同一來源的窗口和文檔的屬性，
這裏的同一來源指的是主機名、協議和端口號的組合
|
13，簡述一下對This對象的理解。
|
1
2
3
|
this
是js的一個關鍵字，隨着函數使用場合不一樣，
this
的值會發生變化。
可是有一個總原則，那就是
this
指的是調用函數的那個對象。
this
通常情
況下：是全局對象Global。 做爲方法調用，那麼
this
就是指這個對象
|
14，編寫一個b繼承a的方法
|
function Parent(username){
this.username = username;
this.hello = function(){
alert(this.username);
}
}
function Child(username,password){
Parent.apply(this,new Array(username));
this.password = password;
this.world = function(){
alert(this.password);
}
}
var parent = new Parent("zhangsan");
var child = new Child("lisi","123456");
parent.hello();
child.hello();
child.world();
|
|
15，如何阻止事件冒泡和默認事件
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
function stopBubble(e){
if
(e && e.stopPropagation)
e.stopPropagation()
else
window.
event
.cancelBubble=
true
}
return
false
$(function(ev){
ev.stopPropagation()
eg:href submit ev.preventDefault();
return
false
;
});
|
16，瀏覽器端的js包括哪幾個部分？
|
1
|
核心( ECMAScript) , 文檔對象模型(DOM), 瀏覽器對象模型(BOM)
|
17，js動畫有哪些實現方法？
|
1
|
用定時器 setTimeout執行一次和setInterval
|
18，js動畫的優缺點？
|
1
2
3
4
5
6
|
優勢：
1.控制能力很強，能夠單幀的控制、變換
2.兼容性好，寫得好徹底能夠兼容IE6，且功能強大。
缺點：
計算沒有css快，另外常常須要依賴其餘的庫。
|
19，跨域的幾種方式？
|
1
2
3
4
5
6
|
jsonp（利用script標籤的跨域能力）跨域、
websocket（html5的新特性，是一種新協議）跨域、
設置代理服務器（由服務器替咱們向不一樣源的服務器請求數據）、
CORS（跨源資源共享，cross origin resource sharing）、
iframe跨域、
postMessage(包含iframe的頁面向iframe傳遞消息)
|
20，3 + 2 +「7」的結果是什麼？
|
1
|
因爲3和2是整數，它們將直接相加。因爲7是一個字符串，它將會被直接鏈接，因此結果將是57。
|
四，jQuery部分
1，jQuery是什麼？
|
1
2
|
jQuery是一個快速的，簡潔的javaScript庫，使用戶能更方便地處理HTMLdocuments、
events、實現動畫效果，而且方便地爲網站提供AJAX交互
|
2，jQuery的優點是什麼？
|
1
|
它的文檔說明很全，並且各類應用也說得很詳細，同時還有許多成熟的插件可供選擇
|
3，什麼是jQuery對象？
|
1
2
3
|
jQuery 對象就是經過jQuery包裝DOM對象後產生的對象。
jQuery 對象是 jQuery 獨有的. 若是一個對象是 jQuery 對象,
那麼它就可使用 jQuery 裏的方法: $(「#test」).html()
|
4，jQuery都有哪些選擇器？
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
|
1.基礎選擇器
id選擇器 $(
'#brother'
).css(
'color'
,
'red'
);
標籤選擇器 $(
'a'
).css({
'color'
:
'green'
,
'font-size'
:
'24px'
});
類選擇器 $(
'.li3'
).css(
'background'
,
'yellow'
);
通配符選擇器 console.log($(
''
));
$(
''
).html(
''
);
2.層級選擇器
後代選擇器 $(
'#box p'
).css(
'color'
,
'red'
);
子代選擇器 $(
'#box>p'
).css(
'color'
,
'green'
);
毗鄰選擇器，匹配全部的緊接着選中元素的兄弟 $(
'#father+p'
).css(
'font-size'
,
'30px'
);
兄弟選擇器 $(
'#father~p'
).css(
'background'
,
'gray'
);
3.過濾選擇器
獲取第一個 $(
'li:first'
).css(
'background'
,
'gray'
);
獲取最後一個 $(
'li:last'
).css(
'background'
,
'yellow'
);
獲取奇數 $(
'li:odd'
).css(
'color'
,
'red'
);
獲取偶數 $(
'li:even'
).css(
'color'
,
'green'
);
選中索引值爲1 $(
'li:eq(1)'
).css(
'font-size'
,
'32px'
);
大於索引值1 $(
'li:gt(1)'
).css(
'font-size'
,
'60px'
);
小於索引值1 $(
'li:lt(1)'
).css(
'font-size'
,
'10px'
);
4.屬性選擇器
$(
'li[id]'
).css(
'color'
,
'red'
);
$(
'li[class=what]'
).css(
'font-size'
,
'30px'
);
$(
'li[class!=what]'
).css(
'font-size'
,
'50px'
);
$(
'input[name^=username]'
).css(
'background'
,
'gray'
);
$(
'input[name$=222]'
).css(
'background'
,
'green'
);
$(
'button[class*=danger]'
).css(
'background'
,
'orange'
);
解釋： 標籤名[屬性名]，查找全部含有id屬性的該標籤名的元素 匹配給
定的屬性 是what值 [attr=value] 匹配給定的屬性是某個特定值的元素
沒有
class
也會發生變化，[attr!=value] 匹配全部不含有指定的屬性，
或者屬性不等於特定值的元素 匹配給定的屬性是以某些值開始的元素 ^
匹配給定的屬性是以某些值結尾的元素 $ 匹配給定的屬性是以包含某些值的元素 *
5.篩選選擇器
$(
'span'
).eq(1).css(
'color'
,
'red'
);
$(
'span'
).first().css(
'font-size'
,
'28px'
);
$(
'span'
).last().css(
'color'
,
'greenyellow'
);
console.log($(
'span'
).parent());
$(
'span'
).parent(
'.p1'
).css({
'width'
:
'300px'
,height:
'400px'
,
'background'
:
'red'
});
$(
'.list'
).siblings(
'li'
).css(
'color'
,
'red'
);
$(
'div'
).find(
'button'
).css(
'background'
,
'gray'
);
解釋： 獲取第n個元素 數值從0開始 .eq() 獲取第一個元素 .first() 獲取最後
一個元素 .last() 獲取父親元素 .parent() 選擇全部的兄弟元素 .siblings()
查找全部的後代元素 .find()
|
5，簡述一下jQuery的篩選器的分類，分別簡單舉例介紹一下。
|
1
2
3
4
5
6
7
8
9
10
11
|
過濾篩選器 如：$(
"li"
).eq(2) $(
"li"
).first() $(
"ul li"
).hasclass(
"test"
)
查找篩選器 如： 查找子標籤： $(
"div"
).children(
".test"
) $(
"div"
).find(
".test"
)
向下查找兄弟標籤： $(
".test"
).next() $(
".test"
).nextAll() $(
".test"
).nextUntil()
向上查找兄弟標籤： $(
"div"
).prev() $(
"div"
).prevAll() $(
"div"
).prevUntil()
查找全部兄弟標籤： $(
"div"
).siblings()
查找父標籤： $(
".test"
).parent() $(
".test"
).parents() $(
".test"
).parentUntil()
|
6，jQuery的美圓符號$有什麼做用？
|
1
|
其實美圓符號$只是」jQuery」的別名，它是jQuery的選擇器
|
7，body中的onload()函數和jQuery中的document.ready()有什麼區別？
|
1
2
3
4
|
1，咱們能夠在頁面中使用多個document.ready()，但只能使用一次onload()。
2，document.ready()函數在頁面DOM元素加載完之後就會被調用，而onload()
函數則要在全部的關聯資源（包括圖像、音頻）加載完畢後纔會調用。
|
8，jQuery中的Delegate()函數有什麼做用？
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
例1：沒弄懂，看例2
1，若是你有一個父元素，須要給其下的子元素添加事件，
這時你可使用
delegate
()了，代碼以下：
$(
"ul"
).
delegate
(
"li"
,
"click"
, function(){
$(
this
).hide();
});
2，當元素在當前頁面中不可用時，可使用
delegate
()
$(
'ul'
).
on
(
'click'
,
'.name,.luffy'
,function () {
console.log($(
this
));
});
例2：
// 事件委託 （看時機 若是是將來追加的元素 建議使用 事件委託來綁定事件）
// 原理： 利用冒泡的原理，把事件加到父級上，觸發執行效果。
$('ul').on('click','li',function(e){
alert($(this).text());
});
// 將來 動態的 往ul中追加了li標籤
// 將來追加的li標籤 本身完成不了click事件，那麼這個時候考慮「事件委託(代理)」
$('button').click(function(event) {
$('ul').append('<li>黑gril</li>')
});
|
9，請用jQuery實現，在一個表單中，若是將全部的div元素都設置爲綠色。
|
1
|
$(「div」).css(「color」,」green」)
|
10，jQuery中的hover()和toggle()有什麼區別？
|
1
2
3
|
hover()和toggle()都是jQuery中兩個合成事件。
hover()方法用於模擬光標懸停事件。
toggle()方法是連續點擊事件。
|
11，jquery表單提交前有幾種校驗方法？分別爲？
|
1
2
3
|
formData:返回一個數組，能夠經過循環調用來校驗
jaForm：返回一個jQuery對象，全部須要先轉換成dom對象
fieldValue：返回一個數組 beforeSend()
|
12，$(this) 和 this 關鍵字在 jQuery 中有何不一樣？
|
1
2
3
4
5
6
7
|
$(
this
) 返回一個 jQuery 對象，你能夠對它調用多個 jQuery 方法，
好比用 text() 獲取文本，用val() 獲取值等等
this
表明當前元素，它是 JavaScript 關鍵詞中的一個，表示上下文中的當前 DOM 元素。
你不能對它調用 jQuery 方法，直到它被 $() 函數包裹，例如 $(
this
)
|
13，jQuery中 detach() 和 remove() 方法的區別是什麼？
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
detach() 和 remove() 方法都被用來移除一個DOM元素,
二者之間的主要不一樣在於
detach() 會保持對過去被解除元素的跟蹤, 所以它能夠被取消解除,
而 remove() 方法則會保持過去被移除對象的引用.
你也還能夠看看 用來向DOM中添加元素的 appendTo() 方法
var
a = $(
'button'
).remove();
console.log(a[0],a[1]);
$(
'ul'
).append(a[0]);
var
b = $(
'button'
).detach();
console.log(b[0]);
$(
'ul'
).append(b[0]);
|
14，你要是在一個 jQuery 事件處理程序裏返回了 false 會怎樣？
15，如何在點擊一個按鈕時使用 jQuery 隱藏一個圖片？
|
1
2
3
4
5
|
$(
'#ButtonToClick'
).click(function(){
$(
'#ImageToHide'
).hide();
});
|
16，jQuery.get() 和 jQuery.ajax()方法之間的區別是什麼?
|
1
2
|
ajax() 方法更強大，更具可配置性, 讓你能夠指定等待多久，以及如何處理錯誤。
get
() 方法是一個只獲取一些數據的專門化方法。
|
17，用jQuery如何將一個 HTML 元素添加到 DOM 樹中的？
|
1
2
3
4
5
6
7
8
9
10
|
經過appendTo() 方法在指定的 DOM 元素末尾添加一個現存的元素或者一個新的 HTML 元素。
$(
'<a href='
#
'>zhanzhengrecheng</a>'
).appendTo($(
'ul'
));
append appendTo
prepend prependTo
before insertBefore after insertAfter
clone replaceWith replaceAll
empty remove detach
|
18,如何找到全部 HTML select 標籤的選中項？
|
1
2
3
4
|
$(
'[name=NameOfSelectedTag] :selected'
)
這段代碼結合使用了屬性選擇器和 :selected 選擇器，結果只返回被選中的選項。
你可按需修改它，好比用 id 屬性而不是 name 屬性來獲取 <
select
> 標籤。
|
19,remove() 和 empty()的區別？
|
1
2
|
remove, 刪除節點，並刪除元素節點綁定的事件。
empty, 清空節點元素的內容，可是節點還存在，只是內容被清空，相似$().html(
' '
)
|
20,在jquery中你是如何去操做樣式的？
|
1
2
3
|
addClass() 來追加樣式 removeClass() 來刪除樣式 toggle() 來切換樣式
|
21,簡述beforeSend方法有的做用？
|
1
2
3
4
5
|
發送請求前能夠修改XMLHttpRequest對象的函數，在beforeSend中，
若是返回
false
能夠取消本次的Ajax請求。XMLHttpRequest對象是惟一的
參數，因此在這個方法裏能夠作驗證。
|
22,jquery對象和dom對象是怎樣轉換的？
|
1
2
3
4
5
|
1 var domObj = $("#div")[0];
2 domObj.innerHTML = "將jq對象轉化爲dom對象並調用相關方法"
dom對象轉換爲jq對象
1 var domObj = document.getElementById("div");
2 var $obj = $(domObj);
3 $obj.html("dom對象轉換爲jq對象後調用jq方法")
|
23,radio單選組的第二個元素爲當前選中值，該怎麼去取？
|
1
|
$(
'input[name=items]'
).
get
(1).
checked
=
true
;
|
24,在ajax中data主要有幾種方式？
|
1
|
三種， html拼接的， json數組， form表單經serialize()序列化的
|
25,jQuery 中的方法鏈是什麼？使用方法鏈有什麼好處？
|
1
2
|
方法鏈是對一個方法返回的結果調用另外一個方法，這使得代碼簡潔明瞭，
同時因爲只對 DOM 進行了一輪查找，性能方面更加出色
|
26,哪一種方式更高效：document.getElementbyId("myId") 仍是 $("#myId")？
|
1
|
第一種，由於它直接調用了 JavaScript 引擎。
|
五，bootstrap部分
1,什麼是 Bootstrap？
|
1
2
|
Bootstrap 是一個用於快速開發 Web 應用程序和網站的前端框架。
Bootstrap 是基於 HTML、CSS、JAVASCRIPT 的。
|
2,爲何使用 Bootstrap？
|
1
2
3
|
移動設備優先 瀏覽器支持 容易上手 響應式設計 它爲開發人員建立接口提供
了一個簡潔統一的解決方案。 它包含了功能強大的內置組件，易於定製。 它還
提供了基於 Web 的定製。 它是開源的。
|
3,Bootstrap 包含哪些內容？
|
1
2
3
4
5
6
7
8
9
10
11
12
|
1，基本結構：Bootstrap 提供了一個帶有網格系統、連接樣式、背景的基本結構。
2，CSS：Bootstrap 自帶如下特性：全局的 CSS 設置、定義基本的 HTML 元素樣式、
可擴展的
class
，以及一個先進的網格系統。
3，組件：Bootstrap 包含了十幾個可重用的組件，用於建立圖像、下拉菜單、導航、
警告框、彈出框等等。
4，JavaScript 插件：Bootstrap 包含了十幾個自定義的 jQuery 插件。您能夠直接
包含全部的插件，也能夠逐個包含這些插件。
5，定製：您能夠定製 Bootstrap 的組件、LESS 變量和 jQuery 插件來獲得您本身的版本。
|
4,Bootstrap HTML編碼規範語法。
|
1
2
3
4
5
6
7
8
9
|
1，用兩個空格來代替製表符（tab） -- 這是惟一能保證在全部環境下得到一致展示的方法。
2，嵌套元素應當縮進一次（即兩個空格）。
3，對於屬性的定義，確保所有使用雙引號，毫不要使用單引號。
4，不要在自閉合（self-closing）元素的尾部添加斜線 -- HTML5 規範中明確說明這是可選的。
5，不要省略可選的結束標籤（closing tag）（例如，</li> 或 </body>）。
|
5，Bootstrap CSS編碼規範語法。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
|
1，用兩個空格來代替製表符（tab） -- 這是惟一能保證在全部環境下得到一致展示的方法。
2，爲選擇器分組時，將單獨的選擇器單獨放在一行。
3，爲了代碼的易讀性，在每一個聲明塊的左花括號前添加一個空格。
4，聲明塊的右花括號應當單獨成行。
5，每條聲明語句的 : 後應該插入一個空格。
6，爲了得到更準確的錯誤報告，每條聲明都應該獨佔一行。
7，全部聲明語句都應當以分號結尾。最後一條聲明語句後面的分號是可選的，可是，若是
省略這個分號，你的代碼可能更易出錯。
8，對於以逗號分隔的屬性值，每一個逗號後面都應該插入一個空格（例如，box-shadow）。
9，不要在 rgb()、rgba()、hsl()、hsla() 或 rect() 值的內部的逗號後面插入空格。這樣利
於從多個屬性值（既加逗號也加空格）中區分多個顏色值（只加逗號，不加空格）。
10，對於屬性值或顏色參數，省略小於 1 的小數前面的 0 （例如，.5 代替 0.5；-.5px 代
替 -0.5px）。
11，十六進制值應該所有小寫，例如，#fff。在掃描文檔時，小寫字符易於分辨，由於他們
的形式更易於區分。
12，儘可能使用簡寫形式的十六進制值，例如，用 #fff 代替 #ffffff。
13，爲選擇器中的屬性添加雙引號，例如，input[type=
"text"
]。只有在某些狀況下是可選
的，可是，爲了代碼的一致性，建議都加上雙引號。
14，避免爲 0 值指定單位，例如，用 margin: 0; 代替 margin: 0px;。
|
6，讓 中的每一行對鼠標懸停狀態做出響應的類名是什麼？
7，讓表格更加緊湊，單元格中的內補（padding）均會減半的類名是什麼？
8，輸入框設置 readonly 後的結果是什麼？
|
1
2
|
禁止用戶修改輸入框中的內容。處於只讀狀態的輸入框顏色更淺（就像被禁
用的輸入框同樣），可是仍然保留標準的鼠標狀態。
|
9，輸入框設置 disabled 屬性後的結果是什麼？
|
1
2
|
禁止其與用戶有任何交互（焦點、輸入等）。被禁用的輸入框顏色更淺，並
且還添加了 not-allowed 鼠標狀態。
|
10，簡述下button都有哪些經常使用的狀態，及類名分別是什麼？
|
1
2
3
4
5
6
7
|
默認樣式 btn-
default
首選項 btn-primary
成功 btn-success
通常信息 btn-info
警告 btn-warning
危險 btn-danger
連接 btn-link
|
12，簡述 .show 和 .hidden 類的做用？
|
1
|
能夠強制任意元素顯示或隱藏(對於屏幕閱讀器也能起效)
|
13，在bootstrap中被刪除的文本使用什麼標籤？
14，在bootstrap中無用文本使用什麼標籤？
15，在bootstrap中額外插入的文本使用什麼標籤？
16，在bootstrap中爲文本添加下劃線使用什麼標籤？
17，在bootstrap中給 以內的每一行增長斑馬條紋樣式類名是什麼？
18，簡介一下柵格系統。
|
1
2
|
柵格系統用於經過一系列的行（row）與列（column）的組合來建立頁面佈局，
你的內容就能夠放入這些建立好的佈局中,系統會自動分爲最多12列。
|
19，在bootstrap中讓段落突出顯示的類名是什麼？
重點內容：DOM的操做
1.聲明一個add函數，要求函數有返回值，並打印結果
<script type="text/javascript">
function add(a,b){
return a+b;
}
alert(add(2,3));
</script>
2.對「hello world」進行翻轉處理 要求變爲："dlorw olleh"
var s = "hello world";
console.log(s.split("").reverse().join(""));
3.如何定義一個對象？使用字面量方式 要求：該對象有名字、年齡、愛好多個
function Person(name,age,hobby){
this.name = name;
this.age = age;
this.hobby = hobby;
}
var p1 =new Person('andyzhang',32,'test');
console.log(p1.name)
console.log(typeof p1)
<script type="text/javascript">
var andy = {
name:'andyzhang',
age:34,
hobby:"lookMovie,ball,eat"
}
console.log(andy)
</script>
4.setTimeout()和setInterval()的區別？如何理解他們的做用
setTimeout()
只在指定的時間後執行一次
/定時器 異步運行
function hello(){
alert("hello");
}
//使用方法名字執行方法
var t1 = window.setTimeout(hello,1000);
var t2 = window.setTimeout("hello()",3000);//使用字符串執行方法
window.clearTimeout(t1);//去掉定時器
setInterval()
/實時刷新 時間單位爲毫秒
setInterval('refreshQuery()',8000);
/* 刷新查詢 */
function refreshQuery(){
console.log('每8秒調一次')
}
在指定時間爲週期循環執行
兩種方法根據不一樣的場景和業務需求擇而取之，
對於這兩個方法，須要注意的是若是要求在每隔一個固定的時間間隔後就精確地執行某動做，那麼最好使用setInterval，而若是不想因爲連續調用產生互相干擾的問題，尤爲是每次函數的調用須要繁重的計算以及很長的處理時間，那麼最好使用setTimeout
5.對於標籤文本內容值的操做使用的是哪一個屬性？input輸入框呢？
標籤文本內容值的操做使用的是 " innerHTML 或 innerText" input輸入框是：value
6.獲取DOM的三種方式？
var oDiv1 = document.getElementById("box1"); //方式一：經過id獲取單個標籤
var oDiv2 = document.getElementsByTagName("div")[0]; //方式二：經過 標籤名 得到 標籤數組，因此有s
var oDiv3 = document.getElementsByClassName("box")[0]; //方式三：經過 類名 得到 標籤數組，因此有s
7.如何設置標籤屬性的值？好比類名如何設置？如何設置多個類型
Attribute
該屬性主要是用來在標籤行內樣式，添加、刪除、獲取屬性。且適用於自定義屬性。
setAttribute("屬性名"，屬性值「」)；這個是用來設置標籤屬性的；
removeAttribute("屬性名")；這是用來刪除標籤屬性的。
getAttribute("屬性名")；獲取標籤該屬性的值；
obj.style.css樣式
該屬性主要是用來在標籤行內樣式，添加、刪除、獲取屬性。不適用自定義屬性。
例如設置li標籤的寬高，背景色；
li.style.width = "200px";
li.style.height = "200px";
li.style.backgroundColor = "red";
注意在js中，css的屬性名用鏈接符的地方，改成將後面的第一個字母大寫，如：background-color ==> backgroundColor ;
window.getComputedStyle(obj)["屬性名"]
用來獲取標籤的屬性，對內聯式有效。
<div id="box">
<p id ="text">文本</p>
</div>
<script type="text/javascript">
window.onload = function(){
function $(id){
return document.getElementById(id);
}
$('box').setAttribute("class","bbb bbb ccc");
}
</script>
設置多個屬性，屬性中間要加空格。
8.列舉你知道的js事件
9.如何設置樣式屬性？好比設置該div的背景顏色爲紅色
<script type="text/javascript">
function $(id){
return document.getElementById(id);
}
$('box').style.backgroundColor ="red";
</script>
例如設置li標籤的寬高，背景色；
li.style.width = "200px";
li.style.height = "200px";
10.使用DOM操做，建立一個p標籤，設置內容爲alexsb，將p標籤插入到div中。而後點擊某個刪除按鈕，移除當前建立的p標籤（練習dom的建立，修改內容，追加，刪除）
<div id="box">
<p id ="text">文本</p>
<button id= "create">建立</button>
<input type="text" name="inp" id="inp" value="" />
<button id= "alter">修改</button>
<input type="" name="inp1" id="inp1" value="" />
<button id= "add">追加</button>
<br>
<button id= "remove">刪除</button>
</div>
<script type="text/javascript">
function $(id){
return document.getElementById(id);
}
var oP = document.createElement("p");
//建立
$('create').onclick = function(){
$('box').after(oP)
oP.innerText = "alexsb";
oP.setAttribute("id","oP");
}
//修改 ，先刪掉要改的節點，再添加
$('alter').onclick = function(){
$('oP').parentNode.removeChild($("oP"));
$("box").after(oP)
oP.setAttribute("id","oP");
$("oP").innerText = $('inp').value
$("inp").value = ""
}
//追加
$("add").onclick = function(){
$("oP").innerText = $("oP").innerText + $('inp1').value;
}
//刪除
$("remove").onclick = function(){
$('oP').parentNode.removeChild($('oP'));
}
</script>
刪除節點
格式以下：
父節點.removeChild(子節點);
解釋：用父節點刪除子節點。必需要指定是刪除哪一個子節點。
若是我想刪除本身這個節點，能夠這麼作：
node1.parentNode.removeChild(node1);
11.如何打開一個新的網站，好比打開路飛學城官網
超連接<a href="https://www.luffycity.com" title="腳本之家">Welcome</a>
等效於js代碼
window.location.href="https://www.luffycity.com"; //在同當前窗口中打開窗口
2.超連接<a href="https://www.luffycity.com" title="路飛學城" target="_blank">Welcome</a>
等效於js代碼
window.open("https://www.luffycity.com"); //在另外新建窗口中打開窗口
繼承性
有一些屬性，當給本身設置的時候，本身的後代都繼承上了，這個就是繼承性。
哪些屬性能繼承？
color、 text-開頭的、line-開頭的、font-開頭的。
這些關於文字樣式的，都可以繼承； 全部關於盒子的、定位的、佈局的屬性都不能繼承。
因此，若是咱們的頁面的文字，都是灰色，都是14px。那麼就能夠利用繼承性：
1.js的入口函數和jquery入口函數的區別？
執行時間不一樣
window.onload必須等到頁面內包括圖片的全部元素加載完畢後才能執行。
$(document).ready()是DOM結構繪製完畢後就執行，沒必要等到加載完畢。
編寫個數不一樣
window.onload不能同時編寫多個，若是有多個window.onload方法，只會執行一個
$(document).ready()能夠同時編寫多個，而且均可以獲得執行
簡化寫法不一樣
window.onload沒有簡化寫法
$(document).ready(function(){})能夠簡寫成$(function(){});
2.jquery的值的操做哪一個方法？
// 基本選擇器
// 1.id選擇器
$('#brother').css('color','black');
// 2.標籤選擇器
$('a').css('color','yellow')
// 3.類選擇器
$('.item').css('background','#FC4708')
// 4.通配符選擇器
// console.log($('*').html())
console.log($('a').val())
層級選擇器
// 後代選擇器
console.log($('div p')) $('div p').css('color','red') // 子代選擇器 $('div >p').css('background','green') // 毗鄰選擇器 匹配 全部緊接在#brother元素後的下一個元素 $('#brother+ li').css('color','yellow') // 兄弟選擇器 // 匹配全部#brother以後的全部兄弟姐妹元素 $('#brother~li').css('background','#996633') // :first 獲取第一個元素 $('li:first').text('真的嗎？') // :last 獲取最後一個元素 $('li:last').html('真的嗎？') //一個給定索引值的元素 console.log($('p:eq(3)').text())
基本過濾選擇器
//:first 獲取第一個元素
$('li:first').text('真的嗎？')
//:last 獲取最後一個元素
$('li:last').html('我是最後一個元素？')
//:odd 匹配全部索引值爲奇數的元素，從0開始計數
$('li:odd').css('color','green');
//:even 匹配全部索引值爲偶數的元素，從0開始計數
$('li:even').css('color','red')
//:eq(index) 獲取給定索引值的元素 從0開始計數
$('li:eq(1)').css('font-size','30px')
//:gt(index)匹配全部大於給定索引值的元素
$('li:gt(1)').css('font-size','40px')
//:lt(index) 匹配全部小於給定索引值的元素
$('li:lt(1)').css('font-size','40px')
//一個給定索引值的元素
console.log($('p:eq(3)').text())
//屬性選擇器
//標籤名[屬性名] 查找全部含有id屬性的該標籤名的元素
$("li[id]").css('color','red')
//[attr=value] 匹配給定的屬性是某個特定值的元素
$('li[class=what]').css('font-size','30px')
//[attr!=value] 匹配全部不含有指定的屬性，或者屬性不等於特定值的元素
$('li[class!=what]').css('color','darkgreen')
//匹配給定的屬性是以某些值開始的元素
$('input[name^=username]').css('background','red')
//匹配給定的屬性是以某些值結尾的元素
$('input[name$=222]').css('background','yellow')
//匹配給定的屬性是以包含某些值的元素
$("button[class*='btn']").css('background','#0000FF')
篩選選擇器
//獲取第n個元素 數值從0開始
$('span').eq(0).css('font-size','30px')
//first()獲取第一個元素
$('span').first().css('background','red')
//last()獲取最後一個元素
//.parent() 選擇父親元素
$('span').parent('.p1').css({width:'300px',height:'300px',background:'yellow'})
//.siblings()選擇全部的兄弟元素
$('.list').siblings('li').css('color','red')
//.find()
//查找全部的後代元素
$('div').find('button').css('background','#313131')
3.jquery和js對象如何轉化？
DOM對象轉換成jquery對象
var box = document.getElementById('box');
console.log($(box));
jquery對象轉化成DOM對象
第一種方式：
$('button')[0]
第二種方式：
$('button').get(0)
4.闡述一下js和jquery的關係？
- Javascript是一門編程語言，咱們用它來編寫客戶端瀏覽器腳本。
- jQuery是javascript的一個庫，包含多個可重用的函數，用來輔助咱們簡化javascript開發
- jQuery能作的javascipt都能作到，而javascript能作的事情，jQuery不必定能作到
5.jquery的html屬相操做是哪一個方法？你認爲是js中哪一個方法封裝來的？
jquery的屬性操做模塊分爲四個部分：html屬性操做，dom屬性操做，類樣式操做和值操做
認爲是js中 獲取文檔對象：document.documentElement 獲取html:document.documentElement 獲取body:document.body
html屬性操做：是對html文檔中的屬性進行讀取，設置和移除操做。好比attr()、removeAttr()
DOM屬性操做：對DOM元素的屬性進行讀取，設置和移除操做。好比prop()、removeProp()
類樣式操做：是指對DOM屬性className進行添加，移除操做。好比addClass()、removeClass()、toggleClass()
值操做：是對DOM屬性value進行讀取和設置操做。好比html()、text()、val()
6.列舉jquery的文檔操做的方法？以及他們的意思？
、插入操做
1、父元素.append(子元素) 追加某元素 父元素中添加新的元素
var oli = document.createElement('li');
oli.innerHTML = '哈哈哈'
//jquery中的dom操做
//1.append(content)追加 往父元素中添加新的元素
//content:string | element | jquery元素
$('ul').append('<li>1233</li>')
$('ul').append(oli)
//若是直接的內容是當前頁面中的某些元素，那麼這些元素將從原位置上消失。簡言之，就是一個移動操做
$('ul').append($('#app'))
2、子元素.appendTo(父元素) 追加到某元素 子元素添加到父元素
$('<li>天王蓋地虎</li>').appendTo($('ul')).addClass('hu')
3、prepend（） 前置添加， 添加到父元素的第一個位置
$('ul').prepend('<li>我是第一個</li>')
4、prependTo 後置添加，第一個元素添加到父元素中
$('<a href="#">路飛學誠</a>').prependTo('ul')
5、父.after(子) 在匹配的元素以後插入內容 與 子.insertAfter(父)
$('ul').after('<h4>我是一個h3標題</h4>')
$('<h5>我是一個h2標題</h5>').insertAfter('ul')
6、父.before(子) 在匹配的元素以前插入內容 與 子.insertBefor(父)
$('ul').before('<h3>我是一個h3標題</h3>')
$('<h2>我是一個h2標題</h2>').insertBefore('ul')
二、複製操做
clone() 克隆匹配的DOM元素而且選中這些克隆的副本
$('button').click(function() {
// 1.clone()：克隆匹配的DOM元素而且選中這些克隆的副本。
// 2.clone(true)：元素以及其全部的事件處理而且選中這些克隆的副本(簡言之，副本具備與真身同樣的事件處理能力)
$(this).clone(true).insertAfter(this);
})
三、替換操做
1、replaceWith()：將全部匹配的元素替換成指定的HTML或DOM元素。
//將全部的h5標題替換爲a標籤
$('h5').replaceWith('<a href="#">hello world</a>')
//將全部h5標題標籤替換成id爲app的dom元素
$('h5').replaceWith($('#app'));
2、replaceAll():用匹配的元素替換掉全部 selector匹配到的元素
$('<br/><hr/><button>按鈕</button>').replaceAll('h4')
四、刪除操做
1、remove() 刪除節點後，事件也會刪除（簡言之，刪除了整個標籤）
$('ul').remove();
2、detach() 刪除節點後，事件會保留
var $btn = $('button').detach()
//此時按鈕能追加到ul中
$('ul').append($btn)
3、empty(): 清空元素中的全部後代節點
//清空掉ul中的子元素，保留ul
$('ul').empty()
7.對一個元素顯示隱藏分別使用類控制(addClass和removeClass)和文檔操做(append())來實現,並描述一下他們的區別？
addClass 和 removeClass是經過添加類名，刪除類名 結合CSS屬性 display: none,visibility: hidden來控制
元素顯示和隱藏的。
append()是經過插入追加元素，追加的元素會從原來的位置消失。就是一個移動操做。改變了html結構。
8.列舉jquery的篩選方法有哪些？重點
9.jquery的事件有哪些？
window.onload = function(){
var oBtn = document.getElementById('btn');
oBtn.addEventListener('click',function(){
console.log('btn處於事件捕獲階段');
}, true);
oBtn.addEventListener('click',function(){
console.log('btn處於事件冒泡階段');
}, false);
｝；
10.mouseout和mouseover以及mouseenter和mouseleave的區別？
mouseenter：當鼠標移入某元素時觸發。
mouseleave：當鼠標移出某元素時觸發。
mouseover：當鼠標移入某元素時觸發，移入和移出其子元素時也會觸發。
mouseout：當鼠標移出某元素時觸發，移入和移出其子元素時也會觸發。
mousemove：鼠標在某元素上移動時觸發，即便在其子元素上也會觸發。
mouseout、mouseover和mouseleave、mouseenter最大的區別，在於子元素連帶觸發。
11.寫jquery的ajax的get請求方法和post請求方法？
jquery的post()方法
HTTP 請求：GET vs. POST
兩種在客戶端和服務器端進行請求-響應的經常使用方法是：GET 和 POST。
- GET - 從指定的資源請求數據
- POST - 向指定的資源提交要處理的數據
GET 基本上用於從服務器得到（取回）數據。註釋：GET 方法可能返回緩存數據。
POST 也可用於從服務器獲取數據。不過，POST 方法不會緩存數據，而且經常使用於連同請求一塊兒發送數據
與get()方法相比，post()方法多用於以POST方式向服務器發送數據，服務器接收到數據以後，進行處理，並將處理結果返回頁面
語法：$.post(URL,data,callback);
//get()方式
$.ajax({
url:'./data/index.txt',
type:'get',
dataType:'text',
success:function(data){
$('p').html(data);
},
error:function(error){
console.log(error)
}
//post()方式
$.ajax({
url:'/index',
type:'post',
data:{name:'張三',age:12},
success:function(data){
$('p').html(data);
},
error:function(error){
console.log(error)
}
狀態類 Bootstrap 必背的類名，經常使用
經過這些狀態類能夠爲行或單元格設置顏色。
| Class |
描述 |
.active |
鼠標懸停在行或單元格上時所設置的顏色 |
.success |
標識成功或積極的動做 |
.info |
標識普通的提示信息或動做 |
.warning |
標識警告或須要用戶注意 |
.danger |
標識危險或潛在的帶來負面影響的動做 |
ajax是什麼
AJAX 是一種在無需從新加載整個網頁的狀況下，可以更新部分網頁的技術。
AJAX = 異步 JavaScript 和 XML。
AJAX 是一種用於建立快速動態網頁的技術。
經過在後臺與服務器進行少許數據交換，AJAX 可使網頁實現異步更新。這意味着能夠在不從新加載整個網頁的狀況下，對網頁的某部分進行更新。
slibling的用法。改變按鈕點擊的變紅色，其它變透明色。
<button>按鈕1</button>
<button>按鈕2</button>
<button>按鈕3</button>
<button>按鈕4</button>
<script type="text/javascript" src="jquery-3.3.1.js"></script>
<script type="text/javascript">
$(function(){
// 內部遍歷
$('button').click(function(event) {
// 選項卡
$(this).css('background','red').siblings('button').css('background','transparent');
console.log($(this).css('background','red'));
});
});
18. 如何找到全部 HTML select 標籤的選中項？
$('[name=NameOfSelectedTag] :selected')