Jumony入门（二）初识选择器

时间 2019-12-05

标签 jumony 入门选择器繁體版

原文原文链接

首先介绍一下Jumony是什么，Jumony是一个.NET的开源项目，项目主页位于：http://jumony.codeplex.com/，采用LGPL协议发布。css

Jumony试图提供在传统Web开发模型中许多难以解决问题的解决方案。一言蔽之，Jumony的一切基础创建在服务器端的HTML DOM之上。在服务器端将HTML（文件或动态网页技术的输出）按照客户端浏览器的处理方式解析为HTML DOM。操纵和处理HTML DOM，就像咱们在客户端用JavaScript干的那些事情同样，不一样的是，Jumony可使你依托强大的.NET Framework，来解决之前用脚本和服务器端技术都难以解决的事情。html

系列目录：css3

Jumony入门（一）从这里开始浏览器

这是系列文章的第二篇，这个系列尝试一步步从一些最简单的例子开始了解怎么玩转Jumony。建议先从第一篇开始学习搭建Jumony环境，在本文的开始的时候，假设你们已经搭建好了Jumony的运行环境。服务器

首先咱们来看一个页面：ide

这个页面的源代码以下：学习

<!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>
  <title>Ranks</title>
  <style>
    table
    {
      font-size: 12px;
    }
    .ranks th
    {
      height: 30px;
      font-size: 15px;
      font-family: Arial;
    }
    
    .ranks td, .ranks th
    {
      border-top: solid 1px;
    }
    
    .ranks .name
    {
      font-weight: bold;
    }


    .ranks table td
    {
      border: 0px;
    }
  </style>
</head>
<body>
  <table cellpadding="5" cellspacing="0" class="ranks">
    <tr>
      <td colspan="2" class="top">
        <table cellpadding="3" border="0">
          <tr>
            <td rowspan="3"><img src="http://pic.cnblogs.com/avatar/a14218.jpg" width="50" height="50" /></td>
            <td class="name">Jumony</td>
          </tr>
          <tr>
            <td>得票数: <span style="color: red;">100</span></td>
          </tr>
          <tr>
            <td>主页地址： <a href="http://jumony.codeplex.com/">http://jumony.codeplex.com/</a></td>
          </tr>
        </table>
      </td>
    </tr>
    <tr>
      <th>
        № 2
      </th>
      <td><span class="name" >Jumony</span>( <span style="color: red;">100</span> ) <a href="http://jumony.codeplex.com/">http://jumony.codeplex.com/</a></td>
    </tr>
    <tr>
      <th>
        № 3
      </th>
      <td><span class="name" >Jumony</span>( <span style="color: red;">100</span> ) <a href="http://jumony.codeplex.com/">http://jumony.codeplex.com/</a></td>
    </tr>
  </table>
</body>
</html>

请先将份源代码保存为一个叫作ranks.htm的文件，而后咱们开始对这个页面干点儿坏事。网站

这种页面，就是一种在传统的技术下，怎么也很差处理的页面，第一名的呈现方式与后面的呈现方式彻底不一样。即便用模版引擎，这种模版改起来怕也是件烦心事儿。ui

但强大CSS的选择器能够彻底的抹平这些区别，使得咱们的逻辑变得很是简单。url

固然，首先，咱们要创建一个这个页面的处理程序，也就是ranks.htm.ashx文件。而后添加using和继承基类，完成后的样子像这样：

那么首先，咱们要选择到class为ranks的那个table，再选择其每一行，选择器像是这样的：".ranks > tr"。

中间的>符号表示只选择.ranks的直接子集中的tr，由于在第一名的行中，HTML里面又被嵌了一个table来作绑定，里面也有一些tr元素。因此咱们使用>选择符来避免选择到这些：

关于选择器的语法，是彻底遵循CSS Selector 3的标准的（部分实现）。若有不清楚的地方能够移步W3C的网站：http://www.w3.org/TR/2009/PR-css3-selectors-20091215/

另外须要注意的是这里咱们是直接用Find方法的，而不是Document.Find，嗯，这是JumonyHandler提供的一个便利，对于Document的Find操做实在是太经常使用了，因此，Handler上定义了一个Find方法来对Document进行查找。固然，这和Document.Find是彻底同样的效果。

而后咱们编造一些数据，例如：

接下来是将两个列表绑定在一块儿，Ivony.Fluent里面提供了一个方法：BindTo，这个方法能够方便的进行两个列表的绑定，使用方法像是这样：

这里我使用的是lambda表达式，若是你喜欢也能够写成一个额外的方法，固然，在这个例子中，因为上面的数据类型我用的是匿名类型，因此这里没有办法拆出另外一个方法出来，那么，我继续用lambda来示范。

获取了每个绑定的元素后，咱们须要进一步考察每个项（即Name、Votes和Url）要绑定的位置。只要是有规律的界面，那么其HTML就必定是有规律的，其实这个规律并不难找：

Name位于class="name"的元素中，而Votes则老是在一个style="color: red"的span里面，至于url，则老是在<a>那里，由于这是一个连接。固然，这个页面也能够说是事先设计好的，由于这里才第二篇，咱们只考虑一些简单的示范，在后面，咱们再来看在代码中的筛选逻辑可以作到怎样的智能。那么咱们能够简单的写出选择器：

注意这里的element直接就有Find方法，事实上Find方法并非Document的专利，在Jumony中，只要是一个容器（IHtmlContainer），就能够Find，这实在很是便利。

OK，如今数据就已经所有绑定到页面了，打开页面来看看效果。

很完美不是么？看看HTML源代码：

怎么样，有没有一种在服务器端用jQuery的感受？

这里有几个问题须要注意一下：

CSS选择器的关系选择符，如">"或是"+"这些，在标准中两边是没必要留有空白的，便可以写成".ranks>tr"。但Jumony不容许，是刻意如此，并不是技术所限不能支持。由于Jumony认为强制性的留白能够提升这些选择符的可读性。
现有的版本中，不支持CSS Selector 3标准中的:not伪类和,选择符，其他的所有支持。jQuery的私有伪类则所有不支持。
若是你以为linkContainer.SetAttribute( "href" ).Value( dataItem.Url )这种写法很恶心，那么没必要担忧。下个版本就能够这样写了：linkContainer.SetAttribute( "href" ,dataItem.Url )还能够这样：linkContainer.href = dataItem.Url