JavaScript學習

時間 2019-11-09

標籤 javascript 學習欄目 JavaScript 简体版

原文原文鏈接

About Javscript

record the thing which maybe forgetten

原生JavaScript

Javascript DOMcss
1. document.write + "html/css 標籤";html
2. prompt("這裏是對話框顯示部分","這裏是文本框提示部分") = alert + inputtext + cancel +confirm;jquery
3. confirm(str) = alert + confirm + cancel;app
4. window.open("URL","para1","para2");框架
  - para1:函數
    - _blank：在新窗口顯示目標網頁佈局
    - _self：在當前窗口顯示目標網頁學習
    - _top：框架網頁中在上部窗口中顯示目標網頁this
  - para2:spa
5. e.g.
```
var a = window.open(…);
  a.close(); // close the window
```
6. e.g.
```
<h2 id = "cc">My Beautiful girl</h2>
  js: var c = getElementById("cc");
  c.innerHTML = 「the text which we like」;
```

About JQuery【學自鋒利的jQuery】

1.第一章認識jQuery

$("#foo") is the same as jQuery("#foo")
compare with DOM

2.Resolve conflicts

先導入其餘框架

經過"jQuery.noConflict();"讓出$的控制權，而後能夠經過"jQuery(...)"來操做jQuery對象，此時能夠在jQuery內部繼續使用$符

jQuery.noConflict();
  jQuery(function($){              //這句的jQuery能夠省略，從而定義匿名函數並定義形參爲$
      $("p").click(function(){    //固然也能夠不傳$爲參數，而後內部繼續使用jQuery，不使用快捷鍵操做
          alert($(this).text());    //好糾結。。以爲怎樣都不舒服呢。。因此仍是別引入其餘的框架好了，嗯【匿-】
      })
  })

或者 by "var $j = jQuery.noConflict();" 自定義快捷方式來操做jQuery對象 //感受這個不錯吖麼麼噠

先導入jQuery
- 直接用jQuery來工做就行了，不用"jQuery.onConflict()"來讓出控制權 //個人理解是後導入的框架覆蓋了$的控制權，因此$的控制權原本就在人家身上，不用你讓出來，你乖乖的用你本身的名字就行了，嗯【認真臉】

3.第二章 jQuery選擇器

總的來講，給我感受和css選擇器規則相差不大，因此大體寫一下增強記憶好了。至於優勢，就是和以前js的getElementById相比更加簡短了，還有就是容錯率高了0.0。
基本選擇器
- $("#test") //選擇id爲test的元素
- $(".test") //選擇class爲test的元素
- $("p") //選擇全部的p元素
- e.g. $(".test").css("background","#0fccefc"); $("#test,div,.cc").css("background","#cca343");
層次選擇器
- $("body p") //選擇body中的全部p元素
- $("body > p") //選擇body中的全部p兒子元素[不包括孫子元素哦]
- $("#cc + div") //選擇id爲cc的元素的下一個div兄弟元素
  - 要是緊鄰着的兄弟哦
  - e.g. 忘記寫分號不要太在乎- -
- $("#cc ~ div") //選擇id爲cc的元素後面全部的div兄弟們
- by the way,後兩種，在jQuery中有更好的寫法
  - $(".one + div") == $(".one").next("div")
  - $(".one ~ div") == $(".one").nextAll("div") //我的感受後一種寫法更加方便記憶
  - $(".one").sibling("div") //選擇class爲one的元素全部同輩的div元素，前面的也會被選上哦
過濾選擇器
- 基本過濾選擇器
- 以爲選擇這裏，又看了兩遍，以爲這種東西，不必花費時間整理，大概瞭解以後用的時候現查就行了[記憶殘患者!]

不如說一下在練習的時候注意到的一些小細節

一直覺得開始標籤和結束標籤之間沒有東西就能夠簡寫成<br />這種，而後在配置jquery時狠狠被本身坑了一下
```
<script src = "jquery.min.js"></script>
```
```
要這樣寫才行。。被本身蠢哭。。
```

還有就是

$("p:contains('我')").css("background","#bbccaa");    //選擇內容包含「我」的p元素，改變其背景色
$("p:contains(我)").css("background","#bbccaa");    //發現參數的參數能夠寫單引號也能夠不寫，總以爲寫上好一點，畢竟XHTML
$("p:eq(3)").css("background","#bbccaa");           //選擇索引值爲3的p元素，這時又不能寫引號了，我理解是寫了引號就會變成字符型，取的值就是3的ASCII碼值了，達不到想要的效果了

var $a = $(...);$a.length表示此時$a中獲得的jquery對象個數
在使用jquery選擇器時不要隨意加空格，極可能形成語義錯誤。e.g. $("p:hidden")和$("p :hidden")，前者是過濾選擇器然後者是子代選擇器。notice！
make a distinction between :find() and :filter()
- $("div").find("#cc") 選擇div子元素中id爲cc的元素，等同於$("div #cc");
- $("div").filter("#cc") 選擇id爲cc的div元素們

能夠代替if else的.toggle()

$(button...).toggle(
    function(){
        //代碼段a
    }.function(){
        //代碼段b
    }
    )    //單擊按鈕會輪流執行代碼a和代碼b~懂什麼叫輪流麼！輪流！就是這麼6！不懂我也不告訴你！【pia，打暈拖走】。。

4.第三章 jQuery中的DOM操做

查找節點
- 想要查找元素節點或者是屬性節點，就是經過前一章學習的選擇器+.text()獲取相應元素的文本，或者是經過選擇器+.attr("屬性名")獲取某元素相應屬性的值。
增長節點和插入節點
- 經過$("<p></p>")來新建元素，其中參數徹底遵循XHTML語法【XHTML大法好！】，其實就是和平時寫html文件差很少啦，而後經過以下函數將該元素添加到相應的位置

var $test = $("<span id = "ture" class = "wtf">喵喵最喜歡帥哥辣麼麼噠</span>")
<p>你們好<p>    //把html和js寫在一塊兒了，明白就好，實在沒想好怎麼佈局

刪除節點
- 有empty(),remove()和detach()三種方法
- 最好理解的就是empty()了，$(selector).empty();清空選中標籤的中的內容，至關於格式化當前標籤了
  - 原結構：
  - 清空後：[窩纔看不到這兩個圖辣麼多]
- 而後是remove和detach，兩者整體上來說是差很少的，能夠刪除選中的元素及其中子元素，同時返回一個指向被刪除元素的指針，經過保存這個指針能夠爲所欲爲的再把刪除的元素插到你想插的地方【好污】，不一樣點就在於remove的元素再插回去後，經過js綁定的事件就失效了，而detach的元素再插回去事件仍然生效。
  - 不得不說的事件一，appendTo方法一樣能夠把選中的元素挪動位置
  - 不得不說的事件二，這兩天寫網頁，其中有個功能是經過點擊按鈕來動態生成一個表單記錄數據，我在設計樣式時直接初始化的表單的一系列操做都是生效的，當我點擊按鈕事件來動態生成這個表單時，我綁定的js事件就失效了，後來經過點擊按鈕來show被隱藏的表單才實現了這一功能。而後今天看資料的時候才知道，原來好多js的方法只能綁定在頁面初始化時就存在的元素上，不能綁在動態生成的元素上【固然是有方法解決使其能夠綁在動態生成的元素上的】，因此我當時寫的沒有生效【然而我至今不明白爲何另外一個動態生成的表單綁定的一樣寫法的事件就生效了。。】。以爲這個remove和detach的原理大概和這個相似【原本以前是寫了不少個人純YY的猜想的，然而我剛準備Preview的時候電腦崩了，因此我不許備再胡扯一遍了，仍是明天本喵查查資料再來講說他們的原理吧。。。。】
5.第四章