软件开发培训班 >> 编程开发 >> JavaScript


javascript 进阶篇2 CSS XML学习

　　本文标签：CSS,XML

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属性：请参考http://www.jb51.net/w3school/css/css_reference.htm (喂这也太不负责了吧！摔)
CSS单位: http://www.jb51.net/w3school/css/css_units.htm (博主你简直就是个废柴啊！摔！)
(假装没听见)
下面来进入应用环节 (￣︶￣)
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.jb51.net/w3school/xpath/xpath_syntax.htm
请大致浏览上述网页的“XPath 语法” “XPath 轴” “XPath 运算符” 以及参考手册一栏下的“XPath 函数” 。
大致浏览过后，就可以开始这部分的练习了：
首先给一个xml文件：
复制代码 代码如下:

<!-- 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的：
复制代码 代码如下:

<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的参数非常多，但是必须要了解这个函数才行，摘取下别人的东西（原内容点这里）：
函数：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来完成，但是我试来试去也没有一个代码能运行，于是就暂时这样吧，等我把代码弄好再回来补充好了 。