標籤:
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);
Eg:點擊實現展示關閉2級菜單。
思路:通過為<p>標籤來註冊單擊事件,接著找到它下面的<ul>,看是否隱藏,在進行操作。{思路很重要,每次的代碼都是那樣子,只需要學會解決問題的想法,這樣就可以以此類推,解決很多的問題。}
- <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‘;
- ??????????????}
- ??????????};
- ??????}
- ??};
JavaScript基礎插曲---apply,call和URL編碼等方法