经典的jQuery选择器应用例子_jquery选择器案例资源-CSDN下载

共8个文件

js：3个

css：2个

db：1个

jQuery

4星 · 超过85%的资源需积分: 9 87 浏览量 2011-12-16 15:24:50 上传评论收藏 41KB RAR 举报

在JavaScript的世界里，jQuery是一个非常流行且强大的库，它极大地简化了DOM操作、事件处理以及动画效果。jQuery选择器是其核心功能之一，允许开发者高效地选取页面中的HTML元素，进而进行各种操作。本篇文章将深入探讨jQuery选择器的详细应用，通过一系列经典实例来帮助你更好地理解和运用这些选择器。 1. 基本选择器： - `$("#id")`：通过ID选取元素，例如`$("#myDiv")`会选择id为"myDiv"的元素。 - `$(".class")`：通过类名选取元素，例如`$(".highlight")`会选择所有类名为"highlight"的元素。 - `$("tag")`：通过标签名选取元素，例如`$("p")`会选择所有段落元素。 2. 属性选择器： - `$("input[type='text']")`：选取特定属性值的元素，这里选取所有type属性为"text"的输入元素。 - `$("[href^='http://']")`：选取属性值以指定字符串开头的元素，如选取所有href属性以"http://"开头的链接。 3. 位置选择器： - `$("div:first")`：选取首个匹配的选择器的元素。 - `$("li:last")`：选取最后一个匹配的选择器的元素。 - `$("tr:eq(2)")`：选取索引为2（数组索引从0开始）的元素。 - `$("input:gt(3)")`：选取索引大于3的所有输入元素。 - `$("p:not(.intro)")`：选取不是".intro"类的所有段落元素。 4. 伪类选择器： - `$("a:hover")`：选取鼠标悬停时的链接元素。 - `$("li:odd")`：选取奇数索引的列表项。 - `$("input:checked")`：选取被选中的输入元素，如复选框或单选按钮。 5. 子代和相邻选择器： - `$("ul > li")`：选取所有直接位于<ul>元素下的<li>元素。 - `$("div + p")`：选取紧跟在<div>元素后面的<p>元素。 - `$("h2 ~ p")`：选取所有在<h2>元素后面但不直接相邻的<p>元素。 6. 组合选择器： - `$("div, span")`：选取所有<div>和<span>元素。 - `$("input[type='text'], textarea")`：选取所有type为"text"的输入元素和所有<textarea>元素。了解并熟练运用这些jQuery选择器，可以显著提升你的前端开发效率。在实际项目中，你可以结合各种选择器灵活地选取需要操作的元素，实现丰富的交互效果和动态内容更新。在jQuerySelectors压缩包中，你将会找到这些选择器的实例代码，通过实际运行和调试，你将更深入地理解它们的工作原理和应用场景。动手实践，是掌握这些知识点的关键。

资源推荐

资源详情

资源评论

收起资源包目录

jQuerySelectors.rar （8个子文件）

jQuerySelectors

index.html 24KB

img

animationProcessing.gif 4KB

Thumbs.db 3KB

jquery.DOMWindow.js 15KB

jquery.js 99KB

select.js 2KB

css

select.css 1KB

main.css 994B

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Selectors</title> <link rel="stylesheet" href="css/select.css" type="text/css" /> <script src="js/jquery.js" type="text/javascript"></script> <script src="js/select.js" type="text/javascript"></script> <script src="js/jquery.DOMWindow.js" type="text/javascript"></script> </head> <body> <div id="container"> <h1> jQuery Selectors </h1> <div class="section">  <div class="domtree"> <h3> Toggle Button = <code>$('selector').addClass('highlight').animate({ marginLeft: 10},'fast');</code> </h3> <p> <a href="http://www.codylindley.com/jqueryselectors.zip" title="Download These Files" rel="">Download These Files</a> </p> <div id="myid"> This sentence is in <code><div id="myid"></code>. It is followed by a horizontal rule. </div> <hr /> <p> This is a paragraph, which means it is wrapped in <code><p></code> <span>and</span><code></p></code>. Those "p" tags in the previous sentence are formatted as <code><code></code>. </p> <ul> <li>This is the first list item (<code><li></code>) in an unordered list (<code><ul></code>). </li> <li>This is the second list item. It has a <a rel="self" title="Learning jQuery blog" href="#">link</a> in it.</li> <li class="myclass otherclass">This is the third list item. It has a <code>class</code> of "myclass otherclass"</li> <li>This is the fourth list item. It has <strong>strong</strong> text and <em>em</em>phasized <em>text</em>. <ul> <li>second-level list item 1</li> <li>second-level list item 2</li> </ul> </li> </ul> <p class="myclass"> <code><p class="myclass"></code>This is another paragraph. It has class="myclass" Otherwise, nothing <strong>special</strong> about it at all. </p> <p> This is a paragraph, which means it is wrapped in <code><p></code> and <code></p></code>. Those "p" tags in the previous sentence are formatted as <code>. </p> <form action="" method="get" accept-charset="utf-8"> <div class="left"> <div> <input type="text" value="text input" /> </div> <div> <input type="text" value="disabled text input" disabled="disabled" /> </div> <div> <input type="password" name="password" value="password" /> </div> <div> <select> <option>select list w/ options</option> <option>another option</option> <option>a third option</option> </select> </div> </div> <textarea class="left" rows="5" cols="20">This is a textarea</textarea> <div> <select size="5" style="margin-left: 10px"> <option>select list w/ options</option> <option selected="selected">another option</option> <option>a third option</option> </select> </div> <div class="clear-left"> <label for="radio1"> <input class="left" name="radiobtn" type="radio" id="radio1" value="checkedradio" checked="checked" /> Radio Checked </label> <label class="left clear-left" for="radio2"> <input class="left" id="radio2" name="radiobtn" type="radio" value="not" /> Radio Not Checked </label> <label class="left clear-left" for="check1"> <input class="left" id="check1" name="checkbx" type="checkbox" value="checked" checked="checked" /> Checkbox Checked </label> <label class="left clear-left" for="check2"> <input class="left" id="check2" name="checkbx" type="checkbox" value="not" /> Checkbox Not Checked </label> <label class="left clear-left" for="check3"> <input class="left" id="check3" name="checkbx" type="checkbox" value="not" /> Another checkbox Not Checked </label> </div> <div class="left clear-left"> <input type="submit" value="Submit input" /> </div> <div class="left"> <input type="button" value="Button input" /> </div> <div class="left"> <input type="reset" value="Reset input" /> </div> <div class="left"> <input type="image" src="img/animationProcessing.gif" value="Image input" /> </div> <div class="left"> <button> Button button</button> </div> <div class="left clear-left"> <input type="file" name="fileinput" value="file input" id="fileinput" /> </div> </form> </div>    <div class="example"> <h3> Enter Your Own Selectors ( example: li:nth-child(2) ) </h3> <textarea rows="3" cols="20" id="customInput" style="width: 250px;">li:nth-child(2)</textarea> <input type="submit" value="toggle" id="toggleCustom" /> </div>  <div class="example"> <h3> Basics </h3> <div class="content">  <div class="sample-code"> $('<span class="querystring">#myid</span>') </div> <input type="submit" value="toggle" />  <div class="sample-code"> $('<span class="querystring">code</span>') </div> <input type="submit" value="toggle" />  <div class="sample-code"> $('<span class="querystring">.myclass</span>') </div> <input type="submit" value

评论收藏

内容反馈