javascript 进阶篇2 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>
<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。 |
| 返回类型 | 说明 |
| 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。 |
除了这些之外，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来完成，但是我试来试去也没有一个代码能运行，于是就暂时这样吧，等我把代码弄好再回来补充好了。
相关推荐
-
javascript 进阶篇2 CSS XML学习
CSS全称是cascading style sheets,中文名字叫级联样式单,也叫层叠样式表.它的好处就是能让代码整齐,并且可以批量处理一些样式. 基本语法: 注释符:/* */ 选择符:selector {attribute:value} 同一个属性的值用空格符号隔开,不同属性用分号隔开. 区分大小写. 比如要给页面中的table定制样式,则写table {.....;.....;} 选择符的使用方法有很多种,于是我又一次懒得打,从网上抄来的: 选择符模式 说明 * 匹配任意元素.(通用选择
-
javascript进阶篇深拷贝实现的四种方式
目录 概念介绍 第一种:递归方式(推荐,项目中最安全最常用) 第二种:JSON.stringify() :(这个不推荐使用,有坑) 第三种:使用第三方库lodash中的cloneDeep()方法 第四种:JQuery的extend()方法进行深拷贝(推荐在JQ中使用) 总结 概念介绍 深拷贝:在堆内存中重新开辟一个存储空间,完全克隆一个一模一样的对象 浅拷贝:不在堆内存中重新开辟空间,只复制栈内存中的引用地址.本质上两个对象(数组)依然指向同一块存储空间 第一种:递归方式(推荐,项目中最安全最常
-
javascript 进阶篇3 Ajax 、JSON、 Prototype介绍
Ajax 这个词听了不少,但是其实并没有真的接触过,于是在这里稍微了解一下. Ajax技术的创新之处在于,改善了传统的"请求-等待-响应-刷新-返回数据"模式,在信息返回之前,用户可以继续自己的操作,当前页面不会因为请求而刷新.这样大大的提高了交互性. Ajax其实并不是一个技术,而是由许多技术组成的.最大的特色之一就是可以异步传输,实现多线程服务. Ajax的异步传输,依靠的是js中的XMLHttpRequst对象,于是我们从它入手. XMLHttpRequest是XMLHttp组建
-
javascript 进阶篇1 正则表达式，cookie管理，userData
首先,什么事正则表达式呢,其实引入概念很多时候并不能帮我们明白它到底是什么,所以我先简单描述下,正则表达式,其实就是一个记录字符串规则则的字符串,等我们看完这一部分,也就能明白它到底是什么了. 基本语法:正则表达式就是"/expression/"+表示搜索范围的符号.例如我们要找function这个关键词,就是/function/gi,其中g表示global,就是全局搜索,i表示ignor,就是忽略大小写. 在js中,我们通过RegExp类来实现. 这个类里面有很多很多的符号用来表示不
-
jqGrid 学习笔记整理——进阶篇(一 )
在浏览导航栏添加所需按钮 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>DEMO</title> <link rel="stylesheet" type="text/css" href="css/jquery-ui.min.css" /> <link rel=&
-
Java中jqGrid 学习笔记整理——进阶篇(二)
相关阅读: Java中jqGrid 学习笔记整理--进阶篇(一) 本篇开始正式与后台(java语言)进行数据交互,使用的平台为 JDK:java 1.8.0_71 myEclisp 2015 Stable 2.0 Apache Tomcat-8.0.30 Mysql 5.7 Navicat for mysql 11.2.5(mysql数据库管理工具) 一.数据库部分 1.创建数据库 使用Navicat for mysql创建数据库(使用其他工具或直接使用命令行暂不介绍) 2. 2.创建表 双击打
-
Vue学习笔记进阶篇之函数化组件解析
这两天学习了Vue.js 感觉函数化组件这个地方知识点挺多的,而且很重要,所以,今天添加一点小笔记 介绍 之前创建的锚点标题组件是比较简单,没有管理或者监听任何传递给他的状态,也没有生命周期方法.它只是一个接收参数的函数. 在这个例子中,我们标记组件为 functional, 这意味它是无状态(没有 data),无实例(没有 this 上下文). 一个 函数化组件 就像这样: Vue.component('my-component', { functional: true, // 为了弥补缺少的
-
Vue学习笔记进阶篇之vue-router安装及使用方法
介绍 vue-router是Vue.js官方的路由插件,它和vue.js是深度集成的,适合用于构建单页面应用.vue的单页面应用是基于路由和组件的,路由用于设定访问路径,并将路径和组件映射起来.传统的页面应用,是用一些超链接来实现页面切换和跳转的.在vue-router单页面应用中,则是路径之间的切换,也就是组件的切换. 本文是基于上一篇文章(Vue学习笔记进阶篇--vue-cli安装及介绍)vue-cli脚手架工具的. 安装 在终端通过cd命令进入到上一篇文章中创建的my-demo1项目目录里
-
Vue学习笔记进阶篇之单元素过度
概述 Vue 在插入.更新或者移除 DOM 时,提供多种不同方式的应用过渡效果. 包括以下工具: 在 CSS 过渡和动画中自动应用 class 可以配合使用第三方 CSS 动画库,如 Animate.css 在过渡钩子函数中使用 JavaScript 直接操作 DOM 可以配合使用第三方 JavaScript 动画库,如 Velocity.js 单元素/组件的过度 Vue 提供了 transition 的封装组件,在下列情形中,可以给任何元素和组件添加 entering/leaving 过渡 条
-
C语言学习进阶篇之万字详解指针与qsort函数
目录 前言 函数指针 代码一 代码二 函数指针数组 函数指针数组的用途 计算器的基本代码 函数指针实现简单的计算机 函数指针数组实现简单计算机 指向函数指针数组的指针 回调函数 简单的冒泡排序 冒泡排序的优化 qsort函数 qsort函数介绍 qsort实现冒泡排序 qsort排序结构数据 模拟实现qsort函数 写在最后 前言 前面学到了字符指针,指针数组是一个存储指针的数组,数组指针是一个指向函数的指针,数组参数和指针参数.其中不乏有很多需要注意的知识点,例如:&数组名和数组名表示的含义,