Day15css+javascript+dom

CSS Supplement     position:  # #多层         a.  fiexd =>  fixed to a location on the page          # #返回顶端          b. relative + absolute                       <div style= ' position:relative; ' >                <div  style= ' position:absolute;top:0;left:0; ' ></div>  # #以外面的父级div框为标准, positioning yourself              </div>    opcity: 0.5  Transparency     z-index:   level order, large    # #点击 above, popup a box, the background becomes gray transparent     overflow: hidden,auto   # #图片   hiddon, beyond the specified range is hidden, auto appears scroll bar/* When the mouse is moved to the current label, the following CSThe S attribute only takes effect */.pg-header .menu:hover{    background-color: blue;}     background-image:url (' image/4.gif '); #  default, div large, picture repeat visit      background-repeat: repeat-y;  #  Picture Application only vertical Add, background color    no-repeat not stacked      background-position-x: # #移动        background-position-y:  # #移动    positive down, negative up       button icon    plus picture size      background-position: 10px 10px;    Example: the input box    the far right has a picture <div style= " height: 35px;width: 400px;position: relative; " >    <input type= "text"  style= "height: 35px;width: 370px; padding-right: 30px " />    <span style=" POSITION:ABSOLUTE;RIGHT:3PX; Top:10px;background-image: url (i_name.jpg); HEIGHT:&NBSP;16PX;WIDTH:&NBSP;16PX;DISPLAY:&NBSP;INLINE-BLOck; " ></span></div>

<script  src= "path" >//javascript</script> variables       name =  ' Hequan '     global variables      var  Name= ' Hequan '   local variable number      age = 18;     i  = parseint (age); string      a =  "Hequan"       a.length  length      a.substring (start position, end position)       A.charat (index position) function      function func () {} Boolean type       lowercase dictionary     a={' K1 ': ' v1 '} list (array)      a = [11,22,33] functions       function   function name () {     } 

 timer:      setinterval (' Code executed ', Interval 5000); Find:      document.getelementbyid (' I1 '). InnerText; auto-scroll: Function func ()  {     var tag = document.getelementbyid (' I1 ')     var content  = tag.innertext    var f = content.charat (0);     var l = content.substring (1, tag.length)     var new_content  = l + f;    tag.innertext = new_content}setinterval (' func () '; 

for cycle      a = [11,22,33,44]      for  (var item in  a ) {     //loop default is  key          console.log (A[item]);      }     for  (var i=0;i<a.length;i++) {   //array yes, The dictionary cannot be          } conditional Statement      if (condition) {          }else  if (condition) {          }else{         }           ==  as long as the value equals      ===  value equal   type also equal       &&  and     | |    or 

1. Find tags      get single element         document.getelementbyid (' I1 ')      get multiple elements (list) document.getelementsbytagname (' div ')      Get multiple elements (list) Document.getelementsbyclassname (' C1 ')     a.  Direct Search          document.getElementById              get a label by ID         document.getElementsByName            get a collection of tags based on the Name property          document.getelementsbyclassname     get Tag collection based on class attribute          document.getElementsByTagName       get tag collection by tag name      b.  indirect         tag = document.getelementbyid (' I1 ')         parentelement          //  parent node Tag element          children                 //  all sub-tags         firstelementchild       //  first child tag element          lastelementchild        //  last child tag element          nextElementtSibling    //  Next brother Tag element          previousElementSibling  //  previous Sibling Tag element 2, Operation label     a.  innerText         get the text content in a tag           label .innertext         to re-copy the inner text of the label           tags. innertext =  ""     b. classname  //style name          tag.classname = "  Direct overall operation          Tag.classList.add (' style name ')    add specified style         tag.classlist.remove (' style name ')    delete specified style         PS:             <div onclick= ' func (); ' > Point Me </div>            <script>                 function func () {                }             </script>    c.  Checkbox             Gets the value             checkbox object .checked              Set Values        The       checkbox object. checked = true

Example Function showmodel () {    document.getelementbyid (' I1 '). Classlist.remove (' hide ');     document.getelementbyid (' I2 '). Classlist.remove (' hide ');} Function hidemodel () {    document.getelementbyid (' I1 '). Classlist.add (' hide ');     document.getelementbyid (' I2 '). Classlist.add (' hide ');} Function chooseall () {    var tbody = document.getelementbyid (' TB ');     //  get all the tr    var tr_list = tbody.children;     for (var i=0;i<tr_list.length;i++) {         //  Cycle all the tr,current_tr        var current_tr =  tr_list[i];        var checkbox = current_ tr.children[0].children[0];        checkbox.checked =  True;    }}     function changemenu (NID) {         var current_header = document.getelementbyid (NID);         var item_list = current_ Header.parentelement.parentelement.children;        for (var i=0;i <item_list.length;i++) {            var  current_item = item_list[i];             Current_item.children[1].classlist.add (' Hide ');        }         current_header.nextelementsibling.classlist.remove (' Hide ');      }

This article is from the "what-all" blog, please be sure to keep this source http://hequan.blog.51cto.com/5701886/1908641

Day15css+javascript+dom