- 浏览: 504946 次
- 性别:
- 来自: 北京
文章分类
- 全部博客 (329)
- [发布至博客园首页] (12)
- [随笔分类][01] .Net X (59)
- [随笔分类][20] Architecture (16)
- [随笔分类][21] Developer Logs (13)
- [网站分类]Windows 7 (1)
- [随笔分类][13] Oracle & .Net (7)
- [随笔分类][16] Love in China (14)
- [随笔分类][15] Development Tools (20)
- [随笔分类][18] Windows Phone (12)
- [随笔分类][12] Design & Pattern (17)
- [网站分类].NET新手区 (22)
- [网站分类]首页候选区 (2)
- [随笔分类][08] Windows (Server) (13)
- [随笔分类][02] CSLA.Net (3)
- [随笔分类][10] jQuery & javaScript (10)
- [随笔分类][11] SQL Server (4)
- [随笔分类][22] Enterprise Logs (3)
- [随笔分类][03] News (9)
- [随笔分类][19] Quality Assurance (2)
- [随笔分类][05] Silverlight (20)
- [随笔分类][14] Google Earth & .Net (6)
- [网站分类]非技术区 (9)
- [随笔分类][07] WWF (2)
- [随笔分类][04] SharePoint (1)
- [随笔分类][20] Analysis & Design (36)
- [随笔分类][06] WCF (5)
- [随笔分类][12] Architecture (1)
- [随笔分类][09] WPF (0)
- [随笔分类][17] VStudio & Expression (5)
最新评论
-
zhangyy130:
你好,我关于第二段的那个表视图、模型与图这三者的关系我没有看明 ...
UML模型的组成 -
guji528:
谢谢分享!
Enterprise Architect 基础应用 -
studentsky:
好文章,图文并茂!
WCF 第一个用 Visual Studio 2010 创建的WCF服务 -
chen975311486:
用哪个工具画的????
UML中对关系的描述 (二) -
frankies:
继续学习中。。
UML 交互概述图
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>
<!--<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>
发表评论
-
LINQ to SQL语句之Insert/Update/Delete操作
2009-12-30 14:54 1147Insert/Update/Delete操作 插入(Ins ... -
RabbitMQ 安装配置和简单实例
2010-01-21 16:52 1875安装ErLang运行环境 配置运行环境变量 启动服务 ... -
MSMQ(Microsoft Message Queue,微软消息队列) Asp.Net 简单示例
2010-01-22 14:59 3290系统: Windows XP 1.安装MSMQ 控制面板—&g ... -
IromPython .Net 的简介和第一个例子
2010-01-23 18:53 1365.Net 4 都已经到来 ... -
Microsoft Asp.Net MVC 从入门到精通
2010-01-27 17:53 867ASP.NET MVC Framework是微软官方提供的MV ... -
C# Socket 同步通信与异步通信 示例
2010-01-30 17:50 4760同步 1.建立链接发送和获取信息 异步 1.服务器端建立一 ... -
解决 Visual Stuido 工具栏中的工具重置后,恢复回来。
2009-12-18 17:06 1296拿DevExpress 控件为例,如果重置工具栏后,以前的工具 ... -
LINQ to SQL 用O/R设计器手工建表对象
2009-10-11 22:04 1063除了自己建立定制对象外,还可以使用O/R设计器以可视化的方式创 ... -
LINQ to XML .Net 3.5 中的新XML对象
2009-10-15 14:11 914System.Xml.Linq 命名空间中,有一系列新的LIN ... -
LINQ to XML 用 LINQ 查询 XML
2009-10-15 15:57 692将一个已知的XML放到XDocument 对象当中使用LINQ ... -
LINQ to XML 操作XML文档
2009-10-15 17:18 1014使用 XDocument 对象的 Element 方法,获取制 ... -
C# 编码规范
2009-10-15 19:20 749陈年的文档,不过很不错整理出来发到博客上,还有更多的朋友需要。 ... -
Visual Studio 项目模板、文件模板、代码段和环境设置
2009-10-15 19:31 964很久前使用过,那个时候还没有开始写博客,好久不用就都忘记了,这 ... -
ADO.NET Entity Framework 概述
2009-10-16 11:50 593ADO.NET Entity Framework 与 LINQ ... -
LinqPad 1.31 下载
2009-01-14 15:42 1000LinqPad 1.31 也许你已经非常熟悉他了,为即将使用L ... -
jQuery 的第一个例子
2009-01-18 10:34 826通过这个例子可以对jQuery的使用有个基本的认识,jQ ... -
一次从GridView 获得多个指定行中多个指定控件的值
2009-01-20 07:33 895一次从GridView 获得多个指定行中多个指定控件的值,非常 ... -
jQuery 的Ajax应用(1)--学习篇,内附实例
2009-01-28 21:48 1353下面以前台jQuery,后天C# 的方式,演示了,如何通过 ... -
Enterprise Library 4.1 一步一步从入门到精通(未完成)
2009-02-05 23:04 911Enterprise Library 4.1 一步一步从入门到 ... -
Asp.Net & Oracle 编程一步一步从入门到精通(图解)随笔系列 --- 目录
2009-02-23 19:11 1082Asp.Net & Oracle 编程一步一步从入门 ...
相关推荐
本文将深入解析jQuery选择器的功能与使用方法,帮助读者掌握这一重要的前端技术。 #### 二、jQuery选择器概览 jQuery选择器主要分为两大类:“选择”和“过滤”。选择器用于指定目标元素,而过滤器则进一步细化...
使用jQuery选择器,可以方便地选取页面上的任意元素,然后进行样式修改、事件绑定、数据操作等。例如: ```javascript // 修改所有按钮的文本 $("button").text("新文本"); // 绑定点击事件 $(".myClass").click...
这个“JQuery选择器测试 离线版”是一个专门用于检验和学习jQuery选择器功能的应用,由一位国外专家创建,并进行了轻微的修改。** 在jQuery中,选择器分为多种类型,包括基础选择器、类别选择器、ID选择器、属性...
在JavaScript的世界里,jQuery是一个非常流行和...记住,熟练掌握jQuery选择器将极大地提升你的前端开发效率,让你编写出更加简洁高效的代码。在学习过程中,不断实践和应用这些知识点,你将会成为一个jQuery的大师。
基于jQuery的H5移动端选择器是为适应移动设备特性和用户体验需求而设计的组件。这些组件通常包括日期选择器、级联选择器和自定义HTML选择器,它们能够提高移动应用的交互性和可操作性。 日期选择器是网页应用中常见...
本篇文章将深入探讨jQuery选择器的入门知识,并通过实际的小案例帮助你理解和应用这些选择器。 jQuery选择器是jQuery库的核心部分,它们是用于在HTML文档中查找元素的工具。jQuery支持多种CSS选择器,包括基本选择...
以上就是JQuery选择器使用的一些基本知识点。通过掌握这些选择器的用法,开发者可以有效地对页面上的HTML元素进行查找、操作和修改,从而提升页面的动态交互性和用户体验。在实际开发过程中,选择器的组合和使用方式...
**jQuery颜色选择器ColorPicker详解** 在Web开发中,用户界面的交互性和视觉效果往往对用户体验有着重要影响。其中,颜色选择器是一个常见的组件,它允许用户方便地选取颜色。`jQuery ColorPicker`是一个轻量级且...
总之,理解jQuery选择器的工作方式,关注其版本更新中的修复和改进,以及熟练使用开发者工具,都是应对jQuery选择器Bug的关键。在实际开发过程中,我们需要持续学习和适应,以确保我们的代码能够稳定、高效地运行。
本项目“jquery周历选择器”利用jQuery的灵活性和易用性,构建了一个适用于混合应用程序(Hybrid App)的周历选择器组件。 1. **周历选择器设计**: - 周历选择器通常用于日程管理或时间规划应用,显示一周的日期...
这个名为"jQuery选择器.rar"的压缩包文件显然包含了关于jQuery选择器的相关学习资源,可能包括示例代码、教程文档等。这些内容可能与《锋利的jQuery第二版》这本书中的章节相匹配,该书是jQuery学习的经典参考资料之...
5. **插件使用**:此外,也有许多预封装的jQuery时间选择器插件,如jQuery UI的Datepicker插件,它可以轻松实现时间选择功能,只需简单的配置即可。 ### 示例代码 以下是一个简单的jQuery时间选择器的实现示例: ...
jQuery选择器是jQuery库的核心特性之一,它极大地简化了JavaScript中的DOM元素选择和操作。jQuery完全继承了CSS的风格,并在此基础上提供了更强大和灵活的选择方式。以下是对jQuery选择器的详细说明: **1. 基本...
通过阅读和理解这段源码,开发者不仅可以学习到jQuery选择器的工作原理,还能提升对CSS选择器、DOM操作以及JavaScript性能优化的理解。 总结来说,这个"jquery样式选择器插件"是一个浓缩的精华,它展示了如何用最少...
二、jQuery颜色选择器的配置与使用 1. 引入jQuery库和颜色选择器插件 首先,你需要在HTML文档中引入jQuery库以及颜色选择器插件的JavaScript和CSS文件。例如,如果你使用的是`jquery.colorpicker.js`和`jquery....
jQuery选择器总结,网上下载的,非原创的,仅供参考,学习学习。
jquery选择器功能无比强大,用好了可以起到事半功倍的效果,这个资源把选择器单独列出来,便于方便查找
本文将深入探讨jQuery城市选择器的实现原理、使用方法及其优势。 一、jQuery库基础 jQuery是一个轻量级的JavaScript库,简化了DOM操作、事件处理、动画制作以及Ajax交互。它的API设计简洁易用,使得开发者能够更...
虽然jQuery选择器非常强大,但在处理大量元素时,应避免使用过于复杂的选择器,因为这可能影响性能。优先使用ID选择器,其次类选择器,再是属性选择器,尽量减少层级选择器的使用。 ### 实验室实践 在“jQuery实验...
3. **初始化插件**:使用jQuery选择器选择该元素,然后调用日期选择器插件的初始化方法,例如`$(selector).dateInput(options);`,其中`options`是可选的配置对象。 4. **配置选项**:根据需求设置日期选择器的配置...