js和jquery修改背景颜色的区别
2016-05-03 19:24
671 查看
html:
result:
初始:
![](data:image/png;base64,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)
点击任一按钮之后:
![](data:image/png;base64,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)
<HTML> <head> <meta http-equiv="content-type" content="text/html" /> <meta charset="utf-8" /> <title></title> <!--引入jquery库--> <script type="text/javascript" src="js/jquery-2.2.2.min.js"></script> <script type="text/javascript"> function setColorByJs(){ // 获取input元素集合 var aInput=document.getElementsByTagName("input"); for(var i=0;i<aInput.length;i++){ aInput[i].style.background="#efefef"; } var aTextarea=document.getElementsByTagName("textarea"); for(var i=0;i<aTextarea.length;i++){ aTextarea[i].style.background="#efefef"; } } // :input表示选择表单中的input,select,textarea,button元素,input仅仅选择input元素。 function setColorByjQuery(){ $(":input").css("background","#efefef"); } </script> </head> <body> <!--表单元素--> <form action="" id="form"> <fieldset> <label><span>姓名:</span><input type="text"/></label><br /> <label><span>邮件:</span><input type="text"/></label> <div class="wrapper"><span>留言:</span><textarea></textarea></div> </fieldset> </form> <!--操作按钮--> <div class="wrapper"> <a href="#" class="button" onclick="setColorByJs()">js更改表单颜色</a> <a href="#" class="button" onclick="setColorByjQuery()">jquery更改表单颜色</a> </div> </body> </HTML>
result:
初始:
点击任一按钮之后:
相关文章推荐
- 如何使用js懒加载图片|如何使用jquery.lazyload.js|网页优化|如何提高网页加载速度
- 简单的jquery表情插件
- jQuery学习之jQuery Ajax用法详解
- 关于从后台传来的json数据,使用jquery动态展现所有的item,给每个item添加删除功能
- jQuery中load()进行异步请求
- 【技术干货】前端开发之jQuery单页面开发
- jquery.cookie.js 的使用指南
- JQuery Resizable详解(转)
- jQuery 1.9 兼容低版本jQuery插件的处理方法
- jquery 如何动态添加、删除class样式方法介绍
- jQuery中队列queue()函数的实例教程
- jquery字符串转日期类型
- jQuery Ajax 实例 ($.ajax、$.post、$.get)
- 深入解析jQuery中Deferred的deferred.promise()方法
- 详解JavaScript异步编程中jQuery的promise对象的作用
- JQuery库:(一)简介
- jquery获取select的中值和文本
- jQuery的promise与deferred对象在异步回调中的作用
- javascript与jQuery对比之淡入
- Jquery局部打印插件