Reference Link: http://www.cnblogs.com/wupeiqi/articles/5433893.html
Day13
1. CSS Examples
2. JavaScript
3. DOM Operations
Previous section review:
1. HTML tags
html/head/body/
Input
Div,span
A
P
Br
Span
Table > Tr row th header column TD header Column
H
Form> action method enctype=;;;
Select option
Input series:
Text
Password
Email
button
Submit
Radio Name property is the same
CheckBox
Reset
TextArea
2.CSS
A. Form of existence
-<div style= ' k1=v1;k2=v2; ' >
-<style></style>
-<link ...>
B. Selector
<style>
. c1{
}
#i1 {
}
div{
}
. C1, #i2 {
}
. C1. c2{
}
. c1 >. c2{
}
. c1:hover{
}
Input[type= ' text ']{
}
</style>
C. Style
Nexus * * *
Color
Background-color:
Font-size:
BACKGROUND-IMG:
Background-position:
Position
Fixed-permanently pinned to a location in the browser window
Absolute-pinned to a location in the browser window
Relative-alone useless
Relative
Absolute
padding: Inner margin
Margin: Margin
Top ...:
border:1px Shixu Yanse
height:100%
Width
Display
None hidden
Block blocks
Inline inline
Inlie-block Inline + block level
Float
Left
Right
<div style= ' background-color:red; ' >
<div style= ' float:left; ' >adf</div>
<div style= ' float:right; ' >adf</div>
<div style= ' Clear:both ' ></div>
</div>
Text-align:
Line-height:
Cursor
Z-index:
Opacity
Today's content
Example of a background management
Second, JavaScript
1. Form of existence
2. Location
<body>
...;.
</body>
3.
A = 123;
var a = 123;
4.////* *
5. Declaring functions
Common functions
function func (ARG) {
alert (123);
}
Func ("Alex")
normal function, self-executing function
(function (ARG) {
alert (123);
}) ("Alex")
(function (ARG) {}) ("Alex")
Anonymous functions, passed as arguments
function () {
alert (123);
}
Application of anonymous function
function func (ARG) {
Arg ()
}
Func (function () {alert (123)})
6. Basic data types
Undefined//for defining VAR age;
function func (A1,A2) {
alert (A1);
alert (A2);
}
Func (1)
Null//Empty value
Digital
var age = 123.123;
var v = typeof age; # number
Alert (v);
IsNaN
parseint ()
parsefloat (num)
String
Obj.length length
Obj.trim () Remove whitespace
Obj.trimleft ()
Obj.trimright)
Obj.charat (n) returns the nth character in a string
Obj.concat (value, ...) stitching
Obj.indexof (Substring,start) sub-sequence position
Obj.lastindexof (Substring,start) sub-sequence position
Obj.substring (from, to) gets a subsequence from an index
Obj.slice (start, end) slice
Obj.tolowercase () Uppercase
Obj.touppercase () lowercase
Obj.split (delimiter, limit) split
Array
The size of the obj.length array
Obj.push (ele) trailing append element
Obj.pop () tail Gets an element
Obj.unshift (ele) head insertion element
Obj.shift () Removing elements from the head
Obj.splice (Start, DeleteCount, value, ...) inserting, deleting, or replacing elements of an array
Obj.splice (n,0,val) specify position insert element
Obj.splice (n,1,val) specifying position substitution elements
Obj.splice (n,1) specify location Delete element
Obj.slice () slices
Obj.reverse () reversal
Obj.join (Sep) joins the array elements to construct a string.
Obj.concat (val,..) connection array
Obj.sort () sorting an array element
Dictionary
info = {Name: ' Alex ', age:18};
7. Serialization
Json.stringify
Json.parse
8. Escaping
9. Eval
10. Time
var da = new Date ();
11. Conditions & Loops & Exception Handling
12. Object-oriented
Object oriented
function Foo (name,age) {
This. name = name;
This. Age = age;
}
obj = new Foo (' Alex ', 18);
Obj. Name
function Foo (name,age) {
This. name = name;
This. Age = age;
}
Using prototype to implement method reuse
Foo.prototype.show = function () {
Alert (this. Name);
}
Obj1 = new Foo (' Alex ', 18);
Obj1.show ()
Obj2 = new Foo (' Alex ', 18);
Obj2.show ()
Third, using HTML document +JAVASCRIPT+DOM to implement the operation of HTML data
1. Find
document.getElementById get a label by ID
Document.getelementsbyname get a collection of tags based on the Name property
Document.getelementsbyclassname get a collection of tags based on the class property
document.getElementsByTagName get a collection of tags by tag name
2. Indirect lookup
ParentNode//Parent node
ChildNodes//All child nodes
FirstChild//first child node
LastChild//Last child node
NextSibling//Next sibling node
PreviousSibling//Previous sibling node
parentelement//parent node Tag element
Children//All sub-tags
Firstelementchild//First child tag element
Lastelementchild//Last child tag element
Nextelementtsibling//Next sibling tag element
Previouselementsibling//Previous sibling tag element
3. HTML tag style operation
var tag = document.getElementById (' I1 ');
Tag.classList.add (' C1 ')//Add style to tag
Tag.classList.remove (' C1 ')//Remove the style from the label
<div class= ' C1 C2 ' ></div>
Tag.classname "C1 C2"
tag.classlist [' C1 ', ' C2 ']
4. Text manipulation
InnerText Get Text Only
InnerHTML Get text and tags
InnerText = "Text"
InnerHTML = "HTML format parsing"
Input
document.getElementById (' username '). Value
document.getElementById (' username '). Value = "ASDF"
Ps:
<input type= "text" id= "key" value= "Please enter the keyword" onfocus= "keyfocus ();" Onblur= "Keyblur ();"/>
Onfocus: Get Focus
Onblur: Losing focus
5. Property manipulation
<div id= ' I1 ' ></div>
<input id= ' ck ' type= "checkbox"/>
Custom properties
Attributes//Get all tag properties
SetAttribute (Key,value)//Set label properties
GetAttribute (key)//Gets the specified label property
Built-in properties:
Obj.id
CheckBox
-Obj.checked True or False
6. Create a label
Object Mode * * *
7. JS Submission Form
document.getElementById (' F1 '). Submit ();
8. Common operation
Console.log (..)
Alert (..)
Confirm (...)
var v = confirm (' Do you want to delete? ‘);
Console.log (v);
Location.href getting the current URL
Location.href = "http://www.oldboyedu.com" redirection
Location.reload () Refresh
SetInterval
Clearinterval
SetTimeout
Cleartimeout
var obj1= setinterval (function () {
Console.log (' 1 ');
Clearinterval (OBJ1);
},1000);
var obj2= setinterval (function () {
Console.log (' 2 ');
Clearinterval (OBJ2);
},1000)
9. Events
1. Binding Events
<div id= ' i1 ' onkeydown= ' func (this,event,123); ' > Point Me </div>
function func (a,b,c) {
A-the currently clicked Tag Object document.getElementById (' I1 ')
Information related to the current event, b
c = 123
}
2. Bind Event ***************
<div id= ' I1 ' > Point me </div>
<script>
document.getElementById (' I1). onclick = function (event) {
Event-related information about current events
This is the currently clicked Tag object
}
document.getElementById (' I1). onclick = function (event) {
Event-related information about current events
This is the currently clicked Tag object
}
</script>
An event can only be bound once
3. Binding Events
document.getElementById (' I1 '). AddEventListener (' click ', function () {
Console.log (111);
},true)
document.getElementById (' I1 '). AddEventListener (' click ', function () {
Console.log (222);
},true)
Ps:addeventlistener a third parameter
Default:
Event bubbling
Capture Type
Owe:
1. Likes + 1 animations
2. JavaScript Advanced knowledge-lexical analysis
Homework:
Background management + all examples
1. Background Management layout
2. Left menu
3. The Mo Tai dialog box
4. All-in-the-election cancellation
5. Add tags
6. Welcome to Li Lei's class today
7. Remove content removal after 5s
8. Time Lapse
9. Search box
<form action= ' Https://www.sogou.com/web ' >
<input type= ' text ' name= ' query '/>
<div> Submit </div>
</form>
Reference blog:
Http://www.cnblogs.com/wupeiqi/articles/5643298.html
Http://www.cnblogs.com/wupeiqi/articles/5602773.html
Python Road DAY13 Web Front end (Javascript,dom operation)
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
