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 ...
随机推荐
- 【Java】Spring MVC 扩展和SSM框架整合
开发web项目通常很多地方需要使用ajax请求来完成相应的功能,比如表单交互或者是复杂的UI设计中数据的传递等等.对于返回结果,我们一般使用JSON对象来表示,那么Spring MVC中如何处理JSO ...
- AtCoder AGC028-F：Reachable Cells
越来越喜欢AtCoder了,遍地都是神仙题. 题意: 给定一个\(N\)行\(N\)列的迷宫,每一个格子要么是障碍,要么是空地.每一块空地写着一个数码.在迷宫中,每一步只允许向右.向下走,且只能经过空 ...
- 第四模块：网络编程进阶&数据库开发 考核实战
1.什么是进程?什么是线程? 什么是协程? 进程:正在进行的一个过程或者说一个任务.而负责执行任务则是cpu. 线程:在传统操作系统中,每个进程有一个地址空间,而且默认就有一个控制线程 协程是一种用 ...
- 深度学习之卷积神经网络CNN
转自:https://blog.csdn.net/cxmscb/article/details/71023576 一.CNN的引入 在人工的全连接神经网络中,每相邻两层之间的每个神经元之间都是有边相连 ...
- Python的文件输入输出，如何追加内容，读取内容，添加内容
python主要的文件打开的几种访问模式 模式可以为读模式('r').写模式('w')或追加模式('a'),当然还有rb.wb.ab.r+.w+.a+.rb+.wb+.ab+,然而实际从代码上我也没看 ...
- 「日常训练」「小专题·USACO」 Ski Course Design （1-4）
题目 以后补 分析 mmp这题把我写蠢哭了 我原来的思路是什么呢? 每轮找min/max,然后两个决策:升min/降max 像这样子dfs找最优,然后花式剪枝 但是一想不对啊,这才1-4,哪有那么复杂 ...
- beanshell引用参数化数据
步骤: 1.添加参数化组件CSV Data Set Config: 2.添加beanshell preprocessor,引用变量: 验证: 2个线程,迭代2次,分别取了4个不同的值.
- NLP系列-中文分词（基于词典）
中文分词概述 词是最小的能够独立活动的有意义的语言成分,一般分词是自然语言处理的第一项核心技术.英文中每个句子都将词用空格或标点符号分隔开来,而在中文中很难对词的边界进行界定,难以将词划分出来.在汉语 ...
- scp源码浅析
背景: 经常使用scp传文件,发现它真的很给力,好奇心由来已久! 恰好接到一个移植SSH服务到专有网络(非IP网络)的小任务,完成工作又能满足好奇心,何乐而不为! 我只从源码浅浅的分析一下,后续有更多 ...
- 201621044079 week07-JAVA GUI类
作业07-Java GUI编程 1. 本周学习总结 1.1 思维导图:Java图形界面总结 1.2 可选:使用常规方法总结其他上课内容. 2.书面作业 1. GUI中的事件处理 1.1 写出事件处理模 ...