千锋
211000phone
22标签内的内容单击以后隐藏，其他内容不作任何处理。 3.1.2jQuery选择器 jQuery中的选择器与CSS中类似，只是jQuery中使用更丰富，具体如表3.1所示。 表3.1jQuery选择器 选择器 举例 作用 * $("*") 所有元素 #id $("#lastname") id="lastname"的元素 .class $(".intro") 所有class="intro"的元素 element $("p") 所有
元素 .class.class $(".intro.demo") 所有class="intro"且class="demo"的元素 :first $("p:first") 第一个
元素 :last $("p:last") 最后一个
元素 :even $("tr:even") 所有偶数
元素 :visible $("table:visible") 所有可见的表格 s1,s2,s3 $("th,td,.intro") 所有带有匹配选择的元素 ［attribute］ $("［href］") 所有带有href属性的元素 3.1.3jQuery action jQuery action实质上指的是jQuery的行为，即通过某些方法使整个网站实现动态效果，增加美感，最终达到开发要求。 1. jQuery效果 jQuery封装了实现网页动态效果的一些方法，具体如表3.2所示。 表3.2jQuery效果方法 方法 描述 举例 hide(speed,callback) 隐藏id为hide的
元素内的内容 $("#hide").click(function(){ $("p").hide();}); show(speed,callback) 显示id为show的
元素内的内容 $("#show").click(function(){ $("p").show();}); toggle(speed,callback) 显示被隐藏的元素，并隐藏已显示的元素 $("button").click(function(){ $("p").toggle();}); fadeIn(speed,callback) 淡入已隐藏的元素 $("button").click(function(){ $("#div1").fadeIn(); $("#div2").fadeIn(1000);}); fadeOut(speed,callback) 淡出可见元素 $("button").click(function(){ $("#div1").fadeOut(); $("#div2").fadeOut(1000);}); fadeToggle(speed,callback) 元素已淡出，则fadeToggle()会向元素添加淡入效果； 元素已淡入，则fadeToggle()会向元素添加淡出效果 $("button").click(function(){ $("#div1").fadeToggle(); $("#div2").fadeToggle("slow"); $("#div3").fadeToggle(3000);}); fadeTo(speed,opacity,callback) 允许渐变为给定的不透明度(值介于0与1之间) $("button").click(function(){ $("#div1").fadeTo("slow",0.15);}); slideDown(speed,callback) 向下滑动元素 $("#flip").click(function(){ $("#panel").slideDown();}); slideUp(speed,callback) 向上滑动元素 $("#flip").click(function(){ $("#panel").slideUp();}); slideToggle(speed,callback) 元素向下滑动，则可向上滑动它们， 元素向上滑动，则可向下滑动它们 $("#flip").click(function(){ $("#panel").slideToggle();}); jQuery中还有很多实现动画的方法，可以极大地丰富网页内容。 接下来以hide()与show()方法为例来演示jQuery的效果实现，如例32所示。 【例32】jQuery的效果实现 1 2 3
4 5 6 16 17 18如果单击"隐藏" 按钮，内容将会被隐藏。
19 20 21 22 例32运行结果如图3.4所示。 图3.4例32运行结果 单击【隐藏】按钮之后运行结果如图3.5所示。 图3.5单击【隐藏】按钮运行结果 再单击【显示】按钮显示结果如图3.6所示。 图3.6再单击【显示】按钮运行结果 例32是实现单击不同的按钮显示不同效果的功能。第5行是引入jQuery。第8~10行是当id为hide的按钮单击以后将标签内容进行隐藏。第11~13行是当id为show的按钮单击以后将
标签中隐藏的内容显示出来。 同理，大家可以自己动手尝试编写实现其他效果。 2. jQuery操作DOM 上一节JavaScript内容中讲解了对DOM对象的操作方法，而jQuery对这些操作方法都进行了封装，从而使得操作也更丰富，常用的操作方法如表3.3所示。 表3.3jQuery操作DOM常用方法 方法 描述 .addClass(元素) 为每个匹配的元素添加指定的样式类名 .after(元素) 在匹配元素集合中的每个元素后面插入参数所指定的内容，作为其兄弟节点 .append(元素) 在每个匹配元素里面的末尾处插入参数内容 .attr(元素) 获取匹配的元素集合中的第一个元素的属性的值。设置每一个匹配元素的一个或多个属性 .appendTo(元素) 将匹配的元素插入到目标元素的最后面(内部插入) .css(元素) 获取匹配元素集合中的第一个元素的样式属性的值。设置每个匹配元素的一个或多个CSS属性 .empty(元素) 从DOM中移除集合中匹配元素的所有子节点 .html() 获取集合中第一个匹配元素的HTML内容。设置每一个匹配元素的html内容 .position() 获取匹配元素中第一个元素的当前坐标，相对于offset parent的坐标 .remove(元素) 将匹配元素集合从DOM中删除 .text(元素) 得到匹配元素集合中每个元素的合并文本，包括他们的后代设置匹配元素集合中每个元素的文本内容为指定的文本内容 接下来以append()方法为例来演示jQuery操作DOM，如例33所示。 【例33】jQuery操作DOM 1 2 3
4 5 6 11 12 13千锋教育：
14 15 例33运行结果如图3.7所示。 图3.7例33运行结果 例33是实现在文档末尾添加内容的功能。第5行是引入jQuery。第7~9行是在标签的内容后添加字体加粗的“用良心做教育”。第13行是
中的标签，内容是“千锋教育： ”。 同理，大家可以自己动手尝试编写实现其他操作方法。 jQuery框架可以很好地丰富网页，原因是它封装了许多操作网页的方法，大家可以通过jQuery官网对其进行深入的研究学习。 3.1.4jQuery事件 事件是页面对不同访问者的响应。事件处理程序指的是当HTML中发生某些事件时所调用的方法。接下来讲解jQuery事件方法，具体如表3.4所示。 表3.4jQuery事件方法 方法 描述 blur(［［data］,fn］) 触发或将函数绑定到指定元素的blur事件 ready(fn) 文档就绪事件(当HTML文档就绪可用时) on(eve,［selector］,［data］,fn) 在选择元素上绑定一个或多个事件的事件处理函数 off(eve,［selector］,［fn］) 在选择元素上移除一个或多个事件的事件处理函数 one(type,［data］,fn) 向匹配元素添加事件处理器。每个元素只能触发一次该处理器 trigger(type,［data］) 所有匹配元素的指定事件 triggerHandler(type, ［data］) 第一个被匹配元素的指定事件 hover(［over,］out) 模仿悬停事件(鼠标移动到一个对象上面及移出这个对象)的方法。这是一个自定义的方法，它为频繁使用的任务提供了一种“保持在其中”的状态 load() 触发或将函数绑定到指定元素的load事件 toggle(［speed］,［easing］,［fn］) 绑定两个或多个事件处理器函数，当发生轮流的click事件时执行 change(［［data］,fn］) 触发或将函数绑定到指定元素的change事件 click(［［data］,fn］) 触发或将函数绑定到指定元素的click事件 dblclick(［［data］,fn］) 触发或将函数绑定到指定元素的double click事件 error(［［data］,fn］) 触发或将函数绑定到指定元素的error事件 focus(［［data］,fn］) 触发或将函数绑定到指定元素的focus事件 focusin(［data］,fn) 当元素获得焦点时，触发focusin事件 focusout(［data］,fn) 当元素失去焦点时触发focusout事件 keydown(［［data］,fn］) 触发或将函数绑定到指定元素的key down事件 keypress(［［data］,fn］) 触发或将函数绑定到指定元素的key press事件 keyup(［［data］,fn］) 触发或将函数绑定到指定元素的key up事件 mousedown(［［data］,fn］) 触发或将函数绑定到指定元素的mouse down事件 mouseenter(［［data］,fn］) 触发或将函数绑定到指定元素的mouse enter事件 mouseleave(［［data］,fn］) 触发或将函数绑定到指定元素的mouse leave事件 mousemove(［［data］,fn］) 触发或将函数绑定到指定元素的mouse move事件 mouseout(［［data］,fn］) 触发或将函数绑定到指定元素的mouse out事件 mouseover(［［data］,fn］) 触发或将函数绑定到指定元素的mouse over事件 mouseup(［［data］,fn］) 触发或将函数绑定到指定元素的mouse up事件 resize(［［data］,fn］) 触发或将函数绑定到指定元素的resize事件 续表 方法 描述 scroll(［［data］,fn］) 触发或将函数绑定到指定元素的scroll事件 select(［［data］,fn］) 触发或将函数绑定到指定元素的select事件 submit(［［data］,fn］) 触发或将函数绑定到指定元素的submit事件 unload(［［data］,fn］) 触发或将函数绑定到指定元素的unload事件 接下来以on ()方法为例来演示jQuery事件操作，如例34所示。 【例34】jQuery事件操作 1 2 3
4 5 6 13 14 15千锋教育
16好程序员
17扣丁学堂
18 19 例34运行结果如图3.8所示。 图3.8例34运行结果 单击【千锋教育】，运行结果如图3.9所示。 图3.9单击“千锋教育”运行结果 单击“好程序员”，运行结果如图3.10所示。 图3.10单击“好程序员”运行结果 单击“扣丁学堂”，运行结果如图3.11所示。 图3.11单击“扣丁学堂”运行结果 例34是使用on()函数实现事件绑定的功能。第5行是引入jQuery。第7~11行是使用on()函数绑定标签的click事件，单击
标签，则弹出标签
中的内容。第15~17行是
中的标签。 同理，大家可以自己动手尝试编写实现其他事件绑定方法。 3.1.5jQuery Ajax 异步的JavaScript和XML(Asynchronous JavaScript and XML，Ajax)是用来实现异步传输数据的技术，即在网页不刷新的情况下进行数据传送。jQuery中主要使用函数$.ajax()来实现Ajax技术，$.ajax()函数包含很多参数。接下来讲解$.ajax()函数中常用参数的作用及jQuery中Ajax技术的使用。 1. 回调函数 Web中，Ajax技术主要是进行数据的传送，若要处理Ajax得到的数据，需要使用以下几种回调函数： beforeSend： 在发送请求之前调用，并且传入一个XMLHttpRequest作为参数。 error： 在请求出错时调用。传入XMLHttpRequest对象，描述错误类型的字符串以及一个异常对象(如果存在异常情况)。 dataFilter： 在请求成功之后调用。传入返回的数据以及dataType参数的值，并且必须返回新的数据(可能是处理后的)传递给success回调函数。 success： 在请求之后调用。传入返回后的数据，以及包含成功代码的字符串。 complete： 在请求完成之后调用，无论成功或失败。传入XMLHttpRequest对象，以及一个包含成功或错误代码的字符串。 2. 数据类型 参数dataType是指定服务器返回的数据类型，参数类型为String。如果未指定类型，jQuery将自动根据http包mime的信息返回responseXML或responseText，并作为回调函数的参数进行传递。 其中可指定的类型有以下6种： xml： 返回XML文档，可用jQuery处理。 html： 返回纯文本HTML信息； 包含的script标签会在插入DOM时执行。 script： 返回纯文本JavaScript代码。不会自动缓存结果。除非设置了cache参数。注意： 在远程请求时(不在同一个域下)，所有post请求都将转为get请求。 json： 返回JSON数据。 jsonp： JSONP格式。使用JSONP形式调用函数时，例如myurl?callback=?，jQuery将自动替换后一个“?”为正确的函数名，以执行回调函数。 text： 返回纯文本字符串。 3. 其他常用参数 url： 发送请求的地址(默认为当前页地址)，参数类型为String。 type： 请求方式(post或get)默认为get，参数类型为String。其他http请求方法，如put和delete也可使用，但仅部分浏览器支持。 data： 发送到服务器的数据，参数类型为Object或String。如果不是字符串，将自动转换为字符串。get请求将data附加在url后。对象必须为key/value格式，如{foo1:"bar1",foo2:"bar2"}转换为&foo1=bar1&foo2=bar2。如果是数组，jQuery将自动将不同值对应同一个名称，如{foo:［"bar1","bar2"］}转换为&foo=bar1&foo=bar2。 4. 使用 $.ajax()函数的使用示例如下： $.ajax({ type: "POST", url: "test.py", data: {name: "1000phone",location: "BeiJing" }, success: function(msg){ alert( "Data Saved: " + msg ); } }); 上述示例是通过$.ajax()函数实现使用POST方式请求test.py文件并将data中的数据保存到服务器中，成功之后显示保存的数据的功能。 3.2Bootstrap 3.2.1Bootstrap简介 Bootstrap是Twitter设计师Mark Otto和Jacob Thornton合作开发的前端框架，也是目前最受欢迎的前端框架。Bootstrap基于HTML、CSS、JavaScript，它简洁灵活，使Web开发更加快捷。 Bootstrap之所以如此受欢迎，是因为它有以下优点： 适配移动端和PC端，并以移动设备优先。 所有主流浏览器都支持Bootstrap。 容易上手。 响应式设计。 为开发人员创建接口提供了一个简洁统一的解决方案。 包含了功能强大的内置组件，易于定制。 提供了基于Web的定制。 开源。 Bootstrap的安装及使用都非常简单，接下来分步骤讲解Bootstrap的安装与使用。 1. 下载Bootstrap 下载地址： http://www.bootcss.com/，即Bootstrap中文网首页，如图3.12所示。 图3.12Bootstrap中文网首页 单击【Bootstrap3中文文档(v3.3.7)】按钮，进入下载接入页如图3.13所示。 图3.13下载接入页 单击【下载Bootstrap】进入下载页面，如图3.14所示。 图3.14Bootstrap下载页 在图3.14中，有三种形式的Bootstrap，本书选择第一种下载，即单击【下载Bootstrap】即可下载。 2. 解压下载文件 解压后文件如图3.15所示。 bootstrap ├─css │bootstrap.css │bootstrap.css.map │bootstrap.min.css │bootstrap.min.css.map │bootstraptheme.css │bootstraptheme.css.map │bootstraptheme.min.css │bootstraptheme.min.css.map │ ├─fonts │glyphiconshalflingsregular.eot │glyphiconshalflingsregular.svg │glyphiconshalflingsregular.ttf │glyphiconshalflingsregular.woff │glyphiconshalflingsregular.woff2 │ └─js bootstrap.js bootstrap.min.js 图3.15解压后文件 其中css文件夹中常用的两个文件是bootstrap.css和bootstrap.min.css； js文件夹中常用的两个文件是bootstrap.js和bootstrap.min.js。 3. 复制解压后的文件 将解压后的文件夹复制到项目中即可使用。 4. Bootstrap使用 接下来以一个简单实例来讲解Bootstrap的使用，如例35所示。 【例35】Bootstrap的使用 1 2 3
4 5