jQuery基本选择 元素
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>ddd</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script language="JavaScript" src="../js/jquery-1.4.2.js"></script>
<style type="text/css">
div,span{
width: 140px;
height: 140px;
margin: 20px;
background: #9999CC;
border: #000 1px solid;
float:left;
font-size: 17px;
font-family:Roman;
} div.mini{
width: 30px;
height: 30px;
background: #CC66FF;
border: #000 1px solid;
font-size: 12px;
font-family:Roman;
}
</style>
<!--引入jquery的js库--> </head> <body> <input type="button" value="保存" class="mini" name="ok" class="mini" />
<input type="button" value="改变 id 为 one 的元素的背景色为 #0000FF" id="b1"/>
<input type="button" value=" 改变元素名为 <div> 的所有元素的背景色为 #00FFFF" id="b2"/>
<input type="button" value=" 改变 class 为 mini 的所有元素的背景色为 #FF0033" id="b3"/>
<input type="button" value=" 改变所有元素的背景色为 #00FF33" id="b4"/>
<input type="button" value=" 改变所有的<span>元素和 id 为 two 的元素的背景色为 #3399FF" id="b5"/> <h1>天气冷了</h1>
<h2>天气又冷了</h2> <div id="one">
id为one </div> <div id="two" class="mini" >
id为two class是 mini
<div class="mini" >class是 mini</div>
</div> <div class="one" >
class是 one
<div class="mini" >class是 mini</div>
<div class="mini" >class是 mini</div>
</div>
<div class="one" >
class是 one
<div class="mini01" >class是 mini01</div>
<div class="mini" >class是 mini</div>
</div> <br>
<div id="mover" >
动画
</div>
<br>
<span class="spanone"> span
</span>
<span class="mini"> span
</span> </body>
<script language="JavaScript">
$().ready(function(){
//<input type="button" value="改变 id 为 one 的元素的背景色为 #0000FF" id="b1"/>
$("#b1").click(function(){
$("#one").css("background-color","red");
});
//<input type="button" value=" 改变元素名为 <div> 的所有元素的背景色为 #00FFFF" id="b2"/>
$("#b2").click(function(){ $("div").css("background-color","red"); });
//<input type="button" value=" 改变 class 为 mini 的所有元素的背景色为 #FF0033" id="b3"/>
$("#b3").click(function(){
$(".mini").css("background-color","red");
});
//<input type="button" value=" 改变所有元素的背景色为 #00FF33" id="b4"/>
$("#b4").click(function(){
$("*").css("background-color","red");
});
//<input type="button" value=" 改变所有的<span>元素和 id 为 two 的元素的背景色为 #3399FF" id="b5"/>
$("#b5").click(function(){
$("span,#two").css("background-color","red");
});
});
</script> </html>
jQuery基本选择 元素的更多相关文章
- JQuery中选择元素的方法:
document.getElementById('div1');document.getElementsByTagName('div');getByClass(document,'box'); $(' ...
- jquery判断选择元素是否存在
有时候我们需要对jquery选择器选中的元素进行判断是否存在,如果存在才进行某些操作,不存在就不进行,那么如何判断元素是否存在,代码如下: //判断是否存在特定ID值的元素 ){ alert(&quo ...
- JQuery 实践---创建元素包装集
1. 利用选择器,选择将被JQuery包装的元素 标识和选择DOM元素.JQuery采用我们已经知道的CSS语法并且扩展了一些.为了利用JQuery来选择元素,请把选择器包装在$()中. 基本CSS选 ...
- 抛弃jQuery:DOM API之选择元素
原文链接:http://blog.garstasio.com/you-dont-need-jquery/selectors/ 我的Blog:http://cabbit.me/you-dont-need ...
- Jquery 系列(2) 选择元素
Jquery基础学习 jQuery利用css选择符的能力,能够在DOM中快捷而轻松地获取元素. 主要内容如下: 介绍DOM树 如何通过CSS选择符在页中查找元素 扩展jQuery标准的CSS选择符 选 ...
- JQuery基础教程:选择元素(中)
自定义选择符 JQuery在各种CSS选择符的基础上还添加了独有的完全不同的自定义选择符,注意,只要可能,jQuery就会使用浏览器原生的DOM选择符引擎去查找元素.但在使用自定义选择符的时候,就无法 ...
- JQuery基础教程:选择元素(上)
jQuery最强大的特性之一就是它能够简化在DOM中选择元素的任务,DOM中的对象网络与家谱有几分类似,当我们提到网络中元素之间的关系时,会使用类似描述家庭关系的术语,比如父元素.子元素,等等.通过一 ...
- 初识jQuery,八字真言“选择元素,对其操作”
jQuery在我印象中,就是很多类似$(),然后昨天开始接触了,觉得很和谐,获取元素比JavaScript简单很多,有意思. 一.开始学习jQuery,下载jQuery库的文件 http://jque ...
- jQuery选择器对应的DOM API ——选择元素
英文原文:http://blog.garstasio.com/you-dont-need-jquery/selectors/愚人码头注: 原作者的写这文章的意图是让我们抛弃jQuery,You Don ...
随机推荐
- 【预处理】Codeforces Round #407 (Div. 2) C. Functions again
考虑枚举每个子串开头的位置,然后答案转化成询问这个位置之后 哪个位置的前缀和 - 这位置的前缀和 最大(当然是已经把绝对值和正负的情况处理好了,可以发现按奇偶,这个序列只有两种情况),只需要预处理这两 ...
- js 封装的自动创建表格的相关操作
因为要做一个动态输入的表格,现在积累一下资料,在网上找了一些资料,经过总结是使用更加方便些,谁有更好的插件和封装的东西,请大家分享一下. <script type="text/java ...
- mysql知识点汇总四
1.表的垂直分割 “垂直分割”是一种把数据库中的表按列变成几张表的方法,这样可以降低表的复杂度和字段的数目,从而达到优化的目的.(以前,在银行做过项目,见过一张表有100多个字段,很恐怖) 示例一:在 ...
- 【java】代码优化点
1.对数据库数据的计数统计,尽量在数据库查询时候就使用count()进行统计,避免返回List到项目中统计List大小 2.对于数据库中表中字段数据过长,例如存储的是text类型而不是verchar类 ...
- 【js UUID】JS生成UUID 使用
* 生成UUID * @returns */ function UUID() { var s = []; var hexDigits = "0123456789abcdef"; f ...
- 一日一点RakNet(3)--介绍
介绍 安装 请参考Compiler Setup页,有什么问题在这块有解答.如果有额外的问题参考FAQ,http://www.jenkinssoftware.com,或者邮件联系我们.高级用户可以直接跳 ...
- asp.net Mvc Area 找到多个与名为相同的控制器匹配的类型 请通过调用含有“namespaces”参数
MVC中的Area的区域的时候,在一个Area中定义了一个Home控制器,在启动的时候, 找到多个与名为"Home"的控制器匹配的类型.如果为此请求("{controll ...
- dcm4che tools 之dicomdir
1.在dcm4che-3.3.7目录下的bin文件夹下运行命令行窗口 运行以下命令: dcmdir -c E:\TEMP\DICOMDIR E:\TEMP\04E439CE 为E:\TEMP\04E4 ...
- OSG立体模式下动态修改相机远近裁剪面的实现
1. 非立体模式下动态修改相机远近裁剪面 class GLB_DLLCLASS_EXPORT CGlbGlobeClipHandler : public osg::NodeCallback { ...
- java map 分析
java 8 对HashMap进行了优化, 当碰撞时使用TreeNode的二分方法查找数据: 但是当数据碰撞厉害的时候, table有很多浪费. table 大小等于size/factor, 当碰撞很 ...