js和jquery修改背景颜色的区别
2016-05-03 19:24
656 查看
html:
result:
初始:
点击任一按钮之后:
<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局部打印插件