JQuery基础、选择器

jQuery入门什么是jQueryjQuery是一个JavaScript库，通过封装原生的JavaScript函数得到一整套定义好的方法。

它是JohnResig于2006年创建的一个开源项目，随着越来越多开发者的加入，jQuery已经集成了JavaScript、CSS、DOM和Ajax于一体的强大功能。

以最少的代码，完成更多复杂而困难的功能，从而得到了开发者的青睐。

主旨：以更少的代码、实现更多的功能（write less ,do more!）官网：/jQuery的功能和优势jQuery作为JavaScript封装的库，它的目的就是为了简化开发者使用JavaScript。

主要功能有以下几点：像CSS那样访问和操作DOM；修改CSS控制页面外观；简化JavaScript代码操作；事件处理更加容易；各种动画效果使用方便；让Ajax技术更加完美；基于jQuery大量插件；自行扩展功能插件。

jQuery最大的优势，就是特别的方便。

比如模仿CSS获取DOM，比原生的JavaScript要方便太多。

并且在多个CSS设置上的集中处理非常舒服，而最常用的CSS功能又封装到单独的方法。

最重要的是jQuery的代码兼容性非常好，你不需要总是头疼着考虑不同浏览器的兼容问题。

其他JavaScript库目前除了jQuery，还有5个JS库较为流行，他们分别是YUI、Prototype、Mootools、Dojo和ExtJS。

YUI，是雅虎公司开发的一套完备的、扩展性良好的富交互网页工具集。

Prototype，是最早成型的JavaScript库之一，对JavaScript内置对象做了大量的扩展。

Dojo，Dojo强大之处在于提供了其他库没有的功能。

离线存储、图标组件等等。

Mootools，轻量、简洁、模块化和面向对象的JavaScript框架。

ExtJS，简称Ext，原本是对YUI的一个扩展，主要创建前端用户界面。

(付费的)jQuery代码的编写配置jQuery环境1、获取jQuery最新版本从官网下载：/3、jQuery环境配置jQuery不需要安装，把下载的jQuery.js放到网站上的一个公共位置，想要在某个页面上使用jQuery时，只需在该HTML文档中引入该库文件即可。

4、在页面中引入jQuery由于jQuery是JavaScript的一个库文件，也就是jQuery本质是一个.js文件，所以使用<script type=”text/javascript” src=”jQuery存放的路径”></script>引入。

简单的jQuery示例效果：点击按钮，弹出对话框。

window.onload和$(document).ready区别在jQuery代码中一直在使用$(document).ready(function(){});这段代码进行首尾包裹，那么为什么必须要包裹这段代码呢？原因是我们jQuery库文件是在body元素之前加载的，我们必须等待所有的DOM元素加载后，延迟支持DOM操作，否则jQuery选择器就无法获取到相应的节点元素。

延迟等待加载，JavaScript提供了一个事件为load，方法如下：load和ready区别如下图所示：注意：在实际应用中，很少直接去使用window.onload，因为需要等待图片之类的大型元素加载完毕后才能执行js代码。

所以，在网速较慢的情况下，页面已经全面展开，图片还在缓慢加载，这时页面上任何的js交互功能全部处在假死状态。

jQuery基础jQuery语法通过jQuery，你可以选取（查询）HTML元素，并对它们执行“操作”（action）。

解释：1、$是jQuery的缩写2、选择符（selector）用来查询和查找HTML元素3、jQuery的action()执行对元素的操作jQuery对象jQuery对象就是通过jQuery包装的DOM对象后产生的对象。

jQuery对象是jQuery独有的。

如果一个对象是jQuery对象，那么就可以使用jQuery里的对象。

jQuery对象缩写“$”，在jQuery程序中，不管是页面元素的选择、内置的功能函数，都是美元符号“$”来起始的。

而“$”就是jQuery当中最重要且独有的对象：jQuery对象，所以我们在页面元素选择或执行eg效果：点击按钮，文本颜色由黑色变为绿色jQuery的链式调用由上面的例子可以看出，在执行方法的时候，并不是直接被“$”或jQuery对象调用执行，而是先获取节点标签元素返回某个标签元素对象后再调用.css()方法。

方法执行的返回仍然是jQuery对象。

执行$().css(…color‟,‟red‟); 最终返回的还是jQuery对象，jQuery的代码可以采用链式操作，不停的连续调用方法。

效果：点击按钮，文本颜色由黑色变为红色同时字体变大js对象和jQuery对象之间互转（理解）jQuery对象虽然是jQuery库独有的对象，但也是通过JavaScript进行封装而来的。

我们处显而易见，就是可以采用链式操作。

但有时，我们也需要返回原生的DOM对象。

1、jQuery对象转换成DOM对象jQuery获取原生的DOM对象：通过jQuery本身提供，通过.get(index)方法，得到相应的DOM对象eg:从上面get(0)，这里的索引看出，jQuery是可以进行批量处理DOM的，这样可以在很多需要循环遍历的处理上更加得心应手。

2、DOM对象转成jQuery对象:对于已经是一个DOM对象，只需要用$()把DOM对象包装起来，就可以获得一个jQuery 对象了。

转换后，就可以任意使用jQuery的方法了。

注意：和之前的js进行区别，jQuery对象只能使用jQuery对象的方法；JQuery选择器jQuery最核心的组成部分就是：jQuery选择器。

它继承了CSS的语法，可以对DOM 元素的标签名、属性名、状态等进行快速准确的选择，并且不必担心浏览器的兼容性。

jQuery 选择器实现了CSS1~CSS3的大部分规则之外，还实现了一些自定义的选择器，用于各种特殊状态的选择。

基本选择器在使用jQuery选择器时，我们首先必须使用“$()”函数来包装我们的CSS选择器。

而CSS 选择器作为参数传递到jQuery对象内部后，再返回包含页面中对应元素的jQuery对象。

随后，我们就可以对这个获取到的DOM节点进行行为操作了。

jQuery选择器在jQuery选择器里，使用如下的方式获取同样的结果：注意：除了ID选择器其他都返回的是多个元素为了证明ID返回的是单个元素，而元素标签名和类(class)返回的是多个，我们可以采jQuery选择器的写法与CSS选择器十分类似，只不过他们的功能不同。

CSS找到元素后添加的是单一的样式，而jQuery则添加的是动作行为。

最重要的一点是：CSS在添加样式的时候，高级选择器会对部分浏览器不兼容，而jQuery选择器则不会。

复合选择器（选择器的复合使用）在jQuery择器中，除了最基本的三种选择器：元素标签名、ID和类(class)选择器外，注意：在实际使用上，通配选择器一般用的并不多，尤其是在大通配上，比如：$('*')，这种使用方法效率很低，影响性能，建议竟可能少用。

层次选择器在前面已经介绍最常规的选择器，一般来说基本上可以解决所有DOM节点对象选择的问题。

但在很多特殊的元素上，比如父子关系的元素，兄弟关系的元素，特殊属性的元素等等。

在早期CSS的使用上，由于IE6等低版本浏览器不支持，所以这些高级选择器的使用孙子节点和重孙子节点都无法选择到。

next和nextAll选择器，必须是同一个层次的后一个和后N个，不在同一个层次就无法选取到了。

过滤选择器(理解，表单需要掌握)过滤选择器主要是通过特定的过滤规则来筛选出所需要的DOM元素，过滤规则与CSS 中的伪类选择器语法相同。

按照不同的过滤规则，过滤选择器可以分为：基本过滤选择器、内容过滤选择器、可见性过滤选择器、属性过滤选择器、子元素过滤选择器、表单对象属性过滤选择器1、基本过滤选择器基本过滤选择器是过滤选择器中用的最多的一种，它的过滤规则主要体现在元素的位置2、内容过滤选择器内容过滤选择器的过滤规则主要体现在它所含的子元素或文本内容上。

3、可见性过滤选择器可见性过滤选择器是根据元素的可见和不可见状态来选择相应的元素。

4、属性过滤选择器属性过滤选择器的过滤规则是通过元素的属性来获取相应的元素。

5、子元素过滤选择器子元素过滤选择器的过滤规则是通过元素的父子关系来获取相应的元素。

这里值得一提的是:nth-child()，这个选择器的详细功能如下：nth-child(even) 能选取每个父元素下的索引值是偶数的元素nth-child(odd) 能选取每个父元素下的索引值是奇数的元素nth-child(2) 能选取每个父元素下的索引值等于2的元素nth-child(3n) 能选取每个父元素下的索引值等于3的倍数的元素，n从0开始nth-child(3n+1) 能选取每个父元素下的索引值等于(3n+1) 的的元素，n从0开始6、表单对象属性过滤选择器此选择器主要是对所选择的表单元素进行过滤。

表单选择器（掌握）。