js css进阶,javascript 进阶篇2 CSS XML学习

最新推荐文章于 2024-04-17 10:01:27 发布

Crazy anti

最新推荐文章于 2024-04-17 10:01:27 发布

阅读量100

点赞数

文章标签： js css进阶

CSS全称是cascading style sheets，中文名字叫级联样式单，也叫层叠样式表。它的好处就是能让代码整齐，并且可以批量处理一些样式。

基本语法：

注释符：/* */

选择符：selector {attribute:value} 同一个属性的值用空格符号隔开，不同属性用分号隔开。区分大小写。

比如要给页面中的table定制样式，则写table {.....;.....;}

选择符的使用方法有很多种，于是我又一次懒得打，从网上抄来的：

选择符模式

说明

匹配任意元素。(通用选择器)

匹配任意元素 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://www.jb51.net/w3school/css/css_reference.htm (喂这也太不负责了吧！摔)

CSS单位: https://www.jb51.net/w3school/css/css_units.htm (博主你简直就是个废柴啊！摔！)

(假装没听见)

下面来进入应用环节 (￣︶￣)

1.当前页面嵌入css样式：

css test

.tableStyle{

background:yellow;

font-size:14px;

font-weight:bold;

}

title:
content:

2.嵌入css样式文件：

我们在工程下新建一个css文件夹，然后新建一个css文件，取名为style.css。这样做是为了代码能整齐，当然因为这里只是个例子于是里面的内容我只写了刚才例子里的东西。

.tableStyle{

background:yellow;

font-size:14px;

font-weight:bold;

border:1px solid #000000

引用的时候也很容易，只需要加一行：

rel指定加入的是css样式表文件，type指定文件类型，href则是文件的物理地址。

3 动态修改css样式。

终于，跟js扯上关系了。

这个修改的方法无外乎取到元素然后修改属性。要提的一点是，link的属性也可以修改。

比如：写一个link的id是myStyle，然后修改它的导入文件，方法是这样的：

//在javascript中修改时：

var styleObj=document.getElementById("myStyle");

styleObj.styleSheet.cssText="";//清除原有样式

styleObj.styleSheet.addImport("css/style2");

好的接下来开始XML部分

(博主你的节操呢？！！)

xml如果真要详细学可以再开一个系列了。。于是，我们这里就是简约的说一下。

xml的全称是：extensible markup language，它的存在时为了更好的，更灵活而广泛的描述数据。他的标签几乎全部可以由用户定义。

比如我们要存储一个关于书的信息，可以有不同的存储方式：

.....

....

...

xml还有几个死的规定：

必须有声明语句<?xml cersion="1.0"?> 当然里面可以有别的比如encoding之类的属性。

所有的xml以外的元素都必须是封闭的，也就是必须要有/>

属性值必须包含在引号里。

区分大小写

标记名字以字母。“_”，“:”开头，后面可以跟字母，数字，句点，冒号，下划线。

只有一个根节点。

XPath

XPath是用来在XML文件中查找信息并且定位的语言。它可以遍历树中的元素和属性。

数是什么大家都懂的，其实说到这里也就是讲讲xpath的语法而已。

关于xpath的语法请看https://www.jb51.net/w3school/xpath/xpath_syntax.htm

请大致浏览上述网页的“XPath 语法” “XPath 轴” “XPath 运算符” 以及参考手册一栏下的“XPath 函数”。

大致浏览过后，就可以开始这部分的练习了：

首先给一个xml文件：

Harry Potter

J K. Rowling

2005

29.99

Everyday Italian

Giada De Laurentiis

2005

30.00

Learning XML

Erik T. Ray

2003

39.95

XQuery Kick Start

James McGovern

Per Bothner

Kurt Cagle

James Linn

Vaidyanathan Nagarajan

2003

49.99

(从网站copy来的，复制请保留权限。)

在IE和FF中的使用稍有不同，这点比较麻烦，先来IE的：这段代码中再次重申：script写在table后面，否则它在编译js的时候，不知道那句innerText该往哪里加载，因为还没有渲染到table的地方。完整代码如下做参考：

XML in IE

xml test

book name:
book author:

接下来是FF的：

xml test

book name:
book author:

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 转换来强制结果类型。