IOS HTML+CSS+JS Summary

First, HTML + CSS

1. Can see the structure of the label
* Parent-child Relationship
<p>
<span>123</span>
</p>

* Properties


2. Understanding the type of element (label)
1> blocks: block level
* Exclusive Line
* Can modify the size arbitrarily

2> Inline: in-line
* Multiple inline elements can be displayed on the same line
* Dimensions cannot be modified, depending on how much the content

3> Inline-block: inline-block level
* Multiple inline-block-level elements can be displayed on the same line
* Can modify the size arbitrarily
* Do not set the size, the default size depends on the content of how much

3. Understanding Common Properties
1> font-size: Font Size
2> Color: Text color
3> Background: Background
4> Display: Type of display (block, inline, Inline-block, none)
5> padding
6> margin
7> Border
8> Width
9> Height

4. Out of standard flow
1> Float: Left\right
2> Absolute Positioning
* Position:absolute;
* right:0px;
* bottom:0px;
//Lower right corner
//If you want to locate relative to the parent node, it is best to set the parent node's position to relative
//principle: Sub-absolute father phase

5. Common selectors
1> Tag Selector: TagName
2> class Selector:. ClassName
3> ID Selector: #id
4> descendant Selector(separated by spaces between multiple selectors): TagName. ClassName. ClassName TagName
5> Group Selector(separated by commas between multiple selectors): TagName,. ClassName, TagName,. className
6> Direct descendant selector(multiple selectors with greater than > separated): tagName >. className >. className > TagName
7> Property Selector: Tagname[arrtname= "AttrValue"]
8> Selector Combination(Multiple selectors glued together): Tagname.classname
9> pseudo-Class
* Tagname:hover
*. classname:hover
* Tagname.classname Tagname:hover

6. Advanced
* Baidu

Second, JS

1. Basic operation of the node (CRUD)
* C (Create):
var div = document.createelement(' div ');
Document.body.appendchild(DIV);

* R (Read):
var div = document.getElementById(' logo ');
var div = document.getElementsByTagName(' div ') [0];
var div = document.Getelementsbyclassname(' logo ') [0];

* U (Update):
var img = document.getElementById(' logo ');
img.src = ' images/01.png ';

* D (Delete):
var img = document.getElementById(' logo ');
Img.parentnode.RemoveChild(IMG);

2. Event Binding
1> Recommended Practices
var button = document.getElementById (' login ');
Button.onclick = function () {
//Implement the Click button to do something
};

2> written directly inside the label
<button onclick= "var = 20; alert (age); " > Login </button>

3> not used
function Login () {
//Implement the Click button to do something
}

var button = document.getElementById (' login ');
Button.onclick = login;

Third, JQuery

1. Finding elements through selectors
* $ (' selector ')
* jquery supports most CSS selectors

2. Property Manipulation
* Get attributes: $ ('Selector Selector'). attr (' attribute name ');
* Set properties: $ ('selector ').attr (' attribute name ', ' attribute value ');

3. Show and Hide
* Display: $ ('Selector Selector'). Show ();
* Hidden: $ ('Selector Selector'). Hide ();
* Show and hide switch back and forth: $ ('Selector Selector'). Toggle ();

4. Event Binding
* Click events (Common)
$ ('Selector Selector'). Click (function () {
//Implement the Click button to do something
}). hide ();
//Bind the event to the node before hiding

* Click events (not used)
function Login () {
//Implement the Click button to do something
}
$ ('Selector Selector'). Click (login);

Iv. Reference Manual

1.www.w3school.com.cn
2.http://www.w3school.com.cn/jquery/jquery_reference.asp
3.http://www.php100.com/manual/jquery/

V. HTML5 framework (most of which are written for mobile devices)

1. Concept
* With the HTML5 framework, writing simple lines of JS code, you can achieve a very beautiful phone interface
* The HTML5 framework encapsulates a large number of DOM node operations, encapsulating a large number of CSS styles
* The requirements for JS are relatively high, the requirements for CSS is not high

2. Common HTML5 Framework
* PhoneGap
* jQuery Mobile
* Sencha-touch

IOS HTML+CSS+JS Summary