jQuery基础选择器练习题_jquery练习题资源-CSDN下载

共10个文件

html：7个

js：2个

md：1个

jQuery

javaScript

需积分: 49 165 浏览量 2018-07-11 17:16:47 上传评论 1 收藏 80KB ZIP 举报

在JavaScript的世界里，jQuery是一个非常流行和强大的库，它极大地简化了DOM操作、事件处理以及动画效果。本篇文章将深入探讨jQuery的基础选择器及其在实际编程中的应用，以帮助你更好地理解和掌握这些知识点。我们来了解一下jQuery的基本选择器。它们是用于选取HTML元素的最基础工具，包括： 1. **ID选择器**: 使用`#`符号来选取具有特定ID的元素，例如`$("#myID")`将选取ID为"myID"的元素。 2. **类选择器**: 使用`.`符号来选取具有特定类名的元素，例如`$(".myClass")`将选取所有class为"myClass"的元素。 3. **元素选择器**: 直接使用元素名称来选取所有该类型的元素，例如`$("div")`将选取所有`<div>`元素。 4. **标签选择器与类选择器结合**: 如`$("div.myClass")`，选取所有同时是`<div>`并且class为"myClass"的元素。接下来，我们讨论jQuery的层级选择器，这些选择器允许我们根据元素的位置关系进行选取： 1. **后代选择器**: 使用空格分隔两个选择器，如`$("div p")`选取`<div>`内的所有`<p>`元素。 2. **子元素选择器**: 使用`>`符号，如`$("div > p")`选取`<div>`的直接子元素`<p>`。 3. **相邻兄弟选择器**: 使用`+`符号，如`$("div + p")`选取紧跟在`<div>`后面的那个`<p>`元素。 4. **通用兄弟选择器**: 使用`~`符号，如`$("div ~ p")`选取`<div>`之后的所有同级`<p>`元素。 jQuery还提供了层级函数，如`.children()`（选取直接子元素）和`.parent()`（选取父元素），以及`.siblings()`（选取同级元素）等，它们提供了更精确的选择方式。过滤选择器则帮助我们进一步细化选取结果，例如： 1. **`:first`和`:last`**: 选取第一个或最后一个元素。 2. **`:even`和`:odd`**: 选取索引偶数或奇数的元素。 3. **`:not(selector)`**: 排除匹配指定选择器的元素。 4. **`:contains(text)`**: 选取包含指定文本的元素。 5. **`:hidden`和`:visible`**: 选取隐藏或显示的元素。 jQuery中的内容选择器如`:has()`和`:empty`允许我们根据元素包含的内容进行选择，而属性选择器如`$("[attribute=value]")`则让我们能根据HTML属性选取元素。表单选择器如`:$(":input")`选取所有输入元素，`:$(":text")`选取所有文本输入框，`:$(":radio")`选取所有单选按钮等，方便我们对表单元素进行操作。通过上述的练习题，你可以实践并巩固这些选择器的用法。记住，熟练掌握jQuery选择器将极大地提升你的前端开发效率，让你编写出更加简洁高效的代码。在学习过程中，不断实践和应用这些知识点，你将会成为一个jQuery的大师。

资源推荐

资源详情

资源评论

收起资源包目录

jQ基础选择器.zip （10个子文件）

jQ基础选择器

selector_code

1_base_selector.html 3KB

3_baseFilter_selecter.html 3KB

2_level_selector.html 3KB

4_content_selector.html 3KB

6_form_selector.html 3KB

5_attribute_selector.html 3KB

html12.html 12KB

html12.md 5KB

jquery-1.4.2.min.js 70KB

jquery-1.4.2.js 160KB

<!DOCTYPE html> <html> <head> <title>html12</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style type="text/css"> /* GitHub stylesheet for MarkdownPad (http://markdownpad.com) */ /* Author: Nicolas Hery - http://nicolashery.com */ /* Version: b13fe65ca28d2e568c6ed5d7f06581183df8f2ff */ /* Source: https://github.com/nicolahery/markdownpad-github */ /* RESET =============================================================================*/ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; } /* BODY =============================================================================*/ body { font-family: Helvetica, arial, freesans, clean, sans-serif; font-size: 14px; line-height: 1.6; color: #333; background-color: #fff; padding: 20px; max-width: 960px; margin: 0 auto; } body>*:first-child { margin-top: 0 !important; } body>*:last-child { margin-bottom: 0 !important; } /* BLOCKS =============================================================================*/ p, blockquote, ul, ol, dl, table, pre { margin: 15px 0; } /* HEADERS =============================================================================*/ h1, h2, h3, h4, h5, h6 { margin: 20px 0 10px; padding: 0; font-weight: bold; -webkit-font-smoothing: antialiased; } h1 tt, h1 code, h2 tt, h2 code, h3 tt, h3 code, h4 tt, h4 code, h5 tt, h5 code, h6 tt, h6 code { font-size: inherit; } h1 { font-size: 28px; color: #000; } h2 { font-size: 24px; border-bottom: 1px solid #ccc; color: #000; } h3 { font-size: 18px; } h4 { font-size: 16px; } h5 { font-size: 14px; } h6 { color: #777; font-size: 14px; } body>h2:first-child, body>h1:first-child, body>h1:first-child+h2, body>h3:first-child, body>h4:first-child, body>h5:first-child, body>h6:first-child { margin-top: 0; padding-top: 0; } a:first-child h1, a:first-child h2, a:first-child h3, a:first-child h4, a:first-child h5, a:first-child h6 { margin-top: 0; padding-top: 0; } h1+p, h2+p, h3+p, h4+p, h5+p, h6+p { margin-top: 10px; } /* LINKS =============================================================================*/ a { color: #4183C4; text-decoration: none; } a:hover { text-decoration: underline; } /* LISTS =============================================================================*/ ul, ol { padding-left: 30px; } ul li > :first-child, ol li > :first-child, ul li ul:first-of-type, ol li ol:first-of-type, ul li ol:first-of-type, ol li ul:first-of-type { margin-top: 0px; } ul ul, ul ol, ol ol, ol ul { margin-bottom: 0; } dl { padding: 0; } dl dt { font-size: 14px; font-weight: bold; font-style: italic; padding: 0; margin: 15px 0 5px; } dl dt:first-child { padding: 0; } dl dt>:first-child { margin-top: 0px; } dl dt>:last-child { margin-bottom: 0px; } dl dd { margin: 0 0 15px; padding: 0 15px; } dl dd>:first-child { margin-top: 0px; } dl dd>:last-child { margin-bottom: 0px; } /* CODE =============================================================================*/ pre, code, tt { font-size: 12px; font-family: Consolas, "Liberation Mono", Courier, monospace; } code, tt { margin: 0 0px; padding: 0px 0px; white-space: nowrap; border: 1px solid #eaeaea; background-color: #f8f8f8; border-radius: 3px; } pre>code { margin: 0; padding: 0; white-space: pre; border: none; background: transparent; } pre { background-color: #f8f8f8; border: 1px solid #ccc; font-size: 13px; line-height: 19px; overflow: auto; padding: 6px 10px; border-radius: 3px; } pre code, pre tt { background-color: transparent; border: none; } kbd { -moz-border-bottom-colors: none; -moz-border-left-colors: none; -moz-border-right-colors: none; -moz-border-top-colors: none; background-color: #DDDDDD; background-image: linear-gradient(#F1F1F1, #DDDDDD); background-repeat: repeat-x; border-color: #DDDDDD #CCCCCC #CCCCCC #DDDDDD; border-image: none; border-radius: 2px 2px 2px 2px; border-style: solid; border-width: 1px; font-family: "Helvetica Neue",Helvetica,Arial,sans-serif; line-height: 10px; padding: 1px 4px; } /* QUOTES =============================================================================*/ blockquote { border-left: 4px solid #DDD; padding: 0 15px; color: #777; } blockquote>:first-child { margin-top: 0px; } blockquote>:last-child { margin-bottom: 0px; } /* HORIZONTAL RULES =============================================================================*/ hr { clear: both; margin: 15px 0; height: 0px; overflow: hidden; border: none; background: transparent; border-bottom: 4px solid #ddd; padding: 0; } /* TABLES =============================================================================*/ table th { font-weight: bold; } table th, table td { border: 1px solid #ccc; padding: 6px 13px; } table tr { border-top: 1px solid #ccc; background-color: #fff; } table tr:nth-child(2n) { background-color: #f8f8f8; } /* IMAGES =============================================================================*/ img { max-width: 100% } </style> </head> <body> <h2>jQuery选择器</h2> <h3>基本选择器</h3> <ol> <li> 标签名选择器 $("div") 匹配文档中所有div </li> <li> id选择器 $("#id") </li> <li> 类选择器 $(".类名") </li> <li> 分组选择器 $("div,#id,.class") </li> <li> 所有元素选择器 $("*") </li> </ol> <h3>层级选择器</h3> <ol> <li>$("div span") 匹配div下所有的span元素</li> <li>$("div>span") 匹配div下所有span的子元素</li> <li>$("div+span") 匹配div后面紧邻的span兄弟元素</li> <li>$("div~span") 匹配div后面所有的span兄弟元素</li> </ol> <h3>层级函数</h3> <ol> <li> 获取元素的所有兄弟元素 $("#two").siblings("div") </li> <li> 获取元素的哥哥元素 $("#two").prev("div") </li> <li> 获取元素的哥哥们元素 $("#two").prevAll("div") </li> <li> 获取元素的弟弟元素 $("#two").next("div") </li> <li> 获取元素的弟弟们元素 $("#two").nextAll("div") </li> </ol> <h3>过滤选择器</h3> <ol> <li>$("div:first") 匹配所有div中的第一个元素</li> <li>$("div:last") 匹配所有div中的最后一个元素</li> <li>$("div:even") 匹配所有div中偶数div 从0开始</li> <li>$("div:odd") 匹配所有div中奇数div 从0开始</li> <li>$("div:eq(n)")匹配所有div中下标为n元素从0开始</li> <li>$("div:lt(n)")匹配所有div中下标小于n元素0开始</li> <li>$("div:gt(n)")匹配所有div中下标大于n元素0开始</li> <li>$("div:not(.one)")匹配所有div中 class不为one的元素</li> </ol> <h3>内容选择器</h3> <ol> <li>$("div:has(p)") 匹配所有包含p标签的div</li> <li>$("div:empty") 匹配所有空的div</li> <li>$("div:parent") 匹配所有非空的div</li> <li>$("div:contains('id')") �

评论收藏

内容反馈