初探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();    //改变显示、隐藏形式

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值