JQuery DOM元素操作

透過text()、Val()來顯示文本內容
範例一

<p id="test">這是段落中的<b>粗體</b>文本。</p>
<p>姓名：<input type="text" id="test2" value="米老鼠"></p>
<button id="btn1">顯示文本</button>
<button id="btn2">顯示ValL</button>

$(document).ready(function(){
  $("#btn1").click(function(){
    alert("Text: " + $("#test").text());
  });
  $("#btn2").click(function(){
    alert("HTML: " + $("#test2").val());
  });
});

將參數帶入進去看看會有什麼變化吧
範例二

//點擊文字
<p id="test1">這是<b>粗體</b>文本。</p>

$(document).ready(function(){
  $("#test1").click(function(){
    $("#test1").text(function(i,origText){
      console.log(i, origText)
      return "Old text: " + origText + " New text: Hello world! (index: " + i + ")"; 
    });
  });
});

透過jQuery.attr()來改變連結中的href 和 title
範例三

<p><a href="http://www.google.com" id="test">www.google.com</a></p>
<button>改變 href 和 title 值</button>
<p>請把鼠標指針移動到鏈接上，或者點擊該鏈接，來查看已經改變的 href 值和已經設置的 title 值。</p>

$(document).ready(function(){
  $("button").click(function(){
    $("#test").attr({
      "href" : "https://vuejs.org/",
      "title" : "Vue.js 教程"
    });
  });
});

若使用callback將參數回調進去會有什麼不一樣呢？
範例四

<p><a href="https://vuejs.org/" id="test">Vue.js</a></p>
<button>改變 href 和 title 值</button>
<p>請把鼠標指針移動到鏈接上，或者點擊該鏈接，來查看已經改變的 href 值和已經設置的 title 值。</p>

$(document).ready(function(){
  $("button").click(function(){
    $("#test").attr("href", (index, value) => {
      return value + "v2/guide/"
    });
  });
});

透過append() 和 prepend() 添加新元素
範例五

<p>This is a paragraph.</p>
<button>追加文本</button>

$(document).ready(() => {
  $("button").click(() => {
  	var txt1="<p>Text1.</p>";              // 以 HTML 創建新元素
    var txt2=$("<p></p>").text("Text2.");  // 以 jQuery 創建新元素
    var txt3=document.createElement("p");
    txt3.innerHTML="Text3.";               // 通過 DOM 来創建文本
    $("body").append(txt1,txt2,txt3);        // 追加新元素
  })
})

透過remove() 和 empty() 刪除元素

兩者唯一不同的地方是：

• remove() => 刪除被選中的元素，包含在內的子元素
• empty()　=> 刪除被選中元素中的子元素
  範例六

<div id="div1" style="height:100px;width:300px;border:1px solid black;background-color:yellow;">
    <p class="test1">This is some text in the div.</p>
    <p class="test2">This is a paragraph in the div.</p>
    <p class="test3">This is another paragraph in the div.</p>
</div>
  
  <br>
  <button>删除 div 元素</button>
  
  $(document).ready(function(){
  $("button").click(function(){
    $("#div1").remove();
  });
});

// $(document).ready(function(){
//   $("button").click(function(){
//     $("#div1").empty();
//   });
// });

透過addClass()動態新增css樣式
若將addClass()，改成toggleClass()，即可來回切換樣式
範例七

  <h1>標題 1</h1>
  <p>這是一个段落。</p>
  <div>這是非常重要的文本！</div>
  <br>
  <button>向元素添加xxxxx</button>
  
  $(document).ready(function(){
  $("button").click(function(){
    $("h1,p").addClass("blue");
    $("div").addClass("important");
  });
});

介紹parent()與parents()的差異

parent() => 只會向上一層進行DOM元素的遍歷
parents() => 對所選中之子層，進行所有遍歷，也可指定父層的層級
範例八

<div class="ancestors">
  <div style="width:500px;">div (曾祖父)
    <ul>ul (祖父)  
      <li>li (直接父)
        <span>span</span>
      </li>
    </ul>   
  </div>

  <div style="width:500px;">div (祖父)   
    <p>p (父)
        <span>span</span>
      </p> 
  </div>
</div>

$(document).ready(function(){
  $("span").parent().css({"color":"red","border":"2px solid red"});
});

// $(document).ready(function(){
//   $("span").parents("ul").css({"color":"red","border":"2px solid red"});
// });

介紹children()與find()

在js的世界中，有父元素當然也會有子元素的存在，使用方法和parent()大同小異，因此就不多做解釋了，直接附上範例給大家做參考與比對吧！
範例九

介紹siblings()、next()、nextAll()、nextUntil()同層屬性的差異
siblings() => 遍歷所選元素之外的其餘元素
next() => 遍歷所選元素的下一個元素
nextAll() => 遍歷所選元素的下個所有元素
nextUntil() => 遍歷兩個元素之間的所有元素

範例十