Js基础学习

Js的压缩：

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

Apply和call的使用

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

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

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

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

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

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

函数的递归：

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

  1. var index = 0;
  2. //定义匿名函数
  3. var s = function() {
  4.     index++;
  5.     alert(index);
  6.     if (index<5) {
  7.         //s();
  8.         arguments.callee();//表示函数自身
  9.     }
  10. };
  11. var ss = s;
  12. ss();

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

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

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

思路：通过为<p>标签来注册单击事件，接着找到它下面的<ul>，看是否隐藏，在进行操作。{思路很重要，每次的代码都是那样子，只需要学会解决问题的想法，这样就可以以此类推，解决很多的问题。}

  1. <body>
  2.     <ul id="umenu">
  3.         <li>
  4.             <p>111</p>
  5.             <ul>
  6.                 <li>1</li>
  7.                 <li>2</li>
  8.                 <li>3</li>
  9.             </ul>
  10.         </li>
  11.         <li>
  12.             <p>222</p><ul><li>1</li><li>2</li><li>3</li></ul>
  13.         </li>
  14.         <li>
  15.             <p>333</p><ul><li>1</li><li>2</li><li>3</li></ul>
  16.         </li>
  17.     </ul>
  18. </body>

Js代码如下:

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

JavaScript基础插曲---apply，call和URL编码等方法的更多相关文章

  1. JavaScript基础插曲-练习

    Javascript基础学习 eg:利用正则表达式来去掉空格. 1:msg=' Hello ': <script type="text/javascript">     ...

  2. JavaScript基础插曲—元素样式，正则表达式，全局模式，提取数组

    JavaScript基础学习 学习js的基础很重要,可以让自己有更多的技能.我相信这个以后就会用到. Eg:点击选择框,在div中显示出选择的数量 window.onload = function() ...

  3. JavaScript基础—插曲

    Javascript基础 1:js中我们最好使用单引号,其实可以使用双引号的但是为了区别所以js中全部使用单引号.注释和C#的是一样的.网页里面的执行顺序是从上到下依次执行的,不管你js放到哪里,都会 ...

  4. JavaScript基础插曲—获取标签，插入元素，操作样式

    Js基础 1:document.write() 这个是动态创建元素内容,利用js.这个可以利用js来创建元素,文本,标签等,document.write()与document.writeln()的区别 ...

  5. JavaScript基础—插曲02

    Js学习基础 1:关于js中的数组 这里面可以是键值对的形式来存储的,我们必须利用forIn来输出,这就相当于foreach一样. var dir = new Array(); dir['0'] = ...

  6. URL编码的方法

    Global 对象的encodeURI()和encodeURIComponent()方法可以对URI(Uniform ResourceIdentifiers,通用资源标识符)进行编码,以便发送给浏览器 ...

  7. linux shell实现 URL 编码/解码方法

    (1)编码的两种方法 # echo '手机' | tr -d '\n' | xxd -plain | sed 's/\(..\)/%\1/g' # echo '手机' |tr -d '\n' |od ...

  8. JavaScript 基础数组循环和迭代的几种方法

    JavaScript 数组循环和迭代   (之前一直没怎么注意数组循环,今天做一道题时,用到forEach循环发现它并没有按照我想象的样子执行,总结一下数组循环) 一.第一种方法就是for()循环   ...

  9. JavaScript基础对象创建模式之私有属性和方法(024)

    JavaScript没有特殊的语法来表示对象的私有属性和方法,默认的情况下,所有的属性和方法都是公有的.如下面用字面声明的对象: var myobj = { myprop: 1, getProp: f ...

随机推荐

  1. Java多线程19：定时器Timer

    前言 定时/计划功能在Java应用的各个领域都使用得非常多,比方说Web层面,可能一个项目要定时采集话单.定时更新某些缓存.定时清理一批不活跃用户等等.定时计划任务功能在Java中主要使用的就是Tim ...

  2. css实现左栏固定右栏自适应，高度自适应的布局

    收集css中的基础知识,所以这并不是什么新鲜的技术,只是作为备忘~本文的内容如题所示,是一个简单的布局,用于左右两栏布局的页面,左侧是固定宽度,右侧占据剩余的宽度.在垂直方向,始终以高度最大的一栏为基 ...

  3. 最全数据结构详述: List VS IEnumerable VS IQueryable VS ICollection VS IDictionary

    本文对常用的数据结构详述:Array, ArrayList,List,IList,ICollection, Stack, Queue, HashTable, Dictionary, IQueryabl ...

  4. Visual Studio 2015 速递（4）——高级特性之移动开发

    系列文章 Visual Studio 2015速递(1)——C#6.0新特性怎么用 Visual Studio 2015速递(2)——提升效率和质量(VS2015核心竞争力) Visual Studi ...

  5. fir.im Weekly - 如何打造 Github 「爆款」开源项目

    最近 Android 转用 Swift 的传闻甚嚣尘上,Swift 的 Github 主页上已经有了一次 merge>>「Port to Android」,让我们对 Swift 的想象又多 ...

  6. c#设计模式-命令模式

    一. 命令(Command)模式 命令(Command)模式属于对象的行为模式[GOF95].命令模式又称为行动(Action)模式或交易(Transaction)模式.命令模式把一个请求或者操作封装 ...

  7. webService 基础

    一. 1. 定义:Web service是一个平台独立的,跨语言.跨平台.低耦合的,自包含的.基于可编程的web的应用程序,可使用开放的XML (标准通用标记语言下的一个子集)标准来描述.发布.发现. ...

  8. css_04之显示、定位

    1.显示方式:display:取值:none(隐藏,不占页面空间,脱离文档流)/block(元素变为块级)/inline(元素变为行内)/inline-block(元素变为行内块): 2.显示效果:v ...

  9. angular测试-Karma + Jasmine配置

    首先讲一下大致的流程: 需要node环境,首先先要安装node,node不会?请自行搜索.版本>0.8 安装node完成之后先要测试下npm是否测试通过,如下图所示 首先看下目录结构 目录为:F ...

  10. 第五章 运输层（UDP和TCP三次握手，四次挥手分析）

    序言   通过这章,可以知道其实三次握手和四次挥手其实真的好简单,通过这章的学习,我相信你也会同样的认为,以后在也不需要听到别人问三次握手的过程而自己一脸懵逼了,觉得人家好屌,其实也就是他懂你不懂,仅 ...