初识jquery

1.为什么要学习jQuery？

因为jQuery开发简单、易懂、兼容性好（几乎解决了所有的兼容性问题）。

2.jquey的版本

在官网下载的有3个系列版本：

 1.xx系列，兼容所有的浏览器，PC端开发都用这个

 2.xx系列，不兼容IE678，一般用于移动端

 3.xx系列，是最新版，也不兼容IE678

一、jquery的使用

1、先引入jQuery文件包（外部的js文件）

2、在换行写<script>标签，里面写js代码

3、使用$()方法用什么就选择器什么，不用写繁琐的获取元素js代码

二、jquery对象

 $('#box').style.display = "none";   

注意：选出来的是一个类数组对象，jQuery自己的对象，后面不能跟着原生js语法： $()是jq写法。style.display="none"又是js原生写法

加载函数的区别

 三、jquery操作css样式

在jQuery中操作CSS，要用css()这个方法。

语法：

获取CSS属性值：$('div').css("width");  一个参数表示获取

单属性CSS设置：$('div').css("width","500px");

 多属性CSS设置：$('div').css({"width":"500px","height":"500px"});

在原基础上累加或减：

 $('div').css("width","+=30px");

$('div').css("width","-=30px");

四、jquery操作HTMl（html()方法、attr（）属性方法）

 html()方法

获取标签内容：$('div').html()

设置标签内容：$('div').html('需要设置的内容')

attr()方法

  获取属性值：$('div').attr("src"); //一个参数表示获取

 单属性设置：$('div').attr("src","img/01.gif");

多属性设置：$('div').attr({"src":"img/01.gif","class":"bigImg"});

五、动画

1.隐藏显示方法：

 hide()   隐藏

 show()   显示

toggle() 显示和隐藏之间切换

2.滑动动画

 slideUp()        向上滑动隐藏

 slideDown()      向下滑动显示

 slideToggle()   滑动显示和隐藏之间切换

注意：

以上3个方法，默认有动画，也可以用毫秒控制动画时间

如果给img图片设置滑动动画，就必须给img标签添加宽度或高度，否则就变成对角线动画。

3.透明度动画

 fadeIn()       淡入显示

 fadeOut()      淡出隐藏

 fadeToggle()   淡入淡出之间切换

 fadeTo(时间,透明度值)        设置透明度，透明度的值0~1之间

注意所有动画方法都有回调函数fadeIn(speed,callback);

六、基本选择器

筛选选择器

筛选选择器主要是通过特定的过滤规则筛选出所需要的元素，该选择器都是“：”开头，并且写在$()函数内。

 $("p:first")       选中第一个p标签元素

 $("p:last")        选中最后一个p标签元素

 $("p:even")        选中所有偶数的p标签元素

 $("p:odd")         选中所有奇数的p标签元素

 $("p:not(.box)")  选中所有的p标签元素，但排除类名为.box的p

 $("p:eq(3)")      选中下标为3的p标签，按索引值0开始

 $("p:gt")          选中大于指定的编号(索引值)p标签元素

$("p:lt")          选中小于指定的编号(索引值)p标签元素

注意：:eq()、:gt()、:lt()  它们的参数都是索引值（下标从0开始）

七、筛选方法

 first()   选中第一个p标签

last()    选中最后一个元素

eq()      选中指定下标的元素

八、节点关系选择器

$('div').parent()       选中当前div元素的父亲  

 $('div').children()    选中当前div元素的儿子

 $('div').siblings()    选中当前div元素的所有兄弟，不包括自己

其他节点关系：

find()：找的是元素的后代的一些元素，根据参数的选择器去选择

next()：选中的是当前元素的下一个元素，必须是同级的。

nextAll()：选中的是当前元素后面的所有兄弟元素。内部可以传参数，选择符合选择器的后面的兄弟。

prev()：选中的是当前元素的上一个元素，必须是同级的。

prevAll()：选中的是当前元素前面的所有兄弟元素。内部可以传参数，选择符合选择器的后面的兄弟

parents()：选择的是包含html标签在内的所有祖先元素。内部可以传参数，选择符合选择器的祖先元素。

九、动画排队机制

jQuery所有动画采取的是排队机制的播放形式，如果相继触发10次动画，那么没有执行的动画会依次排队等待执行。

stop()：可以清除动画的排队机制，一定要写在动画方法的前

十、链式编程

在jQuery中但凡针对同一目标进行的所有操作都可以通过“点”语法来连续书写，这种叫做链式编程。

十一、索引值index()

在jQuery中用选择器选出来的元素都有一个index()方法，这个方法可以获取当前元素在父级中的下标（索引值）。

（自己家的孩子排行大小，跟隔壁老王家的孩子排大小没关系）

$('ul li').click(function(){
      alert($(this).index());//获取当前被点击那个li元素在父级中的下标（索引值）
});

十二、jquery操作class

虽然attr()方法也可以操作class属性，但是jQuery专门为我们封装了一些操作class的方法，更方便操作。

 addClass()     添加class类

removeClass()  删除class类

 toggleClass()  切换类，在删除和添加之间切换   

hasClass()     判断是否有class类，true表示有，false表示没有