| First, JS three ways to use |
1, HTML tag embedded JS (do not promote the use of. )
<button onclick= "Javascript:alert (' You really dot ah. > have the ability to point me!!!! </button>
2, the HTML page directly using JS:
<script type= "Text/javascript" >
JS Code
</script>
3, reference external JS file:
<script language= "javascript" src= "JS file path" >
</script>
| Ii. three ways to use CSS |
1, inline style sheet: Directly in the HTML start tag using style= "" Way reference;
Features: The CSS code and HTML code is completely melted together, does not conform to the requirements of the content and performance separation. Not conducive to style reuse;
Priority: Highest.
2, internal style sheet: in Features: The CSS code is separated from the HTML code, but does not completely separate the CSS files and HTML files, not conducive to multi-page reuse style.
3. External style sheet: Link css file using link tag.
<link rel= "stylesheet" type= "Text/css" href= "Css/01css.css"/>
Features: The complete separation of CSS and HTML is conducive to style reuse and later maintenance.
"The DOM0 event model in JS"
1, inline model: directly the function name as an attribute value of an event property of an HTML tag;
Eg: <button onclick= "func ()" > button </button>
Cons: Violating the basic principles of HTML and JavaScript separation;
2, the script model: in the JS script through the event attribute to bind;
Eg:document.getElementsByTagName (' input ') [0].onclick = Func1 () {}
Limitations: The same node can only bind one type of event;
"The DOM2 event model in JS"
1. Add Event Bindings:
IE10 Before: btn1.attachevent ("onclick", function);
Other browsers: Btn1.addeventlistener ("click", Function, True/false);
Parameter three: false (default), indicating event bubbling, true, indicating event capture
Compatible wording: if (btn1.attachevent) {
Btn1.attachevent ();
}else{
Btn1.addeventlistener ();
}
Advantage: The same node, you can add multiple listeners of the same type of event;
2. Cancel Event Binding:
Note: If you are canceling an event binding, the callback function must use the named function instead of the anonymous function when binding the event. Because you need to pass in the name of the function when you cancel the event binding;
. RemoveEventListener ("Click", the name of the function);
. DetachEvent ("onclick", the name of the function);
| The writing and invocation of anonymous function in JS |
1, declare an anonymous function, directly assigned to an event;
Window.onload=function () {}
2, using function expressions, declaring anonymous functions;
declaring function expressions: var func = function () {}
Call function Expression: func ()
>>> using an anonymous function expression, the calling statement must be followed by an error after declaring the statement (compared to the general function declaration and the call!)
3, using self-executing function, declare and invoke the anonymous function directly;
!function () {} (); Start with any operator and use it normally!
(function () {} ()); Use () to wrap the anonymous function and the following parentheses
(function () {}) (); Use () to wrap an anonymous function expression only
>>>>> three types of writing features:
① structure clear, beginning add! , End Plus (). Not easy to mess, recommended use;
② can indicate that the anonymous function and the following () as a whole, recommended to use;
③ cannot indicate that the function and after () are a whole and are not recommended for use.
| V. Media Enquiry @media/@import use method |
1, directly in the CSS file to use
@media type and (condition 1) and (condition 2) {
tag {CSS style}
}
2. Importing with Import
@import url ("Css/02-css.css") All and (max-width:980px)
3. Use the link link to set the query mode for the media property:
<link rel= "stylesheet" href= "Css/02-css.css" media= "All and (max-width:980px)"/>
JS three ways to use/css three ways to use the DOM event model in/js/js the writing of anonymous functions and the invocation/media query @media three ways to use
