使用Jquery如何操作輸入框控制元件？

在做網頁開發時，我們經常會引入Jquery指令碼庫，方便對html做各種操作。下面我們一起來看下Jquery對輸入框控制元件能做哪些操作？

操作方法

（01）要用Jquery進行dom操作，首先我們得要在頁面引入指令碼檔案，如圖

（02）我們的例子裡，Html程式碼很簡單，就是一個input輸入框，和幾個按鈕，如圖

（03）Html初始執行介面如圖，

（04）我們先為第一個按鈕新增點選事件，點選後，通過Jquery設定輸入框的值，主要是通過Jquery的 val()方法來實現。$("#txtInput")('你需要的值');程式碼如圖，

（05）點選按鈕後，我們可以看到，輸入框的值已經被設定上了。

（06）Jquery既然能設定輸入框的值，當然也能讀取它的值了。這次新增第二個按鈕的事件程式碼，如圖。這裡也是用Jquery的 val()方法來讀取， 當我們在這個方法里加上引數時，就是設定值，不加引數時，就是讀取值。

（07）點選第二個按鈕，我們讀取到了輸入框的值，然後把結果顯示在alert彈出框裡。

（08）接著，我們新增第三個按鈕的程式碼，主要是通過Jquery的 prop方法來設定輸入框的屬性，$("#txtInput")('disabled', true);設定了disabled屬性為 true，則輸入框是不可用狀態，即不能輸入值，也不能選中這個輸入框了。

（09）重新整理頁面，重新執行後，點選第三個按鈕後，效果如圖，輸入框已是不可用狀態。

（10）最後看下設定readonly的程式碼，這裡也是同樣用prop方法，來設定輸入框的readonly屬性。這個屬性和前面的disabled有什麼不一樣？readonly設定了後，輸入框不能輸入值，但能選中，並且能複製裡面的值。介面上看，和正常的輸入框是一樣的，不過當你要輸入值時，卻發現是輸入不了的，原來的值是改不了的。程式碼和效果如圖