jQuery复习

1、jQuery的基本概念

1.1、什么是jQuery

js的方法库，封装了很多js的方法，需要的时候可以直接调用

注意事项：方法调用的时候都要带();

1.2、使用jQuery的三个步骤

//1、 引入jQuery包
<script src="jquery-1.11.1.js"></script>

//2、 入口函数
$(document).ready(function(){});

//3、 书写函数体
$("#btnShowDiv").click(function () {
    $("div").show(1000);
});

1.2.1、js与jQuery入口函数执行的差别

js：当页面所有元素包括图片，样式文件，等所有资源都加载完才开始执行;

jQuery：当页面的文档树加载完成后就会执行，并不会等所有的文件都加载完成再执行

1.3、jQuery的版本

1.X 支持IE6/7/8

2.X 不支持IE6/7/8

3.0 不支持IE6/7/8

1.4、$符号的本质

$符其实就是一个函数，参数不同，功能不同(常用的几种功能如下代码)

注意事项：括号中的参数为字符串类型的时候不要忘记引号

  $(function() {});//参数是function，说明是入口函数

  $("#btnSetConent");//参数是字符串，并且以#开头，是一个标签选择，查找id=“btnSetContent”的元素

  $("div");//查找所有的div元素

1.5、jQuery对象与DOM对象

1.5.1、使用js方法获取的页面元素返回的就是dom对象

var btn = document.getElementById("btnShowDiv");

var divs = document.getElementsByTagName("div");

dom对象只可以使用dom对象的方法和属性

domObject.innerHTML = "dom对象设置文本";

domObject.style.display= "block";//dom对象显示对象

domObject.onclick = function() {}//dom对象绑定事件

1.5.2、使用jQuery方法获取页面元素返回的就是jQuery对象

注意事项:jQuery对象调用方法的时候，方法记得加().

$("div");//标签选择器返回的jquery对象。

$("#btnShowDiv");//id选择器返回的jquery对象。

jquery对象只能使用jquery对象的方法

var $obj = $("div");

$obj.html("jquery对象设置文本的方法");

$obj.show();//jquery对象显示文本

$obj.click(function() {});//jquery对象绑定事件

1.5.3、jQuery对象与DOM对象之间的转换

1、jquery对象转DOM对象的方法

var $li = $("li");
//第一种方法（推荐使用）

$li[0]
//第二种方法

$li.get(0)

其实jQuery对象转DOM对象的实质就是取出jQuery对象中封装的DOM对象。

2、DOM对象转jQuery对象的方法

var $obj = $(domObj);

// $(document).ready(function(){});就是典型的DOM对象转jQuery对象

2、jQuery选择器

2.1、基本选择器

• ID选择器

  • 用法：$(“#ID”)
  • 说明：获取指定的ID，不要忘记引号

• 类选择器

  • 用法：$(“.类名”)
  • 说明：获取同一类元素
• 标签选择器
  
  • 用法：$(“selecor”)
  • 说明：获取同一类标签的所有元素
• 并集选择器
  
  • 用法：$(“div,p,li”)
  • 说明：用逗号分隔，满足条件的所有的所有的元素都会被选中
• 交集选择器
  
  • 用法：$(“div.redClass”)
  • 说明：两个元素之间没有空格，同时满足条件的元素才会被选中

2.2、层级选择器

• 子代选择器
  
  • 用法：$(“ul>li”)
  • 说明：用>连接，只会选择到他儿子级的元素，不会选择到孙子级的元素
• 后代选择器
  
  • 用法：$(“ul li”)
  • 说明：用空格分隔开来，会选择到父级元素下所有的子级元素，包含孙子辈等

2.3、过滤选择器

• :eq（index）
  
  • 用法：$(“li:eq(2)”).css(“color”, “red”)
  • 说明：会选择到li下面索引值为2的li标签，注意：元素的索引值是从0开始
• :odd
  
  • 用法：$(“li:odd”).css(“color”, “red”)
  • 说明：会选中索引值为奇数的元素，索引值是从0开始的，所以在实际现实中表示的是偶数行
• :even
  
  • 用法：$(“li:even”).css(“color”, “red”)
  • 说明：会选中索引值为偶数的元素，索引值是从0开始的，所以在实际现实中表示的是奇数行

2.3、过滤选择器(是方法)

• children(selector)
  
  • 用法：$(“ul”).children(“li”)
  • 说明：获取$("ul")下的所有的儿子级的li，获取到的是一个集合，相当于$(“ul>li”)，子类选择器
• find(selector)
  
  • 用法：$(“ul”).find(“li”)
  • 说明：获取的是$("ul")下的所有的li元素包括孙子级，相当于$(“ul li”)后代选择器
• siblings(selector)
  
  • 用法：$(“#first”).siblings(“li”)
  • 说明：获取的是所有的兄弟节点，并且不包括自身
• parent()
  
  • 用法：$(“#first”).parent()
  • 说明：查找父级节点
• eq(index)
  
  • 用法：$(“li”).eq(2);
  • 说明：相当于$(“li:eq(2)”),index从0开始

3、jQuery操作样式

3.1 设置样式

1. 设置单个样式

//name：需要设置的样式名称
//value：对应的样式值
css(name, value);
//使用案例
$("#one").css("background","gray");//将背景色修改为灰色

1. 设置多个样式

//参数是一个对象，对象中包含了需要设置的样式名和样式值
css(obj);
//使用案例
$("#one").css({
    "background":"gray",
    "width":"400px",
    "height":"200px"
});

1. 获取样式

1. name:需要获取的属性名 css(name);

2. 注意：获取样式的时候，如果是多个元素，返回的第一个元素的对应的样式

3. 隐式迭代：设置性操作的操作，设置的是所有的元素

4. 获取性操作：不会遍历，直接返回第一个元素对应的值。

/*案例*/
$("div").css("background-color");

注意：获取样式操作只会返回第一个元素对应的样式值

3.2 操作样式

1. 添加样式类

/*name：需要添加的样式类名，注意参数不要带点.*/
addClass(name);
/*例子,给所有的div添加one的样式。*/
$("div").addClass("one");

1. 移除所有样式类

//不带参数，移除所有的样式类
removeClass()
//例子，移除div所有的样式类
$("div").removeClass();

1. 移除单个样式类

//name:需要移除的样式类名
removeClass("name");
//例子，移除div中one的样式类名
$("div").removeClass("one");

1. 切换样式类

//name:需要切换的样式类名，如果有，移除该样式，如果没有，添加该样式。
toggleClass(name);
//例子
$("div").toggleClass("one");

1. 判断是否有样式类

//name:用于判断的样式类名，返回值为true false
hasClass(name)
//例子，判断第一个div是否有one的样式类
$("div").hasClass("one");

3.3、总结

1. 如果操作到的样式非常少，可以考虑css方法

2. 如果操作到的样式非常多，那么可以通过class方法来操作，将样式写到一个class类里面。

3. 如果考虑到后期维护方便，将css从js中分离出来，那么推荐使用class的方式来操作。

4、jQuery动画

常用动画

4.1、显示&隐藏

显示 show([speed], [callback])

隐藏 hide([speed], [callback])，用法与显示完全相同

    show/hide([speed], [callback]);
    //speed(可选)：动画的执行时间

    1.如果不传，就没有动画效果。

    2.毫秒值(比如1000),动画在1000毫秒执行完成(推荐)

    3.固定字符串，用固定的字符串表示当前动画执行的速度快慢，slow(600)、normal(400)、fast(200)，如果传其他字符串，则默认为normal。

    //callback(可选):执行完动画后执行的回调函数

    4.示例： $("div").show("fast", function () { });

注释：show/hide：修改的是元素的width、height、opacity。

4.2、滑入&滑出

滑入(slideUp)

滑出(slideDown)，使用方法与show/hide基本一致,是一组动画，效果与卷帘门类似。

    slideUp/slidDown(speed, callback);

    //speed(可选)：动画的执行时间

    1.如果不传，默认为normal，注意区分show/hide。

    2.毫秒值(比如1000),动画在1000毫秒执行完成(推荐)

    3.固定字符串，slow(200)、normal(400)、fast(600)

    //callback(可选):执行完动画后执行的回调函数

滑入滑出的切换

    $(selector).slideToggle(speed,callback);
    //如果是隐藏状态，那么执行slideDown操作，如果是显示状态，那么执行slideUp操作。

    示例： $("div").slideUp(1000, function () {})

注释：slideUp/slideDown：修改的是元素的height。

练习:下拉菜单案例

4.3、淡入&淡出

淡入 fadeIn(speed, callback)

淡出 fadeOut(speed, callback)

    fadeIn(speed, callback);
    //speed(可选)：动画的执行时间

    1.如果不传，默认是normal。

    2.毫秒值(比如1000),动画在1000毫秒执行完成(推荐)

    3.固定字符串，slow(200)、normal(400)、fast(600)

    //callback(可选):执行完动画后执行的回调函数

淡入淡出的切换

    fadeToggle(speed, callback);
    //如果当前元素处于隐藏状态，那么执行fadeIn操作，如果处于显示状态，那么执行fadeOut操作。

淡入淡出到某个值

    fadeTo(speed, value, callback)//可以设置具体的透明度
    //speed（必须）
    //value  0-1之间的数值(比如0.4)，表示淡到某一个值。
    //callback(可选) 回调函数

与淡入淡出的区别：淡入淡出只能控制元素的不透明度从 完全不透明 到完全透明；而fadeTo可以指定元素不透明度的具体值。并且时间参数是必需的！

注释：fade系列方法：修改的是元素的opacity

4.4、动画总结

1. jQuery给我们提供了三组动画，show/hide、slideUp/slideDown、fadeIn/fadeOut

2. 动画切换方法：slideToggle、fadeToggle，注意：show和hide没有切换的方法。

3. 淡入淡出到某个值：fadeTo方法。

4. show/slideDown/fadeIn三个是显示效果、hide/slideUp/fadeOut三个是隐藏效果。

5. show/hide修改的是元素的height,width,opacity。slide系列方法修改的是元素的height。fade系列方法修改的是元素的opacity。这三种方法修改的这些值，都是带数字的，因为带了数字才能做渐变。

练习:动画集合

自定义动画

$(selector).animate({params},[speed],[callback]);
// {params}：要执行动画的CSS属性，带数字（必选）
// speed：执行动画时长（可选）
// callback：动画执行完后立即执行的回调函数（可选）

动画支持的属性：http://www.w3school.com.cn/jquery/effect_animate.asp

练习:360开机动画

4.5、easing参数

控制动画在不同元素的速度，默认为"swing"

"swing"：在开头和结尾移动慢，在中间移动速度快

"linear"：匀速移动

4.6、动画队列问题

在同一个元素上执行多个动画，那么对于这个动画来说，后面的动画会被放到动画队列中，等前面的动画执行完成了才会执行

4.7、 停止动画

stop方法：停止动画效果

stop(clearQueue, jumpToEnd);

//第一个参数：是否清除队列

//第二个参数：是否跳转到最终效果

5、jquery操作DOM(节点)

5.1、创建元素

//$(htmlStr)

//htmlStr：html格式的字符串

$("<span>这是一个span元素</span>");

5.2、添加元素

1 添加新建的元素

//方法一：将jQuery对象添加到调用者内部的最后面。
var $span = $("<span>这是一个span元素</span>");
$("div").append($span);

//方法二：参数传字符串，会自动创建成jquery对象
$("div").append("<span>这是一个span元素</span>");

2 添加已经存在的元素

var $p = $("p");
$("div").append($p);
//注意：如果添加的是已经存在的元素，那么会把之前的元素给干掉。（类似于剪切的功能）。

类似的用法：append prepend after before

5.3、清空元素

1 empty：清空指定节点的所有元素，自身保留(清理门户)

$("div").empty();//清空div的所有内容（推荐使用，会清除子元素上绑定的内容，源码）

2 方法二 用html方法传一个空元素

$("div").html("");//使用html方法来清空元素，不推荐使用，会造成内存泄漏，绑定的事件不会被清除。

5.4、删除元素

remove：相比于empty，自身也删除（自杀）

$("div").remove();

5.5、克隆元素

作用：复制匹配的元素

// 复制$(selector)所匹配到的元素（深度复制）
//cloneNode(true)
// 返回值为复制的新元素，和原来的元素没有任何关系了。即修改新元素，不会影响到原来的元素。
$(selector).clone();