wed開發基礎--練習題

時間 2019-11-20

標籤 wed 開發基礎練習題简体版

原文原文鏈接

1、HTML部分

本小節重點：熟練使用div+span佈局，知道div和span的語義化的意思熟悉對div、ul、li、span、a、img、table、form、input標籤有深入的認知，javascript

初期也瞭解他們，知道他們在瀏覽器上的初始化樣式是怎樣的。熟練網站佈局結構好比 header區域，側邊欄區域，內容區域，腳部區域css

一、XHTML和HTML有什麼區別html

HTML是一種基本的WEB網頁設計語言，XHTML是一個基於XML的置標語言

下面說一說HTML5和XHTML在語法上的區別：

XHTML 元素必須被正確地嵌套。
XHTML 元素必須被關閉。
標籤名必須用小寫字母。
XHTML 文檔必須擁有根元素。
----------------------------------

XHTML 區分大小寫前端

XHTML 屬性值要用雙引號 html5

XHTML 用 id 屬性代替 name 屬性 java

XHTML 特殊字符的處理 jquery

二、前端頁面有哪幾層構成，分別是什麼?做用是什麼?linux

1, 結構層 Html(頁面結構內容，骨架) 表示層 2, CSS（網頁的樣式和外觀） 3, js（頁面的行爲-----實現網頁的交互，動畫效果）

三、請描述一下 cookies，sessionStorage 和 localStorage 的區別？git

cookies 英 /'kʊkiz/ 美 /'kʊkiz/ n餅乾 session 英 /'seʃ(ə)n/ 美 /'sɛʃən/ 會議 storage 英 /'stɔːrɪdʒ/ 美 /'stɔrɪdʒ/ n. 存儲；倉庫；貯藏所
會話級別的存儲---本地存儲 ------------------------------------------------------------------------------------------- cookie在瀏覽器和服務器間來回傳遞。
而sessionStorage和localStorage不會自動把數據發給服務器，僅在本地保存
sessionStorage和localStorage的存儲空間更大； 
有更多豐富易用的接口；各自獨立的存儲空間；

Web Storage的概念和cookie類似，區別是它是爲了更大容量存儲設計的

四、form表單中input標籤的readonly和disabled屬性有何區別？github

readonly=「readonly」是隻讀，不能夠修改， disabled=「disabled」是禁用，整個文本框是顯示灰色狀態

Readonly只針對input(text / password)和textarea有效，而disabled對於全部的表單元素都有效，

可是表單元素在使用了disabled後，當咱們將表單以POST或GET的方式提交的話，這個元素的值不會被傳遞出去

而readonly會將該值傳遞出去（readonly接受值更改能夠回傳，disable接受改但不回傳數據）。

-----------------------------------------------------------------------------------

form 中method是數據傳遞的方式，action是與後臺數據庫提交的

<form> 標籤用於爲用戶輸入建立 HTML 表單。

五、內聯標籤有哪些？塊級標籤有哪些？

行內標籤：a(超連接) b(加粗) img em br i span input select

行內元素在一行內展現，不能設置寬高，它的寬高是根據內容去填充
display:inline-block，設置行內元素設置寬高

block	此元素將顯示爲塊級元素，此元素先後會帶有換行符。

block

此元素將顯示爲塊級元素，此元素先後會帶有換行符。


塊級標籤：div p h1-h6 form ul dl ol table

<li> 標籤訂義列表項目。

<li> 標籤可用在有序列表 (<ol>) 和無序列表 (<ul>) 中。

六、內聯標籤和塊級標籤有什麼區別？

內聯標籤不能夠設置寬高，不獨佔一行； 塊級標籤能夠設置寬高，獨佔一行。

七、簡述form標籤的功能和屬性？

功能：表單用於向服務器傳輸數據，從而實現用戶與Web服務器的交互 屬性： 1，action: 表單提交到哪.
通常指向服務器端一個程序,程序接收到表單提交過來的數據（即表單元素值）做相應處理； 2，method: 表單的提交方式 post/get默認取值就是get。

八、圖形標籤是什麼，它的主要屬性有哪些？

<img>標籤 主要屬性： src: 要顯示圖片的路徑. alt: 圖片沒有加載成功時的提示. title: 鼠標懸浮時的提示信息. width: 圖片的寬 height:圖片的高 (寬高兩個屬性只用一個會自動等比縮放.)

九、input標籤都有哪些類型？

type： text 文本輸入框 password 密碼輸入框 radio 單選框 checkbox 多選框 submit 提交按鈕 button 按鈕(須要配合js使用.) file 提交文件

十、input標籤都有哪些屬性？

name：表單提交項的鍵
value：表單提交項的值.對於不一樣的輸入類型，value 屬性的用法也不一樣
checked：radio 和 checkbox 默認被選中
readonly：只讀. text 和 password
disabled：對所用input都好使

十一、src和href的區別？

src指向外部資源的位置, 用於替換當前元素, 好比js腳本, 圖片等元素
href指向網絡資源所在的位置, 用於在當前文檔和引用資源間肯定聯繫, 加載css

十二、選擇器中 id，class有什麼區別？

在網頁中 每一個id名稱只能用一次，class能夠容許重複使用

其餘習題

div標籤是塊級標籤，單獨一行，能夠做爲其餘標籤的容器，沒有特定含義
span是內聯標籤，能夠做爲文本內容的容器，沒有特定含義

1. 查詢一下對div和span標籤的理解

不一樣的標籤有本身含義，通常搭建網站的結構的時候須要用到標籤的嵌套來完成不一樣的結構
規則
1.塊元素能夠包含內聯元素或某些塊元素，但內聯元素卻不能包含塊元素，它只能包含其它的內聯元素
2. 塊級元素不能放在<p>裏面
3. 有幾個特殊的塊級元素只能包含內嵌元素，不能再包含塊級元素，這幾個特殊的標籤是h一、h二、h三、h四、h五、h六、p、dt
4. li 內能夠包含 div 標籤
5.塊級元素與塊級元素並列、內嵌元素與內嵌元素並列

2. 如何理解標籤的嵌套結構？它們的規則是怎樣的？

首先分析京東的原型圖（UI提供），而後根據尺寸和外觀去構建塊級標籤

3. 若是給你一個網站，讓你只用div來畫塊的畫，如何畫？好比京東

HTML標籤：表明整篇文檔是一個網頁文件。
HEAD標籤：用於描述網頁的頭部信息。
BODY標籤：用於描述要顯示的內容信息。

4. 一個html文件包含幾部分？

在html中p標籤裏只能夠放置文本，圖片和表單，其餘的標籤p標籤是不能識別的

5. 當使用p標籤的使用，應該注意什麼？

form標籤自己是塊級標籤，它的做用通常在於和後端作數據交互向服務器提交數據，提交表單驗證用戶帳戶信息或密碼等
form標籤的屬性：
1.action定義表單被提交時發生的動做，提交給服務器處理程序的地址
注意：經過 與服務器端人員交流 獲得 action 的地址默認，提交給本頁
2.method
做用：定義表單提交數據時的方式
取值：
1、get (默認值)
意義爲：獲得，獲取
場合：向服務器要數據時使用
特色：
一、明文提交,所提交的數據時能夠顯示在地址欄上的-安全性較低
二、提交數據有大小限制-最大爲2KB
2、post
意義：郵寄，郵遞
場合：將數據提交給服務器處理時使用(有保密類型數據時)
特色：
一、隱式提交-所提交的內容是不會顯示在地址欄上的，安全性較高
2、無大小限制
3、enctype
做用：編碼類型，即表單數據進行編碼的方式
容許表單將什麼樣的數據提交給服務器
取值：
一、application/x-www-form-urlencoded
默認值
容許將 普通字符，特殊字符，都提交給服務器，不容許提交 文件
二、multipart/form-data
容許 將文件提交給服務器
三、text/plain
只容許提交普通字符。特殊字符，文件等都沒法提交
4、name
定義 表單的名稱

6.闡述一下form標籤的做用？form標籤的屬性有哪些

必須是li，ul子元素不容許放置除除li外的任何元素

7.ul的孩子元素必定是li麼？

網頁佈局的合理化。
有利於和搜索引擎創建良好溝通，有了良好的結構和語義你的網頁內容天然容易被搜索引擎抓取。
方便其餘設備解析，如屏幕閱讀器、盲人閱讀器、移動設備等。
便於團隊開發和維護。

8. 如何理解語義化的標籤？

https://www.jianshu.com/p/04e541183329
根元素:<html>
文檔元數據:<link>、<meta>、<style>、<style>
內容分區:<header>、<nav>、 <section>、<aside> 、<footer> 、<h1>~<h6> 、<article> 、<address>、<hgroup>
文本內容:<main>、<div>、<p>、<pre>、<ol>、 <ul>、<li>、<dl> 、<dt>、<dd>、<figure> 、<figcaption>、<blockquote> 、<hr>
內聯文本語義:
<span>、<a>、<strong>、<em>、<q>、<br>、<mark>、<code>、<abbr>、<b>、<bdi>、<bdo>、<sub>、<sup>、<time>、<i>、<u>、<cite>、<data>、<kbd>、<nobr>、<s>、<samp>、<tt>、<var>、<wbr>、<rp>、<rt>、<rtc>、<ruby>
圖片和多媒體:<img><audio> <video><track><map><area>
內嵌內容:<iframe>、<embed>、<object> 、<param>、<picture>、<source>
腳本:<canvas>、<noscript>、<script>
編輯標識:<del>、<ins>
表格內容:<table>、<caption>、<thead>、<tbody>、<tfoot>、<tr>、、<col><colgroup>、<th>、<td>
表單:<form> 、<input>、<textarea> 、<label>、<button>、<datalist>、<fieldset>、<legend>、<meter>、<optgroup>、<option>、<output>、<progress>、<select>
交互元素<details>、<summary>、<dialog>、<menu>
Web 組件:<slot>、<template>
過期的和棄用的元素:<acronym><applet><basefont><bgsound><big><blink><center><command><content><dir><element><font><frame><frameset><image><isindex><keygen><listing><marquee><menuitem><multicol><nextid><nobr><noembed><noframes><plaintext><spacer><strike><shadow><tt><xmp>

9. 標籤的分類

實現百度註冊頁面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
       #name,#phone,#pwd{
           width: 400px;
           height: 30px;
       }
       #pwd{
           margin-left: 20px;
       }
       #pwd2{margin-left: 5px;height: 30px}
       .btn{margin-left: 110px;height: 35px;}
       .login form div{
           padding: 10px;
       }
        .submit{
            height: 40px;
            width: 400px;
            margin-left: 45px;
           background-color: #2aabd2;
        }


        .checkbox{margin-left: 45px}
    </style>
</head>
<body>
    <div class="login">
        <form>
            <div>
                <label for="name">用戶名</label>
               <input id="name" type="text" placeholder="請設置用戶名">
            </div>
            <div>
                <label for="phone">手機號 </label>
                <input id="phone" type="number" placeholder="可用於登陸和找回密碼">
            </div>
            <div>
                <label for="pwd">密碼</label>
                <input id="pwd" type="password" placeholder="請設置登陸密碼">
            </div>
            <div>
                <label for="pwd2">驗證碼</label>
               <input id="pwd2" placeholder="請輸入驗證碼">
              <input class="btn" type="button" value="獲取短信驗證碼">
            </div>
            <div class="checkbox">
                <input type="checkbox">閱讀並接受
                <span><a>《百度用戶協議》</a>及<a>《百度隱私權保護聲明》</a></span>
            </div>
            <div>
                <input class="submit" type="submit" value="註冊">
            </div>
        </form>
    </div>
</body>
</html>

常規方法

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3個meta標籤*必須*放在最前面，任何其餘內容都*必須*跟隨其後！ -->
    <title>登陸界面</title>

    <!-- Bootstrap -->
     <link rel="stylesheet" type="text/css" href="./bootstrap-3.3.7/css/bootstrap.css">
     <!--[if lt IE 9]>
      <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
      <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->

    <style type="text/css">
      #pwd{margin-left: 13px;height: 33px;border-radius:6px}
      #pwd2{height: 33px;margin-left: 5px;border-radius:6px}
        button[type='submit']{
            width: 290px;
            height: 30px;
            background-color: #2aabd2;
        }
       .checkbox{}

    </style>
</head>
<body>

    <!--採用BootStrap模塊-->
    <form class="form-horizontal">
  <div class="form-group">
    <label for="inputEmail" class="col-sm-2 control-label">用戶名</label>
    <div class="col-sm-2">
      <input type="email" class="form-control" id="inputEmail" placeholder="用戶名">
    </div>
  </div>
  <div class="form-group">
    <label for="name" class="col-sm-2 control-label">手機號</label>
    <div class="col-sm-2">
      <input type="email" class="form-control" id="name" placeholder="可用於登陸和找回密碼">
    </div>
  </div>
  <div class="form-group">
    <label for="inputPassword3" class="col-sm-2 control-label">Password</label>
    <div class="col-sm-2">
      <input type="password" class="form-control" id="inputPassword3" placeholder="請輸入登陸密碼">
    </div>
  </div>

   <div class="form-group ">
    <label for="pwd" class="col-sm-2 control-label">驗證碼</label>
      <input type="password"  id="pwd" placeholder="請輸入驗證碼" >
      <input type="button"  id="pwd2" value="獲取短信驗證碼">

  </div>


  <div class="form-group">
    <div class="col-sm-offset-2 col-sm-2">
      <div class="checkbox">
        <label>
          <input type="checkbox">閱讀並接受<span><a>《百度用戶協議》</a>及<a>《百度隱私權保護聲明》</a></span>
        </label>
      </div>
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
      <button type="submit" class="btn btn-default">Sign in</button>
    </div>
  </div>
</form>

</body>
</html>

採用bootstrap模塊

-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

2、CSS部分

一、css的基本語法？

  1.選擇器；2.聲明=屬性+值；

二、css的引入方式有哪些？

2、css的引入：
    1.內嵌式
        通常不寫內嵌式，之後很差維護
        <h1 style="font-size: 10px;color: yellow">我是h1路飛學城</h1>
    2.內鏈式
        <style type="text/css">
            h2{font-size:30px;color:red;}
        </style>
    3.外鏈式
        連接式
            link css 同時加載的！
            <link rel="stylesheet" type="text/css" href="./css/index.css">
        導入式
            實際用的不多，先加載html，在加載css
            import 是css2.1特有的，對於不兼容css2.1的瀏覽器是無效的eg:IE5如下
            <style type="text/css">
                @import url('./css/index.css');
            </style>
            注意：@import url()必須寫在文件最開始的位置。
        連接式與導入式的區別：
            一、<link/>標籤屬於XHTML,@import是屬性css2.1
            二、使用<link/>連接的css文件先加載到網頁當中，再進行編譯顯示
            3、使用@import導入的css文件，客戶端顯示HTML結構，再把CSS文件加載到網頁當中
            4、@import是屬於CSS2.1特有的，對於不兼容CSS2.1的瀏覽器來講就是無效的

    優先級：內嵌式 > 內鏈式 > 外鏈式

有3種引入方式

三、css的選擇器有哪些？

3、選擇器：
    1.通配符選擇器
        *{
            padding:0;
            margin:0;
            color:red;
        }
    2.標籤選擇器
        h1{
            color:red;
        }
        img{
            width:900px;
        }
    3.id選擇器 (父盒子不設高度，子內容填充)
        #container{
            width:900px;
            margin:0 auto;
            
        }
    4.類選擇器
        .content{
            width:900px;
            background-color:red;
        }
    5.子代選擇器 (選擇器之間用 > )
        ul>li{
            color:red;
        }
    6.後代選擇器 (選擇器之間用 空格)
        ul a{
            color:green;
        }
    7.羣組選擇器 (中間用,)
        .title,.content,.footer{
            width:900px;
            margin:0 auto;
            background-color:red;
            border:1px solid red;
        }
    8.交集選擇器 (選擇器之間不能有空格，第一個標籤必須是標籤選擇器，第二個標籤能夠是id或者類選擇器)
        p.p1{
            color:red;
        }
        p#title1{
            font-size:30px;
            color:red;
        }
    9.毗鄰選擇器 (選擇器之間用 +  緊跟着h3標題的標籤)
        h3+p{
            color:red;
        }
    10.兄弟選擇器 (選擇器之間用~)
        h3~p{
            color:red;
        }
    11.屬性選擇器 ( ^ 以...開頭，$ 以...結尾, * 包含..., ~ 有多個值中的其中一個 )
        [class="baidu"]{
            color:red;
        }
        [class^="btn"]{
            color:yellow;
            font-size:12px;
        }
        [class$="ault"]{
            font-size:12px;
            color:red;
        }
        [class]{
            color:red;
        }
        [class*='baidu']{
            color:red;
        }
        [class~='baidu']{
            color:red;
        }
        input[input="text"]{
            background-color:red;
        }
    css樣式優先級：
        行內樣式 > 內部樣式表 > 外部樣式表
        ID選擇器 > 類選擇器 > 標籤選擇器

選擇器的種類

四、css僞類的做用？

CSS 僞類用於向某些選擇器添加特殊的效果。

    a:link{ background-color: blue;}   超連接  未被訪問時的狀態
    a:hover{ color: green;}                    鼠標懸停時的狀態
    a:visited{ color: yellow;}                 鼠標單擊時的狀態
    a:active{ color:blue;}                     鼠標不鬆手的狀態
    input:focus{ background-color:red;}        獲取焦點時的狀態

經常使用於超連接選擇器a

CSS 僞元素用於向某些選擇器設置特殊效果。

標籤選擇器
h1:after
  {
  content:url(logo.gif);
  }

五、什麼是css優先級，其基本規則是什麼？

CSS優先級，便是指CSS樣式在瀏覽器中被解析的前後順序。 基本規則： 行內樣式 > 內部樣式表 > 外部樣式表 ID選擇器 > 類選擇器 > 標籤選擇器

六、CSS隱藏元素的幾種方法（至少說出三種）

https://www.zhangxinxu.com/wordpress/2012/02/css-overflow-hidden-visibility-hidden-disabled-use/

在CSS中，讓元素隱藏（指屏幕範圍內肉眼不可見）的方法不少，有的佔據空間，有的不佔據空間；有的能夠響應點擊，有的不能響應點擊

{ display: none; /* 不佔據空間，沒法點擊 */ }
{ visibility: hidden; /* 佔據空間，沒法點擊 */ }
{ position: absolute; clip:rect(1px 1px 1px 1px); /* 不佔據空間，沒法點擊 */ }
{ position: absolute; top: -999em; /* 不佔據空間，沒法點擊 */ }
{ position: relative; top: -999em; /* 佔據空間，沒法點擊 */ }
{ position: absolute; visibility: hidden; /* 不佔據空間，沒法點擊 */ }
{ height: 0; overflow: hidden; /* 不佔據空間，沒法點擊 */ }
{ opacity: 0; filter:Alpha(opacity=0); /* 佔據空間，能夠點擊 */ }
{ position: absolute; opacity: 0; filter:Alpha(opacity=0); /* 不佔據空間，能夠點擊 */ }

View Code

七、CSS清除浮動的幾種方法（至少兩種）

1、給父盒子設置高度
2、clear:both
3、僞元素清除法
4、overflow：hidden
推薦使用：
overflow：hidden
-----------------------------------------
clear：both
clear：意思就是清除的意思。

有三個值：
left：當前元素左邊不容許有浮動元素
right：當前元素右邊不容許有浮動元素
both：當前元素左右兩邊不容許有浮動元素
給浮動元素的後面加一個空的div，而且該元素不浮動，而後設置clear：both。
 <ul>
            <li>Python</li>
            <li>web</li>
            <li>linux</li>
            <!-- 給浮動元素最後面加一個空的div 而且該元素不浮動 ，而後設置clear:both  清除別人對個人浮動影響-->
            <!-- 內牆法 -->
            <!-- 平白無故加了div元素  結構冗餘 -->
            <div class="clear"></div>
-------------------------------------------------------------------
僞元素清除法(經常使用)
給浮動子元素的父盒子，也就是不浮動元素，添加一個clearfix的類，而後設置

.clearfix:after{
    /*必需要寫這三句話*/
    content: '.';
    clear: both;
    display: block;
}

4種常見的

八、介紹一下CSS的盒子模型？

有兩種， IE 盒子模型和標準 W3C 盒子模型； IE的content部分包含了 border 和 pading; 盒模型： 內容(content)、填充(padding)、邊界(margin)、 邊框(border)

九、display:none和visibility:hidden的區別是什麼？

visibility：hidden----將元素隱藏，可是還佔着位置    
display：none----將元素的顯示設爲無，不佔任何的位置

十、設置一個div的最小寬度爲100像素，最大高度爲50像素

min-width：100px; max-height：50px;

十一、在編寫css樣式的時候，若是想要設置標記容器和主容器之間的補白，用什麼來表示？

marker-offset

十二、CSS屬性是否區分大小寫？

不區分。（HTML, CSS都不區分，但爲了更好的可讀性和團隊協做，通常都小寫，而在XHTML 中元素名稱和屬性是必須小寫的。）

1三、對行內元素設置margin-top 和margin-bottom是否起做用？對內聯元素設置padding-top和padding-bottom是否會增長它的高度？

不起做用。（須要注意行內元素的替換元素img、input，他們是行內元素，可是能夠爲其設置寬高，而且margin屬性也是對其起做用的，有着相似於Inline-block的行爲）
img input 行內塊元素 能夠設置；

1四、screen關鍵詞是指設備的物理屏幕大小仍是指瀏覽器的視窗。

瀏覽器的視窗

1五、表示顏色的三種方法:

單詞、rgb表示法、十六進制表示法
rgb:紅色 綠色 藍色 三原色

其餘題目

1.基本選擇器：標籤選擇器、類選擇器、ID選擇器、通用選擇器；
2.組合選擇器：後代選擇器（以空格分割）、子元素（兒子）選擇器（以>分割）、相鄰兄弟（毗鄰）選擇器（以+分割）、兄弟（弟弟）選擇器（~）
3.屬性選擇器： ID、class屬性，元素的特定屬性選擇元素。[class='值']、 [class^='開頭的值']、 [class$='結尾的值']、[title*="hello"]、表單input[type="text"]
4.分組選擇器：在多個選擇器之間用，分割；如div,p{  }
5.僞類選擇器：沒有訪問的超連接a標籤樣式a:link{ }、訪問過的超連接a標籤樣式a：visited { }、鼠標懸浮a：hover{ }、鼠標點擊a：active{ }、獲取焦點input：focus{ }
6.僞元素選擇器：first-letter用於文本的首字母設置樣式如p：first-letter、before是在元素內容前面插入新內容如p：before、after用在元素的內容後面插入新內容

一、css選擇器

類選擇器是能夠將一類樣式須要相同的標籤做爲同同樣式來規範
對於大量須要類規劃的標籤可使用類選擇器
id選擇器能夠將須要獨立設置的（由於id必須是惟一值）樣式設爲單獨的標籤
對於有特殊要求的標籤須要單獨設置樣式的，或者是有動畫要求的，提供id給js去操做

2.分別闡述類選擇器和id選擇器的做用

1.可使用通配符選擇*{padding:0;margin:0}
2.能夠引用別人寫好的網頁格式化樣式去操做<link>

3.如何重置網頁樣式

每一個HTML元素均可以看做裝了東西的盒子
盒子具備寬度（width）和高度（height）
盒子裏面的內容到盒子的邊框之間的距離即填充（margin）
盒子自己有邊框（border）
而盒子邊框外和其餘盒子之間，還有邊界（margin）
border
border-top
border-bottom
border-left
border-right
border-width
border-color
border-style（邊框的線型）
padding（邊框內壁與內部元素之間的距離）
padding:1px 2px 3px 4px;（順序是上右下左）
padding:1px 2px;（上下/左右）
padding:1px 2px 3px;（上1px下3px左右2px）
padding-top
padding-bottom
padding-left
padding-right
margin（表明邊框外壁與其它元素之間的距離）
margin:1px 2px 3px 4px;（順序是上右下左）
margin:1px 2px;（上下/左右）
margin:1px 2px 3px;（上1px下3px左右2px）
margin-top
margin-bottom
margin-left
margin-right

4.對盒模型是怎麼理解的？它們的屬性有哪些？

簡單說，文檔流就是一條從左往右、從上往下佈局的流水線
文檔流指的是元素排版佈局過程當中，元素會自動從左往右，從上往下的流式排列。並最終窗體自上而下分紅一行行，並在每行中從左至右的順序排放元素

5.什麼是標準文檔流？

浮動可讓元素浮於文檔的上方，脫離文檔流
浮動顯示讓兩個元素並排顯示，而且兩個元素都能設置寬度和高度
浮動的特色
1.浮動會使元素脫離文檔流
2.浮動會使元素提高層級
3.浮動可使塊元素在一行排列，不設置寬高的時候，可使元素適應內容
4.浮動可使行內元素支持寬高
清除浮動的方式

1.給父元素固定高度。不靈活
2.在浮動元素最後加一個空的塊元素，且塊元素不浮動，設置其屬性爲clear：both    結構冗餘
3.僞元素清除法(經常使用)
給浮動子元素的父盒子，也就是不浮動元素，添加一個clearfix的類，而後設置

.clearfix:after{
    /*必需要寫這三句話*/
    content: '.';
    clear: both;
    display: block;
}

4.給父盒子 添加overflow:hidden屬性

6.浮動盒子的特色？浮動的好處？如何清除浮動？

CSS雪碧 即CSS Sprite，也有人叫它CSS精靈，是一種CSS圖像合併技術，該方法是將小圖標和背景圖像合併到一張圖片上，而後利用css的背景定位來顯示須要顯示的圖片部分
CSS 雪碧圖應用原理：
只有一張大的合併圖， 每一個小圖標節點如何顯示單獨的小圖標呢？

其實就是 截取 大圖一部分顯示，而這部分就是一個小圖標。
------------------------------------------------------------------------
1、減小圖片的字節
2、減小了網頁的http請求，從而大大的提升了頁面的性能
3、解決了網頁設計師在圖片命名上的困擾，只需對一張集合的圖片上命名就能夠了，不須要對每個小元素進行命名，從而提升了網頁的製做效率。
4、更換風格方便，只須要在一張或少張圖片上修改圖片的顏色或樣式，整個網頁的風格就能夠改變。維護起來更加方便。
-----------------------------------------------------------------------
缺點：
1）CSS雪碧的最大問題是內存使用
2）拼圖維護比較麻煩
3）使CSS的編寫變得困難
4）CSS 雪碧調用的圖片不能被打印
----------------------------------------------------------------------------
 .box1{
            width: 48px;  在（0，-528）座標處截取長寬爲48px的圖片
            height: 48px;
            background-image: url(./images/1.png);
            background-repeat: no-repeat;
            background-position: 0 -528px;
        }

7.精靈圖(雪碧技術)的好處是什麼？

tatic：默認值，沒有定位，元素出如今正常的流中（忽略 top, bottom, left, right 或者 z-index 聲明）。
relative：生成相對定位的元素，相對於其正常位置進行定位。元素的位置經過 "left", "top", "right" 以及 "bottom" 屬性進行規定。
fixed：元素框的表現相似於將 position 設置爲 absolute，不過其包含塊是視窗自己。
absolute：生成絕對定位的元素，相對於 static 定位之外的第一個父元素進行定位。
元素的位置經過 "left", "top", "right" 以及 "bottom" 屬性進行規定。
父元素相對定位，不影響自身位置定位的狀況下，提高層級，子元素絕對定位就會以父元素爲基準(父元素的左上角)

8.定位有幾種？闡述一下「父相子絕」定位是怎樣理解的？

1.設置了float浮動的標籤就會脫離文檔流
2.設置絕對位置能夠脫離文檔流(父相子絕)
3.設置fixed，可使標籤相對於瀏覽器的窗口定位
脫離文檔流就是不在html的默認排版裏

9.什麼樣的盒子脫離了文檔標準流？脫離文檔標準流的盒子的特色是怎樣的？

順序規則
若是不對節點設定 position 屬性, 位於文檔流後面的節點會遮蓋前面的節點

定位規則
若是將 position 設爲 static, 位於文檔流後面的節點依然會遮蓋前面的節點浮動, 因此 position:static 不會影響節點的遮蓋關係
若是將 position 設爲 relative (相對定位),
absolute (絕對定位) 或者 fixed (固定定位), 這樣的節點會覆蓋沒有設置 position 屬性或者屬性值爲 static 的節點, 說明前者比後者的默認層級高

參與規則
咱們嘗試不用 position 屬性, 但爲節點加上 z-index 屬性. 發現 z-index 對節點沒起做用

默認值規則
若是全部節點都定義了 position:relative. z-index 爲 0 的節點與沒有定義 z-index 在同一層級內沒有高低之分;
但 z-index 大於等於 1 的節點會遮蓋沒有定義 z-index 的節點; z-index 的值爲負數的節點將被沒有定義 z-index 的節點覆蓋.

從父規則
若是 A, B 節點都定義了 position:relative, A 節點的 z-index 比 B 節點大, 那麼 A 的子節點一定覆蓋在 B 的子節點前面

層級樹規則
可能你會以爲在 DOM 結構中的兄弟節點會拎出來進行比較並肯定層級, 其實否則

10.z-index的規則是怎樣的？

none    此元素不會被顯示。
block    此元素將顯示爲塊級元素，此元素先後會帶有換行符。
inline    默認。此元素會被顯示爲內聯元素，元素先後沒有換行符。
inline-block    行內塊元素。（CSS2.1 新增的值）
list-item    此元素會做爲列表顯示。
run-in    此元素會根據上下文做爲塊級元素或內聯元素顯示。
compact    CSS 中有值 compact，不過因爲缺少普遍支持，已經從 CSS2.1 中刪除。
marker    CSS 中有值 marker，不過因爲缺少普遍支持，已經從 CSS2.1 中刪除。
table    此元素會做爲塊級表格來顯示（相似 <table>），表格先後帶有換行符。
inline-table    此元素會做爲內聯表格來顯示（相似 <table>），表格先後沒有換行符。
table-row-group    此元素會做爲一個或多個行的分組來顯示（相似 <tbody>）。
table-header-group    此元素會做爲一個或多個行的分組來顯示（相似 <thead>）。
table-footer-group    此元素會做爲一個或多個行的分組來顯示（相似 <tfoot>）。
table-row    此元素會做爲一個表格行顯示（相似 <tr>）。
table-column-group    此元素會做爲一個或多個列的分組來顯示（相似 <colgroup>）。
table-column    此元素會做爲一個單元格列顯示（相似 <col>）
table-cell    此元素會做爲一個表格單元格顯示（相似 <td> 和 <th>）
table-caption    此元素會做爲一個表格標題顯示（相似 <caption>）
inherit    規定應該從父元素繼承 display 屬性的值。

11.display屬性值有哪些？分別描述他們的意思？

3、JavaScript

內接式
<script type="text/javascript">

</script>
外接式
<!--至關於引入了某個模塊-->
<script type="text/javascript" src = './index.js'></script>

一、js的引入方式有哪些？

1，聲明變量時不用聲明變量類型. 全都使用var關鍵字
2，一行能夠聲明多個變量.而且能夠是不一樣類型 
3，聲明變量時 能夠不用var. 若是不用var 那麼它是全局變量 
4，變量命名,首字符只能是字母,下劃線,$美圓符 三選一，餘下的字符能夠是下劃線、美圓符號或任何字母或數字字符且區分大小寫，x與X是兩個變量

二、如何在js中定義使用變量？

1，數字類型(number) 2，字符串類型(string) 3，布爾類型(boolean) 4，Null類型 5，Undefined類型

三、js的基本數據類型有哪些？

null是一個表示」無」的對象，轉爲數值時爲0； undefined是一個表示」無」的原始值，轉爲數值時爲NaN

四、Null和Undefined的區別？

1，算術運算符(+ - * / % ++ -- ) 2，比較運算符(> >= < <= != == === !==) 3，邏輯運算符(&& || ！) 4，賦值運算符(= += -= *= /=) 5，字符串運算符(+ 鏈接，兩邊操做數有一個或兩個是字符串就作鏈接運算)

五、js有哪些運算符？

number string Object function boolean underfind

六、js的typeof返回哪些數據類型？

```
shift()頭部刪除 pop()尾部刪除
Unshift()頭部添加 push()尾部添加

```

七、分別解釋數組方法pop()、push()、unshift()、shift()的功能？

Get和Post都是向服務器發送的一種請求，只是發送機制不一樣。


1. GET請求會將參數跟在URL後進行傳遞，而POST請求則是做爲HTTP消息的實體內容發送給WEB服務器。固然在Ajax請求中，這種區別對用戶是不可見的

二、GEt傳輸數據容量小，不安全，post傳輸數據內容大，更加安全；

八、ajax請求的時候get 和post方式的區別？

使用eval parse,鑑於安全性考慮 使用parse更靠譜

九、ajax請求時，如何解釋json數據？

事件代理: 本身完成不了當前的點擊事件，交給父級元素作這件事件
$('ul).on('click','.btn',function(){})
讓利用事件冒泡的原理，讓本身的所觸發的事件，讓他的父元素代替執行

十、事件委託是什麼？

添加：obj.appendChild()
刪除：obj.removeChild()
替換：obj.replaceChild()
插入：obj.insertBefore()

十一、添加刪除替換插入到某個節點的方法分別是什麼？

一段腳本只能讀取來自於同一來源的窗口和文檔的屬性，這裏的同一來源指的是主機名、協議和端口號的組合

十二、簡述一下什麼是javascript的同源策略？

this是js的一個關鍵字，隨着函數使用場合不一樣，this的值會發生變化。可是有一個總原則，那就是this指的是調用函數的那個對象。
this通常狀況下：是全局對象Global。 做爲方法調用，那麼this就是指這個對象

1三、簡述一下對This對象的理解。

function A(name){
    this.name = name;
    this.sayHello = function(){alert(this.name+」 say Hello!」);};
}
function B(name,id){
    this.temp = A;
    this.temp(name);        //至關於new A();
    delete this.temp;       
     this.id = id;   
    this.checkId = function(ID){alert(this.id==ID)};
}

1四、編寫一個b繼承a的方法

function stopBubble(e){
if (e && e.stopPropagation)
    e.stopPropagation()
else
    window.event.cancelBubble=true
}
return false

$(function(ev){
    //1.阻止事件冒泡
    ev.stopPropagation()
    //2.阻止默認事件 eg:href submit
    ev.preventDefault();
    //阻止了冒泡和默認
    return false;
});

1五、如何阻止事件冒泡和默認事件

核心( ECMAScript) , 文檔對象模型(DOM), 瀏覽器對象模型(BOM)

1六、瀏覽器端的js包括哪幾個部分？

用一次性定時器 setTimeout和 週期性定時器 setInterval

1七、定時器 js動畫有哪些實現方法？

優勢：
    1.控制能力很強，能夠單幀的控制、變換
    2.兼容性好，寫得好徹底能夠兼容IE6，且功能強大。
缺點：
    計算沒有css快，另外常常須要依賴其餘的庫。

1八、js動畫的優缺點？

jsonp（利用script標籤的跨域能力）跨域、
websocket（html5的新特性，是一種新協議）跨域、
設置代理服務器（由服務器替咱們向不一樣源的服務器請求數據）、
CORS（跨源資源共享，cross origin resource sharing）、
iframe跨域、
postMessage(包含iframe的頁面向iframe傳遞消息)

1九、跨域的幾種方式？

因爲3和2是整數，它們將直接相加。因爲7是一個字符串，它將會被直接鏈接，因此結果將是57。

20、3 + 2 +「7」的結果是什麼？

14題 js中的繼承問題：

http://www.cnblogs.com/fwei/p/6475973.html

其餘習題

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div>
        <p class="label">the best revenge is to make massive success</p>
    </div>
    <script type="text/javascript">
       //window.onload()入口函數 頁面加載完後再執行此代碼
        window.onload=function (ev) {
            function add() {
                var txt=document.getElementById('label');
                alert(typeof txt);// txt爲對象
                return txt.innerHTML
            }
            text=add();
            alert(text);
        }
    </script>

</body>
</html>

一、.聲明一個add函數，要求函數有返回值，並打印結果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <script type="text/javascript">
        var str='hello word';
        document.write(str.split('').reverse().join(''))
    </script>
</body>
</html>

2.對「hello world」進行翻轉處理要求變爲："dlorw olleh"

   //字面量的方式建立對象
       var peo={
           name:'alex',
           age:12,
           hobby:'game'
       };
      console.log(peo);

      //函數方法
      function peo2(name,age){
          var obj= new Object();
          obj.name=name;
          obj.age=age;
          return obj
      }
      var people=peo2('a','17');
      console.log(people);
------------------------------------------------------------
1.使用Object或對象字面量建立對象
2.工廠模式建立對象
3.構造函數模式建立對象
4.原型模式建立對象
-----------------------------------------------------------
JS中最基本建立對象的方式：

var student = new Object();
student.name = "easy";
student.age = "20";
-------------------------------------------------------------
字面量建立對象
var sutdent = {
  name : "easy",
  age : 20
};
--------------------------------------------------------------
工廠模式建立對象
unction createStudent(name, age) {
  var obj = new Object();
  obj.name = name;
  obj.age = age;
  return obj;
}

var student1 = createStudent("easy1", 20);
var student2 = createStudent("easy2", 20);
...
var studentn = createStudent("easyn", 20);

3.如何定義一個對象？使用字面量方式要求：該對象有名字、年齡、愛好多個

動畫效果應用
定時器
在js中有兩種定時器：
一次性定時器：setTimeout()
週期性循環定時器: setInterval()

----------------------------------------
  setTimeout(function () {
         console.log('aaaa')
     },5000);//以毫秒爲單位

     setInterval(function () {

         console.log('bbbbb')
     },2000)

4.setTimeout()和setInterval()的區別？如何理解他們的做用

1.innerText
2.value

5.對於標籤文本內容值的操做使用的是哪一個屬性？input輸入框呢？

var oDiv1 = document.getElementById("box1");      //方式一：經過id獲取單個標籤

var oDiv2 = document.getElementsByTagName("div")[0];     //方式二：經過 標籤名 得到 標籤數組，因此有s

var oDiv3 = document.getElementsByClassName("box")[0];  //方式三：經過 類名 得到 標籤數組，因此有s

6.獲取DOM的三種方式？

所謂標籤屬性,就是對標籤中（字面上看到的）屬性的操做。好比像每一個標籤中id，class，title、img標籤的src屬性和alt屬性、a標籤的href屬性、input標籤中的name、type屬性等等
-------------------------------------------------
            //步驟：
            //1.獲取事件源
            //2.綁定事件
            //3.書寫事件驅動程序
--------------------------------------------------
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        div{width: 100px;height: 100px;background-color: #2aabd2;margin-top: 10px;text-align: center}
    </style>
</head>
<body>
    <div class="center" id="name">
        中國
    </div>
    <div class="label">
        人民
    </div>
    <script type="text/javascript">
        var obj=document.getElementById('name');
        //設置標籤屬性
        obj.onmouseover=function () {
            //獲取屬性
            console.log(this.getAttribute('id'));
        };
        obj.onmouseout = function(){
            //設置標籤屬性屬性
                this.setAttribute('id', './images/image.png');

            };
        // 得到的是數組，注意和id的區別
        var obj2=document.getElementsByClassName('label')[0];
        obj2.onclick=function () {
            console.log(this.getAttribute('class'))
        }
    </script>
</body>
</html>

7.如何設置標籤屬性的值？好比類名如何設置？如何設置多個類型

----------------------------------------------------------------------------------------------------------------------------------------------------------------

8.列舉你知道的js事件

-----------------------------------------------------------------------------------------------------------------------------------------------------

所謂樣式屬性，就是對以前所講解的style標籤中的屬性進行操做，而且經過js控制盒模型的屬性（width,height等），控制盒子的顯示隱藏（display:none|block）,控制盒子的顏色切換（background：red|green）等等

首先，你們明確一點，你是要操做文檔對象了，要遵循事件三步走

獲取事件源
事件
事件驅動程序
---------------------------------------------------------------------------------
若是是className是數組  -----〉 [0]
<div id='box'></div>
<script>
    window.onload = function(){
        //1.獲取事件源(事件對象，在文檔中一切的標籤都是對象)
        var oDiv = docuement.getElementById('box');

        //2.事件
        oDiv.onclick = function(){
            //3.事件驅動程序  ps:記得 全部的style中使用的像margin-left 在js操做時都是用marginLeft屬性進行賦值
            oDiv.style.backgroundColor = 'yellow'；
        }
    };

</script>

9.如何設置樣式屬性(css操做)？好比設置該div的背景顏色爲紅色

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        .abc button{
            width: 50px;height: 50px;
        }
    </style>
</head>
<body>
    <div class="abc">
        <button id="btn" onclick="createp()">添加</button>
        <button id="btn2" onclick="del()">刪除</button>
    </div>
</body>
    <script type="text/javascript">
      function createp() {
          var p=document.createElement('p');
          var div=document.getElementsByClassName('abc')[0];
          p.innerHTML='alexsb';
          div.appendChild(p)
      }
      function del() {

          div2=document.getElementsByClassName('abc')[0];
          div2.removeChild(div2.lastChild)
      }

    </script>
</html>

10.使用DOM操做，建立一個p標籤，設置內容爲alexsb，將p標籤插入到div中。而後點擊某個刪除按鈕，移除當前建立的p標籤（練習dom的建立，修改內容，追加，刪除）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        #btn{width: 100px;height: 100px}
    </style>
</head>
<body>
    <button id="btn" onclick="opennew()">打開新網站</button>
    <script type="text/javascript">
        function opennew() {
            window.open(url='http://www.baidu.com')
        }
    </script>
</body>
</html>

11.如何打開一個新的網站，好比百度主頁

4、jQuery部分

jQuery是一個快速的，簡潔的javaScript庫，使用戶能更方便地處理HTMLdocuments、events、實現動畫效果，而且方便地爲網站提供AJAX交互

一、jQuery是什麼？

一、輕量級。jQuery很是輕巧，採用UglifyJS（http://github.com/mishoo/UglifyJS）壓縮後，大小保持在30KB左右。
2、強大的選擇器。
     容許開發者使用從CSS1-CSS3幾乎全部的選擇器，以及jQuery首創的高級而複雜的選擇權。
3、出色的DOM操做的封裝。

     jQuery封裝了大量經常使用的DOM操做，使開發者在編寫DOM操做相關程序的時候，更駕輕就熟。

4、可靠的事件處理機制
5、完善的Ajax
 jQuery將全部的Ajax操做封裝到一個函數$.ajax()裏，使得開發者處理Ajax的時候可以專心處理業務邏輯而無需關心複雜的瀏覽器兼容性和XMLHttpRequest對象的建立和使用的問題。
6、不污染頂級變量。

7、出色的瀏覽器兼容性

8、鏈式操做方式

     對發生在同一個jQuery對象上的操做，能夠直接連寫而無重複獲取對象。

9、隱式迭代

     當想找到帶有「.myclass」類的所有元素，並將其隱藏，無需循環遍歷每個返回的元素。

10、行爲層與結構層的分離

     開發者可使用jQuery選擇器選中元素，而後直接給元素添加事件。使各個方面的開發人員各司其職，互不干涉。

11、豐富的插件支持

12、完善的文檔

1三、開源

二、jQuery的優點是什麼？

jQuery 對象就是經過jQuery包裝DOM對象後產生的對象。jQuery 對象是 jQuery 獨有的. 若是一個對象是 jQuery 對象, 那麼它就可使用 jQuery 裏的方法: $(「#test」).html()

三、什麼是jQuery對象？

```
1.基礎選擇器
id選擇器 $('#brother').css('color','red');
標籤選擇器 $('a').css({'color':'green','font-size':'24px'});
類選擇器 $('.li3').css('background','yellow');
通配符選擇器 console.log($(''));
$('').html(''); // 清空整個界面的dom元素

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()

四、jQuery都有哪些選擇器？

    //獲取第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')

五、簡述一下jQuery的篩選器的分類，分別簡單舉例介紹一下。

其實美圓符號$只是」jQuery」的別名，它是jQuery的選擇器

六、jQuery的美圓符號$有什麼做用？

1，咱們能夠在頁面中使用多個document.ready()，但只能使用一次onload()。 2，document.ready()函數在頁面DOM元素加載完之後就會被調用，而onload()函數則要在全部的關聯資源（包括圖像、音頻）加載完畢後纔會調用。

七、body中的onload()函數和jQuery中的document.ready()有什麼區別？

delegate() 方法爲指定的元素(屬於被選元素的子元素)添加一個或多個事件處理程序，並規定當這些事件發生時運行的函數，使用 delegate() 方法的事件處理程序適用於當前或將來的元素(好比由腳本建立的新元素)。

$(selector).delegate(childSelector,event,data,function)

參數說明

childSelector 必需。規定要附加事件處理程序的一個或多個子元素。

event 必需。規定附加到元素的一個或多個事件。

由空格分隔多個事件值。必須是有效的事件。
 
data 可選。規定傳遞到函數的額外數據。

function 必需。規定當事件發生時運行的函數。

八、jQuery中的Delegate()函數有什麼做用？

$(「div」).css(「color」,」green」)

九、請用jQuery實現，在一個表單中，若是將全部的div元素都設置爲綠色。

hover()和toggle()都是jQuery中兩個合成事件。
hover()方法用於模擬光標懸停事件。         
toggle()方法是連續點擊事件。

十、jQuery中的hover()和toggle()有什麼區別？

formData:返回一個數組，能夠經過循環調用來校驗    
jaForm：返回一個jQuery對象，全部須要先轉換成dom對象
fieldValue：返回一個數組  
beforeSend()

十一、jquery表單提交前有幾種校驗方法？分別爲？

$(this) 返回一個 jQuery 對象，你能夠對它調用多個 jQuery 方法，好比用 text() 獲取文本，用val() 獲取值等等
this 表明當前元素，它是 JavaScript 關鍵詞中的一個，表示上下文中的當前 DOM 元素。你不能對它調用 jQuery 方法，直到它被 $() 函數包裹，例如 $(this)

十二、$(this) 和 this 關鍵字在 jQuery 中有何不一樣？

###### 知識點1：

語法：

```
$(selector).remove(); 

```
解釋：刪除節點後，事件也會刪除（簡言之，刪除了整個標籤）

```
$('ul').remove();

```
###### 知識點2：

語法：

```
$(selector).detach(); 

```
解釋：刪除節點後，事件會保留

```
 var $btn = $('button').detach()
 //此時按鈕能追加到ul中
 $('ul').append($btn)
```
###### 知識點3：

語法：

```
$(selector).empty(); 

```
解釋：清空選中元素中的全部後代節點

```
//清空掉ul中的子元素，保留ul
$('ul').empty()

1三、jQuery中 detach() 和 remove() 方法的區別是什麼？

這一般用於阻止事件向上冒泡。

    // 給按鈕綁定事件
            // 在全部的事件回調函數中 都會有默認的事件對象
            $('.father button').click(function(event){
                // 每一個事件都有 event原生js的事件對象
                console.log(event);
                alert($(this).text());

                // 阻止事件冒泡  避免$('.father') 被執行
                event.stopPropagation();
            });
-------------------------------------------------------------------------------
    $('.father').click(function(event){
                alert('父親被點擊了');
                // event.stopPropagation();
                console.log('哈哈哈哈哈');

                // 既阻止了默認事件 又阻止了冒泡
                return false;
            });

1四、你要是在一個 jQuery 事件處理程序裏返回了 false 會怎樣？

$('#ButtonToClick').click(function(){
    $('#ImageToHide').hide();
});

1五、如何在點擊一個按鈕時使用 jQuery 隱藏一個圖片？

ajax() 方法更強大，更具可配置性, 讓你能夠指定等待多久，以及如何處理錯誤。get() 方法是一個只獲取一些數據的專門化方法。

1六、jQuery.get() 和 jQuery.ajax()方法之間的區別是什麼?

1、父元素.append(子元素) 追加某元素 父元素中添加新的元素
var oli = document.createElement('li');
oli.innerHTML = '哈哈哈'
------------------------------------------------------------------
2、子元素.appendTo(父元素) 追加到某元素 子元素添加到父元素
3、prepend（） 前置添加， 添加到父元素的第一個位置
4、prependTo 後置添加，第一個元素添加到父元素中
5、父.after(子) 在匹配的元素以後插入內容 與 子.insertAfter(父)
6、父.before(子) 在匹配的元素以前插入內容 與 子.insertBefor(父)
2、複製操做
3、替換操做
4、刪除操做
1、remove() 刪除節點後，事件也會刪除（簡言之，刪除了整個標籤）

$('ul').remove();
2、detach() 刪除節點後，事件會保留

 var $btn = $('button').detach()
 //此時按鈕能追加到ul中
 $('ul').append($btn)
3、empty(): 清空元素中的全部後代節點

//清空掉ul中的子元素，保留ul
$('ul').empty()

1七、用jQuery如何將一個 HTML 元素添加到 DOM 樹中的？

$('[name=NameOfSelectedTag] :selected')
這段代碼結合使用了屬性選擇器和 :selected 選擇器，結果只返回被選中的選項。你可按需修改它，好比用 id 屬性而不是 name 屬性來獲取 <select> 標籤。

1八、如何找到全部 HTML select 標籤的選中項？

remove, 刪除節點，並刪除元素節點綁定的事件。
empty, 清空節點元素的內容，可是節點還存在，只是內容被清空，相似$().html(' ')

1九、remove() 和 empty()的區別？

addClass() 來追加樣式   
removeClass() 來刪除樣式    
toggle() 來切換樣式

20、在jquery中你是如何去操做樣式的？

其餘習題

執行時間不一樣
window.onload必須等到頁面內包括圖片的全部元素加載完畢後才能執行。

$(document).ready()是DOM結構繪製完畢後就執行，沒必要等到加載完畢。

編寫個數不一樣
window.onload不能同時編寫多個，若是有多個window.onload方法，只會執行一個

$(document).ready()能夠同時編寫多個，而且均可以獲得執行

1.js的入口函數和jquery入口函數的區別？

val() 方法返回或設置被選元素的值。
元素的值是經過 value 屬性設置的。該方法大多用於 input 元素。
若是該方法未設置參數，則返回被選元素的當前值

2.jquery的值的操做哪一個方法？

 // DOM對象轉換爲jQuery對象
    var box = document.getElementById('box');
    console.log($(box));

 // jQuery對象轉換爲DOM對象
    // 第一種方式
    console.log($('button')[0]);
    // 第二種方式
    // $('button').get(0)
    var isShow = true;
    $('button').get(0).onclick = function () {
        if(isShow){
            $('#box').hide();
            $(this).text('顯示');
            isShow = false;
        }else{
            $('#box').show();
            $(this).text('隱藏');
            isShow = true;
        }
    }

3.jquery和js對象如何轉化？

attr()方法是由js的setAttribute()方法封裝來的

4.jquery的html屬相操做是哪一個方法？你認爲是js中哪一個方法封裝來的？

1、插入操做
$('ul').append('<li>1233</li>')
2、複製操做
3、替換操做
$('h5').replaceWith('<a href="#">hello world</a>')
4、刪除操做
$('ul').remove();

5.列舉jquery的文檔操做的方法？以及他們的意思？

append的屬性依然存在，只是在原來的基礎上再後面增長屬性
可是addClass和removeClass則是增長和刪除屬性，若是刪除了，屬性就不存在了
簡單說就是一個是新增屬性，一個是增刪屬性

6.對一個元素顯示隱藏分別使用類控制(addClass和removeClass)和文檔操做(append())來實現,並描述一下他們的區別？

7.列舉jquery的篩選方法有哪些？重點

-----------------------------------------------------------------------------------------------------------------------------

8.jquery的事件有哪些？鼠標事件和表單事件

--------------------------------------------------------------------------

9 .mouseout和mouseover以及mouseenter和mouseleave的區別？

十、jQuery中ajax

AJAX = 異步的javascript和XML（Asynchronous Javascript and XML）

簡言之，在不重載整個網頁的狀況下，AJAX經過後臺加載數據，並在網頁上進行顯示。

經過 jQuery AJAX 方法，您可以使用 HTTP Get 和 HTTP Post 從遠程服務器上請求文本、HTML、XML 或 JSON - 同時您可以把這些外部數據直接載入網頁的被選元素中。

4、BootStrap

Bootstrap 是一個用於快速開發 Web 應用程序和網站的前端框架。Bootstrap 是基於 HTML、CSS、JAVASCRIPT 的。

一、什麼是 Bootstrap？

移動設備優先 瀏覽器支持 容易上手 響應式設計(自適應頁面) 它爲開發人員建立接口提供了一個簡潔統一的解決方案。 它包含了功能強大的內置組件，易於定製。 它還提供了基於 Web 的定製。 它是開源的。

二、爲何使用 Bootstrap？

1，基本結構：Bootstrap 提供了一個帶有網格系統、連接樣式、背景的基本結構。 2，CSS：Bootstrap 自帶如下特性：全局的 CSS 設置、定義基本的 HTML 元素樣式、可擴展的 class，以及一個先進的網格系統。 3，組件：Bootstrap 包含了十幾個可重用的組件，用於建立圖像、下拉菜單、導航、警告框、彈出框等等。 4，JavaScript 插件：Bootstrap 包含了十幾個自定義的 jQuery 插件。您能夠直接包含全部的插件，也能夠逐個包含這些插件。 5，定製：您能夠定製 Bootstrap 的組件、LESS 變量和 jQuery 插件來獲得您本身的版本。

三、Bootstrap 包含哪些內容？

3333