jquery相关笔记（二）
1.jquery操作css样式
◆设置样式： $(element).css({"width":"100px","height":"100px"});
◆设置样式： $(element).css({"width":100,"height":100});
◆ 设置样式：$(element).css("backgound-color","#f00");
◆ 设置样式：$(element).css("backgoundColor","#f00");
◆ 获取样式：$(element).css("width");//如果伪数组中有多个元素，那么只会获取第一个元素的宽度。
2.jquery操作类
◆添加类：$(element).addClass(className);
◆移除类：$(element).removeClass(className);
◆是否包含类：$(element).hasClass(className);//如果伪数组中有多个元素，只要有一个元素有这个类就返回true，全部没有这个类就返回false。
◆切换类（有就删除，没有就添加）:toggleClass(className);
3.动画
★动画的方法中参数除了可以是毫秒以外，还可以是字符串，如slow 慢表示600毫秒、normal 中等表示400毫秒、fast 快表示200毫秒，并且动画的参数中都是有回调函数的，当前动画执行完毕之后就执行回调函数。
◆主要通过display+opacity+width+height来显示：show([毫秒],fn)，但是最终只剩一个display:block;，其它的属性都收回去了。
◆主要通过display+opacity+width+height来隐藏：hide([毫秒],fn)，但是最终只剩一个display:none;，其它的属性都收回去了。
◆主要通过display+opacity+width+height来显示/隐藏：toggle([毫秒],fn)，但是最终只剩一个display:none;或者display:block;，其它的属性都收回去了，如果你的display属性值为none，那么toggle就是显示，如果你的display属性值为block，那么toggle就是隐藏。
■主要通过display+height来显示：slideDown([毫秒],fn)，但是最终只剩一个display:block;，其它的属性都收回去了。
■主要通过display+height来隐藏：slideUp([毫秒],fn)，但是最终只剩一个display:none;，其它的属性都收回去了。
■主要通过display+height来显示/隐藏：slideToggle([毫秒],fn)，其它的属性都收回去了，如果你的display属性值为none，那么slideToggle就是显示，如果你的display属性值为block，那么slideToggle就是隐藏。
▲主要通过display+opacity来显示：fadeIn([毫秒],fn)，但是最终只剩一个display:block;，其它的属性都收回去了。
▲主要通过display+opacity来隐藏：fadeOut([毫秒],fn)，但是最终只剩一个display:none;，其它的属性都收回去了。
▲主要通过display+opacity来显示/隐藏：fadeToggle([毫秒],fn)，其它的属性都收回去了，如果你的display属性值为none，那么fadeToggle就是显示，如果你的display属性值为block，那么fadeToggle就是隐藏。
▲主要通过opacity来指定具体的透明度来显示：fadeTo([毫秒],opacity,fn)，这个方法是以动画的方式改变透明度的，第一个参数必须写opacity取值范围是0-1.0之间，在js中小数如果小于1，可以省略0.几的0，直接写.几就可以了，回调函数fn可有可无。
★主要通过自定义样式属性的json对象来进行动画显示/动画隐藏：animate({params},speed,fn)，params是样式属性的json对象，speed是动画执行的时间而不是步长，fn是动画执行完毕后的回调函数。
♦停止动画：stop(不执行后续动画的bool值,立即执行完毕当前动画的bool值)，方法中的两个参数默认都是false，表示着（继续执行后续的动画，不立即执行完毕当前动画就是立即停止当前的动画），两个参数不同的组合导致四种情况发生【
情况1：stop(true,true);//后续动画不执行，立即执行完毕当前动画
情况2：stop(false,true);//后续动画继续执行，立即执行完成当前动画
情况3：stop(true,false);//后续动画不执行，立即停止当前动画(因为后续动画不执行了，所以就算你为false了，也是停止当前动画)
情况4：stop(false,false);//后续动画继续执行，立即停止当前动画（当前的动画停止，然后让后续的动画执行）
】。
★以上动画可以随意组合
★【
show与hide其实真正改变的属性有很多，都在这个标签中：
<div style="display: block; overflow: hidden; height: 128.448px; padding: 0px; margin: 85.6319px 473.973px; width: 128.448px; opacity: 0.856319;"></div>
slideDown与slideUp其实真正改变的属性也很多，都在这个标签中：
<div style="display: block; overflow: hidden; height: 35.3116px; padding-top: 0px; margin-top: 23.541px; padding-bottom: 0px; margin-bottom: 23.541px;"></div>
fadeIn与fadeOut其实真正改变的属性也很多，都在这个标签中：
<div style="display: block; opacity: 0.581319;"></div>
】
4.人的反应时间一般都在0.2秒左右，国家级运动员的反应时间在0.14-0.16
5.jQuery中的创建节点对象的方式有两种：
◆$("<li></li>"); 创建一个li标签的jquery的dom对象
◆$("ul").html("<li></li>");这个将一对li标签加入到li第一个ul中。
6.jQuery中的添加节点的方式：
◆父节点.append(newChildren); //添加新的子节点(成为了当前父节点的最后一个子节点)。
◆新的子节点.appendTo(parentNode); //将新的子节点添加到父节点（成为了当前父节点的最后一个子节点）中。
◆父节点.prepend(newChildren); //添加新的子节点（成为了当前父节点的第一个子节点）。
◆父节点.html(newChildren); //直接把一个节点放到html方法中 作为父节点的子节点。
◆新的子节点.prependTo(parentNode);//将新的子节点添加到父节点（成为了当前父节点的第一个子节点）。
◆当前节点.after(newNode);//在当前节点的后面添加一个新节点。
◆当前节点.before(newNode);//在当前节点的前面添加一个新节点。
7.jQuery中的删除和清空节点的方式：
◆$("ul").html(""); //这样就清空了ul中的所有的节点了。
◆$("ul").empty();//这样就清空了ul中的所有的节点了。
◆$("ul>li:eq(0)").remove();//这样就删除了ul中的第一个li节点了。
8.jQuery中的复制节点的方式：
◆$("ul").clone();//这样就复制了ul节点，只能够深层复制，不能浅层复制。
◆设置样式： $(element).css({"width":"100px","height":"100px"});
◆设置样式： $(element).css({"width":100,"height":100});
◆ 设置样式：$(element).css("backgound-color","#f00");
◆ 设置样式：$(element).css("backgoundColor","#f00");
◆ 获取样式：$(element).css("width");//如果伪数组中有多个元素，那么只会获取第一个元素的宽度。
2.jquery操作类
◆添加类：$(element).addClass(className);
◆移除类：$(element).removeClass(className);
◆是否包含类：$(element).hasClass(className);//如果伪数组中有多个元素，只要有一个元素有这个类就返回true，全部没有这个类就返回false。
◆切换类（有就删除，没有就添加）:toggleClass(className);
3.动画
★动画的方法中参数除了可以是毫秒以外，还可以是字符串，如slow 慢表示600毫秒、normal 中等表示400毫秒、fast 快表示200毫秒，并且动画的参数中都是有回调函数的，当前动画执行完毕之后就执行回调函数。
◆主要通过display+opacity+width+height来显示：show([毫秒],fn)，但是最终只剩一个display:block;，其它的属性都收回去了。
◆主要通过display+opacity+width+height来隐藏：hide([毫秒],fn)，但是最终只剩一个display:none;，其它的属性都收回去了。
◆主要通过display+opacity+width+height来显示/隐藏：toggle([毫秒],fn)，但是最终只剩一个display:none;或者display:block;，其它的属性都收回去了，如果你的display属性值为none，那么toggle就是显示，如果你的display属性值为block，那么toggle就是隐藏。
■主要通过display+height来显示：slideDown([毫秒],fn)，但是最终只剩一个display:block;，其它的属性都收回去了。
■主要通过display+height来隐藏：slideUp([毫秒],fn)，但是最终只剩一个display:none;，其它的属性都收回去了。
■主要通过display+height来显示/隐藏：slideToggle([毫秒],fn)，其它的属性都收回去了，如果你的display属性值为none，那么slideToggle就是显示，如果你的display属性值为block，那么slideToggle就是隐藏。
▲主要通过display+opacity来显示：fadeIn([毫秒],fn)，但是最终只剩一个display:block;，其它的属性都收回去了。
▲主要通过display+opacity来隐藏：fadeOut([毫秒],fn)，但是最终只剩一个display:none;，其它的属性都收回去了。
▲主要通过display+opacity来显示/隐藏：fadeToggle([毫秒],fn)，其它的属性都收回去了，如果你的display属性值为none，那么fadeToggle就是显示，如果你的display属性值为block，那么fadeToggle就是隐藏。
▲主要通过opacity来指定具体的透明度来显示：fadeTo([毫秒],opacity,fn)，这个方法是以动画的方式改变透明度的，第一个参数必须写opacity取值范围是0-1.0之间，在js中小数如果小于1，可以省略0.几的0，直接写.几就可以了，回调函数fn可有可无。
★主要通过自定义样式属性的json对象来进行动画显示/动画隐藏：animate({params},speed,fn)，params是样式属性的json对象，speed是动画执行的时间而不是步长，fn是动画执行完毕后的回调函数。
♦停止动画：stop(不执行后续动画的bool值,立即执行完毕当前动画的bool值)，方法中的两个参数默认都是false，表示着（继续执行后续的动画，不立即执行完毕当前动画就是立即停止当前的动画），两个参数不同的组合导致四种情况发生【
情况1：stop(true,true);//后续动画不执行，立即执行完毕当前动画
情况2：stop(false,true);//后续动画继续执行，立即执行完成当前动画
情况3：stop(true,false);//后续动画不执行，立即停止当前动画(因为后续动画不执行了，所以就算你为false了，也是停止当前动画)
情况4：stop(false,false);//后续动画继续执行，立即停止当前动画（当前的动画停止，然后让后续的动画执行）
】。
★以上动画可以随意组合
★【
show与hide其实真正改变的属性有很多，都在这个标签中：
<div style="display: block; overflow: hidden; height: 128.448px; padding: 0px; margin: 85.6319px 473.973px; width: 128.448px; opacity: 0.856319;"></div>
slideDown与slideUp其实真正改变的属性也很多，都在这个标签中：
<div style="display: block; overflow: hidden; height: 35.3116px; padding-top: 0px; margin-top: 23.541px; padding-bottom: 0px; margin-bottom: 23.541px;"></div>
fadeIn与fadeOut其实真正改变的属性也很多，都在这个标签中：
<div style="display: block; opacity: 0.581319;"></div>
】
4.人的反应时间一般都在0.2秒左右，国家级运动员的反应时间在0.14-0.16
5.jQuery中的创建节点对象的方式有两种：
◆$("<li></li>"); 创建一个li标签的jquery的dom对象
◆$("ul").html("<li></li>");这个将一对li标签加入到li第一个ul中。
6.jQuery中的添加节点的方式：
◆父节点.append(newChildren); //添加新的子节点(成为了当前父节点的最后一个子节点)。
◆新的子节点.appendTo(parentNode); //将新的子节点添加到父节点（成为了当前父节点的最后一个子节点）中。
◆父节点.prepend(newChildren); //添加新的子节点（成为了当前父节点的第一个子节点）。
◆父节点.html(newChildren); //直接把一个节点放到html方法中 作为父节点的子节点。
◆新的子节点.prependTo(parentNode);//将新的子节点添加到父节点（成为了当前父节点的第一个子节点）。
◆当前节点.after(newNode);//在当前节点的后面添加一个新节点。
◆当前节点.before(newNode);//在当前节点的前面添加一个新节点。
7.jQuery中的删除和清空节点的方式：
◆$("ul").html(""); //这样就清空了ul中的所有的节点了。
◆$("ul").empty();//这样就清空了ul中的所有的节点了。
◆$("ul>li:eq(0)").remove();//这样就删除了ul中的第一个li节点了。
8.jQuery中的复制节点的方式：
◆$("ul").clone();//这样就复制了ul节点，只能够深层复制，不能浅层复制。
