zoukankan      html  css  js  c++  java
  • JS核心参考

    * 函数

    1.arguments[]

    //1、argumnets[]只定义在函数体中,本质是一个局部变量,每个函数中都会自动声明并初始化该变量;
    //2、callee指代当前正在执行的函数,可以实现递归函数
    var k = function (n){
        var actual= arguments.length;  //实际参数个数
        var expected = arguments.callee.length; //期待的参数个数
        console.log(arguments[0]); // 4, 3, 2, 1
        if(n < 2) return n;
        else return n * arguments.callee(n-1);
    }
    k(4);
    k.length; //function的length

    2.递归

        //递归函数
        var fn = function(x){
            if(x < 2)
                return 1;
            else
                return x* arguments.callee(x-1);
        };

    3.$.load()

           //load传入的第一个参数是字符串,则表示是Ajax方法;传入的是function则是事件处理程序注册方法;
            //后面的#btn1,截取加载好的html中指定选择器的部分;
            $("div").load("test1.html #btn1");
    
            //第二个参数是字符串,可以追加到url后面,用GET请求
            $("div").load("test1.html", "zidpcode=01233"); //test1.html?zidpcode=01233
    
            //第二个参数是对象,会发送POST请求,后面的对象会在请求体中提交
            $("div").load("test1.html",{zipcode:0122, units:'F'});
    
            //第三个参数是回调函数,success、error、timeout

    4.触发事件

       $("#btn1").click(function(e){
           // $("#btn2").trigger(e); //触发button2的click事件,与此事件相同的事件
            $("#btn2").trigger("mouseover");  //触发button2的mouseover事件
        });
        $("#btn2").mouseover(function(e){
            console.log(e);
            alert("是由button1触发的");
        });

    5.注册多事件

        //可以一次注册多个事件
        $("#btn1").bind({click:function(){
                console.log("click事件");
            }, mouseleave:function(){
                console.log("mouseleave事件");
            }}
        );
    
        $("#btn1").dblclick(function () {
            //取消事件绑定
            $(this).unbind("mouseleave");
        })

    6.定时器

        window.onload = function(){
            //这里的function传入的是方法名
            window.setTimeout("StartTimer()", 1000)
        };
    
        function StartTimer(){
            $("div").html("timer事件");
        }

    7.动画

        //动画,fadeIn淡入
        $("div").fadeIn(500).animate(
            {"+=50"},
            {queue:false,duration:1000}
         ).fadeOut(500);
    
        //animate(); 第一个参数必须是对象,属性名必须是CSS属性名,是动画的目标值
        //动画支持支数值属性, +=增加  -=减少
        //"margin-left" 或者 marginLeft大小写混合
        //可以用"show"、“hide”, "toggle"
        $("div").animate({
            height:0,
            opacity:"-=.1",
            "margin-left": "+=10px",
            borderLeft:"toggle",
        },3000)

    8.追加元素

    $("body").append("<hr/>append追加"); //在body的最后追加元素
    $("h1").prepend("*");   //在h1标签里追加*
    
    //另取一行,在<h1>元素的前后,即在h1标签的外面
    $("h1").before("before");
    $("h1").after("#")
    
    $("hr").replaceWith("</br>"); //替换

    9.阻止冒泡

            var e = $(obj).event || window.event;  //得到当前的事件
    
        //阻止默认行为(表单提交)
        e.preventDefault();
    
        //阻止冒泡,
        e.stopPropagation();
    
        //不断阻止冒泡,而且还阻止对象的后续响应
        e.stopImmediatePropagation();
    
        e.isDefaultPrevented();
        e.isPropagationStopped();
        e.isImmediatePropagationStopped();

    10.页面操作

           var k1 = $("h1").position();
            $("h1").html(); //获取html内容
            $("h1").text(); //获取纯文本内容
    
            $("h1").addClass(function(n){return "dd"+n;});
            $("h1").removeClass("dd1");
            $("h1").toggleClass("dd2");
    
            //类检测
            $("h1").hasClass("dd1");
            $("h1").is(".dd1");  //is()比较灵活
    
            $("input").css({backgroundColor:"yellow", color:"red"});
            $("div").css({border:"1px solid red", "100px", height:"60px"});
    
            $("form").attr("action");
            $("a").removeAttr("target"); //移除属性
    
            //一次性设置多个属性
            $("img").attr({"src":"icon.gif", 720, height:360});
    
            //可以传入函数
            $("a").attr({target:function(){return "_self"; }})

    11. ajax

            $.ajax({
                type:"POST",
                url: "test1.html",
                cache: false,   //不使用缓存
                async: true,   //false同步,默认true异步
                success :function(result){
                    $("body").html(result);
                },failure:function(){
                    layer.msg("失败");
                }
            })

    12. call和apply

    https://blog.csdn.net/ganyingxie123456/article/details/70855586

    /*
    1. 每个函数都包含两个非继承而来的方法:call()方法和apply()方法。
    
    2. 相同点:这两个方法的作用是一样的。
       都是在特定的作用域中调用函数,等于设置函数体内this对象的值,以扩充函数赖以运行的作用域。
       一般来说,this总是指向调用某个方法的对象,但是使用call()和apply()方法时,就会改变this的指向
    
    3. 不同点:aplly(对象,参数数组);参数数组必须是有效数组或者arguments对象;
              call(对象,参数);参数间用逗号隔开
    */
    
    function add(c, d){
        return this.a +this.b + c + d;
    }
    var o = {a:1, b:2};
    add.apply(o, [3, 4]);  //apply传入数组,当前this指向o
    add.call(o, 3, 4);  //call传入参数,当前this指向o
    function log(){
        //实际调用的对象是console,arguments实参
        console.log.apply(console, arguments);
    }
    log(23, 33);

    13. $.extend(p1, p2)

    var settings = { validate: false, limit: 5, name: "foo" }; 
    var options = { validate: true, name: "bar" };
    jQuery.extend(settings, options);  //settings={validate: true, limit: 5, name: "bar"}

    14. location.reload() 页面刷新

      window.location.reload(true); 

    15. enter键查询

    //回车键 查询
    document.onkeydown = function (e) {
        e = e || event;
        var keycode = e.which || e.keyCode;
        if (keycode == 13 && typeof (callurl) == "function") {
            callurl();
        }
    };

    documnet是window的一个对象,在页面上按回车键可以直接进行查询

  • 相关阅读:
    Python爬虫连载1-urllib.request和chardet包使用方式
    Java连载69-接受输入、用数组模拟栈
    HTML连载61-焦点图、固定定位
    Java连载68-数组的拷贝、二维数组
    [Java] MVC
    [Java] JSP
    [Java] HTTP
    [设计模式] 设计模式课程(八)--抽象工厂模式
    [设计模式] 设计模式课程(七)--工厂模式
    [刷题] 75 Sort Colors
  • 原文地址:https://www.cnblogs.com/SmileSunday/p/9304018.html
Copyright © 2011-2022 走看看