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 ...
随机推荐
- AGC 014 B - Unplanned Queries
题面在这里! 很显然的一件事是,我们把路径覆盖改成两个点分别到根的路径覆盖,答案是不会变的,因为lca以上被覆盖了两次不变奇偶性.. 这么做的好处就是,我们只需要考虑每个点的覆盖次数带来的影响就行了, ...
- php中文件上传需要注意的几点
1.首先要开启php.ini中的文件上传,打开php.ini 配置文件,查找 File Uploads ,在这个区域有以下3个选项: ;;;;;;;;;;;;;;;; ; File Uploads ; ...
- POJ 2079 Triangle(凸包+旋转卡壳,求最大三角形面积)
Triangle Time Limit: 3000MS Memory Limit: 30000K Total Submissions: 7625 Accepted: 2234 Descript ...
- E-R图样例
基本知识 基本的ER模型包含三类元素:实体.关系.属性. 实体(Entities):实体是首要的数据对象,常用于表示一个人.地方.某样事物或某个事件.一个特定的实体被称为实体实例(entity ins ...
- mormot日志
mormot日志 usesSynLog; if log = nil then // 日志 begin log := TSynLog.Add; log.Family.DestinationPath := ...
- material design动画
这是一篇material design 文档动画部分的学习! Summary: Material Design动画交互 动画速度的3个原则 3种交互方式 如何设计有意义的动画 使人高兴的动画细节 1 ...
- oracle如何查询哪个表数据量大
- iOS 在某一个ViewController跳转到TabViewController中的某一个ViewController
要做到这个分为两步 第一步, 导入app #import "AppDelegate.h" 第二步, 监听方法中先写加入以下代码: [self dismissViewControll ...
- Android内存优化11 内存泄漏常见情况2 内部类泄漏
线程持久化 Java中的Thread有一个特点就是她们都是直接被GC Root所引用,也就是说Dalvik虚拟机对所有被激活状态的线程都是持有强引用,导致GC永远都无法回收掉这些线程对象,除非线程被手 ...
- 网络管理命令list
网络管理 axel 多线程下载工具 tcpreplay 将PCAP包重新发送,用于性能或者功能测试 hping3 测试网络及主机的安全 ssh-copy-id 把本地的ssh公钥文件安装到远程主机对应 ...