<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Sample HTML</title> <link href="./style.css" rel="stylesheet" type="text/css"> <script src="../scripts/jquery.js"></script> <script src="./myjs.js"></script> </head> <body> <h3>基本选择器</h3> <!-- 控制基本选择器按钮 --> <input type="button" value="选择 id为 one 的元素." id="btn1"/> <input type="button" value="选择 class 为 mini 的所有元素." id="btn2"/> <input type="button" value="选择 元素名是 div 的所有元素." id="btn3"/> <input type="button" value="选择 所有的元素." id="btn4"/> <input type="button" value="选择 所有的span元素和id为two的元素." id="btn5"/><br/><br/> <h3>层次选择器</h3> <!--控制层次选择器按钮--> <input type="button" value="选择 body内的所有div元素." id="btna1"/> <input type="button" value="在body内,选择子元素是div的。" id="btna2"/> <input type="button" value="选择 所有class为one 的下一个div元素." id="btna3"/> <input type="button" value="选择 id为two的元素后面的所有div兄弟元素." id="btna4"/><br/><br/> <h3>基本过滤选择器</h3> <!--控制基本过滤选择器--> <input type="button" value="选择第一个div元素." id="btnb1"/> <input type="button" value="选择最后一个div元素." id="btnb2"/> <input type="button" value="选择class不为one的 所有div元素." id="btnb3"/> <input type="button" value="选择索引值为偶数 的div元素." id="btnb4"/> <input type="button" value="选择索引值为奇数 的div元素." id="btnb5"/> <input type="button" value="选择索引值等于3的元素." id="btnb6"/> <input type="button" value="选择索引值大于3的元素." id="btnb7"/> <input type="button" value="选择索引值小于3的元素." id="btnb8"/> <input type="button" value="选择所有的标题元素." id="btnb9"/> <input type="button" value="选择当前正在执行动画的所有元素." id="btnb10"/> <input type="button" value="选择当前获取焦点的所有元素." id="btnb11"/><br/><br/> <h3>内容过滤选择器</h3> <input type="button" value="选取含有文本“di”的div元素." id="btnc1"/> <input type="button" value="选取不包含子元素(或者文本元素)的div空元素." id="btnc2"/> <input type="button" value="选取含有class为mini元素 的div元素." id="btnc3"/> <input type="button" value="选取含有子元素(或者文本元素)的div元素." id="btnc4"/><br/><br/> <h3>可见性过滤选择器</h3> <input type="button" value="选取所有可见的div元素." id="btnd1"/> <input type="button" value="选取所有不可见的元素.包括<input type='hidden'/>和<div style='display:none;'>以及br." id="btnd2"/><br/><br/> <h3> 属性选择器.</h3> <input type="button" value="选取含有 属性title 的div元素." id="btne1"/> <input type="button" value="选取 属性title值等于“test”的div元素." id="btne2"/> <input type="button" value="选取 属性title值不等于“test”的div元素(没有属性title的也将被选中)." id="btne3"/> <input type="button" value="选取 属性title值 以“te”开始 的div元素." id="btne4"/> <input type="button" value="选取 属性title值 以“est”结束 的div元素." id="btne5"/> <input type="button" value="选取 属性title值 含有“es”的div元素." id="btne6"/> <input type="button" value="组合属性选择器,首先选取有属性id的div元素，然后在结果中 选取属性title值 含有“es”的元素." id="btne7"/><br/><br/> <h3> 属性选择器(加强).</h3> <input type="button" value="选取 属性title值 以 en 开始 的div元素" id="btne1-1"/> <input type="button" value="选取 属性title值 含有 en 的div元素" id="btne2-1"/> <input type="button" value="选取 属性title等于en或以en为前缀（该字符串后跟一个连字符'-'）的元素" id="btne3-1"/> <input type="button" value="选取 属性title用空格分隔的值中包含字符uk的元素." id="btne4-1"/><br/><br/> <h3>子元素过滤选择器.</h3> <input type="button" value="选取每个class为one的div父元素下的第2个子元素." id="btnf1"/> <input type="button" value="选取每个class为one的div父元素下的第一个子元素." id="btnf2"/> <input type="button" value="选取每个class为one的div父元素下的最后一个子元素." id="btnf3"/> <input type="button" value="如果class为one的div父元素下的仅仅只有一个子元素，那么选中这个子元素." id="btnf4"/><br/><br/> <!--测试元素--> <br/> <div title="en">title为en的div元素 属性选择器(加强)</div> <div title="en-UK">title为en-UK的div元素 属性选择器(加强)</div> <div title="english">title为english的div元素 属性选择器(加强)</div> <div title="en uk">title为en uk的div元素 属性选择器(加强)</div> <div title="uken">title为uken的div元素 属性选择器(加强)</div> <div class="one" id="one"> id为one，class为one的div <div class="mini">class为mini的div</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"></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>
style.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;
}
myjs.js
$(document).ready(function(){
//给id为mover的元素添加动画.
function animateIt() {
$("#mover").slideToggle("slow", animateIt);
}
animateIt();
//控制基本选择器
$("#btn1").click(function(){
$("#one").css("background","#bbffaa");
});
$("#btn2").click(function(){
$(".mini").css("background","#bbffaa");
});
$("#btn3").click(function(){
$("div").css("background","#bbffaa");
});
$("#btn4").click(function(){
$("*").css("backgroundColor","#bbffaa");
});
$("#btn5").click(function(){
$("span,#two").css("background","#bbffaa");
});
//控制层次选择器
$("#btna1").click(function(){
$("body div").css("background","#bbffaa");
});
$("#btna2").click(function(){
$("body>div").css("background","#bbffaa");
});
$("#btna3").click(function(){
$(".one+div").css("background","#bbffaa");
});
$("#btna4").click(function(){
$("#two~div").css("background","#bbffaa");
});
//控制基本过滤选择器
$("#btnb1").click(function(){
$("div:first").css("background","#bbffaa");
});
$("#btnb2").click(function(){
$("div:last").css("background","#bbffaa");
});
$("#btnb3").click(function(){
$("div:not(.one)").css("background","#bbffaa");
});
$("#btnb4").click(function(){
$("div:even").css("background","#bbffaa");
});
$("#btnb5").click(function(){
$("div:odd").css("background","#bbffaa");
});
$("#btnb6").click(function(){
$("div:eq(3)").css("background","#bbffaa");
});
$("#btnb7").click(function(){
$("div:gt(3)").css("background","#bbffaa");
});
$("#btnb8").click(function(){
$("div:lt(3)").css("background","#bbffaa");
});
$("#btnb9").click(function(){
$(":header").css("background","#bbffaa");
});
$("#btnb10").click(function(){
$(":animated").css("background","#bbffaa");
});
$("#btnb11").click(function(){
$(":focus").css("background","#bbffaa");
});
//控制内容过滤选择器
$("#btnc1").click(function(){
$("div:contains('di')").css("background","#bbffaa");
});
$("#btnc2").click(function(){
$("div:empty").css("background","#bbffaa");
});
$("#btnc3").click(function(){
$("div:has('.mini')").css("background","#bbffaa");
});
$("#btnc4").click(function(){
$("div:parent").css("background","#bbffaa");
});
//可见性过滤选择器
$("#btnd1").click(function(){
$("div:visible").css("background","#bbffaa");
});
$("#btnd2").click(function(){
alert( "不可见的元素有："+$('body :hidden').length +"个!\n"+
"其中不可见的div元素有:"+$('div:hidden').length+"个!\n"+
"其中文本隐藏域有:"+$('input:hidden').length+"个!");
$('div:hidden').show(3000).css("background","#bbffaa");
$("div:hidden").show(3000).css("background","#bbffaa");
});
//控制属性选择器
$("#btne1").click(function(){
$("div[title]").css("background","#bbffaa");
});
$("#btne2").click(function(){
$("div[title='test']").css("background","#bbffaa");
});
$("#btne3").click(function(){
$("div[title!='test']").css("background","#bbffaa");
});
$("#btne4").click(function(){
$("div[title^='te']").css("background","#bbffaa");
});
$("#btne5").click(function(){
$("div[title$='est']").css("background","#bbffaa");
});
$("#btne6").click(function(){
$("div[title*='es']").css("background","#bbffaa");
});
$("#btne7").click(function(){
$("div[id][title*='es']").css("background","#bbffaa");
});
//控制属性选择器 加强
$("#btne1-1").click(function(){
$("div[title^='en']").css("background","#bbffaa");
});
$("#btne2-1").click(function(){
$("div[title*='en']").css("background","#bbffaa");
});
$("#btne3-1").click(function(){
$("div[title|='en']").css("background","#bbffaa");
});
$("#btne4-1").click(function(){
$("div[title~='uk']").css("background","#bbffaa");
});
//控制子元素过滤选择器
$("#btnf1").click(function(){
$("div.one :nth-child(2)").css("background","#bbffaa");
});
$("#btnf2").click(function(){
$("div.one :first-child").css("background","#bbffaa");
});
$("#btnf3").click(function(){
$("div.one :last-child").css("background","#bbffaa");
});
$("#btnf4").click(function(){
$("div.one :only-child").css("background","#bbffaa");
});
});
jquery 用的是v1.7.1。
-----总结自《Jquery（第二版）》
相关推荐
《韩顺平jQuery学习笔记及练习》是一份珍贵的学习资源，由知名讲师韩顺平的课程实录整理而成，旨在帮助学习者深入理解和掌握jQuery这一强大的JavaScript库。jQuery简化了HTML文档遍历、事件处理、动画设计和Ajax交互...
**jQuery 学习笔记总结** jQuery 是一个广泛使用的 JavaScript 库，它简化了网页文档对象模型（DOM）操作、事件处理、动画制作以及Ajax交互。本篇笔记将深入探讨 jQuery 的核心概念，包括选择器、常用方法以及在...
《jQuery学习笔记详解》 jQuery，作为一款广泛应用于前端开发的JavaScript库，因其简洁的语法和强大的功能，深受开发者喜爱。这份"jQuery学习笔记.rar"包含的资源旨在帮助你全面掌握jQuery，无论你是初学者还是有...
这份"js&jquery学习笔记"应该包含对这些概念的详细解释，以及示例代码和练习，帮助读者理解和掌握这两种技术。对于初学者来说，这是一份宝贵的资源，能够快速上手JavaScript和jQuery，提升Web开发技能。
本篇学习笔记将深入探讨jQuery中的四种选择器：后代选择器、子元素选择器、相邻兄弟选择器和一般兄弟选择器。 1. **后代选择器（Descendant Selector）** 后代选择器，用空格分隔两个选择器，表示第一个选择器的...
《jQuery学习笔记源码——初识与实践》 在当今的Web开发领域，jQuery是一个不可或缺的JavaScript库，它极大地简化了DOM操作、事件处理、动画效果以及Ajax交互等任务。本篇文章将基于“jQuery学习笔记源码 1第一个...
**jQuery 学习笔记** jQuery 是一个广泛使用的 JavaScript 库，它极大地简化了网页的 JavaScript 编程。这个学习笔记将深入探讨 jQuery 的核心概念、功能以及如何在实际项目中应用。 1. **jQuery 概述** jQuery ...
在深入探讨jQuery选择器之前，我们首先需要理解jQuery是什么。jQuery是一个广泛使用的JavaScript库，它极大地简化了HTML文档遍历、...通过实践和练习，你将能够更自如地驾驭jQuery选择器，提高代码的可读性和维护性。
1. 选择器操作：jQuery提供了丰富的选择器，如ID选择器、类选择器、属性选择器等，使开发者能够快速准确地定位页面元素。 2. DOM操作：包括元素的添加、删除、复制、插入等，以及属性和值的修改，使得DOM操作更加...
jQuery的语法使得这些操作变得简单，例如使用`$()`选择器选取DOM元素，`.on('keydown', function() {...})`监听键盘事件，`.val()`获取或设置输入值，`.html()`或`.text()`更新元素内容。 在jQuery中，`$(document)...
`jQuery学习笔记72--UI-表格排序.rar`专注于jQuery UI中的表格排序功能，这涉及到如何对HTML表格数据进行动态排序，是数据展示和交互的一个重要方面。 `Jquery应用 - 图片导航.rar`则可能是关于使用jQuery实现图片...
在本节课程“04_尚硅谷_jQuery_王振国 - 课堂笔记1”中，主要讲解了...在实际项目中，结合CSS选择器和jQuery的链式调用特性，可以编写出简洁、高效的代码。在后续的学习中，还将涉及更多的jQuery高级特性和插件的使用。
总之，"jQuery网页版键盘打字练习小游戏代码"是一个结合了jQuery技术、事件处理、动画和用户互动的项目，为学习者提供了一个实践和扩展jQuery技能的平台。通过分析和修改这个项目，开发者可以深入了解jQuery的用法，...
2. **jQuery选择器**：jQuery的选择器是其强大之处之一，它们基于CSS选择器，可以方便地选取页面上的元素。如`$("#id")`选取ID为id的元素，`$(".class")`选取所有class为class的元素，`$("tagname")`选取所有指定...
3. **jQuery学习笔记**：JQuery学习笔记.doc包含了作者在学习过程中的心得和实践案例，是理论与实际相结合的学习材料，有助于加深理解和记忆。 4. **jQuery技巧大放送**：jQuery技巧大放送.doc收录了一系列实用的...
1. 《15天学会jQuery(0-5).doc》：这部分内容通常会介绍jQuery的基本概念，包括如何引入jQuery库、选择器的使用（如ID选择器、类选择器、属性选择器等）以及DOM元素的操作（如获取元素、添加/删除元素）。...
"jQueryTest.zip"这个压缩包显然包含了与jQuery学习相关的资源，包括可能的工作示例、开发环境配置、空白模板以及笔记和准备工作。 1. **jQuery基础** - **选择器**: jQuery的核心功能之一是选择页面中的HTML元素...
《Java JDK 7学习笔记》针对Java SE 7新功能全面改版，无论是章节架构或范例程序代码，都做了全面重新编写与翻新。 《Java JDK 7学习笔记》是作者多年来教学实践的经验总结，汇集了学员在教学过程中遇到的概念、...
总结来说，这个jQuery学习资料包可能包含文档、示例代码和其他资源，全面覆盖了jQuery的基础到高级主题，是学习和提升jQuery技能的理想资料。无论你是准备入门还是寻求进阶，这个压缩包都能提供有价值的信息和实践...