<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(); //改变显示、隐藏形式
相关推荐
初探jquery——表单应用范例
[Packt Publishing] jQuery 移动开发技术初探 (英文版) [Packt Publishing] jQuery Mobile First Look (E-Book) ☆ 出版信息:☆ [作者信息] Giulio Bai [出版机构] Packt Publishing [出版日期] 2011年06月23...
JQuery菜鸟学习实战, JQuery初探最int实例材料, 0基础学习JQuery最实际最直接的例子
NULL 博文链接:https://duyunfei.iteye.com/blog/857841
easyUI初探http://blog.csdn.net/libin_1/article/details/50754278
最近在看jQuery,刚刚入一点门,发现了一个有趣的函数,就拿老赵的博客做实验了,哈。 装入一个 HTML 网页最新版本。 jQuery 代码: 代码如下: $.ajax({ url: “test.html”, cache: false, success: function(html)...
JQuery构建客户/服务分离的链接模型中Table分页代码效率初探!
jQuery EasyUI是一组基于jQuery的UI插件集合,而jQuery EasyUI的目标就是帮助web开发者更轻松...OK,下面就开始我们的初探之旅。jQuery EasyUI—Accordion 手风琴效果,大家应该很熟悉。 基本代码: 代码如下: <htm
" /> <link href="http://1.eewimg.cn/js/lib/jquery.cluetip.css" rel="stylesheet" type="text/css
第1章 移动互联网时代的WEB技术 ...第8章 轻量级框架JQUERY MOBILE初探 第9章 重量级富框架SENCHA TOUCH入门 第10章 跨平台的PHONEGAP应用介绍 第11章 构建基于HTML5的生活轨迹WEB APP 第12章 进阶之路
javascript提供了addEventListener和attachEvent两个方法来为DOM节点绑定事件,jquery作了进一步封装,提供了兼容各个浏览器的bind方法。现在来看,这种传统的事件绑定方式存在着以下不足: 1.可能需要绑定很多的...
第一阶段:python基础准备本阶段主要是学习python开发入门知识,html+css、javascript、jquery、python编程基础、python初探等,让你轻松入门python语言。 第二阶段:Pythonweb开发本阶段是主要Python开发基础知识的...
1.13 Excel Report 一个小巧实用基于java实现的Excel报表生成工具 1.14 Spring(十四) Spring和Hibernate的结合--声明式事务管理1.15 Apache Click 框架初探1.16 Spring AOP 详解 1.17 2 Spring2.0用注解实现事务...
一、前言 说是爬虫初探,其实并没有用到爬虫相关第三方类库,主要用了node.js基础模块http、网页分析... ②:cherrio 网页分析工具,你可以理解其为服务端的jQuery,因为语法都一样。 效果图 1、抓取整个网页
内容简介编辑 ...第8章 轻量级框架jQuery Mobile初探 79 第9章 重量级富框架Sencha Touch入门 187 第10章 跨平台的PhoneGap应用介绍 273 第11章 构建基于HTML5的生活轨迹Web App 337 第12章 进阶之路 366