Jquery基础知识

      前两天接了一个单子，没日没夜、加班加点的做出来，以至于对于星期几已经没有概念了，哈哈哈，今天终于空闲下来了，突然觉得神清气爽啊啊！

      作为一名前端工程师，如果只是单纯的写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")

     合理的利用每个选择器，达到事半功倍的效果！没事来看看加深加深印象，对于那些大神们，你们就绕道而行吧！