javascript 进阶篇2 CSS XML学习

时间：2021-05-28

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属性：请参考https://.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_TYPEnumbervalue 保存结果。STRING_TYPEstringvalue 保存结果。BOOLEAN_TYPEbooleanValue 保存结果。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_TYPEsingleNodeValue 属性引用和查询匹配的一个节点，如果没有匹配的节点则为 null。如果有多个节点和查询匹配，singleNodeValue 可能是任何一个匹配节点。FIRST_ORDERED_NODE_TYPEsingleNodeValue 保存了文档中的第一个和查询匹配的节点，如果没有匹配的节点，则为 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来完成，但是我试来试去也没有一个代码能运行，于是就暂时这样吧，等我把代码弄好再回来补充好了。

声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。

相关文章