javascript 進階篇2 CSS XML – Javascript教程_JS教程_技術文章 – 程式設計聯盟

CSS我覺得應該沒有不會的吧。。不過因為我自己不大會於是還是補在這裡好瞭。

CSS全稱是cascading style sheets,中文名字叫級聯樣式單,也叫層疊樣式表。它的好處就是能讓代碼整齊,並且可以批量處理一些樣式。

基本語法:

註釋符:/*   */

選擇符:selector {attribute:value}  同一個屬性的值用空格符號隔開,不同屬性用分號隔開。 區分大小寫。

比如要給頁面中的table定制樣式,則寫table {…..;…..;}

選擇符的使用方法有很多種,於是我又一次懶得打,從網上抄來的:

 

選擇符模式 說明
* 匹配任意元素。(通用選擇器)
E 匹配任意元素E (例如一個類型為E 的元素)。(類型選擇器)
E F 匹配元素E 的任意後代元素F 。(後代選擇器)
E > F 匹配元素E 的任意子元素F 。(子選擇器) 
E:first-child 當元素E 是它的父元素中的第一個子元素時,匹配元素E 。(:first-child 偽類)
E:link E:visited 如果E 是一個目標還沒有訪問過(:link)或者已經訪問過(:visited)的超鏈接的源錨點時匹配元素E 。(link 偽類)
E:active E:hover E:focus 在確定的用戶動作中匹配E 。(動態偽類)
E:lang(c) 如果類型為E 的元素使用瞭(人類)語言c (文檔語言確定語言是如何被確定的),則匹配該元素。(:lang() 偽類)
E + F 如果一個元素E 直接在元素F 之前,則匹配元素F 。(臨近選擇器)
E[attr]  匹配具有”attr”屬性集(不考慮它的值)的任意元素E 。(屬性選擇器)
E[attr="warning"]  匹配其“attr”屬性值嚴格等於“warning”的任意元素E 。(屬性選擇器)
E[attr~="warning"] 匹配其“attr”屬性值為空格分隔的值列表,並且其中一個嚴格等於“warning”的任意元素E 。(屬性選擇器)
E[lang|="en"] 匹配其“lang”屬性具有以“en”開頭(從左邊)的值的列表的任意元素E 。(屬性選擇器)
DIV.warning 僅HTML。用法同DIV[class~="warning"]。(類選擇器)
E#myid 匹配ID 等於“myid”的任意元素E 。(ID 選擇器)

 

  
 

用到的時候再詳細解釋吧。
CSS優先級:同一個頁面或者css文件裡,有時候會對同一個元素有多個定義,這就需要根據優先級來渲染瞭。優先級分為 外部定義樣式的優先級與其他樣式的優先級。
• 外部定義樣式的優先級:具體怎麼算法就不說瞭,這裡單純說結果:id選擇符>類選擇符>屬性選擇符>偽類選擇符>元素選擇符>偽元素選擇符>全局選擇符>其他
• 其他樣式定義的優先級:文內樣式,也就是在元素裡面的style=…,這個是最最高級的,優先於所有的外部定義樣式。"!important" 這個在不同版本用法有偏差,也就不具體說瞭,需要的時候查吧。通過繼承得到的樣式:這個是優先級最低的樣式。
CSS屬性:請參考asp”>http://www.w3school.com.cn/css/css_reference.asp  (喂這也太不負責瞭吧!摔)
CSS單位:  http://www.w3school.com.cn/css/css_units.asp  (博主你簡直就是個廢柴啊!摔!)
(假裝沒聽見)
下面來進入應用環節 ( ̄︶ ̄)
1.當前頁面嵌入css樣式:
<html>
     <head>
         <title>css test</title>
         <style>
             .tableStyle{
             background:yellow;
             font-size:14px;
             font-weight:bold;
             }
         </style>
</head>
<body>
<table width="400" align="center" class="tableStyle">
    <tr>
           <td>title:</td>
           <td><input type="text" name="title" size="50"></td>
    </tr>
    <tr>
            <td>content:</td>
            <td><textarea name="content" class="userData" cols="45" rows="10"></textarea></td>
    </tr>
</table>
<body>

2.嵌入css樣式文件:
我們在工程下新建一個css文件夾,然後新建一個css文件,取名為style.css。這樣做是為瞭代碼能整齊,當然因為這裡隻是個例子於是裡面的內容我隻寫瞭剛才例子裡的東西。

 

 

 

.tableStyle{
           background:yellow;
           font-size:14px;
           font-weight:bold;
           border:1px solid #000000
}
 
引用的時候也很容易,隻需要加一行:
<link rel="stylesheet" type="text/css" href="css/style.css" />
復制代碼
rel指定加入的是css樣式表文件,type指定文件類型,href則是文件的物理地址。
3 動態修改css樣式。
終於,跟js扯上關系瞭。
這個修改的方法無外乎取到元素然後修改屬性。要提的一點是,link的屬性也可以修改。
比如:寫一個link的id是myStyle,然後修改它的導入文件,方法是這樣的:
<link rel="stylesheet" id="myStyle" type="text/css" href="css/style.css">

<script tyle="text/javascript">
//在javascript中修改時:

var styleObj=document.getElementById("myStyle");
styleObj.styleSheet.cssText="";//清除原有樣式
styleObj.styleSheet.addImport("css/style2");
</script>

________________________________________
好的接下來開始XML部分
(博主你的節操呢?!!)
xml如果真要詳細學可以再開一個系列瞭。。於是,我們這裡就是簡約的說一下。
xml的全稱是:extensible markup language,它的存在時為瞭更好的,更靈活而廣泛的描述數據。他的標簽幾乎全部可以由用戶定義。
比如我們要存儲一個關於書的信息,可以有不同的存儲方式:
<book>
  <name>…..</name>
  <author>….</author>
  <publisher>…</publisher>
</book>
<!–     or       –>
<book>
  <property name="name" value="….."/>
  <property name="author" value="…"/>
  <property name="publisher" value="…."/>.
</book>

xml還有幾個死的規定:
• 必須有聲明語句<?xml cersion="1.0"?> 當然裡面可以有別的比如encoding之類的屬性。
• 所有的xml以外的元素都必須是封閉的,也就是必須要有/>
• 屬性值必須包含在引號裡。
• 區分大小寫
• 標記名字以字母。“_”,“:”開頭,後面可以跟字母,數字,句點,冒號,下劃線。
• 隻有一個根節點。
XPath
XPath是用來在XML文件中查找信息並且定位的語言。它可以遍歷樹中的元素和屬性。
數是什麼大傢都懂的,其實說到這裡也就是講講xpath的語法而已。
關於xpath的語法請看http://www.w3school.com.cn/xpath/xpath_syntax.asp
請大致瀏覽上述網頁的“XPath 語法”  “XPath 軸” “XPath 運算符” 以及參考手冊一欄下的“XPath 函數”。
大致瀏覽過後,就可以開始這部分的練習瞭:
首先給一個xml文件:
  View Code
<!– Copyright w3school.com.cn –>
<!– W3School.com.cn bookstore example –>
<bookstore>
<book category="children">
<title lang="en">Harry Potter</title>
<author>J K. Rowling</author>
<year>2005</year>
<price>29.99</price>
</book>
<book category="cooking">
<title lang="en">Everyday Italian</title>
<author>Giada De Laurentiis</author>
<year>2005</year>
<price>30.00</price>
</book>
<book category="web" cover="paperback">
<title lang="en">Learning XML</title>
<author>Erik T. Ray</author>
<year>2003</year>
<price>39.95</price>
</book>
<book category="web">
<title lang="en">XQuery Kick Start</title>
<author>James McGovern</author>
<author>Per Bothner</author>
<author>Kurt Cagle</author>
<author>James Linn</author>
<author>Vaidyanathan Nagarajan</author>
<year>2003</year>
<price>49.99</price>
</book>
</bookstore>

(從網站copy來的,復制請保留權限。)
在IE和FF中的使用稍有不同,這點比較麻煩,先來IE的:這段代碼中再次重申:script寫在table後面,否則它在編譯js的時候,不知道那句innerText該往哪裡加載,因為還沒有渲染到table的地方。完整代碼如下做參考:
  XML in IE
<html>
     <head>
         <title>xml test</title>
        
</head>
<body>
<table width="400" border="1px" align="center">
    <tr>
           <td width="30%">book name:</td>
           <td><span  id="bname"></span></td>
    </tr>
    <tr>
            <td>book author:</td>
            <td ><span id="bauthor"><span></td>
    </tr>
</table>
<script type="text/javascript">         
         <!–
              var xmldoc=new ActiveXObject("MSXML2.DOMDocument.3.0");
              xmldoc.load("xml/books.xml");
              var name=xmldoc.selectNodes("/bookstore/book/title");
              var author=xmldoc.selectNodes("/bookstore/book/author");
              var bname=document.getElementById("bname");
              var bauthor=document.getElementById("bauthor");
              bname.innerText=name[0].text;
              bauthor.innerHTML="<p>"+author[0].text+"</p>";
         //–>
         </script>
<body>
</html>

接下來是FF的:
  XML in FF
<html>
     <head>
         <title>xml test</title>
        
</head>
<body>
<table width="400" border="1px" align="center">
    <tr>
           <td width="30%">book name:</td>
           <td><span  id="bname"></span></td>
    </tr>
    <tr>
            <td>book author:</td>
            <td ><span id="bauthor"><span></td>
    </tr>
</table>
<script type="text/javascript">         
         <!–
              var xmldoc=document.implementation.createDocument("","",null);
              xmldoc.load("xml/books.xml")
              //xmlDoc.evaluate(xpath, xmlDoc, namespace, XPathResult.ANY_TYPE,XPahrResult);
var evaluatorObj=new XPathEvaluator();
              function getBookChild(path){
                  return evaluatorObj.evaluate(path,xmldoc.documentElement,null,
                                                                XPathResult.ORDERED_NODE_ITERATOR_TYPE,null);
              }
              var namelist=getBookChild("/bookstore/book/title");
              var name=namelist.iterateNext();
              var authorlist=getBookChild("/bookstore/book/author");
               var author=authorlist.iterateNext();
              var bname=document.getElementById("bname");
              var bauthor=document.getElementById("bauthor");
              bname.innerHTML=name.childNodes[0].nodeValue;
              bauthor.innerHTML=author.childNodes[0].nodeValue
         //–>
</script>
<body>
</html>

xml在FF中的讀取網上的資源很少,我找瞭好多也沒找到可以讀到結點值的,於是我用debug在ff瀏覽器下觀察瞭好久,終於找到瞭  author.childNodes[0].nodeValue  這一句。
XML文件在firefox瀏覽器下的讀取主要有兩個類實現,一個是XPathEvaluator, XPathResult。其實就是用XPathEvaluator查找,然後在XPathResult裡存儲查找結果。可以看到我的代碼裡用XPathEvaluator查找的部分,那個函數evaluate的參數非常多,但是必須要瞭解這個函數才行,摘取下別人的東西(原內容點這裡http://www.w3school.com.cn/xmldom/met_document_evaluate.asp ):
函數:evaluate(xpathText,contextNode,namespaceURLMapper,resultType,result)

 

參數 描述
xpathText 表示要計算的XPath 表達式的字符串。
contextNode 文檔中,對應要計算的表達式的節點。
namespaceURLMapper 把一個命名空間前綴映射為一個全稱命名空間URL 的函數。
如果不需要這樣的映射,就為null。
resultType 指定瞭期待作為結果的對象的類型,使用XPath 轉換來強制結果類型。
類型的可能的值是XPathResult 對象所定義的常量。
result 一個復用的XPathResult 對象;
如果你要創建一個新的XPathResult 對象,則為null。

註意,resultTypt有很多種參數值,繼續抄來:

返回類型 說明
ANY_TYPE 把這個值傳遞給Document.evaluate() 或XPathExpression.evaluate() 來指定可接受的結果類型。屬性resultType 並不設置這個值。
NUMBER_TYPE numbervalue 保存結果。
STRING_TYPE stringvalue 保存結果。
BOOLEAN_TYPE booleanValue 保存結果。
UNORDERED_NODE_ITERATOR_TYPE 這個結果是節點的無序集合,可以通過重復調用iterateNext() 直到返回null 來依次訪問。在此迭代過程中,文檔必須不被修改。
ORDERED_NODE_ITERATOR_TYPE 結果是節點的列表,按照文檔中的屬性排列,可以通過重復調用iterateNext() 直到返回null 來依次訪問。在此迭代過程中,文檔必須不被修改。
UNORDERED_NODE_SNAPSHOT_TYPE 結果是一個隨機訪問的節點列表。snapshotLength 屬性指定瞭列表的長度,並且snapshotItem() 方法返回指定下標的節點。節點可能和它們出現在文檔中的順序不一樣。既然這種結果是一個“快照”,因此即便文檔發生變化,它也有效。
ORDERED_NODE_SNAPSHOT_TYPE 這個結果是一個隨機訪問的節點列表,就像UNORDERED_NODE_SNAPSHOT_TYPE,隻不過這個列表是按照文檔中的順序排列的。
ANY_UNORDERED_NODE_TYPE singleNodeValue 屬性引用和查詢匹配的一個節點,如果沒有匹配的節點則為null。如果有多個節點和查詢匹配,singleNodeValue 可能是任何一個匹配節點。
FIRST_ORDERED_NODE_TYPE singleNodeValue 保存瞭文檔中的第一個和查詢匹配的節點,如果沒有匹配的節點,則為null。

 

(雖然是抄的,可是復制神馬的也很辛苦的=w=)
除瞭這些之外,xml文件結點其實還可以增加條件,比如隻要第一個符合條件的結點:
/bookstore/book[1]/title
或者價格高於35的:
/bookstore/book[price>35]/price
之前的例子裡不用條件選取是我想示范一下返回所有子結點的效果,畢竟這才是常用的。
 
這裡提到一個概念叫做XSLT,這是一個用來轉換xml文件的語言,全稱是:extensible stylesheet language transformation。XSLT借用XPath在xml文檔中尋找信息,它可以將xml文件中存放的內容按照指定樣式顯示為html頁面。
具體有興趣的同學可以查查看,反正我是沒興趣。。╮(╯▽╰)╭
終於,到瞭xml的最後一個概念:數據島
其實就是指頁面包含瞭xml數據信息,跟css一樣,可以內部鑲嵌,辦法就是<xml>……</xml> 也可以外部引入:<xml src="xml/books.xml"></xml>
xml數據島的數據與html標簽的綁定,通過datasrc, datafld來完成,但是我試來試去也沒有一個代碼能運行,於是就暫時這樣吧,等我把代碼弄好再回來補充好瞭。
  
 

摘自  勤勞的餃子
 

發佈留言