<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<style type="text/css">
div,span,p {
width: 140px;
height: 140px;
margin: 5px;
background: #aaa;
border: #000 1px solid;
float: left;
font-size: 17px;
font-family: Verdana;
}
div.mini {
width: 55px;
height: 55px;
background-color: #aaa;
font-size: 12px;
}
div.hide {
display: none;
}
</style>
<script type="text/javascript" src="jquery-1.3.1.js"></script>
<script type="text/javascript">
$(document).ready(
function() {
//改变id为one的元素的背景色 必须是单引号
//$('#one').css('background','#bfa');
//改变class为mini的所有元素背景色
//$('.mini').css('background','red');
//改变标签为div的所有元素背景色
//$('div').css('background','red');
//改变所有元素背景色
//$('*').css('background','red');
//改变<span>元素和id为two的元素的所有元素背景色
//$('span,#two').css('background','red');
//层次选择器
//1.改变body里面所有<div>的背景色
//$('body div').css('background','red');
//2.改变body内子元素div的背景色
//$('body>div').css('background','green');
//3.改变id为one的元素的下一个兄弟div元素的背景色
//$('#one + div').css('background','yellow');
//4.改变id为two的元素后面所有div兄弟元素的背景色
//$('#two ~ div').css('background','blue');
//上面3的替代方法
//$('#one').next('div').css('background','gray');
//上面4的替代
//$('#two').nextAll('div').css('background','gray');
// 3过滤选择器
//3.1基本过滤选择器
//1改变第一个div的颜色
// $('div:first').css('background','red');
//
// // 2改变最后一个div的颜色
// $('div:last').css('background','yellow');
//3改变所有class不为one的div的背景色
//$('div:not(.one)').css('background','yellow');
//4改变索引值为偶数的div的背景色 计数从0开始
//$('div:even').css('background','red');
//5改变索引值为奇数的div的背景色
//$('div:odd').css('background','red');
//6改变索引值为3的div的背景色
//$('div:eq(3)').css('background','red');
//7改变索引值大于3的div的背景色
//$('div:gt(3)').css('background','red');
//8改变索引值小于3的div的背景色
//$('div:lt(3)').css('background','red');
//9改变所有标题元素的
//$(':header').css('background','red');
//10改变所有标题元素的
//$(':animated').css('background','red');
//3.2内容过滤选择器
//1改变内容包含di的div元素的背景色
//$('div:contains(di)').css('background','red');
//2改变不包含子元素或者文本的空div元素的背景色
//$('div:empty').css('background','red');
//3改变含有class为mini的子元素的div元素的背景色
//$('div:has(.mini)').css('background','red');
//4改变含有子元素或者文本元素的元素的背景色
//$('div:parent').css('background','red');
//3.3可见性过滤选择器
//1改变所有可见元素的背景色
//$('div:visible').css('background','red');
//2将不可见元素3秒显示出来
//$('div:hidden').show(3000);
//3.4 属性过滤选择器
//1改变含有title属性的div元素的背景色
//$('div[title]').css('background','red');
//2改变属性值等于test的div元素的背景色
//$('div[title=test]').css('background','red');
//3改变title值不等于tets的div元素的背景色
//$('div[title!=test]').css('background','red');
//4改变title以te开头的div元素的背景色
//$('div[title^=te]').css('background','red');
//5.改变title以est结尾的div元素的背景色
//$('div[title$=est]').css('background','red');
//6.改变title含有es的div元素的背景色
//$('div[title*=es]').css('background','red');
//7改变含有id属性,并且title属性含有es的div元素的背景色
//$('div[id][title*=es]').css('background','red');
//3.5子元素过滤选择器
//1改变每个class为one的div元素的第二个子元素的背景色 必须空格
//$('div.one :nth-child(2)').css('background','red');
//2改变每个class为one的div元素的第一个子元素的背景色
//$('div.one :first-child').css('background','red');
//3.改变每个class为one的div元素的最后一个子元素的背景色
//$('div :last-child').css('background','red');
//4.如果class为one的div元素只有一个子元素,那么改变这个子元素的背景色
//$('div :only-child').css('background','red');
}
);
</script>
</head>
<body>
<h1>jQuery选择器</h1>
<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为two,class为one,title为test的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" title="tesst">class为mini,title为tesst</div>
</div>
<div style="display:none;" class="none">style的display为none的div</div>
<div class="hide">class为hide的div</div>
<div>
包含的input的type为hidden的div<input type="hidden" size="8"/>
</div>
<span id="mover">正在执行动画的span</span>
</body>
</html>
分享到:
相关推荐
外国高手弄的测试页面,我改了一点点 原网址 http://stevewellens.com/jQuerySelectorTester.htm
jquery常用操作,jquery一些常用的操作,很实用哦
jQuery中的常用选择器
jQuery常用的选择器分类及其用法 一、基本选择器 3 1. id选择器(指定id元素) 3 2. class选择器(遍历css类元素) 3 3. eleme
主要介绍了常用jQuery选择器总结,总结的很简洁,很容易看明白和学会它,需要的朋友可以参考下
整理了一套JQuery的常用方法,常用的选择器,各个选择器的区别,实际开发中遇到的问题,与解决问题的常用方法。
本文实例讲述了JQuery常用选择器功能与用法。分享给大家供大家参考,具体如下: JQuery基础回顾 今天对JQuery内容进行了回顾,下面进行一些总结: JQuery是javascript的一个库,所以二者可以相互转换,例如JQuery到...
本文为大家分享了jQuery常用选择器的具体代码,供大家参考,具体内容如下 1、jQuery:(使用jQuery一定标明我们使用的版本号) 它是一个使用原生的JS来封装的常用的方法的类库(解决了浏览器的兼容问题) 2、...
常用位置选择器的用法 选择第一个 格式:$(selector:first); 选择最后一个 格式:$(selector:last) 选择奇数 格式:$(selector:odd) 偶数行 格式:$(selector:even) 获取指定位置 格式:$(selector:eq(n)) ...
Java面试题39.jQuery中的常用选择器.mp4
jQuery编写的常用商城商品属性选择器
学习【js DOM 编程艺术】,最后面有许多jQuery的选择器,每个都动手敲了一遍。 jQuery 提供了高级选择器的方法。 j s获取元素的三个基本方法分别是通过标签名,类名和id,即(getElementsByTagName, ...
jQuery 选择器详细列表,里面列出常用的jQuery选择器语法并且做了详细的说明,是一个不错工具书。
主要介绍了jquery中each方法使用及常用选择器都有哪些,需要的朋友,可以参考下
选择器并没有一个固定的定义,在某种程度上说,jQuery的选择器和样式表中的选择器十分相似。选择器具有如下特点: 1.简化代码的编写 2.隐式迭代 3.无须判断对象是否存在 jQuery 的选择器可谓之强大无比,这里简单...
jQuery选择器:jQuery的Document元素选择 1。 从$开始 2。xpath+css 3。常用自定义选择器
jQuery 的选择器可谓之强大无比,这里简单地总结一下常用的元素查找方法