使用Jquery如何操作输入框控件

在做网页开发时，我们经常会引入Jquery脚本库，方便对html做各种操作。下面我们一起来看下Jquery对输入框控件能做哪些操作？

操作方法

【步骤01】

要用Jquery进行dom操作，首先我们得要在页面引入脚本文件，如图

【步骤02】

我们的例子里，Html代码很简单，就是一个input输入框，和几个按钮，如图

【步骤03】

Html初始运行界面如图，

【步骤04】

我们先为第一个按钮添加点击事件，点击后，通过Jquery设置输入框的值，
主要是通过Jquery的 val()方法来实现。
$("#txtInput").val('你需要的值');
代码如图，

【步骤05】

点击按钮后，我们可以看到，输入框的值已经被设置上了。

【步骤06】

Jquery既然能设置输入框的值，当然也能读取它的值了。
这次添加第二个按钮的事件代码，如图。
这里也是用Jquery的 val()方法来读取， 当我们在这个方法里加上参数时，就是设置值，不加参数时，就是读取值。

【步骤07】

点击第二个按钮，我们读取到了输入框的值，然后把结果显示在alert弹出框里。

【步骤08】

接着，我们添加第三个按钮的代码，主要是通过Jquery的 prop方法来设置输入框的属性，
$("#txtInput").prop('disabled', true);
设置了disabled属性为 true，则输入框是不可用状态，即不能输入值，也不能选中这个输入框了。

【步骤09】

刷新页面，重新运行后，点击第三个按钮后，效果如图，输入框已是不可用状态。

【步骤10】

最后看下设置readonly的代码，这里也是同样用prop方法，来设置输入框的readonly属性。这个属性和前面的disabled有什么不一样？readonly设置了后，输入框不能输入值，但能选中，并且能复制里面的值。界面上看，和正常的输入框是一样的，不过当你要输入值时，却发现是输入不了的，原来的值是改不了的。
代码和效果如图