使用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设置了后，输入框不能输入值，但能选中，并且能复制里面的值。界面上看，和正常的输入框是一样的，不过当你要输入值时，却发现是输入不了的，原来的值是改不了的。代码和效果如图