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