javascript进阶篇2CSSXML学习

首页 > 网络编程 > JavaScript > 基础知识 更新日期: 2016-04-26
CSS我觉得应该没有不会的吧。。不过因为我自己不大会于是还是补在这里好了
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样式:
rel指定加入的是css样式表文件,type指定文件类型,href则是文件的物理地址。
3 动态修改css样式。
终于,跟js扯上关系了。
这个修改的方法无外乎取到元素然后修改属性。要提的一点是,link的属性也可以修改。
比如:写一个link的id是myStyle,然后修改它的导入文件,方法是这样的:

好的接下来开始XML部分
(博主你的节操呢?!!)
xml如果真要详细学可以再开一个系列了。。于是,我们这里就是简约的说一下。
xml的全称是:extensible markup language,它的存在时为了更好的,更灵活而广泛的描述数据。他的标签几乎全部可以由用户定义。
比如我们要存储一个关于书的信息,可以有不同的存储方式:
这里):
函数: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来完成,但是我试来试去也没有一个代码能运行,于是就暂时这样吧,等我把代码弄好再回来补充好了。

> 本站内容系网友提交或本网编辑转载,其目的在于传递更多信息,并不代表本网赞同其观点和对其真实性负责。如涉及作品内容、版权和其它问题,请及时与本网联系,我们将在第一时间删除内容!

相关文章
  • javascript进阶篇3Ajax、JSON、Prototype介绍
    javascript 进阶篇3 Ajax .JSON. Prototype介绍,学习js的朋友可以参考下Ajax 这个词听了不少,但是其实并没有真的接触过,于是在这里稍微了解一下. Ajax技术的创新之处在于,改善了传统的"请求-等待-响应-刷新-返回数据"模式,在信息返回之前,用户可以继续自己的操作,当前页面不会因为请求而刷新.这样大大 ...
  • JavaScript基础篇6之函数表达式闭包
    JavaScript基础篇6之函数表达式闭包
    这篇文章主要介绍了javascript基础篇6之函数表达式闭包的相关资料,需要的朋友可以参考下 其实js支持函数闭包的主要原因是因为js需要函数能够保存数据.这里的保存数据是只函数在运行结束以后函数内变量的值也会进行保存.至于为什么js需要在函数内可以保存数据,那就是js是一种函数式语言.在函数内保存数据是函数式语言的一大特征. 回顾前面介绍过的三种定义函数 ...
  • Laravel5框架学习之向视图传送数据(进阶篇)
    上篇文章我们介绍了Laravel5框架中如何向视图中传送数据,今天我们来研究下如何向视图中传送array,非常的详细,推荐给有需要的小伙伴参考下.我们不仅仅可以向视图传送一个数据,同样我们可以传送Array 代码如下:    public function about()    {        return view('pages.about')-> ...
  • JavaScript高级篇之闭包、模拟类,继承五
    JavaScript高级篇之闭包、模拟类,继承五
    本篇主要分享我对闭包的理解及使用闭包完成私有属性.模拟类.继承等,结合大量例子,希望大家能快速掌握!首先让我们先从一些基本的术语开始吧一.javascript中的闭包 1.我们一起先来理解什么是函数的作用域. 2.调用的对象 结合例子: 代码如下: function display(something) { function executeDisplay1( ...
  • JavaScript基础篇之变量作用域、传值、传址的简单介绍与实例
    这篇文章介绍了变量的作用域,传值,传址的一些简单使用,有需要的朋友可以参考一下javascript:变量的声明以下是几种声明变量的方式 代码如下: var value; var value,value1,value2;//同时声明多个变量,但是这些变量的值都是undefined var i = 0,j = 0,k=100;//变量声明,初始化一体. //如果 ...
猜你喜欢