目录
jQuery操作css:
css属性：
动画:
停止动画：
尺寸：
父/子/兄弟元素：
父元素：
子元素：
兄弟元素：
过滤：
遍历：
jQuery操作css:
- addClass() - 向被选元素添加一个或多个类
- removeClass() - 从被选元素删除一个或多个类
- toggleClass() - 对被选元素进行添加/删除类的切换操作
- css() - 设置或返回样式属性
定义class样式表：
.a{color:red;}给p标签上添加/删除a样式
$("p").addClass("a");
$("p").addClass("a b");//套多个样式时，中间用空格，重复样式以后面的为准
$("p").removeClass("a");
$("p").toggleClass("a");css属性：
- css("css属性");----返回的是指定的css属性值
- css("css属性","给属性赋值");----给指定元素赋值
- css({"a":"b","a1":"b2",...});--------给多元素赋值
$("p").css("background-color");
$("p").css("background-color","yellow");
$("p").css({"background-color":"yellow","font-size":"200%"});动画:
可选的 speed 参数规定隐藏/显示的速度，可以取以下值："slow"、"fast" 或毫秒。
可选的 callback 参数是隐藏或显示完成后所执行的函数名称。
- hide(speed,callback);--------隐藏元素
- show(speed,callback);-------显示元素
- toggle(speed,callback);------显示被隐藏的元素，隐藏已显示的元素
<button id="cang">隐藏</button>
<button id="xian">显示</button>
<button id="xc">隐藏/显示</button>
<div class="a" id="div1"></div>
=========script=========================
$("#cang").click(()=>{
//隐藏
$("#div1").hide(2000,()=>{
// alert("cang");
});
});
$("#xian").click(()=>{
//显示
$("#div1").show(2000);
});
$("#xc").click(()=>{
//显示/隐藏
$("#div1").toggle(2000);
});
- fadeIn(speed,callback);------淡入
- fadeOut(speed,callback);----淡出
- fadeToggle(speed,callback);-切换淡入淡出效果
- fadeTo(speed,opacity,callback);--渐变为给定的不透明度(介于0~1之间)
<button id="b1">隐藏</button>
<button id="b2">显示</button>
<button id="b3">隐藏/显示</button>
<button id="b4">透明</button>
<div class="a" id="div2"></div>
//淡入淡出，所以会有一个透明度的问题
$("#b1").click(()=>{
//出去
$("#div2").fadeOut(2000);
});
$("#b2").click(()=>{
//进来
$("#div2").fadeIn(2000);
});
$("#b3").click(()=>{
//显示/隐藏
$("#div2").fadeToggle();
});
$("#b4").click(()=>{
//透明度(第一个参数事件，第二个参数透明度)
$("#div2").fadeTo(1000,0.2);
}); 
- slideDown(speed,callback);---向下滑动
- slideUp(speed,callback);-------向上滑动
- slideToggle(speed,callback);--切换向上向下效果
<button id="b11">隐藏</button>
<button id="b22">显示</button>
<button id="b33">隐藏/显示</button>
<div class="a" id="div3"></div>
$("#b11").click(()=>{
//上拉
$("#div3").slideUp(2000);
});
$("#b22").click(()=>{
//出来
$("#div3").slideDown(2000);
});
$("#b33").click(()=>{
//显示/隐藏
$("#div3").slideToggle();
}); 
- animate({params},speed,callback);---(params参数定义形成动画的css属性)自定义动画
- ps:默认的HTML元素都有一个静态位置，且无法移动，
- 把元素的css:position属性设置为relative.
- 可以操作多个animate({left:'250px',opacity:'0.5',width:'150px'});
- 使用相对值:animate(left,'250px');
- 使用预定义的值:animate({height:'toggle'});可以把属性的动画值设置为show/hide/toggle。
- 在彼此之后执行不同的动画，需要使用队列：
-
$("button").click(function(){ var div=$("div"); div.animate({height:'300px',opacity:'0.4'},"slow"); div.animate({width:'300px',opacity:'0.8'},"slow"); div.animate({height:'100px',opacity:'0.4'},"slow"); div.animate({width:'100px',opacity:'0.8'},"slow"); });
-
停止动画：
stop() 方法用于停止动画或效果，在它们完成之前
stop(stopAll,goToEnd):
可选的 stopAll 参数规定是否应该清除动画队列。默认是 false，即仅停止活动的动画，允许任何排入队列的动画向后执行。
可选的 goToEnd 参数规定是否立即完成当前动画。默认是 false。
因此，默认地，stop() 会清除在被选元素上指定的当前动画。
尺寸：
- width()-----------方法用来设置或返回元素的宽度（不包括内边距，边框或外边距）
- height()----------方法设置或返回元素的高度（不包括内边距，边框或外边距）
- innerWidth()----返回元素的宽度（包括内边距）
- innerHeight()---返回元素的高度（包括内边距）
- outerWidth()----返回元素的宽度（包括内边距和边框）---属性填true,包括外边距
- outerHeight()---返回元素的高度（包括内边距和边框）---属性填true,包括外边距
父/子/兄弟元素：
父元素：
- parent()------------返回被选元素的直接父元素
- parents()-----------返回被选元素的所有祖先元素,直到html,如果填写参数，会检索指定所有父级的参数
- parentsUntil()------返回介于两个给定元素之间的所有祖先元素。
$("span").parent();
$("span").parents();
$("span").parents("ul");
$("span").parentsUntil("div");子元素：
- children()------------返回被选元素的所有直接子元素
- find()------------------返回被选元素的后代元素，一直向下直到最后一个后代
$("div").children();//所有直接子元素
$("div").children("p.1");//div例所有类名为1的所有<p>元素，并且都是直接子元素
$("div").find("span");//div的所有span子元素
$("div").find("*");//div的所有子元素兄弟元素：
- siblings()--------------返回所有的兄弟元素
- next()-------------------返回下一个兄弟元素
- nextAll()----------------返回之后的所有兄弟元素
- nextUntil()-------------返回两个参数之间的兄弟元素
- prev()-------------------返回上一个兄弟元素
- prevAll()----------------返回之前的所有兄弟元素
- prevUntil()-------------返回两个参数之间的性地元素（顺序不同）
过滤：
- first()--------------------返回首个元素
- last()---------------------返回最后一个元素
- eq()-----------------------返回被选元素中带有指定索引的元素
- filter()---------------------返回带有某种属性的所有元素
- not()-----------------------返回不带有某种属性的所有元素与filter相反
$("div p").first();
$("div p").last();
$("p").eq(1);
$("p").filter(".intro");
$("p").not(".intro");遍历：
each():遍历每个元素
用箭头函数必须传参
参数一：index---遍历的索引
参数二：item---当前正在遍历的项
为什么不能用this，因为this指向的不是DOM，指向的是当前函数的调用者.
$("li").each(function(){
alert($(this).text());//打印所有li的text文本内容
});
$("input[id=a]").each((index,item)=>{
item.checked=!item.checked;//让id=a的input标签选中状态取反
});还有一堆遍历：更多遍历方式
