引入jQuery库
用jQuery控制网页元素前，得先把jQuery库加到我们的HTML页面里头儿。咋做？就是往网页的某部分加上几行特定的代码就好！这样就能正确地调用出jQuery提供的各种功能了。
添加input元素并设置ID
现在，给那些要设置背景颜色，还得用jQuery操控的input控件，加上一个ID属性！啥都别想，就在你的网页上放个输入框，取个特立独行的名字，比如”input1″，别忘了这个，后面要用到jQuery的时候就好办了。
利用ready()方法设置背景色
页面加载完，用jQuery的ready()方法就能找准那个有指定ID的输入框，然后给它换个装扮。这个ready()方法就是等整个页都加载完了才会去执行里面的代码，这样才能一找一个准儿地操作那些元素。
看这段代码，我们直接用$(）函数找到那个有对应ID的输入框，再用css（）方法把它的颜色改成红的就行！css()方法是jQuery的一个重头戏，主要就是用来设置和查看CSS属性的~
改变元素样式：控制多重CSS属性
除了换个背景颜色之外，用jQuery也能搞定样式属性的调整。比如你想把字号变下啦、字体换下颜色啦或者四周加个边框之类的小玩意儿，都能用CSS属性搞定。下面就是几个简单的例子，教你怎么用jQuery玩转这些CSS属性：
javascript
$("#input1").css({
"font-size":"16px",
"color":"blue",
"border":"2pxsolidgreen"
});
这个小代码就搞定！轻轻一点就能让你的输入框元素变成16像素大字，然后换个蓝色调，配上一抹绿边儿，新鲜出炉！随心所欲地搭配，满足各种设计要求，就是这么轻松。
实现动态效果：利用动画效果优化用户体验
除了最好看的好看样式设计外，咱们也有许多炫酷的动画特效功能，能让你的网页变得更有趣和吸睛！例如用fadeIn()、fadeOut()、slideUp()、slideDown()这些功能，就能让元素瞬间出现或消失，或是缓缓展开并折叠起来！
来，瞧瞧这个，就像魔术似的！$(“#input1”)会在短短的一秒钟内慢慢显现出来~
快速往上滑一下，隐藏掉那个叫作’input1’的输入框，只要花半秒钟就好~
这些动效不光能让网页变得更美，还能改善用户体验，使大家在浏览时感到顺滑舒服。
事件处理：响应用户操作实现交互功能
除了添加好看的样式和酷炫的动画，jQuery还有好多好用的函数来应对各种你能想象得到的小动作。比如，当你用鼠标一点，它就能感知到你的小心思，然后使用click(),hover(),submit()这样的函数给你想要的结果。
$(document).ready(function(){
// 获取输入框元素
var inputElement = $('#input1');
// 设置背景色为红色
inputElement.css('background-color', 'red');
});
点一下输入框1，会触发下面的操作哦：
alert(“您点击了输入框！”);
鼠标放在那个叫’输入1’的东西上，它会做些什么？
直接把背景颜色设成黄色！
},function(){
把背景色换掉，让它变成白色！
这就是代码怎么让你在点输入框时收到提醒，然后，当你鼠标放到上面，背景颜色就改变了！这样做能使网页互动起来，更好玩了！
扩展功能：利用插件实现更多特殊效果
其实jQuery不仅有无敌的基础功能，还有好多第三方插件任你挑选，让那些特殊又难搞的效果都能搞定！比如处理表单验证、图片轮播、弹出窗口提示等等，到处都可以找到合适的插件，让jQuery的用处大大增加！
优化性能：合理使用缓存及链式操作
编写jQuery代码时，记得巧妙运用缓存和链式操作，这可是大大提高速度和优化代码的好方法。比如说，我们可以把选中的东西存储到缓存里，下次就不用再花时间找它们啦；还有就是尽量利用链式调用来让代码更简单明了，同时也能节省不少资源！
// 设置字体大小为18px
inputElement.css('font-size', '18px');
// 设置字体颜色为绿色
inputElement.css('color', 'green');
// 设置边框为1px的黑色边框
inputElement.css('border', '1px solid black');
$input1=$(“#input1”);//就记住这个选择结果好了
input1.css(‘background-color’,’gray’).fadeOut(500);//先改变背景色，然后再淡出
下面给大家演示一下，我们如何合理地选好缓存以及怎么用链式操作，但这些知识在实践中的运用还要看具体情况，主要目的就是提高代码的质量和效率！
这篇文章主要是给新手们看的，教你怎么用jQuery来设置Input的背景颜色和其他样式属性。希望你们能从中学到点东西，然后试试这个框架更牛逼的功能，用到实际项目里去。
评论0