JavaScript Advanced 2 CSS XML Learning_Basic Knowledge

The full name of CSS is cascading style sheets, and its Chinese name is cascading style sheets, also called cascading style sheets. Its advantage is that it can make the code tidy and can batch process some styles.
Basic syntax:
Comment symbol: /* */
Selector symbol: selector {attribute:value} Values ​​of the same attribute are separated by spaces, and different attributes are separated by semicolons. case sensitive.
For example, if you want to customize the style of the table on the page, write table {...;...;}
There are many ways to use the selector, so I was too lazy to type again. Copied from the Internet:

Selector Mode	Description
*	matches any element. (Universal selector)
E	matches any element E (such as an element of type E). (type selector)
E F	Matches any descendant element F of element E . (descendant selector)
E > F	Matches any sub-element F of element E . (child selector)
E:first-child	Matches element E when it is the first child element within its parent. (:first-child pseudo-class)
E:link E:visited	Matches element E if E is the source anchor of a hyperlink whose target has not been visited (:link) or has been visited (:visited). (link pseudo-class)
E:active E:hover E:focus	Matches E in certain user actions. (Dynamic pseudo-class)
E:lang(c)	Matches an element of type E if it is in the (human) language c (the document language determines how the language is determined). (:lang() pseudo-class)
E F	Match element F if an element E directly precedes element F . (Proximity selector)
E[attr]	Matches any element E that has the "attr" attribute set (regardless of its value). (Attribute selector)
E[attr="warning"]	Matches any element E whose "attr" attribute value is strictly equal to "warning". (Attribute selector)
E[attr~="warning"]	Matches any element E whose "attr" attribute value is a space-separated list of values, one of which is strictly equal to "warning".(属性选择器)
E[lang|="en"]	匹配其“lang”属性具有以“en”开头(从左边)的值的列表的任意元素 E 。(属性选择器)
DIV.warning	仅 HTML。用法同 DIV[class~="warning"]。(类选择器)
E#myid	匹配 ID 等于“myid”的任意元素 E 。(ID 选择器)

I’ll explain it in detail when I use it.
CSS priority: In the same page or CSS file, sometimes there are multiple definitions of the same element, which requires rendering according to priority. The priority is divided into the priority of externally defined styles and the priority of other styles.
Priority of externally defined styles: I won’t talk about the specific algorithm. Here I will simply talk about the results: id selector>class selector>attribute selector>pseudo-class selector>element selector>pseudo Element Selector>Global Selector>Others
Priority of other style definitions: In-text style, that is, style=... in the element, this is the most advanced and takes precedence over all external definitions style. "!important" has different usage in different versions, so I won't explain it in detail. Please check it if necessary. Styles obtained through inheritance: This is the style with the lowest priority.
CSS attributes: Please refer to http://www.jb51.net/w3school/css/css_reference.htm (Hey, this is so irresponsible! Fall)
CSS unit: http://www.jb51 .net/w3school/css/css_units.htm (Blogger, you are such a loser! Fall!)
(Pretend not to hear)
Let’s enter the application link (￣︶￣)
1. Embed css style on the current page:

2. Embed css style file:
We create a new css folder under the project, and then create a new css file named style.css. This is done to keep the code neat. Of course, since this is just an example, I only wrote the content in the example just now.


It’s also easy to quote, just add One line:

rel specifies the css style sheet file to be added, and type specifies the file type. href is the physical address of the file.
3 Dynamically modify css styles.
Finally, it has something to do with js.
This modification method is nothing more than getting the element and modifying its attributes. One thing to mention is that the attributes of the link can also be modified.
For example: write a link whose id is myStyle, and then modify its import file. The method is as follows:

Okay, let’s start with the XML part
(blogger you Where is your integrity? ! )
If you really want to learn xml in detail, you can start another series. . Therefore, we will briefly talk about it here.
The full name of xml is: extensible markup language. It exists for better, more flexible and extensive description of data. Almost all of its tags are user-definable.
For example, if we want to store information about a book, we can store it in different ways:

XML also has several dead rules:
There must be a declaration statement Of course there is There can be other attributes such as encoding.
All elements other than xml must be closed, that is, they must have />
Attribute values ​​must be enclosed in quotes.
Case sensitive
Tag names with letters. It starts with "_" and ":" and can be followed by letters, numbers, periods, colons, and underscores.
There is only one root node.
XPath
XPath is a language used to find and locate information in XML files. It can traverse elements and attributes in the tree.
Everyone knows what numbers are. In fact, what we are talking about here is just talking about the syntax of xpath.
For the syntax of xpath, please see http://www.jb51.net/w3school/xpath/xpath_syntax.htm
Please briefly browse the "XPath Syntax" "XPath Axis" "XPath Operator" and reference on the above web page "XPath Functions" under the Manual column.
After a rough browse, you can start this part of the exercise:
First give an xml file:

(copy from website Come on, please retain permission to copy. )
The use in IE and FF is slightly different, which is more troublesome. Let’s go to IE first: In this code, it is reiterated: the script is written after the table, otherwise it will not know that sentence when compiling js Where should innerText be loaded, because it has not been rendered to the table yet. The complete code is as follows for reference:
XML in IE

接下来是FF的：

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。

Note that resultTypt has many parameter values, continue to copy them:

返回类型	说明
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。

(Although it is copied, it is very hard to copy Shenma's =w=)

In addition to these, the xml file node can actually add conditions, for example, as long as the first one meets the conditions The node:

/bookstore/book[1]/title
or the price is higher than 35:

/bookstore/book[price>35]/price
before In the example, conditional selection is not used because I want to demonstrate the effect of returning all child nodes. After all, this is what is commonly used.



There is a concept mentioned here called XSLT, which is a language used to convert xml files. Its full name is: extensible stylesheet language transformation. XSLT borrows XPath to find information in xml documents. It can display the content stored in xml files as html pages according to the specified style.

Students who are specifically interested can check it out, but I’m not interested anyway. . ╮(╯▽╰)╭

Finally, we have arrived at the last concept of xml: data island

actually means that the page contains xml data information. Like css, it can be embedded internally. The method is ...... can also be imported externally:

data of xml data island The binding to the html tag is completed through datasrc and datafld, but no code can run after I tried it, so I will leave it like this for the time being. I will come back to supplement it after I finish the code.