jquery实例演练02

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() => 遍历两个元素之间的所有元素

范例十