Development tools and key technologies: VS backend
Author: Chen Chi Fan
Write Time: 2019.5.25
Lost and Found page layout: The main use of several CSS selectors, as well as property inheritance, the weight rules.
First: CSS several selectors, as well as property inheritance:
(1) id selector (# myid)
(2) The class selector (.myclassname)
(3) the tag selector (div, h1, p)
(4) adjacent to the selector (h1 + p)
(5) sub-selector (ul <li)
(6) descendant selector (li a)
(7) a selector wildcard (*)
(8) attribute selector (a [rel = "external"])
Second: the rule weights, weight on the label is 1, class a weight of 10, id a weight of 100
If the weights are the same, the last defined style will work, but should avoid such a situation.
Introduction A simple example:
/ * * Weight of 1 /
div{
}
/ * The weight is 10 * /
.class1{
}
/ * 100 * Weight /
# {Id1
}
/ * A weight of 100 + 1 = 101 * /
# ID1 div {
}
/ * Weight of 10 + 1 = 11 * /
.class1 div{
}
/ * Weight of 10 + 1 = 10 + 21 * /
.class1 .class2 div {
}
(3) use of course: there are inline elements: ab span img input select strong (stressed tone)
There are block-level elements: div ul ol li dl dt dd h1 h2 h3 h4 ... p
(4) javascript client-side scripting language and object-based event-driven
(5) If the page is nested, it is necessary to use iframe to display the page loads data
iframe will block Onload event of the main page;
iframe shared connection pool and the main page, and the browser is limited to connecting the same domain, it will affect the parallel load the page.
These two shortcomings need to be considered before using iframe. If you need to use iframe, the best is dynamically added to the iframe src attribute value by JavaScript, so these two problems can be bypassed.
FIG Claim effect to be achieved:
The difference between (1) .get (), [] and .EQ () method:
eq returns native jQuery object, taken some el element generates jQuery new objects; get and [] returns are native DOM object, consistent with the principles; get and [] difference is get is obtained by a method jQuery object, [] is according to acquire jQuery is an array object.
(2) there is selectivity based on relative performance class id selector based on a large overhead, because it need to traverse all DOM elements.
(3) this is a key js, with different functions using the occasion, this value will change. But there is a general principle, that is, this means that the target function is called.
Renderings has claimed to achieve:
Conclusion: Several relates CSS selectors, and attribute inheritance, rule weights, inline elements, block-level element, iframe, display page data loading, GET (), [] and .EQ () method distinction content.