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标签选中状态取反
});

还有一堆遍历：更多遍历方式

jQuery添加css样式/动画效果相关推荐

JQuery——添加CSS样式
在原生的JavaScript中,可以用style属性为CSS添加样式 var className=document.getElementsByClassName("box"); c ...
php+jq+添加css,jquery如何添加css样式？
在运用jquery的时候我们经常需要动态的给一些dom元素添加CSS样式,下面我们来看一下Jquery如何动态的添加css样式. jquery添加css样式的方法:使用addClass() 方法添加c ...
怎么在jq中添加html样式,jquery怎么添加css样式
jquery添加css样式的方法:1.使用addClass()方法添加css样式,语法如"$(selector).addClass(class)":2.使用css()方法设置css ...
jquery使用html()css不生效,jquery可以添加css样式吗？
jquery可以添加css样式吗?答案是:可以.那么如何添加css样式?下面本篇文章就来给大家介绍一下使用jquery添加css样式的方法,希望对大家有所帮助. 在jquery中,可以使用addCla ...
html+jquery+添加样式,jquery设置css样式、style属性示范
jquery设置css样式.style属性示例 css虽然会在一开始我们就定义好了,但是有很多场景需要我们动态设置css,或者单独修改一个dom控件的style属性,今天分享一下我总结的jquery ...
深入学习jQuery的三种常见动画效果
前面的话动画效果是jQuery吸引人的地方.通过jQuery的动画方法,能够轻松地为网页添加视觉效果,给用户一种全新的体验.jQuery动画是一个大的系列,本文将详细介绍jQuery的三种常见动画效 ...
html如何添加加载动画效果,CSS3创建加载动画效果
加载动画在网页设计中是很常见的.用户们都希望网页加载又快又流畅而不是盯着屏幕苦等,而加载动画能够在内容加载完成前给用户视觉反馈,从而能够吸引用户而不让他们直接放弃继续浏览你的网站. 创建加载效果所需的 ...
html 点击增加样式,js点击添加css样式 css添加jq点击事件 JavaScript点击增加css样式...
js可实现点击后对div或者其他标签增加或者删除css样式,从而达到实现点击触发某种效果的目的.页面样式可以通过style修饰,也可以通过css修饰,改变css或者添加css可以改变页面的排版.代码如 ...
vuejs罗盘时间创意样式动画效果
下载地址 vuejs罗盘时间创意样式动画效果,使用了jquery,代码有点多. dd:

jQuery添加css样式/动画效果

jQuery操作css:

css属性：

动画:

停止动画：

尺寸：

父/子/兄弟元素：

父元素：

子元素：

兄弟元素：

过滤：

遍历：

jQuery添加css样式/动画效果相关推荐

最新文章

热门文章