<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>基本选择器.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
<script type="text/javascript" src="../jquery-1.7.1.js"></script>
</head>
<style type="text/css">
div,span,p{
width: 170px;
height:170px;
margin: 5px;
background: #aaa;
border: #000 1px solid;
float: left;
font-family: cursive;
font-size: 17px;
}
div.mini{
width: 60px;
height:60px;
background-color:#aaa;
font-size: 12px;
}
div.hide{
display: none;
}
</style>
此处是css样式
<body>
<div class ="one" id = "one">
id 为one ,class为one 的div
<div class = "mini">class为mini</div>
</div>
<div class = "one" id = "two" title="test">
id 为one ,class为one 的div
<div class = "mini" title="other">class为mini,title为other</div>
<div class = "mini" title="test">class为mini,title为test</div>
</div>
<div class = "one">
<div class = "mini"> class为mini</div>
<div class = "mini"> class为mini</div>
<div class = "mini"> class为mini</div>
<div class = "mini">
</div>
</div>
<div style="display: none;" class="none">
style的dispaly为none, class为none
</div>
<div class = "hide">class为hide</div>
<div>
包含input的type为“hidden”的div
<input type = "hidden" size = "8" >
</div>
<span id = "move" > 正在执行动画的span元素</span>
</body>
<script type="text/javascript">
/* $(function(){ //后代元素
$('div div').css("background","dodgerblue");
//$(ancestor descendant) 选取ancestor(祖先)元素
// 里的所有 dodgerblue(孙子) 返回集合
// 看好 中间有空格 $('div div') 意思是 选取大div中的所有小div
$('body div').css("background","#fff"); //选取 body中的所有div 并改变颜色
});
*/
/* $(function(){ //子元素
$('body > div').css("background","dodgerblue");
//$(parent > chard) 选取parent 元素下的所有 子元素 返回集合 $(ancestor descendant)选择的是后代元素
//选取 body下面所有 div 的 元素
});*/
/* $(function(){ //相邻元素
$('.one + div').css("background","dodgerblue");
//$(prev + next) 选取紧接着 prev 元素 后的next 元素 返回集合
//选取类 one 下面的一个 元素体 并且 包含自己
});*/
$(function(){ //兄弟 元素
$('#two ~ div').css("background","dodgerblue");
//$(prev ~ siblings) 选取紧接着 prev 元素 后的所有 兄弟（siblings）元素 返回集合
//改变ID two 后面所有 div元素
});
</script>
</html>
分享到：
相关推荐
jquery上下翻动类似tab标签的手风琴效果，展示内容为文字，懒人之家推荐下载
1、基本选择器 2、层次选择器 3、过滤选择器 4、表单选择器 $("#myELement") 选择id值等于myElement的元素，id值不能重复在文档中只能有一个id值是myElement所以得到的是唯一的元素 $("div") 选择所有的div标签元素...
10-25 2 jquery id选择器 层次选择器 10-25 3 jquery过滤选择器及练习题讲解 10-25 4 内容过滤器 可见度过滤器及练习讲解 10-26 1 课程回顾 10-26 2 属性过滤选择器 10-26 3 子元素选择器 表单对象属性选择器 10-26 ...
JQuery选择器 解析：为了更好的或者是更快的从复杂的DOM树中找到我们需要的一类标签 1.层次选择器 <!-- 当点击h2元素时，为#menu下的元素添加色为#09F的颜色背景 --> <!-- [removed] $(function () { $...
6) $('div p') 层次选择器,常用的选择器,例如div下面的p标签 7） $('div>p') 与上一个层次选择器差不多,但是div下面有子元素,子元素下还有孙元素,该选择器只能选子元素 8） $('div+p') 该选择器用得...
用jQuery实现的模仿a的title属性的例子，在测试的时候ie6,7上出现了层次混乱，不过最终解决了。 html代码如下： <li><a>UI设计师 所属部门：技术部 工作地点：郑州 招聘人数：21 <li><a>前端开发工程师 所属...
$(“tagName”)通过标签名来获取元素,用来代替document.getElementsByTagName()函数. jQuery的基本语法是:$(selector).action(), selector即选择器. jQuery选择器的分类 jQuery的选择器基本可以分为四大类: ...
10-25 2 jquery id选择器 层次选择器 10-25 3 jquery过滤选择器及练习题讲解 10-25 4 内容过滤器 可见度过滤器及练习讲解 10-26 1 课程回顾 10-26 2 属性过滤选择器 10-26 3 子元素选择器 表单对象属性选择器 10-26 ...
10-25 2 jquery id选择器 层次选择器 10-25 3 jquery过滤选择器及练习题讲解 10-25 4 内容过滤器 可见度过滤器及练习讲解 10-26 1 课程回顾 10-26 2 属性过滤选择器 10-26 3 子元素选择器 表单对象属性选择器 10-26 ...
10-25 2 jquery id选择器 层次选择器 10-25 3 jquery过滤选择器及练习题讲解 10-25 4 内容过滤器 可见度过滤器及练习讲解 10-26 1 课程回顾 10-26 2 属性过滤选择器 10-26 3 子元素选择器 表单对象属性选择器 10-26 ...
10-25 2 jquery id选择器 层次选择器 10-25 3 jquery过滤选择器及练习题讲解 10-25 4 内容过滤器 可见度过滤器及练习讲解 10-26 1 课程回顾 10-26 2 属性过滤选择器 10-26 3 子元素选择器 表单对象属性选择器 10-26 ...
基本选择器是jQuery中最常用的选择器，也是最简单的选择器，它通过元素id、class和标签名等来查找DOM元素。在网页中，每个id名称只能使用一次，class允许重复使用。 选择器 描述 返回 示例 #id 根据给定...
基本选择器：id,class,标签名，*，元素组合(div,span,p.myClass) 层次选择器： 难点： jquery中子元素和后代元素的区别 后代，就是当前元素的所有后代，都算， 子元素，就是当前元素的子集，再往下走就不算了。...
Jquery选择器分类：基本选择器，层次选择器，过滤选择器，表单选择器 一、基本选择器：jquery中最常用的选择器，也是最简单的选择器。通过元素id、class和标签名等来查找DOM元素。 表-基本选择器 选择器 描述 ...
HTML文档的层次关系是树型的，每个标签可视为树的各个节点。若操作jQuery对象，使得HTML文档的结构发生了改变，就叫做文档处理
SmartMobile 内置单页、新闻、产品、视频等内容模型，在很大程度上满足了更多层次用户的需求和发展需要，兼容Android、iOS、黑莓等手机操作平台。SmartMobile 开发了全新的、高效的、灵活性更强的模板引擎。无限循环...
所有的P标签都会被选中。 $('.test2').css('background' , 'green'); Class = test2的单元全部被选中。 $('*').css('background','pink'); *指的就是所有元素，慎用。 层次选择器 $('div span'
区分层次的目的即为了"高内聚低耦合"的思想。在软件体系架构设计中，分层式结构是最常见，也是最重要的一种结构。微软推荐的分层式结构一般分为三层，从下至上分别为:数据访问层、业务逻辑层(又或称为领域层)、表示...
$(‘div a’):div标签下所有层次a元素的jquery对象 $(‘div>a’):div标签下子元素层次a元素的jquery对象 以上这篇浅谈$(‘div a’) 与$(‘div>a’)的区别就是小编分享给大家的全部内容了，希望能给大家一个参考，也...
1.插入一个标签 <div id=main xss=removed></div> 设置他的一些style（可自行美化，我很懒！！！）。 2.在body下建一个[removed]脚本（为什么要在body下写js脚本呢？因为这是提高用户体验，可自行百度深层次的原因~...