js和jquery修改背景颜色的区别
html：
<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：
初始：
aaarticlea/png;base64,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" alt="" />
点击任一按钮之后：
aaarticlea/png;base64,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" alt="" />
js和jquery修改背景颜色的区别的更多相关文章
- html根据下拉框选中的值修改背景颜色
错误的写法 <!doctype html><html><head><meta charset="utf-8"><title&g ...
- 小程序开发-iView app的NoticeBar 通告栏修改背景颜色
NoticeBar 通告栏 这是个比较好用的组件,具体使用方法见 http://inmap.talkingdata.com/wx/index_prod.html#/components/notice- ...
- JS与jQuery中html-与-text方法的区别
所有的实例均用下面的html <div id="id0"> <div id="id1"> 直接text <p> <sp ...
- Eclipse修改背景颜色（豆沙绿）
操作界面默认颜色为白色.对于我们长期使用电脑编程的人来说,白色很刺激我们的眼睛,所以我经常会改变workspace的背景色,使眼睛舒服一些.设置方法如下: 1.打开window->Prefere ...
- 详解JS与Jquery获得的对象的区别与联系
世上无难事只怕有心人,敲代码也一样只要你用心去搞懂一件事,即使一个小小的用法对你以后也会有很大的作用: 项目虽然赶得紧但是有些问题百度找完答案解决之后,也要自己梳理一遍做到心领神会!!!今天就直接来上 ...
- 利用HTML和JS制作隔行换背景颜色的表格
1.源代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://ww ...
- 23【notepad++】修改背景颜色
notepad++是一款功能丰富的编辑器,运行在windows平台上的编辑工具. 但它默认设置是白色背景,黑色文字,长时间看很刺眼.那么怎么设定成为暗色背景,亮色文字呢? 点击,设置->语言格式 ...
- pycharm -- 导入主题(theme) and 修改背景颜色（护眼色）
前情提要 众所周知,随着python语言的不断流行,越来越多的程序员开始用python来开发自己的项目以及产品. pycharm作为一款流行的IDE,被越来越多的程序员所接受和使用. 尽管pychar ...
- Eclipse修改背景颜色
windows->peferences->General->Editors->Text EditorAppearance color options:选择Background ...
随机推荐
- [Cracking the Coding Interview] 4.3 List of Depths
Given a binary tree, design an algorithm which creates a linked list of all the nodes at each depth. ...
- （长期更新）OI常用模板
代码很简单的模板就不收录了. DFT 离散傅立叶变换 void dft(pdd *a,int l,bool r){ int i,j=l/2,k; for(i=1;i<l;++i){ if(i&l ...
- ChipScope软件使用
内容组织 1.建立工程 2.插入及配置核 2.1运行Synthesize 2.2新建cdc文件 2.3 ILA核的配置 3. Implement and generate programmi ...
- 浅析express以及express中间件
一.express: 1.express: Express是什么? Express是基于node.js平台的web应用开发框架: 作用:可以实现快速搭建骨架: 优点:开发web应用更加方便,更加快捷. ...
- jpa Specification复杂查询
public List<Receipts> test(List<String> costIds){ Specification<Receipts> specific ...
- Ubuntu中搭建Hadoop集群（简记）
stp1:在Vmware虚拟机上创建Ubantu.2环境 步骤:文件—>新建虚拟机—>典型(下一步)—>下一步——>位置(不建议放c盘,文件地址一定要全英文)—>下一步— ...
- 台湾ML笔记--1.1什么时候适合使用ML
适用情况: 1 exists some 'underlying pattern' to be learned --so 'performance measure' can be imporoved 例 ...
- Android各版本代号、版本号、API/NDK级别、发布时间
代号 版本号 API/NDK级别 发布时间 牛轧糖 Nougat 7.1.2 API level 25 2017-2 7.1.1 2016-10 7.0 API level 24 2016-05 棉花 ...
- dispaly:-webkit-box 布局中的坑
dispaly:-webkit-box 具体用法 这里大家可以网上查, 这里说下里面的坑 里面的子对象设置-webkit-box-flex: 1 -webkit-box-flex: 2 时:一般两个子 ...
- 「暑期训练」「基础DP」 Common Subsequence （POJ-1458）
题意与分析 很简单:求最长公共子序列. 注意子序列与子串的差别:一个不连续一个连续.一份比较好的参考资料见:https://segmentfault.com/a/1190000002641054 状态 ...