05-javascript 기초 학습 노트

12478 단어
1. 노드 작업 ####
백엔드에서 반환된 데이터에 따라 노드를 만듭니다. 이전에 쓴 작업:페이지 구조를 작성하고dom트리를 통해 노드를 얻습니다. 그리고 얻은 노드를 조작합니다. 오늘dom노드의 생성, 추가, 삭제와 삽입을 배워보겠습니다.
부모 요소 var body = document을 먼저 가져옵니다.getElementsByTagName("body")[0];
  • 노드 생성 및 추가
    •     /* 1.          */
    var btnAdd = document.getElementsByTagName("button")[0];
    var box;
    btnAdd.onclick = function () {
        /*1.2     （    document   ）*/
        box = document.createElement("div");
        /*    */
        box.style.width = 100 + "px";
        box.style.height = 100 + "px";
        box.style.background = "yellow";
        /* 1.3     （          ）*/
        body.appendChild(box);
    };
  • 노드 삭제
    •  /* 2.          ，          */
    var btnDel = document.getElementsByTagName("button")[1];
    btnDel.onclick= function () {
        body.removeChild(box);
    };
  • 노드 삽입
    •     /* 3.          ，          */
    var btnIns = document.getElementsByTagName("button")[2];
    btnIns.onclick = function () {
        //    
        var box1 = document.createElement("div");

        //    
        box1.style.width = 100+"px";
        box1.style.height = 100+"px";
        box1.style.background = "pink";

        //    ，       
        //             ，           
        body.insertBefore(box1,box);
    };
  • 노드의 획득(자 노드, 부 노드, 형제 노드) 자 노드의 획득(위조수 그룹 반환)
    •   box      ,childNodes      ，             ，      
var  rst = box.childNodes;

           children  ，            
    var myChildren = box.children;
    console.log(myChildren.length);
  • 형제 노드
    •      
                    
    //1.  btn1
    var btn1 = document.getElementById("btn1");
    //2.      
    /* nextElementSibling:      ，              
     * IE           ，  nextSibling   ie      
      *         */
    var brotherSym = btn1.nextElementSibling||btn1.nextSibling;
    console.log(brotherSym);
  • 상위 노드
    •     //1.  btn1
    var btn1 = document.getElementById("btn1");
    //2.     
    var parentSym = btn1. parentNode;
    console.log(parentSym);

    2. date의 인식 ####
    1. 현재 시간 var myDate = new Date()를 나타내는 시간 객체를 만듭니다.
    2. 현재 시간의 시간 스탬프는 1970년 1월 1일부터 시작된 밀리초수를 획득하여 유닉스의 탄생 시간을 기념한다var minS = myDate.getTime();3.32비트는 최대 2의 32차원만 저장할 수 있기 때문에 32비트 컴퓨터에서date 대상은 최대 2038년 전의 시간만 얻을 수 있다
    4. 자신의 타임 스탬프 정의var myDate = new Date("2017/07/03 18:20:20");5.date 대상에 대한 방법
    //    1.      
    var myDate = new Date();
//    2.1      
    var year = myDate.getFullYear();
//    2.2    ，     0 11
    var month = myDate.getMonth();
//    2.3    ，0    ，     
    var day = myDate.getDate();
//    2.4    
    var weekDay = myDate.getDay();
//    2.5     
    var hour = myDate.getHours();
//    2.6     
    var min = myDate.getMinutes();
//    2.7    
    var second = myDate.getSeconds();
//    2.8    
    var mins = myDate.getMilliseconds();

    3. js 3부 ####
    1. ECMA 사양 2.DOM(문서 객체 모델) 3.BOM(브라우저 객체 모델)
    border 경계 none 및 0###
    인터페이스의 모든 내용이 렌더링되어 경계선이 none으로 설정되었을 때 렌더링되지 않고 0으로 설정되었을 때 렌더링됩니다
    this###
    일반적으로 이벤트 명령에 넣으면 누가 이 사건을 촉발했는지 표시하는데, 일반적으로 이벤트 원본이다
    이벤트 도메인 ###
    동적 노드가 추가되면 동적 노드가 있는 {} 안이 그의 이벤트 영역입니다
    for 주기 중 i++ 및++i###
    for(   ;   ;  ){
    //      
}
  • 첫 번째 순환 중 i++와++i는 다르지 않다
  • 모든 언어가 실행 중 최종적으로 기계 언어로 전환됩니다. i++는 기계 언어에 중간 변수를 만들 수 있습니다.++i는 할 수 없기 때문에 i++보다++ 성능이 높습니다
    • .
  • 사람들은 i++를 사용해 왔는데++i의 성능이 i++보다 약간 높다는 것을 발견했을 때 이미 습관이 되었다.그래서 항상 i++
    • 를 사용합니다.
    구궁격 알고리즘(장악)###
  • 줄 번호와 열 번호의 계산
  • 동적 생성 노드 응용
    • 다음은 동적 구궁격 생성 코드입니다
    CSS 코드:
            #box{
            position: relative;
        }
        /*                            ，
                                 */
        .newBox{
            width: 100px;
            height: 100px;
            position: absolute;
            background: yellow;
            border-radius: 10px;
            display: inline-block;
        }

    HTML 코드:

    JS 코드:
    
    //1.        
    var btn = document.getElementsByTagName("button");
    var box = document.getElementById("box");
    //2.    
    //2.1            ，            
    var index = 0;
    btn[0].onclick = function () {
        index++;
        //2.1    
        var div = document.createElement("div");
        //2.2     —     
        div.className = "newBox";
        div.innerHTML = index;

        //2.3        
        //2.3.1        
        var col = (index-1)%3;
        console.log(col);
        var row = parseInt((index-1)/3);
        div.style.left = col * (100+10)+"px";
        div.style.top = row * (100+10)+"px";

        console.log(div);

        //2.4    
        box.appendChild(div);
    }

    //3.     
    btn[1].onclick= function () {
        if(box.children.length-1<0)return;
        //3.1    
        box.removeChild(box.children[index-1]);
        //3.2                   ，       
        index--;
    };

    Microsoft 발표 ####
    l을 만들 때 이벤트 밖에서 만들기
  • 버튼(삽입)1.입력 상자의 내용이 비어 있는지 판단합니다. 그렇지 않으면 알림이 비어 있습니다. 그렇지 않으면 리 노드를 추가합니다.노드를 추가할 때 l에 노드가 있는지 판단해야 하며, 없으면 직접 추가하고, 어떤 말은 첫 번째 앞에 삽입
  • 버튼(삭제)1.li를 삭제하고 a 탭을 가져오며 a 탭 그룹을 훑어보고 클릭 이벤트를 추가합니다.클릭하면 대응하는 리 삭제
    • 다음은 코드입니다.
    CSS 코드:
    
        *{
            margin: 0;
            padding: 0;
        }
        #box{
            border: 1px solid #000;
            padding: 10px;
            width: 600px;
            height: 600px;
            margin: 100px auto;
            text-align: center;
        }
        #txta{
            width: 490px;
            height: 200px;
            resize: none;
            border: 1px solid #000;
        }
        #box ul{
            width: 460px;
            margin: 0 auto;
        }
        #box ul li{
            list-style:none;
            border-bottom: 1px dashed black;
            height: 30px;
            line-height:30px;
            text-align: left;
        }
        #box ul li a {
            float: right;
            cursor: pointer;
        }

    HTML 코드:
    C\#채 팅 방 의 프레임 워 크 디자인 실현 소스 코드
    Linux 사용자 상태 와 커 널 상태의 상호작용-netlink 편

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

    개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
    best100-homepage