【JavaScript】DOM選擇器和jQuery

時間 2019-11-10

標籤 JavaScript dom 選擇器 jquery 欄目 JavaScript 简体版

原文原文鏈接

目錄css

很難受，第二次的jQuery
- 核心語法
- 選擇器

很難受，第二次的jQuery

調用：html

<head>
    <script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
    ...
</head>

核心語法

$(selector).action()
$是重要的jQuery符號，實際上，jquery把全部的功能都封裝在一個全局變量jQuery中，而$就是一個合法的變量名，是jQuery的別名（jQuery(selector).action()）：java

window.jQuery; // jQuery(selector, context)
//注意這裏的對象是window，在某些場合，jQuery的操做對象不必定是一個你能夠篩到的標籤，也多是整個窗體，這種概念在js中應該有。
window.$; // jQuery(selector, context)

$ === jQuery; // true

typeof($); // 'function'

$; // jQuery(selector, context)
jQuery.noConflict();
//解除別名$
$; // undefined
jQuery; // jQuery(selector, context)

選擇器

CSS選擇器（基礎！）

http://www.cnblogs.com/yuanchenqi/articles/6856399.htmlnode

基本選擇器：

標籤選擇器：
p {color:gray};
id選擇器：
#info {font-size:30px}
class選擇器：
info {background:#ff0}
統配選擇器：
* {margin:0;padding:0}

組合選擇器：

DOM選擇器

由於jq的選擇器其實和DOM選擇器幾乎差很少，可是在選擇語法上有很好的優化，因此我以爲只要理解了DOM其實對正確運用jq選擇器有很大的幫助，順便補一波DOM沒有寫的筆記。python

選擇DOM

始終記住DOM是一個樹形結構。操做一個DOM節點實際上就是這麼幾個操做：jquery

更新：更新該DOM節點的內容，至關於更新了該DOM節點表示的HTML的內容；數組
遍歷：遍歷該DOM節點下的子節點，以便進行進一步操做；app
添加：在該DOM節點下新增一個子節點，至關於動態增長了一個HTML節點；dom
刪除：將該節點從HTML中刪除，至關於刪掉了該DOM節點的內容以及它包含的全部子節點。測試

既然要進行操做，那麼必定要先拿到一個節點對象，咱們可能不必定能直接拿到咱們想要操做的節點，因此能夠先找到父節點而後縮小範圍，再進行選擇。
比較基礎的幾種方式：

document.getElementById()
document.getElementsByTagName()
CSS選擇器document.getElementsByClassName()

範例練習：

<body>
<div id="test-div">
<div class="c-red">
    <p id="test-p">JavaScript</p>
    <p>Java</p>
  </div>
  <div class="c-red c-green">
    <p>Python</p>
    <p>Ruby</p>
    <p>Swift</p>
  </div>
  <div class="c-green">
    <p>Scheme</p>
    <p>Haskell</p>
  </div>
</div>
</body>


//----------------------------------
//----------腳本部分-----------------

<script>
    var js=document.getElementById('test-p');//經過ID直接獲取


    var arr=document.getElementsByClassName('c-red c-green')[0].getElementsByTagName('p');
//    console.log(arr);
//前一部分經過class得到的是一個<div>標籤，可是由於是經過elements得到的，因此他是被包裹在一個數組裏面的。因此要經過[0]把他取出來，這時候他就是一個單純的<div class="c-red c-green">。可是咱們須要的是這裏面的三個<p>標籤的集合。這裏比較容易出現誤區，讓咱們以爲這個<div>就已是正確答案了，其實仍是不對的，咱們須要的是一個數組，而不是一個標籤。因此須要再次經過tag篩選出須要的<p>標籤。
//綜上，整句話的意思就是，在整個document裏面找到class爲「c-red c-green」的元素數組，而且取出裏面的第一個（其實也是惟一一個）元素，再從這個元素中，篩出標籤爲<p>的元素集合。
    var haskell=document.getElementsByClassName('c-green')[1].lastElementChild;
    console.log(haskell);
//這題我用的方法比較蠢，是在觀察整個文檔結構以後本身用索引位置獲取出來的。用到了children方法，而且按照索引獲取了最後一個children。
//翻譯過來 就是：在整個document中經過類名爲「c-green」獲取想要的父級元素集合，其中第二個是咱們想要的目標父級元素，再從父級元素標籤中獲取他的最後一個子級標籤。
//其實能夠想一個更加準確的策略去獲取這個標籤：。。。。暫時想不到，這個文檔結構自己有點鬆散。這也說明，在建立文檔標籤結構的時候，要準確有條理地對標籤進行歸類（.class）和定位（#id）


    if (!js || js.innerText !== 'JavaScript') {
    alert('選擇JavaScript失敗!');
} else if (!arr || arr.length !== 3 || !arr[0] || !arr[1] || !arr[2] || arr[0].innerText !== 'Python' || arr[1].innerText !== 'Ruby' || arr[2].innerText !== 'Swift') {
    alert('選擇Python,Ruby,Swift失敗!');
} else if (!haskell || haskell.innerText !== 'Haskell') {
    alert('選擇Haskell失敗!');
} else {
    alert('測試經過!');
}

</script>

更新DOM

獲取而且更新標籤：innerHTML
這個方式很是強大，不但能夠修改一個DOM節點的文本內容，還能夠直接經過HTML片斷修改DOM節點內部的子樹。這種方法要注意，對字符進行編碼！
獲取而且更新標籤內容：innerText textContent
二者的區別在於讀取屬性時，innerText不返回隱藏元素的文本，而textContent返回全部文本。另外注意IE<9不支持textContent。
更新修改標籤的css style
DOM節點的style屬性對應全部的CSS，能夠直接獲取或設置。注意這裏使用的格式：tagobj.style.css="value"的value是經過等號和引號傳入的

範例：

var js=document.getElementById("test-js");
//獲取對象
js.innerText="JavaScript";
//修改內部文本
js.style.color="#ff0000";
//修改css樣式
js.style.fontWeight="bold";

插入DOM

咱們獲取了某個DOM節點，想在這個節點（多是個空節點）中添加新的DOM。
若是他自己真的是個空節點，咱們能夠直接使用上面提過的innerHTML=<span></span>添加內容。

可是若是這個節點不是空節點呢？

添加的節點原本就存在原文檔樹中

範例：

<p id="js">JavaScript</p>
<div id="list">
    <p id="java">Java</p>
    <p id="python">Python</p>
    <p id="scheme">Scheme</p>
</div>

把<p id="js">JavaScript</p>添加到<div id="list">的最後一項：

var
    js = document.getElementById('js'),
    list = document.getElementById('list');
//這個聲明變量的方式有點小帥，mark一下
list.appendChild(js);

運行js以後的結果：

<!-- HTML結構 -->
<div id="list">
    <p id="java">Java</p>
    <p id="python">Python</p>
    <p id="scheme">Scheme</p>
    <p id="js">JavaScript</p>
//能夠發現以前在div外部的js標籤進入了div內部，由於在原html文檔樹中已經有了這個標籤。他就會從原先的位置刪除，在添加到新的位置。
</div>

建立一個新節點添加到文檔樹中：

var
list = document.getElementById('list'),
haskell = document.createElement('p');
haskell.id = 'haskell';
haskell.innerText = 'Haskell';
list.appendChild(haskell);
這樣咱們就動態添加了一個新的節點：

var
    list = document.getElementById('list'),
    haskell = document.createElement('p');
    //建立一個元素對象，標籤爲<p>
haskell.id = 'haskell';
//給這個建立的對象添加一個id屬性
haskell.innerText = 'Haskell';
//給這個建立的對象添加一個內部文本
list.appendChild(haskell);
//把這個對象做爲子節點添加到list對象中

這樣咱們就動態添加了一個新的節點：

<!-- HTML結構 -->
<div id="list">
    <p id="java">Java</p>
    <p id="python">Python</p>
    <p id="scheme">Scheme</p>
    <p id="haskell">Haskell</p>
</div>

指定位置地添加節點：

使用parentElement.insertBefore(newElement, referenceElement);，子節點會插入到referenceElement以前。

使用insertBefore重點是要拿到一個「參考子節點」的引用。不少時候，須要循環一個父節點的全部子節點，能夠經過迭代children屬性實現：

var
    i, c,
    list = document.getElementById('list');
for (i = 0; i < list.children.length; i++) {
    c = list.children[i]; // 拿到第i個子節點
}

刪除DOM

removeChild()：得到要刪除的元素，經過父元素調用刪除

替換節點

somenode.replaceChild(newnode, 某個節點);

DOM 屬性和事件

屬性

上面咱們已經提到了innerHTML，innerText等經常使用獲取文本節點的方法。

其餘節點屬性：

parentElement           // 父節點標籤元素
children                // 全部子標籤
firstElementChild       // 第一個子標籤元素
lastElementChild        // 最後一個子標籤元素
nextElementtSibling     // 下一個兄弟標籤元素
previousElementSibling  // 上一個兄弟標籤元素

注意，原生js中沒有辦法找到全部的兄弟標籤！
但在jq中有一個jQuery.siblings()能夠用來查找兄弟節點，不分先後。

attitude操做

elementNode.setAttribute(name,value)

     elementNode.getAttribute(屬性名)        <-------------->elementNode.屬性名(DHTML)

     elementNode.removeAttribute(「屬性名」);

適用經過value獲取標籤值的節點：
input
select（selectdIndex）
textarea

注意這裏的這個input比較經常使用，另外兩個暫時沒有用到因此沒有查。可是在使用input標籤中的radio類型（單選）的時候，並無找到有內置的獲取radio的value的方法。傳翔給的方法以下：

//獲取radio選中值
   function getRadioValue(radioName){
       var obj = document.getElementsByName(radioName);
       for(i=0; i<obj.length;i++){
           if(obj[i].checked){
               return obj[i].value;
           }
       }
       return "undefined";
   }

class的相關操做

elementNode.className //獲取目標的類名？
elementNode.classList.add //在目標的類列表中添加
elementNode.classList.remove //在目標的類列表中刪除

jQuery選擇器

回顧了DOM的選擇器，再來看jQuery的選擇器，能夠說jQuery的核心就是選擇器，它的基本語法：
$("#dom-id")

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。