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

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。