前两天接了一个单子，没日没夜、加班加点的做出来，以至于对于星期几已经没有概念了，哈哈哈，今天终于空闲下来了，突然觉得神清气爽啊啊！
作为一名前端工程师，如果只是单纯的写html和css我觉得发展还是有一定的限制的，因为公司不可能专门提供个职位让你只是纯切图吧！但是很不幸的我对于javascript和jquery都写不来，目前如果网站要用的js效果都是从网上下载下来或者扣下来用到自己的网站上，但是我觉得这不是个长久之计，如果你想稍微改动一下效果，难道你又要重新去找个一模一样的吗？运气好的话，很快就找到合适的了，运气不好要找很久的，并且找的不一定是完全符合的，有很多不必要的js代码都没用，这样就增加了文件大小，对于网站优化不好。最后我做出了一个艰难的决定，一定要学好js，虽然看着那些符号代码，一长串解释看不懂头晕，但是还是要熬着看下去，当我再一次看着那些看不懂的文字想哭时，有人说不然你先试着学习jquery吧，那个入门快些，写一些简单的效果还容易上手些。写了那么多口水话.....万事开头难！先从最基本的看起吧！
一、jquery是什么？
其实它就是我看不懂的js的一个框架，其主要思想是，通过选择器(jquery选择器非常强大)查找对应的节点，然后对这个节点做一个封装（封装成jquery对象）。通过调用jquery对象的属性和方法来实现对节点的操作。
使用jquery的好处是：
1、将不同浏览器之间的差异兼容起来；（这个我的理解非常浅，谁懂的说下咯）
2、代码更加简洁，维护方便。这个我知道。
二、使用jquery编程的步骤？
1、先把要操作的节点找到，怎么找呢？用jquery的选择器去找（非常强大的选择器）；
2、找到节点后，因为此时找到的节点都被封装成jquery对象了，所以就调用该对象的属性和方法来实现对节点的操作；
鉴于我目前对于对象的属性和方法还不太了解，我就先学好强大的jquery选择器吧！
三、什么是选择器？
懂的css的人都知道它有自己的选择器，其实jquery选择器就是模仿到css选择器来的，所以我觉得上手快些！jquery选择器支持css1和css2的全部和css3的部分选择器，同时它也有少量的独有的选择器。选择器分为4类：基本选择器、层次选择器、过滤选择器(基本过滤选择器、内容过滤选择器、可见性过滤选择器、属性过滤选择器、子元素过滤选择器、表单对象属性过滤选择器)、表单选择器。
下面一一说明：
1、基本选择器：最常用也是最简单的选择器。它通过id、class、标签名等来查找节点元素。每个id只允许出现一次，而class允许重复使用。
| #id | 给指定的id匹配一个元素 | 返回单个元素 | $("#test") id为test的元素 |
| #class | 匹配给定的类名 | 返回集合元素 | $(".test")类名为test的元素 |
| element | 匹配给定的标签名 | 返回集合元素 | $("p"）所有的p元素 |
| * | 匹配所有元素 | 返回集合元素 | $("*")html中的所有元素（少用） |
| selector1、selctor2。。。selectorN | 匹配给定的集合 | 返回集合元素 | $("div,span,p.myclass")所有的div，span和类名为myclass的p元素 |
2、层次选择器：通过节点元素之间的层次关系来获得特定元素、例如后代元素、子元素、相邻元素、兄弟元素。
| $("ancestor descendant") | 选取ancestor里所有的descendant元素 | 返回集合元素 | $("div span")选取div里的所有span元素 |
| $("parent>child") | 选取parent下的child元素，与第一个不同哈 | 返回集合元素 | $("div>span")选取div下的元素名是span的元素 |
| $("prev+next") | 选取紧接在prev后的next元素 | 集合元素 | $(".one+div")选取class为one的下一个div元素 |
| $("prev~siblings") | 选取prev元素之后的所有siblings元素 | 集合元素 | $(".one~div")选取class为one元素后面的所有div元素 |
在层次选择器中，第一个和第二个比较常用，而第三个和第四个可以在jquery中用更加简单的方法代替，所以使用的几率小些。可以用next()代替$("prev+next")，用nextAll()方法代替$("prev~siblings");这里将siblings()方法与$("prev~siblings")进行比较：siblings()方法呢获取的是这个元素的兄弟元素包含前面或者后面的，与位置无关。而$("prev~siblings")只能获取这个元素后面的兄弟元素。
3、过滤选择器就分类多了。主要是通过特定的过滤规则来筛选出所需的DOM元素，过滤规则与css中的伪类选择器语法相同，即选择器都以"："开头。
3(1)、基本过滤选择器
| :first | 选取第一个元素 | 返回单个元素 | $("div:first")获取所有div元素的第一个div元素 |
| :last | 选取最后一个元素 | 返回单个元素 | $("div:last")获取所有div元素中的最后一个div元素 |
| :not(selector) | 去除所有匹配selector选择器的元素 | 返回集合元素 | $("div:not(.mydiv)")选取class名不为mydiv的所有div元素 |
| :even | 选取索引为偶数的元素，注意：索引从0开始 | 返回集合元素 | $("input:even")选取索引为偶数的input元素 |
| :odd | 选取索引为奇数的元素 | 返回集合元素 | $("input:odd")选取索引为奇数的input元素 |
| :eq(index) | 选取索引为index的元素 | 返回单个元素 | $("input:eq(1)")选取索引为1的input元素 |
| :gt(index) | 选取索引大于index的元素 | 返回集合元素 | $("input:gt(4)")选取索引大于4的input元素 |
| :lt(index) | 选取索引小于index的元素 | 返回集合元素 | $("input:lt(4)")选取索引小于4的input元素 |
| :header | 选取所有的标题元素，例如h1,h2,h3``h6 | 返回集合元素 | $(":hear")选取网页中的所有标题元素 |
| :animated | 选取当前正在执行动画的元素（常用语判断语句中） | 返回集合元素 | $("div:animated")选取正在执行动画的div元素 |
3(2)、内容过滤选择器
| :contains(text) | 选取含有文本内容为text的元素 | 返回集合元素 | $("div:contains("我"))选取含有我文本的所有div元素 |
| :empty | 选取不包含子元素或者文本的空元素 | 集合元素 | $("div:empty")选取不包含子元素或者文本元素的div元素，相当于空标签 |
| :has(selector) | 选取有所匹配元素的元素 | 返回集合元素 | $("div:has(p)")选取含有p元素的div元素 |
| :parent | 选取含有子元素或者文本元素的元素 | 返回集合元素 | $("div:parent")选取含有子元素和文本元素的div元素 |
3(3)、可见性过滤选择器，根据元素的可见和不可见行来选择相应的元素
| :hidden | 选取所有不可见元素 | 返回集合元素 |
$(":hidden")选取所有不可见的元素， 包括<input type="hidden"><div style="display:none"><div style="visibility:hidden">等元素 |
| :visible | 选取所有可见元素 | 返回集合元素 | $(div:visible")选取所有可见的div元素 |
3(4)、属性过滤选择器，通过元素的属性来获取相应的元素。
| [attribute] | 选取拥有此属性的元素 | 集合元素 | $("div[id]")选取拥有id属性的div元素 |
| [attribute=value] | 选取属性的值为value的元素 | 集合元素 | $("div[title="mytitle"])选取title属性为mytitle的div元素 |
|
[attribute!=value] |
选取属性的值不为value的元素 |
集合元素 |
$("div[title!="mytitle"])选择title属性不为mytitle的div元素 |
|
[attribute^=value] |
选取属性的值以value开始 |
集合元素 |
$("div[title^="a"]")选取title属性以a字母开头的div元素 |
|
[attribute$=value] |
选取属性的值以value结束 |
集合元素 |
$("div[title$="a"]")选取title属性以a字母结束的div元素 |
|
[attribute*=value] |
选取属性的值含有value的元素 |
集合元素 |
$("div[title*="a"]")选取title属性含有a字母的div元素 |
|
[selector1][selector2] [selectorN] |
用属性选择器合并成一个复合属性选择器，满足多个条件， 每选择一次就会缩小一次范围 |
集合元素 | $("div[id][title="mytitle"]")选取含有i的属性且title属性为mytitle的div元素 |
4(5)、子元素过滤选择器，子元素过滤选择器相对于其他选择器要稍微复杂些，注意它与普通的过滤器的差别。
| :nth-child(index/odd/even/equation) | 选取每个父元素下的第index个元素或者奇偶元素(index从1算起) | 集合元素 | :eq(index)只匹配一个元素,:nth-child(index)将为每一个父元素匹配子元素，并且他的index是从1开始算起的 |
| :first-child | 选取每个父元素下的第一个子元素 | 集合元素 | :first只获取单个元素，而:first-child获取每个父元素下个的第一个子元素 |
| :last-child | 选取每个父元素下的最后一个元素 | 集合元素 | 同理 |
| :only-child |
如果某个元素时它父元素中的唯一一个子元素，那么将会被匹配， 如果父元素中含有其他元素，那么将不会被匹配 |
集合元素 | $("ul li:only-child")在ul中选取是唯一子元素的li元素 |
3(6)、表单对象属性过滤选择器，表单对象比如被选中的下拉框、多选框等。
| :enabled | 选取所有可用元素 | 集合元素 | $("#form:enabled")选取id为form的表单里所有可用元素 |
| :disabled | 选取所有不可用元素 | 集合元素 | 选取不可用的元素 |
| :checked | 选取被选择的元素(单选框、复选框) | 集合元素 | $("input:checked")选取所有被选中的input元素 |
| :selected | 选取所有被选中的选项元素(下拉列表) | 集合元素 | $("selected:selected")选取所有被选中的选中元素 |
4、表单对象选择器，利用这个选择器能极其方便的获取到表单的某个或某个类型的元素。
| :input | 选取所有的<input>,<textarea>,<select>,<button>元素 | 集合元素 | $(":input") |
| :radio | 选取所有的单选框元素 | 集合元素 | $(":radio") |
| :file | 选取所有的上传域 | 集合元素 | $(":file") |
| :text | 选取所有的单行文本框 | 集合元素 | $(":text") |
| :password | 选取所有密码框 | 集合元素 | $(":password") |
| :checkbox | 选取所有复选框 | 集合元素 | $(":checkbox") |
| :submit | 选取所有提交按钮 | 集合元素 | $(":submit") |
| :image | 选取所有图像按钮 | 集合元素 | $(":image") |
| :reset | 选取所有重置按钮 | 集合元素 | $(":reset") |
| :button | 选取所有的按钮 | 集合元素 | $(":button") |
| :hidden | 选取所有不可见的元素 | 集合元素 | $(":hidden") |
合理的利用每个选择器，达到事半功倍的效果！没事来看看加深加深印象，对于那些大神们，你们就绕道而行吧！