The first to pass my front-end basic notes

Part I.: JQ
node. On event = function () {}

JQ object. Event (function (e) {});

Get ("#id");
Get ("tag");

createelement ("div", {...});

Set a style for a Div, add a click event to it
var div = ...
DIV.STYLE.PPPP = PPPP;
Div.onclick = function () {}

Jq
$ ("#dv")
. css ({color: "Red", BackgroundColor: "Yellow"})
. Click (function () {})
. ff

Add a click event to the a tag in #dv
var div = ...
var alist = Div.get ....
For (...) {

}

Implicit iteration
$ ("#dv a"). Click (function () {});

Bootstrap

<div class= "center" >
</div>


[5,6,7].concat.apply ([],----)
[5,6,7,1,2,3]


var arg = 0;
$.map (arr, function (V, i) {
return v + arg;
})


var f = function () {};

var arg = 0;
$.map (arr, F, ARG);
----------------
Get ("#id"). Find (). CSS (). SSS (). s () ....

var JK = {item:[],
Fn:function () {
// ...
return this;
},
Get:function () {
// ...
return this;
},
Find:function () {
// ...
return this;
},
Css:function () {
// ...
return this;
}
};

Jk.get (). CSS (). Foind ().


The commonly used selectors in 1.JQ are:
ID #id
Class. ClassName
Label sign
General
Syntax: $ ("picker"). Method ()

Common ways to set styles:
. CSS ()
. css ("style name", "Style value")//Only one style can be set at a time
. css ({
Style name: "Value",
Style name: value,//You can set more than one style at a time
})


The. html () method and the. Text () method are equivalent to innerHTML and innertext in JS
Grammar:
String =jq object. Text ();
JQ object. HTML ("string");

2. Multi-Criteria Selector (combination, compounding)
$ ("#id. Target,classname")
3. Hierarchy Selector
Descendant Selector $ (ancestor descendants)
Descendant selector $ (Parent > child)
Followed by selector $ (front + rear)//$ (former +*)
followed by the Synonym method $ (front). Next (selector) or $ (front). Next ()
Backward Selector $ (front ~ rear)//$ (front ~ *)
The backward synonym method $ (front). Nextall (selector) or $ (front). Nextall ()
Forward selector $ (now). Priv () and Privall ()
Reverse Selection Method $ (now). Siblings ()
All selectors $ (' * ')

Note: The space in the selector expression cannot be more or less
Use the. End () method to revert the broken chain back to its original appearance

AddClass () Adding a class style to an element
Removeclass () Remove the class style of an element
Hasclass () determines whether an element has a class style
Toggleclass () switch class style, have to remove, do not add
4. Basic Filter Selector
Filters to filter the selected elements
Syntax: $ ("selector: Filter")
In all the elements selected by the selector, filter by filter
$ ("selector"). Filter (filters)
When the selected element is viewed as an array,
Look for the first one in the box, the last one (: final)
Odd number (: odd), even number (: even), greater than the specified index (: GT (i))
is less than the specified index (: LT (i)), equal to the specified index (: eq (i))
Does not have a specified selector (: not (selector))

Filters can be used cumulatively
: Filter: Filter
Execution is equivalent to, step-by-step execution filtering, followed by filtering with the result of the previous filter to do the source
For example: $ ("#dv A:first"). Text ("Selected text and Nodes");
Direct access to elements
: Header gets all H tags on the page
: Animated is executing the elements of the JQ animation
: Focus
For example: $ ("#dv: Header"). CSS ("Color", "olive"); just look for H in the Div.
$ (": Header"). CSS ("Color", "Olive"); Find h in the entire page

Syntax for property filters
[Property name]
[Property name = value]
For example, get all labels with the name attribute on the page
$ ("*[name]") * Can be omitted
For example, get the label for the gender under the form
$ ("#form Input[type=checkbox][name=sex]")

[Name*=value] contains
[Name^=value] attributes that begin with value
[Name$=value] Property ending with value
[Name!=value] is not a property of value

The [Name|=value] property value begins with value and causes the previous prefix to appear jk-color
[Name~=value] specifically matches attributes separated by spaces (except at the beginning and end)

For example: $ ("[JK][JK!=JK]"). CSS ("Color", "red");
$ ("[JK$=JK]"). CSS ("Color", "red");
$ ("[Jk|=j]"). CSS ("Color", "red");

Checked will get a checkbox, radio and select//checked can be selected results, if you want to select all just set the checked to true, all do not select set to False
Selected will only get the select tag
Enable selects all enabled elements in the form
Disenabled Select all elements in the form that are not enabled
Content Filter:
: Contains contains tags for this content
$ ("Div:contains (3)"). CSS ("Border", "1px solid Red");
Empty Blank Label
$ ("Div:empty"). CSS ({width: "200px", Height: "150px", border: "1px dashed Red"});
Has () whether the selector or label is included
$ ("Div:has (: Input)"). CSS ({width: "200px", Height: "150px", border: "1px dashed Green"});
Parent can find the label of the parents class
$ ("Div:has (*) > *:p arent"). CSS ("Border", "1px solid Red");

10.DOM objects and JQ objects are converted to each other:

Convert a DOM object to a JQ object: Only the DOM object can be smashed with $ (DOM object)
Converts the JQ object to a DOM object: 1.jq Object [0] 2.jq object. Get (0) two methods

The. html () method and the. Text () method in 11.JQ in order to implement INNERHTNL and innertext
Syntax: Parameter set no parameter value
String =jq object. Text ();
JQ object. html ();
The 12..val () method, similar to the. Text () usage, is equivalent to setting and getting the value of an element

The attr () method is equivalent to the setattribute () and GetAttribute () methods (parameter set no parameter values)
Syntax: JQ object. attr ("attribute", "value");
The string =jq object. attr ("attribute");
14. Relative Positioning:
1. $ ("Selector 1", "selector 2")
The second parameter can be the Selector DOM object JQ object, and so on, to find the element that meets the requirements in the second parameter.
such as: $ ("span", "This.parentnode"). Text ("star"); Find the span element in the parent element of the currently selected element and change its value to a star.

The 2.jq object. Find (the "selector") is the function of finding the element that meets the requirements in the descendant elements of the JQ object.
such as: $ ("This.parentnode"). Find ("span"). Text ("star"); Find the span element in the parent element of the currently selected element and change its value to a star.
15.end () Method: Restores the chain to return to the last destruction chain of the place
16. Handle the class style of the page element:
(1) addclass () Add class style to elements
(2) Removeclass () The class style of the removed element
(3) Hasclass () determines whether the element has a class style
(4) (focus) Toggleclass () switch class style, there is the removal, no, add
The DOM operation in the JQ is to create the node Settings node Properties attr (), get the nodes familiar, append nodes, remove the specified node removeattr ()
Syntax for creating elements: $ ("HTML code")
Methods for appending elements in JQ:
Parent append (son) or child appendTo (parent)
Part II: JS
1. Review
JS background
Location of the code <script type= "Text/javascript" ></script>
-On one page, all the script shares a programming area
Lexical Process Control operators
Basic type Number, Boolean, String (number, Boolean, String)
Conversion (emphasis)
-a function (difficulty)
-A function is a class citizen
-a function is a value
anonymous function (lambda function)
Object (difficulty)
--is the key value pair
Create method new and JSON object
Usage of associative arrays

2. Variable name Promotion (scope)
Block-level scope not available in JS
In JS, the variables inside the function are local scopes
JS access to variable rules (*)
JS at the time of parsing the variable, first in the current scope to find whether to have this variable
If there is a direct use, if not go to the top-level scope chain to look for, until no burst errors are found

3, Math.random

(0-1) (n,m) (4,20)

function image

5, Dom operation, is to use JavaScript to manipulate the HTML node
--turn HTML into a DOM tree
See HTML will draw Dom
Create a node, add a node, delete a node
var nodeObj = document.createelement ("node name");
document.createTextNode ("text");

Parent node. appendchild (child node);
Parent node. removechild (child node);

Get node
document.getElementById ("ID number");
document.getElementsByTagName ("tag name for HTML");
Parent node. getElementsByTagName ("tag name for HTML");

Properties of the Node
NodeType 1 element Node 2 attribute node 3 text node
NodeName element node used to return the uppercase string of the label name
NodeValue text node use, return or set text

Gets the node of the child element
Parent node. childNodes
Parent node. firstchild
Parent node. LastChild

Get sibling nodes
The current node. nextsiblings

--Set the properties of a node
node. SetAttribute (attribute name, value);
node. getattribute (attribute name);

As a general practice, you can set or get
Node. Property name
Set text
The text node. nodevalue
6. Handle operation (one object can add multiple handles at the same time, they do not affect each other)
AddEventListener ("Event name (click Onfous, etc.)", function)
RemoveEventListener ("Type to manipulate (click Onfous, etc.)", function)
adding events and removing events in less than equals IE8 are: attachevent,detachevent
For example document.getElementById ("Btn"). AddEventListener ("click", Function () {alert ("Hello")});
document.getElementById ("Btn"). RemoveEventListener ("click", Function () {alert ("Hello")});

7. Event object (can be abbreviated e)
Type: Get event types
Target: Gets the event target
Stoppropagation (): Block event bubbling
Preventdefault (): Default behavior for blocking events
For example:
<a href= "first website. html" id= "aid" > First site </a>
document.getElementById ("Aid"). AddEventListener ("click", Fun);
function Fun (e) {
E.stoppropagation (); /* Block Event bubbling */
E.preventdefault ();/* default behavior for blocking events */
alert (E.type); The return result is the click
alert (e.target); return result is http://localhost:6958/%E7%AC%AC%E4%B8%80%E4%B8%AA%E7%BD%91%E7%AB%99%20.html
}
8. Data Object
getFullYear () Get year
GetTime () Gets the milliseconds starting from 1970 to the present
setFullYear () set a specific date
GetDay () Get Week

9. Common methods of arrays
Concat () stitching two arrays of A.concat (b)
Sort () Ascending
Push () appends a d to the end of the A array, A.push ("D")
Reverse () Inverse array
10.Math method
Round () rounding
Random Number (0-1)
Max ()
Min ()
ABS ()
11. Closure Concept:
Assigns a function in a high-level scope chain (a large number of scope chains) to a low-level scope chain,
Members in a low-level scope chain (a large number of scope chains) can then access members in an advanced scope chain.

12. Four invocation modes of the function:
Functions: Calling functions Directly
Method: Must have object (var o={name: "Find Prison"} o.say=function () {})
Constructor: Any function placed after new is the constructor, the constructor's this and the method in the same
The return of the constructor is changed, if the returned object is returned directly, otherwise the created object is returned

Apply or call: The name of the function. Apply (object, [parameter array])
Function name. Call (object, parameter list)
* * Note that this refers to the current object (that is, o above) in the method invocation pattern, and this refers to the Global Object (window) in the function invocation pattern. In addition, if the function is assigned to an object, then this is the object and no longer the window.
13. Get the height width of the screen in Firefox: Window.screen.availWidth window.screen.availHeight

14. The This in the Hyperlink href represents window, only the This= event source in the event (that is, the selected item)

The first to pass my front-end basic notes