JQuery 핵심 함수 및 정적 방법

9506 단어
jQuery 핵심 함수
  • jQuery 문서에서 볼 수 있듯이 jQuery 핵심 함수 모두 3대 4종류
  • jQuery(callback)
  • DOM 로드가 완료되면 들어오는 리셋 함수
  • 를 실행합니다
    
            $(function () {
                alert("123");
            });
    
    
  • [jQuery([sel,[context]])]( https://link.jianshu.com?t=ht...
  • CSS 선택기를 포함하는 문자열을 받은 다음 이 문자열로 요소를 일치시키고 jQuery 대상으로 포장합니다
  • 
            $(function () {
                //   jquery    div,      jQuery  
                var $box = $("div");
                console.log($box);
    
                //   js        div,      js  
                var box = document.getElementsByTagName("div");
                console.log(box);
            });
    
    
  • 기본 JS 대상과 jQuery 대상이 서로 변환
  • 
            $(function () {
                var $box = $("#box");
    //            $box.text("    ");
    //            jQuery        js     
    //            $box.innerText = "    ";
    //             jQuery       js  
    //              :   eq(0),eq      jQuery    ,get            
    //            var box = $box.get(0);
                var box = $box[0];
                box.innerText = "    ";
    
                var box2 = document.getElementById("box");
    //              js      jQuery     
    //            box2.text("    2");
    //              js         js  
    //            box2.innerText = "    2";
    
    //               js     jQuery  
                var $box2 = $(box);
               $box2.text("    2");
            });
    
    

    Tips: 개발자 간의 의사소통과 읽기 편의를 위해 일반적으로 모든 jQuery 작업과 관련된 변수 앞에 $
  • [jQuery(html,[ownerDoc])]( https://link.jianshu.com?t=ht...
  • HTML 태그 문자열에 따라 DOM 요소를 동적으로 생성
  • 
            $(function () {
                var $eles = $("<p>  span</p><u>  u</u>");
                //    jQuery        ,           jQuery  
                console.log($eles);
                //      DOM     body 
                $("body").append($eles);
            });
    
    

    jQuery 객체
  • jQuery 대상의 본질은 무엇입니까?
  • jQuery 대상의 본질은 위조수조
  • var $div = $("div");
    console.log($div);
    
    var arr = [1, 3, 5];
    console.log(arr);
    
  • 위수조는 무엇입니까?
  • 0에서length-1까지의 속성
  • 및length속성
  • var obj = {0:"lnj", 1:"33", 2:"male", length: 3}
    

    jQuery 정적 방법
  • 정적 방법은 무엇입니까?
  • 정적 방법은 대상 방법에 대응하고 대상 방법은 실례적인 대상으로 호출하며 정적 방법은 클래스명으로 호출
  •  
            window.onload = function () {
                function AClass(){}
                AClass.staticMethof = function(){
                    alert('    ');
                }
                AClass.prototype.instaceMethod = function(){
                    alert('    ');
                }
                //           
                AClass.staticMethof(); 
    
                //               
                var instace = new AClass();
                instace.instaceMethod();
            }
    
    
  • jQuery.holdReady(hold)
  • jQuery를 일시 정지하거나 복구합니다.ready() 이벤트
  • true 또는false
  • 로 전송
    
    
    
        
        04-jQuery    
        
        
            //   $    ,     
            $.holdReady(true);
            $(function () {
                $("#first").click(function () {
                    alert("        ");
                });
            });
        
    
    
    
    
    
        $("#second").click(function(){
            $.holdReady(false);
        });
    
    
    
    
  • [$.each(object,[callback])]( https://link.jianshu.com?t=ht...
  • 겹치는 대상이나 그룹
  • 장점이 대상과 수조를 통일하는 방식
  • 리셋 파라미터의 순서가 우리의 사고방식에 더욱 부합된다
  • 
            $(function () {
                // 3.1    
                var arr = [1, 3, 5, 7, 9];
                // 3.1.1          
                //                 
                //                  
                //    :      
                var res = arr.forEach(function (ele, idx) {
                    console.log(idx, ele);
                });
                console.log(res);
    
                // 3.1.2  jQuery        
                //                  
                //                 
                //    :       
                var $res2 = $.each(arr, function (idx, ele) {
                    console.log(idx, ele);
                });
                console.log($res2);
    
                // 3.2    
                var obj = {name: "lnj", age:"33", gender:"male"};
                // 3.2.1js    forEach  ,    forin      
                for(var key in obj){
                    console.log(key, obj[key]);
                }
                // 3.2.2  jQuery        
                $.each(obj,function (key, value) {
                    console.log(key, value);
                });
            });
        
    
  • $.map(arr|obj,callback)
  • 대상이나 그룹을 옮겨다니며 리셋 함수의 리셋 값을 새로운 그룹 리셋
  • 으로 구성합니다
            $(function () {
                // 4.1    
                var arr = [1, 3, 5, 7, 9];
                // 4.1.1          
                //                 
                //                  
                //                   
                //    :                     
                var res = arr.map(function (ele, idx, arr) {
                    console.log(idx, ele, arr);
                    return ele + idx;
                });
                console.log(res);
    
                // 4.1.2  jQuery        
                //                 
                //                  
                //    :                     
                var $res2 = $.map(arr, function (ele,idx) {
                    console.log(idx, ele);
                    return ele + idx;
                });
                console.log($res2);
    
                // 4.2    
                var obj = {name: "lnj", age:"33", gender:"male"};
                /*
                obj.map(function (ele, idx, obj) {
                    //   ,  JS  map  
                    console.log(idx, ele, obj);
                });
                */
                var $res = $.map(obj, function (value, key) {
                    console.log(key, value);
                    return key + value;
                });
                console.log($res);
            });
    
  • $.trim(str)
  • 문자열의 시작과 끝에 있는 공백을 제거합니다.

  • 
            $(function () {
                var str = "   lnj   ";
                console.log("---"+str+"---");
                var $res = $.trim(str);
                console.log("---"+$res+"---");
            });
    
    
  • $.isArray(obj)
  • 수조 여부를 판단
  • 
            $(function () {
                //   
                var obj = {name:"lnj",age: "33", gender:"male"};
                //    
                var arr = [1, 3, 5, 7, 9];
                var $res = $.isArray(obj);
                console.log($res);// false
                var $res2 = $.isArray(arr);
                console.log($res2);// true
            });
    
    
  • $.isFunction(obj)
  • 함수인지 아닌지 판단
  • 
            $(function () {
                var obj = {name:"lnj",age: "33", gender:"male"};
                var arr = [1, 3, 5, 7, 9];
                var fn = function () {}
                var $res = $.isFunction(obj);
                console.log($res);// false
                $res = $.isFunction(arr);
                console.log($res);
                $res = $.isFunction(fn);
                console.log($res);
                //                ,jQuery           
                $res = $.isFunction($);
                console.log($res);
            });
    
    
  • $.isWindow(obj)
  • 윈도우 대상인지 판단
  • 
            $(function () {
                var obj = window;
                var arr = [1, 3, 5, 7, 9];
                var arrlike = {0:"zs", 1:"ls", length:2};
                var $res = $.isWindow(obj);
                console.log($res); // true
                $res = $.isWindow(arr);
                console.log($res); // false
                $res = $.isWindow(arrlike);
                console.log($res); // false
            });
    
    

    좋은 웹페이지 즐겨찾기