`
terryfeng
  • 浏览: 503998 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

jQuery 选择器的使用

阅读更多

jQuery 能如此的流行,很重要的一点也许就是他有非常强大且灵活的选择器,下面是一个使用选择器的例子,同样你可以复制下面的代码运行一下。

 

Code
<!--<br /><br />Code highlighting produced by Actipro CodeHighlighter (freeware)<br />http://www.CodeHighlighter.com/<br /><br />-->Code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>

<script src="jquery.js" type="text/javascript"></script>

<style type="text/css">
.red
{
background-color
: Red;
}
.green
{
background-color
: Green;
}
.blue
{
background-color
: Blue;
font-size
: x-small;
font-weight
: bold;
}
.yellow
{
background-color
: Yellow;
font-size
: x-large;
}
li
{
padding
: 0 3px;
}
.horizontal
{
float
: left;
list-style
: none;
margin
: 10px;
}
.sub-level
{
background
: #ffc;
}
a
{
color
: #00f;
}
a.mailto
{
color
: #f00;
}
a.pdflink
{
color
: #090;
}
a.mysite
{
text-decoration
: none;
border-bottom
: 1px dotted #00f;
}
.table-heading
{
background-color
: #ff0;
}
th
{
text-align
: left;
}
.odd
{
background-color
: #ffc;
}
.even
{
background-color
: #eee;
}
.highlight
{
color
: #f00;
font-weight
: bold;
}
.italic
{
font-style
: italic;
}
.bold
{
font-weight
: bold;
}
.table-heading
{
background
: #0066ff;
color
: #ffffff;
line-height
: 20px; /* */
height
: 30px;
}
</style>

<script type="text/javascript">

//我们使用 $(document).ready() 包住我们的 jQuery 代码,DOM 加载完毕后就可以使它所有东西都可用。
$(document).ready(function() {
$(
'span:contains(冯瑞涛)').addClass('red');
});

// 添加风格,让list横向排列
$(document).ready(function() {
//选择#selected-plays 下面的li元素
$('#selected-plays > li').addClass('horizontal');
//递归所有li,自定义选择器:not 排除.horizontal类的元素
$('#selected-plays li:not(.horizontal)').addClass('sub-level');
});

// 使用XPath 属性选择器 为链接分配Class
$(document).ready(function() {
//正则表达式,获得所有内容为mailto:开始的
$('a[href^="mailto:"]').addClass('mailto');
//正则表达式,内容为.pdf 结尾的
$('a[href$=".pdf"]').addClass('pdflink');
//正则表达式,内容任何位置为finehappy的
$('a[href*="finehappy"]').addClass('mysite');
});

//
$(document).ready(function() {
//为th的父对象tr添加类
$('th').parent().addClass('table-heading');
//tr,除了内容存在th 属性 的并且TR索引值匹配为偶数的元素
$('tr:not([th]):even').addClass('even');
//奇数
$('tr:not([th]):odd').addClass('odd');
//$('tr:not([th])').filter(':odd').addClass('odd'); //同样可以实现

//发现存在WPF的td
$('td:contains("WPF")').addClass('highlight');
//自定义选择器,内容中带有WPF 的同辈(同级别)为td的元素 高亮显示
$('td:contains("WPF")~ td').addClass('highlight');
/* 一下这些实现可以得到上面同样的结果 ,代表了jQuery选择器的灵活和链接能力
1.得到包含 Henry 的单元格,然后它的兄弟(不只是下一个的兄弟)。加入这个类:
$('td:contains("Henry")').siblings().addClass('highlight');
2.得到包含 Henry 的单元格,得到它的父亲,然后查找所有在它里面大于0的单元格(0
是第一个单元格),加入这个类:
$('td:contains("Henry")').parent().find('td:gt(0)') .addClass('highlight');
3.得到包含 Henry 的单元格,得到它的父亲,查找所有在它里面,然后过滤那些除了包
含 Henry的,加入这个类:
$('td:contains("Henry")').parent().find('td').not(': contains("Henry")') ).addClass('highlight');
4.得到包含 Henry 的单元格,得到它的父亲,查找在它的孩子里面的第二个单元格,然
后加入这个类,取消上一个 .find() ,在孩子里查找第三个单元格,并加入这个类:
$('td:contains("Henry")').parent().find('td:eq(1)').addClass( 'highlight').end().find('td:eq(2)').addClass('highlight');
*/


});




</script>

</head>
<body>
<form id="form1" runat="server">
<div>
<span>冯瑞涛,祝愿 找到我博客的同学 2009年 身体健康</span>
<ul id="selected-plays">
<li>北京
<ul>
<li><a href="http://www.finehappy.com">finehappy 网站</a></li>
<li>宣武</li>
</ul>
</li>
<li>上海
<ul>
<li><a href="finemoon.pdf">书籍下载</a></li>
<li>浦东</li>
</ul>
</li>
<li>广州
<ul>
<li>Mailto:<a href="mailto:fengr@gmail.com">我的邮件</a>
<ul>
<li>级别 1</li>
<li>级别 2</li>
</ul>
</li>
<li>天河</li>
</ul>
</li>
</ul>
<h2>
图书阅读
</h2>
<table border="0" cellspacing="1" cellpadding="5">
<tr>
<th>
图书名称
</th>
<th>
作者
</th>
<th>
出版日期
</th>
</tr>
<tr>
<td>
WPF 揭秘
</td>
<td>
Adam Nathan
</td>
<td>
2007年1月
</td>
</tr>
<tr>
<td>
WCF 揭秘
</td>
<td>
****
</td>
<td>
2007年2月
</td>
</tr>
<tr>
<td>
SharePoint Service 3.0 开发指南
</td>
<td>
Todd C. Bleeker
</td>
<td>
2007年3月
</td>
</tr>
</table>
</div>
</form>
</body>
</html>

 

分享到:
评论

相关推荐

    jQuery选择器全解.

    本文将深入解析jQuery选择器的功能与使用方法,帮助读者掌握这一重要的前端技术。 #### 二、jQuery选择器概览 jQuery选择器主要分为两大类:“选择”和“过滤”。选择器用于指定目标元素,而过滤器则进一步细化...

    jQuery学习资料之万能的选择器

    使用jQuery选择器,可以方便地选取页面上的任意元素,然后进行样式修改、事件绑定、数据操作等。例如: ```javascript // 修改所有按钮的文本 $("button").text("新文本"); // 绑定点击事件 $(".myClass").click...

    JQuery选择器测试 离线版

    这个“JQuery选择器测试 离线版”是一个专门用于检验和学习jQuery选择器功能的应用,由一位国外专家创建,并进行了轻微的修改。** 在jQuery中,选择器分为多种类型,包括基础选择器、类别选择器、ID选择器、属性...

    jQuery基础选择器练习题

    在JavaScript的世界里,jQuery是一个非常流行和...记住,熟练掌握jQuery选择器将极大地提升你的前端开发效率,让你编写出更加简洁高效的代码。在学习过程中,不断实践和应用这些知识点,你将会成为一个jQuery的大师。

    基于jquery的H5移动端选择器,日期选择器,自定义级联选择器,自定义html选择器

    基于jQuery的H5移动端选择器是为适应移动设备特性和用户体验需求而设计的组件。这些组件通常包括日期选择器、级联选择器和自定义HTML选择器,它们能够提高移动应用的交互性和可操作性。 日期选择器是网页应用中常见...

    jquery选择器入门详解小案例

    本篇文章将深入探讨jQuery选择器的入门知识,并通过实际的小案例帮助你理解和应用这些选择器。 jQuery选择器是jQuery库的核心部分,它们是用于在HTML文档中查找元素的工具。jQuery支持多种CSS选择器,包括基本选择...

    基于JQuery 选择器使用说明介绍

    以上就是JQuery选择器使用的一些基本知识点。通过掌握这些选择器的用法,开发者可以有效地对页面上的HTML元素进行查找、操作和修改,从而提升页面的动态交互性和用户体验。在实际开发过程中,选择器的组合和使用方式...

    jQuery颜色选择器ColorPicker

    **jQuery颜色选择器ColorPicker详解** 在Web开发中,用户界面的交互性和视觉效果往往对用户体验有着重要影响。其中,颜色选择器是一个常见的组件,它允许用户方便地选取颜色。`jQuery ColorPicker`是一个轻量级且...

    jQuery选择器的一个Bug

    总之,理解jQuery选择器的工作方式,关注其版本更新中的修复和改进,以及熟练使用开发者工具,都是应对jQuery选择器Bug的关键。在实际开发过程中,我们需要持续学习和适应,以确保我们的代码能够稳定、高效地运行。

    jquery周历选择器

    本项目“jquery周历选择器”利用jQuery的灵活性和易用性,构建了一个适用于混合应用程序(Hybrid App)的周历选择器组件。 1. **周历选择器设计**: - 周历选择器通常用于日程管理或时间规划应用,显示一周的日期...

    jQuery选择器.rar

    这个名为"jQuery选择器.rar"的压缩包文件显然包含了关于jQuery选择器的相关学习资源,可能包括示例代码、教程文档等。这些内容可能与《锋利的jQuery第二版》这本书中的章节相匹配,该书是jQuery学习的经典参考资料之...

    jQuery时间选择器点击选择小时分钟代码

    5. **插件使用**:此外,也有许多预封装的jQuery时间选择器插件,如jQuery UI的Datepicker插件,它可以轻松实现时间选择功能,只需简单的配置即可。 ### 示例代码 以下是一个简单的jQuery时间选择器的实现示例: ...

    PPT和案例\jQuery选择器

    jQuery选择器是jQuery库的核心特性之一,它极大地简化了JavaScript中的DOM元素选择和操作。jQuery完全继承了CSS的风格,并在此基础上提供了更强大和灵活的选择方式。以下是对jQuery选择器的详细说明: **1. 基本...

    jquery样式选择器插件源码demo

    通过阅读和理解这段源码,开发者不仅可以学习到jQuery选择器的工作原理,还能提升对CSS选择器、DOM操作以及JavaScript性能优化的理解。 总结来说,这个"jquery样式选择器插件"是一个浓缩的精华,它展示了如何用最少...

    jquery 颜色选择器,使用简单

    二、jQuery颜色选择器的配置与使用 1. 引入jQuery库和颜色选择器插件 首先,你需要在HTML文档中引入jQuery库以及颜色选择器插件的JavaScript和CSS文件。例如,如果你使用的是`jquery.colorpicker.js`和`jquery....

    jQuery选择器总结

    jQuery选择器总结,网上下载的,非原创的,仅供参考,学习学习。

    jquery选择器速查表

    jquery选择器功能无比强大,用好了可以起到事半功倍的效果,这个资源把选择器单独列出来,便于方便查找

    jquery 城市选择器

    本文将深入探讨jQuery城市选择器的实现原理、使用方法及其优势。 一、jQuery库基础 jQuery是一个轻量级的JavaScript库,简化了DOM操作、事件处理、动画制作以及Ajax交互。它的API设计简洁易用,使得开发者能够更...

    Jquery实验室的选择器工具

    虽然jQuery选择器非常强大,但在处理大量元素时,应避免使用过于复杂的选择器,因为这可能影响性能。优先使用ID选择器,其次类选择器,再是属性选择器,尽量减少层级选择器的使用。 ### 实验室实践 在“jQuery实验...

    jquery日期选择器

    3. **初始化插件**:使用jQuery选择器选择该元素,然后调用日期选择器插件的初始化方法,例如`$(selector).dateInput(options);`,其中`options`是可选的配置对象。 4. **配置选项**:根据需求设置日期选择器的配置...

Global site tag (gtag.js) - Google Analytics