欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

javascript 進(jìn)階篇2 CSS XML學(xué)習(xí)

 更新時(shí)間:2012年03月14日 22:14:05   作者:  
CSS我覺(jué)得應(yīng)該沒(méi)有不會(huì)的吧。。不過(guò)因?yàn)槲易约翰淮髸?huì)于是還是補(bǔ)在這里好了
CSS全稱(chēng)是cascading style sheets,中文名字叫級(jí)聯(lián)樣式單,也叫層疊樣式表。它的好處就是能讓代碼整齊,并且可以批量處理一些樣式。
基本語(yǔ)法:
注釋符:/* */
選擇符:selector {attribute:value} 同一個(gè)屬性的值用空格符號(hào)隔開(kāi),不同屬性用分號(hào)隔開(kāi)。 區(qū)分大小寫(xiě)。
比如要給頁(yè)面中的table定制樣式,則寫(xiě)table {.....;.....;}
選擇符的使用方法有很多種,于是我又一次懶得打,從網(wǎng)上抄來(lái)的:
選擇符模式 說(shuō)明
* 匹配任意元素。(通用選擇器)
E 匹配任意元素 E (例如一個(gè)類(lèi)型為 E 的元素)。(類(lèi)型選擇器)
E F 匹配元素 E 的任意后代元素 F 。(后代選擇器)
E > F 匹配元素 E 的任意子元素 F 。(子選擇器) 
E:first-child 當(dāng)元素 E 是它的父元素中的第一個(gè)子元素時(shí),匹配元素 E 。(:first-child 偽類(lèi))
E:link E:visited 如果 E 是一個(gè)目標(biāo)還沒(méi)有訪問(wèn)過(guò)(:link)或者已經(jīng)訪問(wèn)過(guò)(:visited)的超鏈接的源錨點(diǎn)時(shí)匹配元素 E 。(link 偽類(lèi))
E:active E:hover E:focus 在確定的用戶動(dòng)作中匹配 E 。(動(dòng)態(tài)偽類(lèi))
E:lang(c) 如果類(lèi)型為 E 的元素使用了(人類(lèi))語(yǔ)言 c (文檔語(yǔ)言確定語(yǔ)言是如何被確定的),則匹配該元素。(:lang() 偽類(lèi))
E + F 如果一個(gè)元素 E 直接在元素 F 之前,則匹配元素 F 。(臨近選擇器)
E[attr]  匹配具有”attr”屬性集(不考慮它的值)的任意元素 E 。(屬性選擇器)
E[attr="warning"]  匹配其“attr”屬性值嚴(yán)格等于“warning”的任意元素 E 。(屬性選擇器)
E[attr~="warning"] 匹配其“attr”屬性值為空格分隔的值列表,并且其中一個(gè)嚴(yán)格等于“warning”的任意元素 E 。(屬性選擇器)
E[lang|="en"] 匹配其“l(fā)ang”屬性具有以“en”開(kāi)頭(從左邊)的值的列表的任意元素 E 。(屬性選擇器)
DIV.warning 僅 HTML。用法同 DIV[class~="warning"]。(類(lèi)選擇器)
E#myid 匹配 ID 等于“myid”的任意元素 E 。(ID 選擇器)
用到的時(shí)候再詳細(xì)解釋吧。
CSS優(yōu)先級(jí):同一個(gè)頁(yè)面或者css文件里,有時(shí)候會(huì)對(duì)同一個(gè)元素有多個(gè)定義,這就需要根據(jù)優(yōu)先級(jí)來(lái)渲染了。優(yōu)先級(jí)分為 外部定義樣式的優(yōu)先級(jí)與其他樣式的優(yōu)先級(jí)。
外部定義樣式的優(yōu)先級(jí):具體怎么算法就不說(shuō)了,這里單純說(shuō)結(jié)果:id選擇符>類(lèi)選擇符>屬性選擇符>偽類(lèi)選擇符>元素選擇符>偽元素選擇符>全局選擇符>其他
其他樣式定義的優(yōu)先級(jí):文內(nèi)樣式,也就是在元素里面的style=...,這個(gè)是最最高級(jí)的,優(yōu)先于所有的外部定義樣式。"!important" 這個(gè)在不同版本用法有偏差,也就不具體說(shuō)了,需要的時(shí)候查吧。通過(guò)繼承得到的樣式:這個(gè)是優(yōu)先級(jí)最低的樣式。
CSS屬性:請(qǐng)參考http://www.dbjr.com.cn/w3school/css/css_reference.htm (喂這也太不負(fù)責(zé)了吧!摔)
CSS單位: http://www.dbjr.com.cn/w3school/css/css_units.htm (博主你簡(jiǎn)直就是個(gè)廢柴??!摔!)
(假裝沒(méi)聽(tīng)見(jiàn))
下面來(lái)進(jìn)入應(yīng)用環(huán)節(jié) ( ̄︶ ̄)
1.當(dāng)前頁(yè)面嵌入css樣式:
復(fù)制代碼 代碼如下:

<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樣式文件:
我們?cè)诠こ滔滦陆ㄒ粋€(gè)css文件夾,然后新建一個(gè)css文件,取名為style.css。這樣做是為了代碼能整齊,當(dāng)然因?yàn)檫@里只是個(gè)例子于是里面的內(nèi)容我只寫(xiě)了剛才例子里的東西。

復(fù)制代碼 代碼如下:

.tableStyle{
background:yellow;
font-size:14px;
font-weight:bold;
border:1px solid #000000

引用的時(shí)候也很容易,只需要加一行:
<link rel="stylesheet" type="text/css" href="css/style.css" />
rel指定加入的是css樣式表文件,type指定文件類(lèi)型,href則是文件的物理地址。
3 動(dòng)態(tài)修改css樣式。
終于,跟js扯上關(guān)系了。
這個(gè)修改的方法無(wú)外乎取到元素然后修改屬性。要提的一點(diǎn)是,link的屬性也可以修改。
比如:寫(xiě)一個(gè)link的id是myStyle,然后修改它的導(dǎo)入文件,方法是這樣的:
復(fù)制代碼 代碼如下:

<link rel="stylesheet" id="myStyle" type="text/css" href="css/style.css">
<script tyle="text/javascript">
//在javascript中修改時(shí):
var styleObj=document.getElementById("myStyle");
styleObj.styleSheet.cssText="";//清除原有樣式
styleObj.styleSheet.addImport("css/style2");
</script>

好的接下來(lái)開(kāi)始XML部分
(博主你的節(jié)操呢??。。?
xml如果真要詳細(xì)學(xué)可以再開(kāi)一個(gè)系列了。。于是,我們這里就是簡(jiǎn)約的說(shuō)一下。
xml的全稱(chēng)是:extensible markup language,它的存在時(shí)為了更好的,更靈活而廣泛的描述數(shù)據(jù)。他的標(biāo)簽幾乎全部可以由用戶定義。
比如我們要存儲(chǔ)一個(gè)關(guān)于書(shū)的信息,可以有不同的存儲(chǔ)方式:
復(fù)制代碼 代碼如下:

<book>
<name>.....</name>
<author>....</author>
<publisher>...</publisher>
</book>
<!-- or -->
<book>
<property name="name" value="....."/>
<property name="author" value="..."/>
<property name="publisher" value="...."/>.
</book>

xml還有幾個(gè)死的規(guī)定:
必須有聲明語(yǔ)句<?xml cersion="1.0"?> 當(dāng)然里面可以有別的比如encoding之類(lèi)的屬性。
所有的xml以外的元素都必須是封閉的,也就是必須要有/>
屬性值必須包含在引號(hào)里。
區(qū)分大小寫(xiě)
標(biāo)記名字以字母?!癬”,“:”開(kāi)頭,后面可以跟字母,數(shù)字,句點(diǎn),冒號(hào),下劃線。
只有一個(gè)根節(jié)點(diǎn)。
XPath
XPath是用來(lái)在XML文件中查找信息并且定位的語(yǔ)言。它可以遍歷樹(shù)中的元素和屬性。
數(shù)是什么大家都懂的,其實(shí)說(shuō)到這里也就是講講xpath的語(yǔ)法而已。
關(guān)于xpath的語(yǔ)法請(qǐng)看http://www.dbjr.com.cn/w3school/xpath/xpath_syntax.htm
請(qǐng)大致瀏覽上述網(wǎng)頁(yè)的“XPath 語(yǔ)法” “XPath 軸” “XPath 運(yùn)算符” 以及參考手冊(cè)一欄下的“XPath 函數(shù)”。
大致瀏覽過(guò)后,就可以開(kāi)始這部分的練習(xí)了:
首先給一個(gè)xml文件:
復(fù)制代碼 代碼如下:

<!-- 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>

(從網(wǎng)站copy來(lái)的,復(fù)制請(qǐng)保留權(quán)限。)
在IE和FF中的使用稍有不同,這點(diǎn)比較麻煩,先來(lái)IE的:這段代碼中再次重申:script寫(xiě)在table后面,否則它在編譯js的時(shí)候,不知道那句innerText該往哪里加載,因?yàn)檫€沒(méi)有渲染到table的地方。完整代碼如下做參考:
XML in IE
復(fù)制代碼 代碼如下:

<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>

接下來(lái)是FF的:
復(fù)制代碼 代碼如下:

<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中的讀取網(wǎng)上的資源很少,我找了好多也沒(méi)找到可以讀到結(jié)點(diǎn)值的,于是我用debug在ff瀏覽器下觀察了好久,終于找到了 author.childNodes[0].nodeValue 這一句。
XML文件在firefox瀏覽器下的讀取主要有兩個(gè)類(lèi)實(shí)現(xiàn),一個(gè)是XPathEvaluator, XPathResult。其實(shí)就是用XPathEvaluator查找,然后在XPathResult里存儲(chǔ)查找結(jié)果??梢钥吹轿业拇a里用XPathEvaluator查找的部分,那個(gè)函數(shù)evaluate的參數(shù)非常多,但是必須要了解這個(gè)函數(shù)才行,摘取下別人的東西(原內(nèi)容點(diǎn)這里):
函數(shù):evaluate(xpathText,contextNode,namespaceURLMapper,resultType,result)
參數(shù) 描述
xpathText 表示要計(jì)算的 XPath 表達(dá)式的字符串。
contextNode 文檔中,對(duì)應(yīng)要計(jì)算的表達(dá)式的節(jié)點(diǎn)。
namespaceURLMapper

把一個(gè)命名空間前綴映射為一個(gè)全稱(chēng)命名空間 URL 的函數(shù)。

如果不需要這樣的映射,就為 null。

resultType

指定了期待作為結(jié)果的對(duì)象的類(lèi)型,使用 XPath 轉(zhuǎn)換來(lái)強(qiáng)制結(jié)果類(lèi)型。

類(lèi)型的可能的值是 XPathResult 對(duì)象所定義的常量。

result

一個(gè)復(fù)用的 XPathResult 對(duì)象;

如果你要?jiǎng)?chuàng)建一個(gè)新的 XPathResult 對(duì)象,則為 null。

注意,resultTypt有很多種參數(shù)值,繼續(xù)抄來(lái):
返回類(lèi)型 說(shuō)明
ANY_TYPE 把這個(gè)值傳遞給 Document.evaluate() 或 XPathExpression.evaluate() 來(lái)指定可接受的結(jié)果類(lèi)型。屬性 resultType 并不設(shè)置這個(gè)值。
NUMBER_TYPE numbervalue 保存結(jié)果。
STRING_TYPE stringvalue 保存結(jié)果。
BOOLEAN_TYPE booleanValue 保存結(jié)果。
UNORDERED_NODE_ITERATOR_TYPE 這個(gè)結(jié)果是節(jié)點(diǎn)的無(wú)序集合,可以通過(guò)重復(fù)調(diào)用 iterateNext() 直到返回 null 來(lái)依次訪問(wèn)。在此迭代過(guò)程中,文檔必須不被修改。
ORDERED_NODE_ITERATOR_TYPE 結(jié)果是節(jié)點(diǎn)的列表,按照文檔中的屬性排列,可以通過(guò)重復(fù)調(diào)用 iterateNext() 直到返回 null 來(lái)依次訪問(wèn)。在此迭代過(guò)程中,文檔必須不被修改。
UNORDERED_NODE_SNAPSHOT_TYPE 結(jié)果是一個(gè)隨機(jī)訪問(wèn)的節(jié)點(diǎn)列表。snapshotLength 屬性指定了列表的長(zhǎng)度,并且 snapshotItem() 方法返回指定下標(biāo)的節(jié)點(diǎn)。節(jié)點(diǎn)可能和它們出現(xiàn)在文檔中的順序不一樣。既然這種結(jié)果是一個(gè)“快照”,因此即便文檔發(fā)生變化,它也有效。
ORDERED_NODE_SNAPSHOT_TYPE 這個(gè)結(jié)果是一個(gè)隨機(jī)訪問(wèn)的節(jié)點(diǎn)列表,就像 UNORDERED_NODE_SNAPSHOT_TYPE,只不過(guò)這個(gè)列表是按照文檔中的順序排列的。
ANY_UNORDERED_NODE_TYPE singleNodeValue 屬性引用和查詢匹配的一個(gè)節(jié)點(diǎn),如果沒(méi)有匹配的節(jié)點(diǎn)則為 null。如果有多個(gè)節(jié)點(diǎn)和查詢匹配,singleNodeValue 可能是任何一個(gè)匹配節(jié)點(diǎn)。
FIRST_ORDERED_NODE_TYPE singleNodeValue 保存了文檔中的第一個(gè)和查詢匹配的節(jié)點(diǎn),如果沒(méi)有匹配的節(jié)點(diǎn),則為 null。
(雖然是抄的,可是復(fù)制神馬的也很辛苦的=w=)

除了這些之外,xml文件結(jié)點(diǎn)其實(shí)還可以增加條件,比如只要第一個(gè)符合條件的結(jié)點(diǎn):

/bookstore/book[1]/title
或者價(jià)格高于35的:

/bookstore/book[price>35]/price
之前的例子里不用條件選取是我想示范一下返回所有子結(jié)點(diǎn)的效果,畢竟這才是常用的。



這里提到一個(gè)概念叫做XSLT,這是一個(gè)用來(lái)轉(zhuǎn)換xml文件的語(yǔ)言,全稱(chēng)是:extensible stylesheet language transformation。XSLT借用XPath在xml文檔中尋找信息,它可以將xml文件中存放的內(nèi)容按照指定樣式顯示為html頁(yè)面。

具體有興趣的同學(xué)可以查查看,反正我是沒(méi)興趣。。╮(╯▽╰)╭

終于,到了xml的最后一個(gè)概念:數(shù)據(jù)島

其實(shí)就是指頁(yè)面包含了xml數(shù)據(jù)信息,跟css一樣,可以內(nèi)部鑲嵌,辦法就是<xml>......</xml> 也可以外部引入:<xml src="xml/books.xml"></xml>

xml數(shù)據(jù)島的數(shù)據(jù)與html標(biāo)簽的綁定,通過(guò)datasrc, datafld來(lái)完成,但是我試來(lái)試去也沒(méi)有一個(gè)代碼能運(yùn)行,于是就暫時(shí)這樣吧,等我把代碼弄好再回來(lái)補(bǔ)充好了。

相關(guān)文章

最新評(píng)論