Oct 28th-29th
jQuery
1.下载jQuery文件库
在jQuery的官方网站（http://jquery.com）中，下载最新版本的jQuery文件库。在网站中找到最新版本文件的下载按钮，将jQuery框架文件下载到本地即可，本教案使用的版本为稳定版：1.9.0版。
2.引入jQuery文件库
下载完jQuery框架文件后，并不需要任何的安装，仅需要使用<script>文件导入标记，将jQuery框架文件导入页面中即可，假设该文件下载后保存在项目文件夹Jscript中，那么，在页面的<head></head>中加入如下代码：
<script language="javascript" type="text/javascript" src="1.9.0/jquery.js"></script>
在页面的头部分，加入上述代码后，便完成了jQuery框架开发环境的搭建，就可以开始我们的jQuery学习了。
$()就是jQuery中的函数，它的功能是获得（）中指定的标签元素。如示例中$(“p”)会得到一组P标签元素,其中“p”表示CSS中的标签选择器。$()中的()不一定是指定元素，也可能是函数。
在jQuery中 $()方法等价于jQuery()方法,前者比较常用，是后者的简写。一般只有在$()与其它语言冲突时才会使用jQuery()方法。
选择器
基础选择器
1.$("#id")表示根据id选择器获取页面中指定的标签元素，且返回唯一一个元素。
拓展：html()方法的功能是设置或获取元素中显示的内容
2.jQuery中可以根据元素名查找元素，格式如下：$(“element”)，其中element就是元素的名称
拓展：css()方法的功能是设置或获取元素的某项样式属性
3.根据元素的某个特征进行查找，它的调用格式如下：$(“.class”)，其中.class参数表示元素的CSS类别(类选择器)名称。
拓展：attr()方法获取元素的类别名称，并将名称显示在页面中。
4.“*”号选择器，它的功能是获取页面中的全部元素，格式为：$(“*”)，选择器中的参数就一个“*”，既没有“#”号，也没有“.”号。 由于该选择器的特殊性，它常与其他元素组合使用，表示获取其他元素中的全部子元素。
5.选择任意多个指定的元素，调用sele1,sele2,seleN选择器，它的调用格式如下：$(“sele1,sele2,seleN”)，其中参数sele1、sele2到seleN为有效选择器，每个选择器之间用“，”号隔开，它们可以是之前提及的各种类型选择器，如$(“#id”)、$(“.class”)、$(“selector”)选择器等。
6.层次选择器，可以快速定位某一层次的一个或多个元素，ance desc选择器就是其中之一，它的调用格式如下：$("ance desc")，其中ance desc是使用空格隔开的两个参数。ance参数（ancestor祖先的简写）表示父元素；desc参数（descendant后代的简写）表示后代元素，即包括子元素、孙元素等等。两个参数都可以通过选择器来获取。比如家族姓氏“div”，家族几代人里，都有名字里带“span”的，就可以用这个ance desc选择器把这几个人给定位出来。拿到的无论是子辈，孙辈都拿出来。
7.parent > child选择器的范围要小些，它所选择的目标是子集元素，相当于一个家庭中的子辈们，但不包括孙辈，它的调用格式如下：$(“parent > child”)，child参数获取的元素都是parent选择器的子元素，它们之间通过“>”符号来表示一种层次关系。
8.prev + next选择器就可以查找与“prev”元素紧邻的下一个“next”元素，格式如下：$(“prev + next”)，其中参数prev为任何有效的选择器，参数“next”为另外一个有效选择器，它们之间的“+”表示一种上下的层次关系，也就是说，“prev”元素最紧邻的下一个元素由“next”选择器返回的并且只返回唯的一个元素。
9.prev ~ siblings选择器也是查找prev 元素之后的相邻元素，但前者只获取第一个相邻的元素，而后者则获取prev 元素后面全部相邻的元素，它的调用格式如下：$(“prev ~ siblings”)，其中参数prev与siblings两者之间通过“~”符号形成一种层次相邻的关系，表明siblings选择器获取的元素都是prev元素之后的同辈元素。
过滤选择器
根据某过滤规则进行元素的匹配，书写时以“：”号开头,通常用于查找集合元素中的某一位置的单个元素。
1.得到一组相同标签元素中的第1个元素. $(“li:first”) 过滤选择器可以很方便地获取ul列表中的第一个li元素.
:first过滤选择器的功能是获取第一个元素，常常与其它选择器一起使用，获取指定的一组元素中的第一个元素。
2.选择任意的一个标签元素，我们可以使用:eq(index) 其中参数index表示索引号（即：一个整数），它从0开始，如果index的值为3，表示选择的是第4个元素。调用$("li:eq(3)")过滤选择器代码，获取了第4个<li>元素.
3.按照文本内容来查找一个或多个元素，那么使用:contains(text)选择器会更加方便， 它的功能是选择包含指定字符串的全部元素，它通常与其他元素结合使用，获取包含“text”字符串内容的全部元素对象。其中参数text表示页面中的文字。必须加单引号是因为它是一个字符串，而不是一个变量，所以不加单或双引号的话是会报错的。
4.:has(selector)过滤选择器的功能是获取选择器中包含指定元素名称的全部元素，其中selector参数就是包含的元素名称，是被包含元素。通过使用$("li:has('p')")选择器代码，获取了包含<p>元素的全部<li>元素，并通过css方法改变了这些元素在页面中显示的文字样式。
5.:hidden过滤选择器的功能是获取全部不可见的元素，这些不可见的元素中包括type属性值为hidden的元素。
6.:visible过滤选择器获取的是全部可见的元素，也就是说，只要不将元素的display属性值设置为“none”，那么，都可以通过该选择器获取。
7.通过元素属性获取元素的选择器，[attribute=value]属性选择器的功能是获取与属性名和属性值完全相同的全部元素，其中[]是专用于属性选择器的括号符，参数attribute表示属性名称，value参数表示属性值。属性值中的‘’单引号可以不写，由于属性名与属性值是等号，因此，它们之间不是包含关系，而是完全相同。
8.[attribute!=value]属性选择器的功能是获取不包含属性名，或者与属性名和属性值不相同的全部元素，其中[]是专用于属性选择器的括号符，参数attribute表示属性名称，value参数表示属性值。
9.[attribute*=value]，它可以获取属性值中包含指定内容的全部元素，其中[]是专用于属性选择器的括号符，参数attribute表示属性名称，value参数表示对应的属性值。
10.使用:first-child子元素过滤选择器则可以获取每个父元素中返回的首个子元素，它是一个集合，常用多个集合数据的选择处理。
11.:last-child子元素过滤选择器的功能是获取每个父元素中返回的最后一个子元素，它也是一个集合，常用多个集合数据的选择处理。
表单选择器
1.:input表单选择器可以实现，它的功能是返回全部的表单元素，不仅包括所有<input>标记的表单元素，而且还包括<textarea>、<select> 和 <button>标记的表单元素，因此，它选择的表单元素是最广的。调用$("#frmTest :input")表单选择器代码获取了表单中的全部元素
拓展：addClass()方法的功能是为元素添加指定的样式类别名称
2.:text表单文本选择器可以获取表单中全部单行的文本输入框元素，单行的文本输入框就像一个不换行的字条工具，使用非常广泛。通过:text表单选择器只获取单行的文本输入框元素，对于<textarea>区域文本、按钮元素无效。
3.想要获取密码输入文本框，可以使用:password选择器，它的功能是获取表单中全部的密码输入文本框元素。
4.使用:radio选择器可轻松获取表单中的全部单选按钮元素。
5.使用:checkbox选择器可以快速定位并获取表单中的复选框元素。
6.:submit选择器可获取表单中的这个提交按钮元素。
7.一个<input>元素的“type”属性值设为“image”时，该元素就是一个图像域，使用:image选择器可以快速获取该类全部元素。使用:image选择器只能获取<input>图像域，而不能获取<img>格式的图像元素。
8.使用:button选择器能获取且只能获取“type”属性值为“button”的<input>和<button>这两类普通按钮元素。
9.复选框、单选按钮元素，选中时“checked”属性值为“checked”，调用:checked可以获取处于选中状态的全部元素。
10.:selected选择器只能获取<select>下拉列表框中全部处于选中状态的<option>选项元素。
操作DOM元素
1.attr()方法的作用是设置或者返回元素的属性，其中attr(属性名)格式是获取元素属性名的值，attr(属性名，属性值)格式则是设置元素属性名的值。
2.使用html()和text()方法操作元素的内容，当两个方法的参数为空时，表示获取该元素的内容，而如果方法中包含参数，则表示将参数值设置为元素内容。html()方法可以获取元素的HTML内容，因此，原文中的格式代码也被一起获取，而text()方法只是获取元素中的文本内容，并不包含HTML格式代码。
3.addClass()和css()方法可以方便地操作元素中的样式，前者括号中的参数为增加元素的样式名称，后者直接将样式的属性内容写在括号中。.css();里有多个属性时不要忘了加{}。$("#content").css("background-color","red");一个属性，属性名和属性值之间用逗号隔开 $("#content").css({"background-color":"red","color":"#fff"});多个属性用花括号括起来，属性间用逗号隔开，属性名和属性值之间用分号隔开 ////$("#content").addClass("blue white")：给id为content的元素增加类名为blue和white的样式 多个类名用空格隔开
4.removeAttr(name)和removeClass(class)分别可以实现移除元素的属性和样式的功能，前者方法中参数表示移除属性名，后者方法中参数则表示移除的样式名\
5.append(content)方法的功能是向指定的元素中追加内容，被追加的content参数，可以是字符、HTML元素标记，还可以是一个返回字符串内容的函数。后者加进前者
6.appendTo()方法也可以向指定的元素内插入内容，它的使用格式是：$(content).appendTo(selector),参数content表示需要插入的内容，参数selector表示被选的元素，即把content内容插入selector元素内，默认是在尾部。var $html = "<span class='red'>小青蛙</span>";$($html).appendTo("div");如果$()内是变量，则不需加双引号 前者加入后者
7.before()和after()方法可以在元素的前后插入内容，它们分别表示在整个元素的前面和后面插入指定的元素或内容，调用格式分别为：$(selector).before(content)和$(selector).after(content)，其中参数content表示插入的内容，该内容可以是元素或HTML字符串。before()和after()方法可以在元素的前后插入内容
格式：$(selestor).before(content)表示在整个元素前面插入内容
格式：$(selestor).after(content)表示在整个元素后面插入内容
8.clone()方法可以生成一个被选元素的副本，即复制了一个被选元素，包含它的节点、文本和属性，它的调用格式为：$(selector).clone(),其中参数selector可以是一个元素或HTML内容。
9.replaceWith()和replaceAll()方法都可以用于替换元素或元素中的内容，但它们调用时，内容和被替换元素所在的位置不同，分别为如下所示：$(selector).replaceWith(content)和$(content).replaceAll(selector)
参数selector为被替换的元素，content为替换的内容。
10.wrap()和wrapInner()方法都可以进行元素的包裹，但前者用于包裹元素本身，后者则用于包裹元素中的内容，它们的调用格式分别为：$(selector).wrap(wrapper)和$(selector).wrapInner(wrapper),参数selector为被包裹的元素，wrapper参数为包裹元素的格式。
11.使用each()方法可以遍历指定的元素集合，在遍历时，通过回调函数返回遍历元素的序列号，它的调用格式为：$(selector).each(function(index)),参数function为遍历时的回调函数，index为遍历元素的序列号，它从0开始。
12.remove()方法删除所选元素本身和子元素，该方法可以通过添加过滤参数指定需要删除的某些元素，而empty()方法则只删除所选元素的子元素。
jQuery事件
1.ready()事件类似于onLoad()事件，但前者只要页面的DOM结构加载后便触发，而后者必须在页面全部元素加载成功才触发，ready()可以写多个，按顺序执行。此外，下列写法是相等的：$(document).ready(function(){})等价于$(function(){});
2.使用bind()方法绑定元素的事件
bind()方法绑定元素的事件非常方便，绑定前，需要知道被绑定的元素名，绑定的事件名称，事件中执行的函数内容就可以，它的绑定格式如下：$(selector).bind(event,[data] function)，参数event为事件名称，多个事件名称用空格隔开，function为事件执行的函数。
3.hover()方法的功能是当鼠标移到所选元素上时，执行方法中的第一个函数，鼠标移出时，执行方法中的第二个函数，实现事件的切实效果，调用格式如下：$(selector).hover(over，out);over参数为移到所选元素上触发的函数，out参数为移出元素时触发的函数。
4.toggle()方法可以在元素的click事件中绑定两个或两个以上的函数，同时，它还可以实现元素的隐藏与显示的切换，绑定多个函数的调用格式如下：$(selector).toggle(fun1(),fun2(),funN(),...),其中，fun1，fun2就是多个函数的名称.执行toggle()方法绑定的函数，当执行到最后一个函数时，再次点击将又返回执行第一个函数。
ps:toggle()方法支持目前主流稳定的jQuery版本1.8.2，在1.9.0之后的版本是不支持的。
5.unbind()方法可以移除元素已绑定的事件，它的调用格式如下：$(selector).unbind(event,fun),其中参数event表示需要移除的事件名称，多个事件名用空格隔开，fun参数为事件执行时调用的函数名称。
拓展：当双击元素时，会发生 dblclick 事件。
6.one()方法可以绑定元素任何有效的事件，但这种方法绑定的事件只会触发一次，它的调用格式如下：$(selector).one(event,[data],fun) ,参数event为事件名称，data为触发事件时携带的数据，fun为触发该事件时执行的函数。
7.trigger()方法可以直接手动触发元素指定的事件，这些事件可以是元素自带事件，也可以是自定义的事件，总之，该事件必须能执行，它的调用格式为：$(selector).trigger(event),其中event参数为需要手动触发的事件名称。
8.focus事件在元素获取焦点时触发，如点击文本框时，触发该事件；而blur事件则在元素丢失焦点时触发，如点击除文本框的任何元素，都会触发该事件。$(this).val().length == 0 判断input里面的值是否为空
$(function () { $("input") .bind("focus", function () { $("div").html("请输入您的姓名！"); }) .bind("blur",function(){ if($(this).val().length == 0) $("div").html("您的名字不能为空"); }) });
9.当一个元素的值发生变化时，将会触发change事件，例如在选择下拉列表框中的选项时，就会触change事件。
10.live()方法与可以绑定元素的可执行事件，除此相同功能之外，live()方法还可以绑定动态元素，即使用代码添加的元素事件，格式如下：$(selector).live(event,[data],fun),参数event为事件名称，data为触发事件时携带的数据，fun为触发该事件时执行的函数。
注意：从 jQuery 1.7 开始，不再建议使用 .live() 方法。1.9不支持.live()，本节代码编辑器里的js引用版本改为了1.8。
jQuery动画特效
1.show()和hide()方法用于显示或隐藏页面中的元素，它的调用格式分别为：$(selector).hide(speed,[callback])和$(selector).show(speed,[callback])
参数speed设置隐藏或显示时的速度值，可为“slow”、“fast”或毫秒数值，可选项参数callback为隐藏或显示动作执行完成后调用的函数名。
2.调用toggle()方法就可以很容易做到，即如果元素处于显示状态，调用该方法则隐藏该元素，反之，则显示该元素，它的调用格式是：$(selector).toggle(speed,[callback])
其中speed参数为动画效果时的速度值，可以为数字，单位为毫秒，也可是“fast”、“slow”字符，可选项参数callback为方法执行成功后回调的函数名称。
3.slideUp()和slideDown()方法在页面中滑动元素，前者用于向上滑动元素，后者用于向下滑动元素，它们的调用方法分别为：$(selector).slideUp(speed,[callback])和$(selector).slideDown(speed,[callback]),其中speed参数为滑动时的速度，单位是毫秒，可选项参数callback为滑动成功后执行的回调函数名。要注意的是：slideDown()仅适用于被隐藏的元素；slideup()则相反。
4.slideToggle()方法可以切换slideUp()和slideDown()，即调用该方法时，如果元素已向上滑动，则元素自动向下滑动，反之，则元素自动向上滑动，格式为：$(selector).slideToggle(speed,[callback]),其中speed参数为动画效果时的速度值，可以为数字，单位为毫秒，也可是“fast”、“slow”字符，可选项参数callback为方法执行成功后回调的函数名称。
5.fadeIn()和fadeOut()方法可以实现元素的淡入淡出效果，前者淡入隐藏的元素，后者可以淡出可见的元素，它们的调用格式分别为：$(selector).fadeIn(speed,[callback])和$(selector).fadeOut(speed,[callback]),其中参数speed为淡入淡出的速度，callback参数为完成后执行的回调函数名。
6.调用fadeTo()方法，可以将所选择元素的不透明度以淡入淡出的效果调整为指定的值，该方法的调用格式为：$(selector).fadeTo(speed,opacity,[callback])
其中speed参数为效果的速度，opacity参数为指定的不透明值，它的取值范围是0.0~1.0，可选项参数callback为效果完成后，回调的函数名。
$(function () { $("span").each(function (index) { switch (index) { case 0: $(this).fadeTo(3000,0.2); break; case 1: $(this).fadeTo("2000",0.5) break; case 2: $(this).fadeTo("2000",0.1); break; } }); });
7.调用animate()方法可以创建自定义动画效果，它的调用格式为：$(selector).animate({params},speed,[callback])
其中，params参数为制作动画效果的CSS属性名与值，speed参数为动画的效果的速度，单位为毫秒，可选项callback参数为动画完成时执行的回调函数名。
能制作移动位置的动画，在移动位置之前，必须将被移元素的“position”属性值设为“absolute”或“relative”，否则，该元素移动不了。
$(function(){ $("span").animate({ left:"+=100px" },3000,function(){ $(this).animate({ width:"+=30px", height:"+=30px" },3000,function(){ $("tip").html("执行完成"); }); }); })
8.stop()方法的功能是在动画完成之前，停止当前正在执行的动画效果，这些效果包括滑动、淡入淡出和自定义的动画，它的调用格式为：$(selector).stop([clearQueue],[goToEnd])，其中，两个可选项参数clearQueue和goToEnd都是布尔类型值，前者表示是否停止正在执行的动画，后者表示是否完成正在执行的动画，默认为false。
9.delay()方法的功能是设置一个延时值来推迟动画效果的执行，它的调用格式为：$(selector).delay(duration),其中参数duration为延时值，它的单位是毫秒，当超过延时值时，动画继续执行。cv
