List of articles
-
- JavaScript
-
-
- introduce JS
-
-
- Basic grammar
- Example of function
- Attribute information of the tag object :
-
- js event
- What can application events do ？
- DOM(document object model)
- DOM Method
-
- Provincial and municipal secondary linkage
-
-
- Code implementation
-
- Dynamic addition
-
-
- Code implementation
-
-
JavaScript
introduce JS
JavaScript Code must be at Between the labels .
Basic grammar
1. Variable var Variable name ='value';
2. JavaScript data type : A string value , The number , Boolean value , Array , object .
3. JavaScript function :
function myFunction(p1, p2) {
return p1 * p2;
} // This function returns p1 and p2 The product of the
4. Judge equal ?
==: Whether the values are equal
===: Whether the type and value are equal ;
5. Judgment statement
if( Conditions ){
Things that meet the conditions
}else{
Things that don't meet the conditions
}
6.for loop
for(var i=0; i<count; i++){
Loop operations }
Example of function
<script>
var info = " Open the success !";
alert(info);
</script>
Attribute information of the tag object :
innerHTML ---- Nested in the current tag object html Information
value --------- The information value entered by the user
src ------ Get the path of the picture , Modify the image path through assignment
checked ----- Determine whether the current multiple selection box is selected
js event
HTML The incident happened in HTML Things on the element .
When in HTML Page usage JavaScript when , JavaScript These events can be triggered .
onsubmit --- Submit the incident
onclick ---- Click event
onfocus ----- Focus on events
onblur ------- Defocus event
onchange ---- What is executed when the object information changes
<button onclick="getElementById('demo').innerHTML=Date()">
The time is now ?
</button>// This statement applies a click event . When you click the statement, the current time will pop up .
What can application events do ？
Events can be used to process form validation , User input , User behavior and browser action :
Event triggered on page load
Event triggered when the page is closed
The user clicks the button to perform the action
Verify the validity of user input
wait ...
DOM(document object model)
DOM (Document Object Model) Document object model , yes HTML and XML Documentation programming interface .
HTML DOM Defines access and operations HTML Standard approach to documentation .
DOM Express in tree structure HTML file .
stay HTML DOM (Document Object Model) in , Every element is node :
- A document is a document node .
- be-all HTML Elements are all element nodes .
- all HTML Attributes are attribute nodes .
- Text inserted into HTML Elements are text nodes .are text nodes.
- Annotations are annotation nodes .
DOM Method
document.getElementsByName --- It returns a list object
document.getElementById --- It returns an element object
document.createTextNode --- Create a text node
document.createElement --- Create an element node
NodeObj.appendChild --- Add a new child element to the element
Provincial and municipal secondary linkage
Code implementation
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
function changeCity() {
var province = new Array(3);
province[0] = new Array('xian','xianyang','baoji');
province[1] = new Array('datong','taiyuan','yuncheng');
province[2] = new Array('guilin','nanning','liuzhou');
var choicepro = document.getElementById('province').value;
var selenode = document.getElementById('city');
var citys = province[choicepro];
selenode.length = 1;
for(var i=0;i<citys.length;i ++){
var textnode = document.createTextNode(citys[i]);
var optnode = document.createElement('option');
optnode.appendChild(textnode);
selenode.appendChild(optnode);
}
}
</script>
</head>
<body>
<div class="content">
<form action="#" method="get">
<span>ji guan</span>
<select id="province" onchange="changeCity()">
<option >---choice province---</option>
<option name="province" value="0">shaan xi</option>
<option name="province" value="1">shan xi</option>
<option name="province" value="2">guang xi</option>
</select>
<select id="city" >
<option>---choice city---</option>
</select>
</form>
</div>
</body>
</html>
Dynamic addition
Code implementation
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
function addCity() {
var city = document.getElementById('city').value;
if (city) {
var textnode = document.createTextNode(city);
var liElenode = document.createElement('li');
liElenode.appendChild(textnode);
var ulElenode = document.getElementById('city_ul');
ulElenode.appendChild(liElenode)
} else {
alert(
' City can't be empty \n'
)
}
}
</script>
</head>
<body>
<div class="content">
<form>
<input type="text" name="city" id="city" placeholder="Please input city">
<input type="button" value="add city" onclick="addCity()">
</form>
<ul id="city_ul">
<li>xi an</li>
<li>bei jing</li>
</ul>
</div>
</body>
</html>
