O(∩_∩)O

搭建一个jQuery的开发环境非常方便，可以通过下列几个步骤进行。下载jQuery文件库在jQuery的官方网站（http://jquery.com）中，下载最新版本的jQuery文件库。在网站中找到最新版本文件的下载按钮，将jQuery框架文件下载到本地即可，本教案使用的版本为稳定版：1.9.0版。引入jQuery文件库下载完jQuery框架文件后，并不需要任何的

ance表示父元素，desc表示子元素，调用方式如下：$("ance desc")两者之间是空的，如果有逗号表示两者之间是并列关系，需要注意的是：ance和desc并不一定是父子关系，可以是爷孙关系，总之desc是ance的后代。 码农家族

说白了就是父子关系。它所选择的目标是子集元素，相当于一个家庭中的子辈们，但不包括孙辈，它的调用格式如下：$(“parent > child”)例子： 码农家族

next是紧邻prev的下一个元素，他们是同级，而且必须是隔壁，中间不能隔着其他元素！返回的只有一个元素哦！格式：$(“prev + next”)例子： 码农家族

prev和siblings是同一级，且siblings在prev的后面。调用方式：$(“prev ~ siblings”)例子： 码农家族

从这一篇开始讲过滤选择器。（吐槽：jQuery乱七八糟的选择器真的非常多，恼火！但是以后用处应该很大）言归正传，：first的作用是选择一组相同元素的第一个元素。:last选择器的作用刚好相反。例子： 改变最后一行"苹果"背景颜色： 葡萄 香蕉 橘子 西

选择一组标签元素中的某一个，从0开始。这些选择器通过例子很好理解： 改变中间行"葡萄"背景颜色： 橘子 香蕉 葡萄 苹果 西瓜 $("li:eq(2)").css("background-

选择包含指定字符串的全部元素，text要加单引号。还是来看例子吧： 改变包含"jQuery"字符内容的背景色： 强大的"jQuery" "javascript"也很实用 "jQuery"前端必学 "java"是一种开发语言 前端利器——"

功能：选择 选择器中包括指定元素名称的全部元素，所以selectou是元素名称。对了，可以是子元素也可以是孙子元素。例子： 改变包含"label"元素的背景色： 我是P先生 L妹纸就是我 我也是P先生 我也是L妹纸哦 P先生就是我

选取不可见的元素，包括type属性为hidden的元素。 显示隐藏元素的内容 var $strHTML = $("input:hidden").val(); $("div").html($strHTML); 结果：

选取可见的元素。例子： 修改可见“水果”的背景色 橘子 香蕉 葡萄 苹果 西瓜 $("li:visible").css("background-color

获取与属性名和属性值完全相同的全部元素.其中[]是专用于属性选择器的括号符，参数attribute表示属性名称，value参数表示属性值，value两边可以不加引号的。用例子一目了然。 改变"title"属性值为"蔬菜"的背景色 茄子 香蕉 芹菜 苹

获取属性值中包含指定内容的全部元素。例子： 改变"title"属性值包含"果"的背景色 茄子 香蕉 芹菜 小西红柿 西瓜 $("li[title*=

它和：first的区别是：：first-child返回的是一个数组，：first返回的是一个元素。看例子就很容易知道区别了：例子一：：first 改变每个"蔬菜水果"中第一行的背景色 芹菜 茄子 萝卜 大白菜

基本选择器和过滤选择器复习完了，接下来是input表单选择器。言归正传。该选择器的功能是返回全部的表单元素。不仅包括所有标记的表单元素，而且还包括、 和 标记的表单元素。 修改全部表单元素的背景色 Option

该选择器的功能是获取表单全部单行文本输入框，对textarea和按钮不起作用。 修改多个单行输入框元素的背景色 Button $("#frmTest :text").addClass("b

获取密码输入文本框。 修改多个密码输入框元素的背景色 区域文本输入框 Button $("#frmTest:password").addClass("bg_red");

有时候需要同时选择多个元素，就要用到sele1,sele2,seleN选择器，他的调用方式是：$(“sele1,sele2,seleN”)sele1,sele2,seleN用逗号隔开，他们可以是元素、id、class选择器中的任意一种，例子如下： 选我吧！我是red 选我吧！我是green 选我吧！我是blue

与:first-child子元素过滤选择器功能相反，:last-child子元素过滤选择器的功能是获取每个父元素中返回的最后一个子元素，它也是一个集合，常用多个集合数据的选择处理。例如，使用:last-child子元素过滤选择器，修改“蔬菜”和“水果”中最后一个显示的文字颜色，如下图所示：在浏览器中显示的效果：从图中可以看出，通过$("li:last-chi

有一个非常“牛”的选择器，“*”号选择器，它的功能是获取页面中的全部元素，“全部”啊!包括、、这些元素，相当于可以取走你文具盒中的所有铅笔,格式为：$(“*”)选择器中的参数就一个“*”，既没有“#”号，也没有“.”号。 由于该选择器的特殊性，它常与其他元素组合使用，表示获取其他元素中的全部子元素。如下图所示： 使用*选择器，获取div中的所有子元素并设置三个子元素显示相同

有时需要精确的选择任意多个指定的元素，类似于从文具盒中挑选出多根自已喜欢的笔，就需要调用sele1,sele2,seleN选择器，它的调用格式如下：$(“sele1,sele2,seleN”)其中参数sele1、sele2到seleN为有效选择器，每个选择器之间用“，”号隔开，它们可以是之前提及的各种类型选择器，如$(“#id”)、$(“.class”)、$(“selector”)

本节开始，我们将介绍层次性选择器。在实际应用开发中，常常是多个元素嵌套在一起，形成复杂的层次关系，通过层次选择器，可以快速定位某一层次的一个或多个元素，ance desc选择器就是其中之一，它的调用格式如下：$("ance desc")其中ance desc是使用空格隔开的两个参数。ance参数（ancestor祖先的简写）表示父元素；desc参数（descendant

与上一节介绍的ance desc选择器相比，parent > child选择器的范围要小些，它所选择的目标是子集元素，相当于一个家庭中的子辈们，但不包括孙辈，它的调用格式如下：$(“parent > child”)child参数获取的元素都是parent选择器的子元素，它们之间通过“>”符号来表示一种层次关系。如图所示：在浏览器中显示的效果：

俗话说“远亲不如近邻”，而通过prev + next选择器就可以查找与“prev”元素紧邻的下一个“next”元素，格式如下：$(“prev + next”)其中参数prev为任何有效的选择器，参数“next”为另外一个有效选择器，它们之间的“+”表示一种上下的层次关系，也就是说，“prev”元素最紧邻的下一个元素由“next”选择器返回的并且只返回唯的一个元素。例如，

与上一节中介绍的prev + next层次选择器相同，prev ~ siblings选择器也是查找prev 元素之后的相邻元素，但前者只获取第一个相邻的元素，而后者则获取prev 元素后面全部相邻的元素，它的调用格式如下：$(“prev ~ siblings”)其中参数prev与siblings两者之间通过“~”符号形成一种层次相邻的关系，表明siblings选择器获取的元素都

本章我们介绍过滤选择器，该类型的选择器是根据某过滤规则进行元素的匹配，书写时以“：”号开头,通常用于查找集合元素中的某一位置的单个元素。在jQuery中，如果想得到一组相同标签元素中的第1个元素该怎样做呢？在下面的示例代码中你可能注意到我们会使用 $(“li:first”)注意：书写时以“：”号开头。运行结果： 使用li:fi

如果想从一组标签元素数组中，灵活选择任意的一个标签元素，我们可以使用:eq(index)其中参数index表示索引号（即：一个整数），它从0开始，如果index的值为3，表示选择的是第4个元素。例如：在浏览器中显示的效果：从图中可以看出，通过调用$("li:eq(3)")过滤选择器代码，获取了第4个元素，并使用css()方法设置了该元素在页面中显示的

有时候我们可能希望按照文本内容来查找一个或多个元素，那么使用:contains(text)选择器会更加方便， 它的功能是选择包含指定字符串的全部元素，它通常与其他元素结合使用，获取包含“text”字符串内容的全部元素对象。其中参数text表示页面中的文字。例如:在浏览器中显示的效果：从图中可以看出，调用li:contains('土豪')代码，可以很方便地

除了在上一小节介绍的使用包含的字符串内容过滤元素之外，还可以使用包含的元素名称来过滤，:has(selector)过滤选择器的功能是获取选择器中包含指定元素名称的全部元素，其中selector参数就是包含的元素名称，是被包含元素。例如：获取指定包含某个元素名的全部元素，并改变它们显示文字的颜色，如下图所示：在浏览器中显示的效果：可以看出，通过使用$("li:

:hidden过滤选择器的功能是获取全部不可见的元素，这些不可见的元素中包括type属性值为hidden的元素。例如，调用:hidden选择器获取不可见的元素，并将该元素的内容显示在元素中，如下图所示：在浏览器中显示的效果：从图中可以看出，先调用$("p:hidden")代码获取隐藏的元素，并调用该元素的html()方法获取该元素中的内容，最后将该内容显示在

:visible过滤选择器获取的是全部可见的元素，也就是说，只要不将元素的display属性值设置为“none”，那么，都可以通过该选择器获取。例如，使用:visible选择器获取可见的元素，并将该元素的内容显示在元素中，如下图所示：在浏览器中显示的效果：从图中可以看出，调用$("p:visible")选择器代码，获取那个可见的元素，并调用html()方法获

属性作为DOM元素的一个重要特征，也可以用于选择器中，从本节开始将介绍通过元素属性获取元素的选择器，[attribute=value]属性选择器的功能是获取与属性名和属性值完全相同的全部元素，其中[]是专用于属性选择器的括号符，参数attribute表示属性名称，value参数表示属性值。例如，使用[attribute=value]属性选择器，获取指定属性名和对应值的全部元素，并设置它们显

[attribute!=value]属性选择器的功能是获取不包含属性名，或者与属性名和属性值不相同的全部元素，其中[]是专用于属性选择器的括号符，参数attribute表示属性名称，value参数表示属性值。例如，使用[attribute!=value]属性选择器，获取指定不包含属性名，或与属性名和对应值不同的全部元素，并设置它们显示的文字颜色，如图所示：在浏览器中显示的效

介绍一个功能更为强大的属性选择器[attribute*=value]，它可以获取属性值中包含指定内容的全部元素，其中[]是专用于属性选择器的括号符，参数attribute表示属性名称，value参数表示对应的属性值。例如，使用[attribute*=value]属性选择器，获取属性值中包含某一指定内容的全部元素，并设置它们显示的文字颜色，如下图所示：在浏览器中显示的效果：

通过上面章节的学习，我们知道使用:first过滤选择器可以获取指定父元素中的首个子元素，但该选择器返回的只有一个元素，并不是一个集合，而使用:first-child子元素过滤选择器则可以获取每个父元素中返回的首个子元素，它是一个集合，常用多个集合数据的选择处理。如下图，如果想把页面中每个ul中的第一个li获取到，并改变其颜色。则可以使用: first-child在浏

虽然理论我懂，可实验的结果并不是预期，求大神指出错误！！！两者都是获取元素的内容。区别在于：text()获取文本内容，并不包含HTML格式代码；html()获取还获取HTML内容，原文的格式也一并获取。 html()和text()方法设置元素内容 你真的很可爱呀！

增加CSS的样式，前者的参数是样式的名称，后者的参数是{样式的属性}。 css()方法设置元素样式 我穿了一件红色外衣 我穿了一件篮色外衣 $("#content").css({"background-color":"red","color":"white"});

append()方法的功能是向指定的元素中追加内容。参数可以是字符、HTML元素标记，还可以是一个返回字符串内容的函数。 append()方法追加内容 function rethtml() { var $html = "我是调用函数创建的" return

拖曳插件draggable的功能是拖动被绑定的元素，当这个jQuery UI插件与元素绑定后，可以通过调用draggable()方法，实现各种拖曳元素的效果，调用格式如下：$(selector). draggable({options})options参数为方法调用时的配置对象，根据该对象可以设置各种拖曳效果，如“containment”属性指定拖曳区域，“axis”属性设置拖

jQuery UI是以 jQuery 为基础的开源 JavaScript 网页用户界面代码库。包含底层用户交互、动画、特效和可更换主题的可视控件。我们可以直接用它来构建具有很好交互性的web应用程序。所有插件测试能兼容IE 6.0+, Firefox 3+, Safari 3.1+, Opera 9.6+, 和GoogleChrome。组件构成jQuery UI 主要分