初探jQuery

 

<div class="homepage-wrapper">
  <h2 id="home-title">Welcome to jQuery Travels - Traversing the DOM since 2006</h2>
  <p>Fly to New York today for as little as <span>$299.99</span></p>
</div>

 

在jQuery中，可以通过查找标签来操作标签内的内容，例如

$("p").text();

 

 可以得到<p>标签内的内容：“Fly to New York today for as little as <span>$299.99</span>”，同理，

$("span").text();

 就可以得到<span>标签内的“$299.99”。

 

同时，我们可以通过'class'或者'id'来查找标签，对于'class'属性，在前面加个".",对于'id'属性，前面加：“#”，例如：

 

$(".homepage-wrapper");

 

$("#home-title");

通过$("div").find("h2"),也能找到<h2>标签，这种做法在存在多个同样的标签时作用更加明显：

 

<div id="vacations-wrapper">
  <h1>Vacation Packages</h1>
  <ul>
    <li class="vacation america">
      <h2>San Francisco, California</h2>
      <span class="details">$700</span>
    </li>
    <li class="vacation america">
      <h2>Washington DC, District of Columbia</h2>
      <span class="details">$400</span>
    </li>
    <li class="vacation europe">
      <h2>London, England</h2>
      <span class="details">$1,100</span>
    </li>
    <li class="vacation asia">
      <h2>Shanghai, China</h2>
      <span class="details">$
    </li>
  </ul>
</div>

 在上面的代码中，存在多个<li>标签，通过：

 

$(".vacation");

 

我们找到的就是所有包含"class='vacation'"的标签，也就找到了这里面的每一个<li>标签，如果我们用：

 

$(".asia");

找到的就只有包含"class='asia'"的<li>标签 。

 

 

我们还可以利用.find()来查找下一层的标签：

 

$(".asia").find("h2");

 这样整个<h2>标签就被找到了，同样，.find()也能通过class和id查找标签，这里就不做演示了。

 

还有一种.children()方法：

 

$(".asia").children("h2");

 找到的是含有属性"class=''asia"的标签的所有子标签，与之对应的是.parent()方法，顾名思义就是找到父标签。

 

我们也可以通过multiple selectors，同时查找多个标签：

 

$(".asia,.europe");

 在存在多个同样的标签时，我们只需要其中一个，可以通过之前提到的通过'id'和'class'查找，也可以用.first()，.last()等方法：

 

 

$("#vacations").children("li").first();    //查找id为vacation标签的第一个子标签
$("#vacations").children("li").last();     //查找id为vacation标签的最后一个子标签
$("#vacations").children("li").odd();      //查找id为vacation标签的中间子标签
$("#vacations").children("li").even();     //查找id为vacation标签的第一个子标签和最后一个子标签

 除了第一个、最后一个、中间标签，其他位置的标签可以用.next()或者.prev()方法：

 

 

$("#vacations").children("li").first().next();
//查找id为vacation标签的第一个子标签后的一个子标签
$("#vacations").children("li").last().prev();
 //查找id为vacation标签的最后一个子标签的上一个子标签

在不知道页面是否完全加载就对页面操作会造成很多没必要的错误，在接下来关于操作界面的介绍之前，我们先要学会等页面加载完毕再执行代码：

 $(document).ready(function() {
});

 加上这一段代码后，你就可以在大括号{}中大胆加上你需要的代码了。例如：

 $(document).ready(function() {
     $("li").first().remove();
});

通过.remove()方法，我们可以在页面中删除第一个<li>标签以及<li>标签内的所有内容。

接下来，我们试一下新的实例：

<div id="tours">
  <h1>Guided Tours</h1>
  <ul>
    <li class="usa tour">
      <h2>New York, New York</h2>
      <span class="details">$1,899 for 7 nights</span>
      <button class="book">Book Now</button>
    </li>
    <li class="europe tour">
      <h2>Paris, France</h2>
      <span class="details">$2,299 for 7 nights</span>
      <button class="book">Book Now</button>
    </li>
    <li class="asia tour">
      <h2>Tokyo, Japan</h2>
      <span class="details">$3,799 for 7 nights</span>
      <button class="book">Book Now</button>
    </li>
  </ul>
</div>

 在js文件中，写入：

$(document).ready(function(){
    var message = $("<span>Call 1-555-jquery-air to book this tour</span>");
    $(".asia").append(message);
    $(".asia").find("button").remove();
});

 .remove()是删除标签的方法，我们也可以往html中添加标签：

$("button").on("click", function(){
  var message = $("<span>Call 1-555-jquery-air to book this tour</span>");
  $(".usa").append(message);
  $("button").remove();
});

 .append(<element>)向指定的容器标签中的最后添加内容

 

.prepend(<element>)向指定的容器标签的前面添加内容

.after(<element>) 在被选元素后插入指定的内容

.before(<element>)在被选元素前插入指定的内容

在上面的js代码中，我们通过监听“click”事件，响应之后将“<span>Call 1-555-jquery-air to book this tour</span>”赋值给message但是我们需要按照上面的格式在文本前加上符号$，这样html页面才会正确渲染jQuery添加进去的内容。接写来我们才用到.append()方法，将事先写好的message动态添加到包含"class='usa'"属性的标签中的最后。并且将<button>标签及其内容删除。

另外，我们也可以通过.appendTo()，.prependTo()，.insertBefore()，.insertAfter()的方法动态添加html内容。例如用

message.appendTo($(".usa"));

 代替原来的

 

 

$(".usa").append(message);

 效果是一样的。可能你也注意到上面的.on()方法，.on()方法是官方推荐的绑定事件的一个方法:

 

 $(selector).on(<event>,<event handler>)

但是我们注意到，按照上面的写法，所有的<button>标签被点击都会触发同样的效果，所以我们需要指定对应被点击的内容，触发相应的功能。

$(document).ready(function(){
    $("button").on("click", function(){
    var message = $("<span>Call 1-555-jquery-air to book this tour</span>");
    $(this).closest(".tour").append(message);
    $(this).remove();
  });
});

  我们不仅可以监听"click"事件，更多的监听事件可以在：http://api.jquery.com/category/events/keyboard-events/和http://api.jquery.com/category/events/form-events/中查看。我们可以通过$(this)定位被点击的html内容，并且依旧可以在$(this)基础上走到其他标签的位置，在这里，我们用.closest()走到this的属性为“class='tour'”的根标签。在这里，我们可以采用更好的方式取代原来的点击监听：

$(".tour").on("click",button, function(){
});

有时候，我们需要向标签附上"data"属性：

<li class="usa tour on-sale" data-discount="299">
   <h2>New York, New York</h2>
   <span class="details">$1,899 for 7 nights</span>
   <button class="book">Book Now</button>
</li> 

 我们可以通过.data()的方式取得标签内的值：

$(. usa).data("discount");

我们还可以通过.addClass()给标签添加属性，用.removeClass()删除标签的某一属性：

$(. usa).addClass("text_center");  //在标签中添加新的class属性
$(. usa).removeClass("on-sale");  //添加删除某一class属性

在jQuery中还有很多好玩的东西，比如：有时候我们没必要真正删除某一html内容，我们可以用.slideDown()，.slideUp()，.slideToggle()来现实或者隐藏某一html内容， 用.fade()来实现淡进淡出等：

$("span").slideDown();      //显示内容
$("span").slideUp();        //隐藏内容
$("span").slideToggle();    //改变显示、隐藏形式