<style type="text/css">
.web>p {
font-size: 16px;
}
/*
*选择到所有类名中具有col-标识的元素
*
* */
li[class*="col-"] {
height: 100px;
}
</style>
<div class="web">
<p>我是p标签</p>
<ul>
<li class="col-1">1</li>
<li class="col-2">2哦哦哦</li>
<li class="col-3">3</li>
<li class="col-4">4</li>
</ul>
<div id="test">我是id为testdiv</div>
<a href="#test">我是a标签</a>
<div><em>9687</em></div>
</div>
<div class="step" style="background: greenyellow;">看我</div>
<img style="width: 200px;" class="img" src="img/1.jpg" />
<div><i>1234</i></div>
<button>点我</button>
<div class="show">我要进行渐变效果</div>
<div class="ani">点我变大</div>
<script type="text/javascript">
$("p,li").css("color", "red");
/*$("p,li").css({
"fontSize":"25px",
"opacity":"0.5"
});
console.log($("p:animated"));*/
#选择器
1、:animated。获取正在运动的元素
注意:这里需要用jq提供动画才能获取到
2、:eq(index)匹配集合中选择索引值为index的元素(index下标值)
index值从0开始计算
3、:even:选择到下标值为偶数的元素
4、:odd:选择到下标值为奇数的元素
5、:gt(index)选择到下标值大于index值的所有元素
6、:lt(index)选择到下标值小于index值的所有元素
7、:not(sel)
sel代表一个选择器,用来选择到所有除了sel选择到的元素之外的元素。
8、:contains(text)选择到包含文本为text的元素
9、:has(sel)
sel:代表选择器
用来选择到所有包含sel选择到的元素的标签
$("p").animate({
"font-size": "25px"
}, 1000)
$("p").on("click", function() {
$(":animated").css("color", "#000000");
})
$("li:eq(1)").css("color", "#000000");
$("li:even").css("color", "gray");
$("li:odd").css("color", "gold");
$("li:first").css("color", "green");
$("li:gt(0)").css("background", "greenyellow");
$("li:not(:nth-child(2)").css("font-size", "26px");
$("a").on("click", function() {
$(":target").css("font-size", "35px");
});
$("li:contains('2')").css("font-size", "50px");
$("div:has(i)").css("background", "skyblue");
#效果
1、hide(duration,easing,complete)
duration:可选,动画持续的时间
easing,可选,代表动画的时间函数,只有两个值
默认值:swing
linear
complete:可选,动画结束后的回调函数
隐藏元素
2、show(duration,complete)
duration:可选,动画持续的时间
complete:可选,动画结束后的回调函数
显示元素
3、toggle:显示或隐藏匹配元素
自定义动画(不支持所以属性,比如颜色类型,变换)
1、animate(property,duration,timeFunction,complete)
property:需要变换的属性,是一个对象
duration:变换的持续时间
timeFunction:时间函数
complete:动画结束后的回调函数
$("p").on("click", function() {
$("li:first").hide(1000, function() {
/**
* text()不传入参数,就是获取到元素内容
* 传入参数,就是设置元素内容
* */
$("li:nth-child(2)").text();
$("li:nth-child(2)").text("2一大把黄金!");
});
});
$("li:nth-child(2)").on("click", function() {
$("li:first").show(2000, "swing", function() {
$("li:nth-child(2)").text("钱还给你了!");
});
});
$("li:nth-child(3)").on("click", function() {
$("li:last").toggle(1000);
})
#滑动效果:
4、slideUp()收起
5、slideDown()展开
6、slideToggle(),收起或展开
$("div:has(i)").on("click", function() {
$(".img").slideToggle(1000);
});
#渐变效果:
7、fadeOut()渐渐消失
8、fadeIn()渐渐显示
9、fadeToggle()渐渐显示或消失
10、fadeTo(duration,opacity,commplete)
可以指定元素渐变到某个透明度
$("button").on("click", function() {
$(".show").fadeToggle(1000);
});
$("button").on("click", function() {
$(this).fadeTo(1000, 0.5, function() {
console.log("我变为半透明了");
});
});
/* $(".ani").on("click",function(){
$(".ani").animate({
"width":"200px",
"height":"200px",
},1000,"swing",function(){
console.log("这是我变化后的效果!");
});
});*/
$(".ani").on("click", function() {
$(".ani").animate({
"width": "200px",
"height": "200px",
}, 1000, "linear", function() {
console.log("这是我变化后的效果!");
});
});
step()方法,可以传入两个参数
第一个参数代表当前的动画的变换值
第二个参数获取到所有元素动画的参数,
比如:可以获取到进行动画变换的属性,获取到变换的元素自身等
$('.step').animate({
opacity: .5,
height: '50%'
}, {
step: function(now, fx) {
console.log(now,fx);
var data = fx.elem.id + ' ' + fx.prop + ': ' + now;
$('body').append('<div>' + data + '</div>');
}
});