最近在慕课网学习JQuery基础课程，发现只是跟随网站的课程学习而不去自己总结扩展的话，很难达到真正学会理解的地步。
于是先在网站上草草过了一遍课程，然后借着今天的这个时间边记录边重新整理学习一下。
初识JQuery
环境搭建：
在jQuery的官方网站（）中，下载最新版本的jQuery文件库。在网站中找到最新版本文件的下载按钮，将jQuery框架文件下载到本地即可，本教案使用的版本为稳定版：1.8.2版。下载完jQuery框架文件后，并不需要任何的安装，仅需要使用<script>文件导入标记，将jQuery框架文件导入页面中即可，假设该文件下载后保存在项目文件夹Jscript中，那么，在页面的<head></head>中加入如下代码：
<script language="javascript" type="text/javascript" src="jquery-1.8.2.min.js"></script>
在页面的头部分，加入上述代码后，便完成了jQuery框架开发环境的搭建，就可以开始我们的jQuery学习了。
我在网上学习的时候，看到网站中引用JQuery是用的以下语句：<script src=" type="text/javascript"></script>
这个是百度的一个云平台，也可以直接引用过来用的。不过我觉着如果那天百度出问题的时候，我们的引用也会跟着出问题，所以保险起见还是老实的去官网下载JQuery吧。 如果使用百度的jquery，当用户在访问过百度后，再访问你的页面时会提高访问速度，这个是使用类似百度、又拍云、新浪、谷歌或微软加载过 jQuery的优点。
JQuery初体验：
在JavaScript中如果我们想改变所有P标签中的内容是我们需要这么写
var page_ps = doucment.getElementsByTagName("p"); for(var i=0;i
{ page_ps[i].innerHtml = “abcd”;
}
在JQuery中我们这用简单的一句话就可以了
$("p").html("abcd"); $()等价于JQuery()
JQuery基础选择器
#id选择器
$("#divtest").html("aaa"); 元素选择器
$("div").html("abcd") 类选择器
$(".class").html("abcd"); 全部选择
$("*") 子孙元素选择器，第一个元素为父元素，第二个为子孙元素。也是说再父元素范围内，只有有label标签就会被选择比如<div><p><>label></label></p></div>也是可以选到的
$("div label") 子元素选择器，相比上面一个，子元素选择器只能选择父元素的直接后代。
$("div>label") prve+next选择器，用来选择prve后面紧邻的1个元素
$("div+p") prve~siblings选择器，用来选择prve后面所有同级的siblings
$("p~label") 可以同时精确选择多个元素
$(".class,#id,p") JQuery过滤性选择器
:first选择第一个子元素
$("div:first") :eq(index)选择第N个子元素 index从0开始
$("li:eq(3)") :contains(xxxx)选择文本内容包含xxxx的的元素
$("li:contains(xxx)") :has(selector)选择包含的有selector的元素,selector可以有单引号，也没有。
$("li:has(p)") :hidden选择隐藏的元素,例为选择不可以见的P元素
$("p:hidden") :visible选择display不为none的所有元素
$("li:visible") [attribute=value]/[attribute!=value]属性选择器，选择属性为/不为value的元素
$("li[title=xxx]") $("li[title!=xxx]") [attribute*=value]属性选择器，选择包含有value的元素,下面代码选择就是title为水果、苹果、人参果的li元素
:first-child选择其父元素的第一个子元素的集合。需要注意的是如下面的代码，第一个ol中的第一个li会被选取，但是第二个ol中的第一个li却不会被选择，也是就说该方法选择的元素必须是在其父元素的第一个位置上，而不是在其父元素中元素li排序的第一个位置。（讲的可能有乱，最好自己动手实践下，相信一眼就能明白了。）
:last-child跟:first-child方法一样只不过选取的是最有一个元素而已。
改变每个"蔬菜水果"中第一行的背景色
- 芹菜
- 芹菜
- 芹菜
- 芹菜
- 芹菜
1111
- 橘子
- 橘子
- 橘子
- 橘子
表单选择器
表单选择器前面注意加空格，否则无效
:input表单选择器可以实现，它的功能是返回全部的表单元素，不仅包括所有<input>标记的表单元素，而且还包括<textarea>、<select> 和 <button>标记的表单元素，因此，它选择的表单元素是最广的。
$("form :input") :text获取单行文本输入框元素。
$("form :text") :password获取密码输入文本框元素。
$("fomr :password") :radio获取表单中的单选按钮
$("form :radio") :check获取表单中复选按钮
$("form :checkbox") :submit提交按钮选择器，IE中button就是button但是其他浏览器不是，所有在使用:submit的时候会连button一起选中，在使用：submit的时候建议使用input:submit的写法
$("form input:submit") :image图像获取器，这个只能获取input的type=image的图像不能获取<img>标签的图像
$("form :image") :button按钮选择器，或者input type=button 和<button>两类的按钮。
$("form :button") :checked获取单选、复选框的选中元素
$("form :checked") :selec获取<select>下拉列表的处于选中状态的option选项
$("form :selected") 操作DOM元素
attr方法的作用是设置或者返回元素的属性，其中attr(属性名)格式是获取元素属性名的值，attr(属性名，属性值)格式则是设置元素属性名的值。
$("div").attr('text')$("div").attr('text','xxx') html()/text()两个方法的参数为空时，表示获取该元素的内容，而如果方法中包含参数，则表示将参数值设置为元素内容。html()能获取原文的格式，而text只能获取文本。var $a = <i>adc</i> 在使用html添加$a的时候是斜体的abc,但是text添加的时候则是<i>abc</i>
addClass() css()方法可以方便地操作元素中的样式，前者括号中的参数为增加元素的样式名称，后者直接将样式的属性内容写在括号中。
removeClass(name) removeAttr(class) 移除元素的属性和类name/class 加引号
append(content)方法的功能是向指定的元素中追加内容，被追加的content参数，可以是字符、HTML元素标记，还可以是一个返回字符串内容的函数
(content)appendTo(selector)方法也可以向指定的元素内插入内容.
使用before()和after()方法可以在元素的前后插入内容，它们分别表示在整个元素的前面和后面插入指定的元素或内容，调用格式分别为：
$(selector).before(content)和$(selector).after(content)
其中参数content表示插入的内容，该内容可以是元素或HTML字符串。
调用clone()方法可以生成一个被选元素的副本，即复制了一个被选元素，包含它的节点、文本和属性，它的调用格式为：
$(selector).clone()
其中参数selector可以是一个元素或HTML内容。
replaceWith()和replaceAll()方法都可以用于替换元素或元素中的内容，但它们调用时，内容和被替换元素所在的位置不同，分别为如下所示：
$(selector).replaceWith(content)和$(content).replaceAll(selector)
参数selector为被替换的元素，content为替换的内容。
wrap()和wrapInner()方法都可以进行元素的包裹，但前者用于包裹元素本身，后者则用于包裹元素中的内容，它们的调用格式分别为：
$(selector).wrap(wrapper)和$(selector).wrapInner(wrapper)
参数selector为被包裹的元素，wrapper参数为包裹元素的格式。
使用each()方法可以遍历指定的元素集合，在遍历时，通过回调函数返回遍历元素的序列号，它的调用格式为：
$(selector).each(function(index))
参数function为遍历时的回调函数，index为遍历元素的序列号，它从0开始。
remove()方法删除所选元素本身和子元素，该方法可以通过添加过滤参数指定需要删除的某些元素，而empty()方法则只删除所选元素的子元素.（使用remove删除标签本身，使用empty只是清空该标签，该标签会保留）
JQuery事件与应用
ready()事件类似于onLoad()事件，但前者只要页面的DOM结构加载后便触发，而后者必须在页面全部元素加载成功才触发，ready()可以写多个，按顺序执行。此外，下列写法是相等的：
$(document).ready(function(){})等价于$(function(){});
bind()方法绑定元素的事件非常方便，绑定前，需要知道被绑定的元素名，绑定的事件名称，事件中执行的函数内容就可以，它的绑定格式如下：
$(selector).bind(event,[data] function)
参数event为事件名称，多个事件名称用空格隔开，function为事件执行的函数。
unbind()方法可以移除元素已绑定的事件，它的调用格式如下：
$(selector).unbind(event,fun)
其中参数event表示需要移除的事件名称，多个事件名用空格隔开，fun参数为事件执行时调用的函数名称。
hover()方法的功能是当鼠标移到所选元素上时，执行方法中的第一个函数，鼠标移出时，执行方法中的第二个函数，实现事件的切实效果，调用格式如下：
$(selector).hover(over，out);
over参数为移到所选元素上触发的函数，out参数为移出元素时触发的函数。
toggle()方法用来切换显示和隐藏。同事可以设置两个参数，一个是speed，还有一个回调函数
$(selector).toggle()
one()方法可以绑定元素任何有效的事件，但这种方法绑定的事件只会触发一次，它的调用格式如下：
$(selector).one(event,[data],fun)
参数event为事件名称，data为触发事件时携带的数据，fun为触发该事件时执行的函数。
trigger() 方法触发被选元素上指定的事件以及事件的默认行为（比如表单提交）。
$(selector).trigger(event,eventObj,param1,param2,...)
event必需。规定指定元素上要触发的事件。可以是自定义事件，或者任何标准事件。
param1,param2,...可选。传递到事件处理程序的额外参数。额外的参数对自定义事件特别有用。
focus事件在元素获取焦点时触发，如点击文本框时，触发该事件；而blur事件则在元素丢失焦点时触发。
$('#text1').focus( function(){ $('div').html('哈哈哈哈，获得焦点了。');})
当一个元素的值发生变化时，将会触发change事件，例如在选择下拉列表框中的选项时，就会触change事件。
$('select').change( function(){ $(this).css('background-color','red');})
on() 方法在被选元素及子元素上添加一个或多个事件处理程序。
自 jQuery 版本 1.7 起，on() 方法是 bind()、live() 和 delegate() 方法的新的替代品。该方法给 API 带来很多便利，我们推荐使用该方法，它简化了 jQuery 代码库。
注意：使用 on() 方法添加的事件处理程序适用于当前及未来的元素（比如由脚本创建的新元素）。
提示：如需移除事件处理程序，请使用 方法。
提示：如需添加只运行一次的事件然后移除，请使用 方法。
关于这个方法的更多资料，比如以前使用bind现在如何替换成on，可以参考这里：