Python_way DAY16
1. Dom (Find tags in html)
2. JAVASCIRPT (Regular)
3, jQuery (1.10,1.12-compatibility Good, 2.0. Later gave up the IE9 below)
-Encapsulated Dom & JavaScript
First, DOM1. Find elements
document.getElementById gets a label based on the ID---> here is to get a label in the middle without sdocument.getelementsbyname gets a collection of tags based on the Name property Document.getelementsbyclassname Collection of tags based on class property/compatibility Not very good----> these are getting multiple labels in the middle there sdocument.getelementsbytagname< c5/> get a collection of tags by tag name
ParentNode //parent node childnodes// All child nodes FirstChild //first child node LastChild //Last child node nextsibling // Next sibling node previoussibling //Previous sibling node
#以上的nodes既包含标签, also contains text content
Parentelement //parent node tag element children// All child tags firstelementchild //First child tag element lastelementchild // Last child tag element nextelementtsibling //Next sibling tag element previouselementsibling //Previous sibling tag element
Include only labels
Direct lookup:
The nodes contains all child nodes.
2. Operation
A, access and modification
t = document.getElementById ("I2") <div id=? " I2 ">?...? </div>?t.children[<input type=? " Text ";?] Text = T.children[0]<input type=? " Text ">?text.value" "Text.value //Get the value entered in the current input box" 123 "Text.value = 345//Set the value in the input box 345Use either the Innettext or the innerHTML label
Innettext
t = document.getElementById ("i3") <a id=? " I3 "href=?" Http:?/?/?www.baidu.com, Baidu? </a>?t.innertext //Get the contents of a tag "baidu" T.innertext = "Baidu" //Set the content in a tag, Let it change on the page "is Baidu"InnerHTML
<a id= "i3" href= "http://www.baidu.com" > Hundred <span>666</span> degrees </a>
t = document.getElementById ("i3") <a id=? " I3 "href=?" Http:?/?/?www.baidu.com ">?...? </a>?t.innertext "百666" t.innerhtml "Hundred <span>666</span> degrees" HTML will take all the tags in the text
Instance one: Text in the search box
<! DOCTYPE html>
B, class operation
ClassName //Get all Class name Classlist.remove (CLS) //delete specified class Classlist.add (CLS) //Add ClassExample two: modal dialog box
<! DOCTYPE html>
<meta charset= "UTF-8" >
<title> Mo Tai Dialog box </title>
<style>
. hide{
Display:none!important;
/* Define a label for display = None and let the back use */
}
. b{
position:fixed;
top:0;
left:0;
right:0;
bottom:0;
Background-color:rgba (0,0,0,.6);
Z-index:9;
}
. modal{
height:200px;
width:400px;
Background-color:lightskyblue;
position:fixed;
Z-index:10;
left:50%;
top:50%;
Margin-left: -200px;
Margin-top: -100px;
}
. out_input{
margin-left:98px;
height:100px;
margin-top:10px;
}
. d_input{
Display:inline-block;
width:173px;
height:21px;
margin-top:10px;
}
. login_back{
height:50px;
width:204px;
Background-color:dodgerblue;
margin:0 Auto;
Text-align:center;
line-height:50px;
border:1px Darkblue Solid;
}
input{
width:200px;
height:30px;
}
. login_icon{
top:16px;
left:68px;
Float:inherit;
}
. modal_in{
height:30px;
width:100px;
Float:right;
}
</style>
<body>
<input class= "Reg" type= "button" value= "Login" onclick= "ShowModal ();" >
<!--once clicked on this button, the onclick trigger ShowModal this JS function--
<div id = "BLACK" class= "b Hide" ></div>
<!--Let the background of this style use two class attributes, one is color, layout, one is hidden, now does not show--
<div id = "mod" class= "Modal Hide" >
<!--let the middle of the whole module use two class properties, one is color, layout, and one is hidden, now not showing--
<div class= "Login_back" >
<span class= "Login_icon" >
Account Login
</span>
</div>
<div class= "Out_input" >
<input type= "Text"/>
<span class= "Input_imp" ></span>
<span class= "D_input" >
<input type= "text" class= "Input_d"/>
<span class= "Input_imp" ></span>
</span>
</div>
<button class= "modal_in" onclick= "Hidemodal ();" > Back </button>
<!--once clicked on this button, the onclick trigger Hidemodal this JS function--
</div>
<script>
function ShowModal () {
var T1 = document.getElementById ("Black");
var t2 = document.getElementById ("mod");
<div id= "Black" class= "B" ></div>
<div id= "mod" class= "modal" ></div>
T1.classList.remove ("Hide"); Remove the class:hide from the Tag1 list
T2.classList.remove ("Hide"); Remove the class:hide from the Tag2 list
}
function Hidemodal () {
var T1 = document.getElementById ("Black");
var t2 = document.getElementById ("mod");
<div id= "Black" class= "b Hide" ></div>
<div id= "mod" class= "Modal Hide" ></div>
T1.classList.add ("Hide"); Remove the class:hide from the Tag1 list
T2.classList.add ("Hide"); Remove the class:hide from the Tag2 list
}
</script>
</body>Small Knowledge Points:
<a href= "javascript:void (0)" > Cancel </a> //indicate this a tag does nothing
Python_way DAY16 Javascirpt (re), DOM, JQuery,
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
