判斷瀏覽器是否有支援 required

在追查判斷瀏覽器是否有支援 Html5  required 功能時，看到網路上很多人都用了

if ($("<input />").prop("required") === undefined)

來判斷。我很好奇，$("<input />").prop("required")，這到底是什麼東西啊？



原來這裡面用到了二個技巧。

第一：jQuery 的 .prop() 方法。當你使用 .prop()時，雖說他跟 .attr() 用途很像，但是 .prot(propertyname) 會先去檢查這個 propertyname 瀏覽器是否有支援，如果沒支援，則回傳 undefined 。相對的，如果有支援，就會去檢查這個 propertyname 目前有沒有出現在畫面上，如果有，回傳 true，如果沒有，回傳 false。

透過這個 .prop() 屬性，就可以用來判斷我們目前的瀏覽器，有沒有支援 Html5 語法裡的 required 屬性了，如果是 IE 9 前的版本，都會回傳
undefined 。所以，當我們用 .prop("required") 得到 undefined 時，代表目前的瀏覽器不支援 required 的用法。

第二：jQuery 有支援 $(html) ，可以讓我們傳遞 html 標記字串，建立一個 DOM 物件，並將該物件包裝為 jquery 回傳。

例如： 

$(".divTest").append("<h1>媽，是我啦！</h1>");

就會在<div class="divTest"></div> 這個 <div> 裡面新增一個 "<h1>媽，是我啦！</h1>"

#可參考： .append()

於是，我們可以透過 $.(html) 來簡單地撰寫一小段 html 程式碼：<input /> ，並透過 .probe("required") 來達到判斷目前瀏覽器是否支援 Html5 的 required 功能。

參考：
01.html5 required attribute on non supported browsers
02.jQuery:append()