jquery选择器入门详解小案例_jquery选择器讲解案例资源-CSDN文库

共23个文件

html：17个

gif：4个

js：2个

4星 · 超过85%的资源需积分: 10 186 浏览量 2015-09-24 09:56:44 上传评论收藏 174KB ZIP 举报

在JavaScript的世界里，jQuery是一个非常流行且强大的库，它极大地简化了DOM操作、事件处理以及动画效果。本篇文章将深入探讨jQuery选择器的入门知识，并通过实际的小案例帮助你理解和应用这些选择器。 jQuery选择器是jQuery库的核心部分，它们是用于在HTML文档中查找元素的工具。jQuery支持多种CSS选择器，包括基本选择器、层次选择器、属性选择器和类选择器等。这些选择器可以帮助我们更精确地定位到我们需要操作的DOM元素。 1. **基本选择器**： - `$("#id")`：通过ID选择元素，例如`$("#myElement")`会选取ID为`myElement`的元素。 - `$(".class")`：通过类名选择元素，如`$(".myClass")`会选择所有类名为`myClass`的元素。 - `$("tagname")`：通过标签名选择元素，例如`$("p")`会选择所有`<p>`标签。 - `$("*")`：选择所有元素。 2. **层次选择器**： - `$(":first")`：选择第一个匹配的元素，等同于`$("selector:first")`。 - `$(":last")`：选择最后一个匹配的元素，等同于`$("selector:last")`。 - `$(":eq(index)")`：选择指定索引位置的元素，索引从0开始。 - `$(":nth-child(n)")`：选择父元素的第n个子元素。 - `$(":parent")`：选择有子元素的元素。 3. **属性选择器**： - `$("input[type='text']")`：选择所有type属性为'text'的`<input>`元素。 - `$("a[target='_blank']")`：选择所有target属性为'_blank'的`<a>`链接。 4. **类选择器**： - `$(".class1.class2")`：选择同时包含类`class1`和`class2`的元素。 - `$(".class1:not(.class2)")`：选择类`class1`但不包含`class2`的元素。在提供的案例中，你可以尝试运行代码并查看源码，这将有助于理解这些选择器的实际应用。例如，你可以用jQuery选择器来改变特定元素的样式、添加或删除类、绑定事件等。通过实践，你将更熟练地掌握如何利用jQuery选择器提高代码效率和可读性。 jQuery选择器是开发者在JavaScript编程中的得力助手，它们使得DOM操作变得更加简单和高效。在深入学习jQuery选择器的同时，别忘了结合实际项目进行练习，这样才能更好地将理论知识转化为实际技能。现在，你可以打开案例文件，开始你的jQuery选择器探索之旅吧！

资源推荐

资源详情

资源评论

收起资源包目录

jquery选择器入门详解小案例.zip （23个子文件）

jquery

13.html 1KB

15.html 2KB

3.html 2KB

Images

jquery_logo.gif 5KB

play.gif 71B

down.gif 53B

up.gif 54B

daohang.html 3KB

7.html 612B

11.html 1KB

12.html 961B

8.html 1KB

5.html 1KB

9.html 2KB

2.html 753B

4.html 867B

10.html 2KB

16.html 2KB

14.html 1KB

1.html 1KB

script

jquery-1.11.3.js 278KB

jquery-2.1.4.js 242KB

6.html 1KB

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN"> <head> <title>jquery</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <script language="javascript" type="text/javascript" src="./script/jquery-1.11.3.js"></script> <style type="text/css"> body { font-size:13px; } #divFrame { border:solid 1px #666; width:301px; overflow:hidden; } #divFrame .clsHead { background-color:#eee; padding:8px; height:18px; cursor:hand; } #divFrame .clsHead h3 { padding:0px; margin:0px; float:left; } #divFrame .clsHead span { float:right; margin-top:3px; } #divFrame .clsContent { padding:8px; } #divFrame .clsContent ul { list-style-type:none; margin:0px; padding:0px; } #divFrame .clsContent ul li { float:left; width:95px; height:23px; line-height:23px; } #divFrame .clsBot { float:right; padding-top:5px; padding-bottom:5px; } .GetFocus { background-color:#eee; } </style> <script type="text/javascript"> $(function(){ $(".clsHead").click(function(){ if($(".clsContent").is(":visible")) { $(".clsHead span img").attr("src","Images/down.gif"); $(".clsContent").css("display","none"); } else { $(".clsHead span img").attr("src","Images/up.gif"); $(".clsContent").css("display","block"); } }); $(".clsBot>a").click(function(){ if($(".clsBot>a").text()=="简化") { $("ul li:gt(4):not(:last)").hide(); $(".clsBot>a").text("更多"); } else { $("ul li:gt(4):not(:last)").show().addClass("GetFocus"); $(".clsBot>a").text("简化"); } }); }); </script> </head> <body> <div id="divFrame"> <div class="clsHead"> <h3>图书分类</h3> <span><img src="Images/up.gif" alt=""></span> </div> <div class="clsContent"> <ul> <li><a href="#">小说<a/><i>(168)</i></li> <li><a href="#">文艺<a/><i>(258)</i></li> <li><a href="#">青春<a/><i>(758)</i></li> <li><a href="#">少儿<a/><i>(1688)</i></li> <li><a href="#">生活<a/><i>(920)</i></li> <li><a href="#">社科<a/><i>(888)</i></li> <li><a href="#">管理<a/><i>(520)</i></li> <li><a href="#">计算机<a/><i>(1314)</i></li> <li><a href="#">教育<a/><i>(886)</i></li> <li><a href="#">工具书<a/><i>(818)</i></li> <li><a href="#">引进版<a/><i>(988)</i></li> <li><a href="#">其他类<a/><i>(1020)</i></li> </ul> <div class="clsBot"><a href="#">简化</a> <img src="Images/play.gif" alt=""> <div> </div> </div> </body> </html>

评论收藏

内容反馈