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() 删除元素

两者唯一不同的地方是：

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

範例十