JavaScript基础插曲---apply,call和URL编码等方法

简介: JavaScript基础插曲---apply,call和URL编码等方法

Js基础学习



Js的压缩:


就是利用js的语法格式通过缩短变量名,去掉空格等来进行压缩。

Apply和call的使用


1:apply方法:应用某一对象的方法,用于一个对象替换当前对象。主要是改变this的值。

    <script type="text/javascript">
        var user_name = "阿辉";
        //一个函数,这里主要注意里面的this的含义。
        function showName() {
            alert(this.user_name);
        };
        var p = { user_name: '阿红' };
        showName.apply(p);// 这里通过apply方法来改变函数中this的不同。这里的p就是this.
    </script>



2:call方法:这个和上面的方法是一样的,只是当需要有参数的时候需要逗号来区别,而apply是通过数组的形式来传递的。


这里就是有参数的时候,我们使用apply的时候需要使用数组的形式来传递。

    var user_name = "阿辉";
    //一个函数,这里主要注意里面的this的含义。
    function showName(a,b,c) {
        alert(this.user_name);
        alert(a + b + c);
    };
    var p = { user_name: '阿红' };
    showName.apply(p);// 这里通过apply方法来改变函数中this的不同。这里的p就是this.
    showName.apply(p, [12,12,12]);
    showName.call(p,13,13,13);



上面的代码就是二者的区别。使用的时候我们需要注意这些小的知识点。


函数的递归:


当函数是匿名函数的时候我们使用递归的时候里面的值千万不要直接写赋值的匿名函数,我们需要通过arguments.callee();来表示函数自身。

    var index = 0;
    //定义匿名函数
    var s = function() {
        index++;
        alert(index);
        if (index<5) {
            //s();
            arguments.callee();//表示函数自身
        }
    };
    var ss = s;
    ss();



encodeURL方法:将文本字符串编码为一个有效的统一资源标识符(URL),这个方法不会对那些特殊的字符进行编码,这时我们需要使用encodeURLCompoment方法对这些字符进行编码。这个编码的范围更加的广。


    var msg = 'http://localhost:55186/js%E7%BB%83%E4%B9%A0/js11.html';
    var url_value = window.encodeURI(msg); //只编码文本的字符串
    var sss = window.encodeURIComponent(msg);//编码更加的广泛,前面的数字都进行了编码。
    alert(sss);
    alert(url_value);


679140-20160304212450127-966099210.png

679140-20160304212450502-392525049.png


Eg:点击实现展示关闭2级菜单。


思路:通过为

标签来注册单击事件,接着找到它下面的

    ,看是否隐藏,在进行操作。{思路很重要,每次的代码都是那样子,只需要学会解决问题的想法,这样就可以以此类推,解决很多的问题。}



    <body>
        <ul id="umenu">
            <li>
                <p>111</p>
                <ul>
                    <li>1</li>
                    <li>2</li>
                    <li>3</li>
                </ul>
            </li>
            <li>
                <p>222</p><ul><li>1</li><li>2</li><li>3</li></ul>
            </li>
            <li>
                <p>333</p><ul><li>1</li><li>2</li><li>3</li></ul>
            </li>
        </ul>
    </body>


Js代码如下:

    window.onload = function () {
          //为每个菜单项注册单击事件
          var ps = document.getElementById('umenu').getElementsByTagName('p');
          //遍历ps,为每个注册单击事件
          for (var i = 0; i < ps.length; i++) {
              ps[i].onclick = function () {
                  //1;找到p后面的<ul>,+this.parentNode是找到其父节点;
                  var x = this.parentNode.getElementsByTagName('ul')[0];
                  //2:判断是否隐藏
                  if (x.style.display != 'none') {
                      x.style.display = 'none';
                  } else {
                      x.style.display = 'block';
                  }
              };
          }
      };



679140-20160304212451049-897022436.png


目录
相关文章
|
1月前
|
JavaScript 前端开发 程序员
前端原生Js批量修改页面元素属性的2个方法
原生 Js 的 getElementsByClassName 和 querySelectorAll 都能获取批量的页面元素,但是它们之间有些细微的差别,稍不注意,就很容易弄错!
|
1月前
|
Web App开发 JavaScript 前端开发
如何确保 Math 对象的方法在不同的 JavaScript 环境中具有一致的精度?
【10月更文挑战第29天】通过遵循标准和最佳实践、采用固定精度计算、进行全面的测试与验证、避免隐式类型转换以及持续关注和更新等方法,可以在很大程度上确保Math对象的方法在不同的JavaScript环境中具有一致的精度,从而提高代码的可靠性和可移植性。
|
1月前
|
监控 JavaScript Java
Node.js中内存泄漏的检测方法
检测内存泄漏需要综合运用多种方法,并结合实际的应用场景和代码特点进行分析。及时发现和解决内存泄漏问题,可以提高应用的稳定性和性能,避免潜在的风险和故障。同时,不断学习和掌握内存管理的知识,也是有效预防内存泄漏的重要途径。
133 52
|
1月前
|
JavaScript 前端开发 索引
js中DOM的基础方法
【10月更文挑战第31天】这些DOM基础方法是操作网页文档结构和实现交互效果的重要工具,通过它们可以动态地改变页面的内容、样式和行为,为用户提供丰富的交互体验。
|
1月前
|
缓存 JavaScript UED
js中BOM中的方法
【10月更文挑战第31天】
|
1月前
|
缓存 JavaScript 前端开发
JavaScript 与 DOM 交互的基础及进阶技巧,涵盖 DOM 获取、修改、创建、删除元素的方法,事件处理,性能优化及与其他前端技术的结合,助你构建动态交互的网页应用
本文深入讲解了 JavaScript 与 DOM 交互的基础及进阶技巧,涵盖 DOM 获取、修改、创建、删除元素的方法,事件处理,性能优化及与其他前端技术的结合,助你构建动态交互的网页应用。
49 5
|
1月前
|
JavaScript 前端开发
js中的bind,call,apply方法的区别以及用法
JavaScript中,`bind`、`call`和`apply`均可改变函数的`this`指向并传递参数。其中,`bind`返回一个新函数,不立即执行;`call`和`apply`则立即执行,且`apply`的参数以数组形式传递。三者在改变`this`指向及传参上功能相似,但在执行时机和参数传递方式上有所区别。
28 1
|
1月前
|
JavaScript 前端开发
.js方法参数argument
【10月更文挑战第26天】`arguments` 对象为JavaScript函数提供了一种灵活处理参数的方式,能够满足各种不同的参数传递和处理需求,在实际开发中具有广泛的应用价值。
46 7
|
3月前
|
前端开发 JavaScript
前端JS截取url上的参数
文章介绍了两种前端JS获取URL参数的方法:手动截取封装和使用URLSearchParams。
61 0
|
4月前
|
开发框架 前端开发 .NET
Asp.net Webapi 的 Post 方法不能把参数加到 URL 中?试试这样写
Asp.net Webapi 的 Post 方法不能把参数加到 URL 中?试试这样写