html中的 button,input-button, image, input-image的區別

hmtl中 爲了驗證 form的 action提交屬性, 是指 表單提交到的 頁面, 能夠是任意 性質的頁面, 如:html頁面, php頁面, asp頁面等均可以, 實際在測試的時候, 能夠就寫 提交到的 html頁面, 省得去部署安裝phpjavascript

可是 ,若是form表單 中的action屬性=""或者不寫, 這時提交到的 目的頁面仍是 該頁面本身! 不是其餘, 也不是沒有處理者, 提交後本地頁面中的 text文本域中原來輸入的內容沒有 改變? 這是由於 緩存的緣由, 而ctrl_F5 則看到沒有利用緩存, 而是從源文件 / 原文件刷新的了....

在jquery的 click, focus , change ,hover等事件處理函數中, 出入函數的 是 this參數, 可是, 你要怎麼使用, 那是你本身的須要, 你能夠直接使用this, 也可使用$(this).

javascript的裝載和執行特性

  • Javascript的裝載和執行, 一般來講,瀏覽器對於Javascript的運行有兩大特性:1)載入後立刻執行(即便是對於異步的加載),2)執行時會阻塞頁面後續的內容(包括頁面的渲染、其它資源的下載). --- 你能夠利用js的這兩個特性, 來實現某種功能.... 因而,若是有多個js文件被引入,那麼對於瀏覽器來講,這些js文件被被串行地載入,並依次執行php

  • 由於javascript可能會來操做HTML文檔的DOM樹,因此,瀏覽器通常都不會像並行下載css文件並行下載js文件,由於這是js文件的特殊性形成的。因此,若是你的javascript想操做後面的DOM元素,基本上來講,瀏覽器都會報錯說對象找不到。由於Javascript執行時,後面的HTML被阻塞住了,DOM樹時尚未後面的DOM結點。因此程序也就報錯了。css

因此對於jquery的 $(); 方法, 中間必定要用function(){...}, 由於這是$(document)對象 的ready 事件中 要執行的函數, 即:html

$(document).ready( function(){...});

簡寫成 $(function(){...});

======================================================== ===java

button和input-button

  1. button: 語義上就是一個按鈕,自己是一個行級元素, 可是若是放在 form表單後面, 因爲form自己是一個 塊級 元素, 因此, button放在form後將會在下一行.jquery

  2. 默認時,全部的input 元素都是 行級 元素, 因此都在一行, 排放在 form 表單容器中瀏覽器

  3. input button中, 按鈕上的文字, 是經過 value值來設置的, 而因爲 <button> A Button </button> button 自己是一個單獨的 標籤 元素, 因此它上面的文字, 是經過設置 button標籤中間 的文本 來顯式的 . 若是button標籤中 沒有包含文字,將顯示得很低很矮的一個小按鈕.緩存

  4. input button主要是 顯示默認的 文字 風格樣式, 而button標籤的用法, 主要是用來 顯示一些比較 複雜的內容, 如圖像等...dom

  5. 任何input 元素, 要產生 對form 有效果的 動做, 如 reset submit等, 都要放在 form 表單 標籤元素內, 不然, 跟form就沒有什麼關係了, 既然沒有關係, 那麼, 也就不能 對 form 產生 提交/重置等 操做影響了.異步

  6. form 表單內部的 button(由於在form外部的button 不會對form產生影響), 能夠有三種type: 普通的button, 提交的submit, 重置的 reset. 就具備相應的功能...固然, input type=button就只有 button一種 類型了...

================================================ ==

alert中如何換行? 由於alert方法中, 不支持html標籤, html標籤將按照 literally 字面上進行顯示, 不會被解析 因此 換行不能用 <br> 而是要用 \n 來表示.

<button> 標籤上如何顯式圖片? 這也就是 所謂的 "圖片按鈕". 不能經過button的屬性 url來實現, 而是 要經過 buttton 的 css樣式來實現. 實際上, 對於任何html元素來講, 都具備 均可以 經過css 的style樣式 ,來 規定元素 的背景顏色, 背景圖片, 和邊框 大小 寬高等樣式.... 因此圖片按鈕實際上只是一個普通的按鈕, 只是 給它加上了一個 背景圖片的 樣式而已! 能夠在圖片按鈕上添加 顯示文字 , 也能夠不添加文字, 顯示爲 所謂的 純粹的 圖片按鈕!!

  • 在jquery的選擇器, $(":button") 匹配的是全部的按鈕, 不論是form內部的, 仍是form外面 的, 不論是 input-button: <input type="button" >, 仍是 <button>...</button>. 實際上, html中的 button就這兩種形式, input-button和 標籤button.

關於寫尺寸的時候, 是否要寫px單位? 第一, html默認的單位就是px, 因此html中能夠不寫px.如 <table borde="3"> 是有效的; 第二, css中, 沒有默認的尺寸單位, 因此樣式屬性中的 數字後必定要加 px作單位, 不然這條css樣式是無效的, table { border: 1 solid #eee;} 將不會出現邊框...

要牢記jquery中 各個"選擇器, 過濾器, 方法函數"中的參數的類型 ,參數所用的 符號 就暗示了 該參數是什麼類型的, 如 :not(selector)not(expr| ele| fn) 中, 一樣是not, 可是expr表示必須是字符串, 要加引號的; ele表示是 dom元素, 要獲取dom元素, 能夠經過 $("selector")[index] 的方式得到 element. 而selector: 雖然在 過濾器 :not(selector)中, 能夠對selector不加引號, 可是 加上 引號也是 正確的. 總結: 對於選擇器, 除了document外, 其他的凡是出現 selector的地方, 都統一的加上引號, 若是外面是雙引號, 裏面就加上 單引號: $("span:not('.span1')")......

關於not函數和:not篩選器? 在 如後結構 <p> <span class="span1"> span1 </span> <span class="span2"> span2 </span> </p>中, 使用 alert( $("p: not('.span1')").text()); 本意是想過濾掉.span1, 可是結果老是 顯示 "span1 span2". 爲何? 由於not是用來對 前面篩選出來的 元素集合 根據not中的條件 進行過濾的, 因此, not過濾的老是 同種 元素的集合. 是在 多個 同類 元素中進行過濾. 前面那個結構中, 是 先選出 全部 p 標籤元素的 集合, 而後過濾. 這裏 只有一個 p標籤元素, 因此集合中就只有一個p元素. 要對這個p元素進行 不是.span1 類的 條件過濾, 因爲這個p沒有.span1的類, 因此最後, 老是會返回 這個p結構...因此老是顯是 span1 span2. 而不是span2. 要只是顯示span2, 應該是: alert( $("span: not('.span1')").text());

=================================================== ==

若是不用任何的button , submit, image圖像域, 還可使用手動的方式, 經過代碼的方式提交表單: $("要提交的表單").submit(); 即表單本身有一個 提交 方法submit(), 就是用來提交的

inputtype=submit 表單form沒有onsubmit事件?

沒有onsubmit事件?確實是沒有! 其實是submit按鈕的 click事件, 在這個按鈕單擊提交的時候, 首先是會引發form的"submit"事件,而後纔會去調用 form.submit()函數. 因此能夠在 onclick事件(實際上就是包含 了onsubmit事件, 是onsubmit的觸發源!) 處理函數中, 經過return false來取消 提交, 經過(默認的就是)return true來提交表單.

注意: 在click函數中 , 去調用函數validateForm, 經過return false/true來控制是否繼續提交表單.. 函數中,必定要 顯示的寫 return true 仍是 false, 不能是隻寫return, return默認的仍是返回true;

只有在type=submit時, 纔有 提交的可能, 不然, 若是隻是一個普通的按鈕,默認單擊時, 是沒有任何動做的.

對reset類型的按鈕, 理解reset的含義, 是要恢復到input type=text等 的 "初始狀態", 而不是清空input-text: recovery its original value, not empty.

普通f5刷新: 會保留你在表單input中填寫的數據, 可是由 js 執行產生的結果都將消失, 若是 按ctrl+F5則所有/全部的元素都將 初始化.

寫事件 "屬性" 的時候, 如今的主流瀏覽器, 支持 所有小寫,也支持駝峯書寫法。但不支持大小寫混寫. 如: onclick, onClick是能夠的 ,可是OnCliCk是不行的.

對同一個標籤元素, 不一樣的瀏覽器在顯示 / 渲染 元素標籤的 默認屬性時, 可能效果是不一樣的, 如:對於提交按鈕input type="submit" 谷歌顯示的是「 提交」, 火狐顯示的是「提交查詢」, ie顯示的是「提交查詢內容」。

html的標籤, div, p, span div等, 都 能夠 沒有絕對的 層次和 包含 關係, 如button 能夠包含div. 如在button標籤中 能夠包含div 標籤.

任何html元素, 若是設置 屬性 不能實現其 需求時, 能夠 經過css來設置 他的 背景 邊框 寬高等. 如要設置 有 圖片的 按鈕, 就時經過 css 的 background-image 來實現的:


:first和 :first-child的區別?

:first是 只返回 前面那個選擇器的 第一個 子元素, 總的 只返回一個 子元素;
:first-child 是返回 前面選擇器 集合中 每一個 父元素的 第一個子元素, 總的來講, 會返回 多個元素.

相關文章
相關標籤/搜索