样式操作
- 获取class和设置class:class是元素的一个属性,使用attr()完成。
- 追加样式:addClass()
- 移除样式:removeClass() 从匹配的元素中删除全部或指定的class。
- 切换样式:toggleClass() 控制样式上的重复切换,如果类名存在则删除它,不存在则添加。
- 判断是否含有某个样式:hasClass() 判断元素中是否含有某个class,有?true:false;
以上方法填写class名称,不要添加 . - 获取和设置元素的样式属性:css()
- 获取和设置元素的透明度:opacity属性
- 获取和设置元素高度,宽度:height(),width()。若只传递数据,默认单位为px。需要使用其他单位,如:$(“p:first”).height(“2em”);
- 获取元素在当前视窗中的相对位移:offset()。返回对象包括了两个属性:top,left。只对可见元素有效。
事件
加载DOM
在页面加载完毕后,浏览器会通过JavaScript为DOM元素添加事件。
JavaScript | JQuery |
---|---|
window.onload | $(document).ready() 简写:$() |
必须等待所有内容加载完,执行 | 所有DOM结构绘制完毕执行,可能与DOM元素关联的东西未加载完 |
不能同时编写多个 | 可以同时编写多个 |
事件绑定
对匹配元素进行特定的事件绑定:bind()
e.g:添加事件,点击class=’head’,控制class=’content’元素的显示和隐藏
1.bind()
$(".head").bind("click",function(){
var flag = $(".content").is(":hidden");
if (flag) {
$(".content").show();
} else {
$(".content").hide();
}
});
2.toggle():第一次点击,执行function1,第二次点击,执行function2
$(".head").toggle(function(){
$(".content").show();
},function(){
$(".content").hide();
})
e.g:鼠标移动控制元素的显示和隐藏
1. mouseover
$(".head").mouseover(function(){
$(".content").show();
}).mouseout(function(){
$(".content").hide();
});
2.hover:鼠标移上去执行第一个function,移出执行第二个function
$(".head").hover(function(){
$(".content").show();
},function(){
$(".content").hide();
});
移除事件
- 移除某按钮上的所有click事件:$(“btn”).unbind(“click”);
- 移除某按钮上的所有事件:$(“btn”).unbind();
- one():该方法可以为元素绑定处理函数,当处理函数触发一次后,立即被删除。即在每个对象上,事件处理函数只会被执行一次。
$("li").one("click", function(){
alert("触发一次,不在触发");
});
事件冒泡
事件会按照DOM层次结构像水泡一样不断向上直至顶端,事件处理函数中返回false。
e.g:点击span不会触发外围div和body事件
<script type="text/javascript" src="scripts/jquery-1.7.2.js"></script>
<script type="text/javascript">
$(function(){
$("body").click(function(){
alert("body click");
});
$("#content").click(function(){
alert("div click");
});
$("span").click(function(){
alert("span click");
//如何解决事件的冒泡: 通过在响应函数的结尾返回 false, 可以阻止冒泡.
return false;
});
})
</script>
</head>
<body>
<div id="content">
外层div元素
<span>内层span元素</span>
外层div元素
</div>
</body>
动画:隐藏和显示
- hide():在HTML文档中,为一个元素调用hide()方法会将该元素的display样式改为none.代码功能同css(“dispaly”,”none”);
- show():将元素的dispaly样式改为先前的显示状态。
以上两个方法在不带参数的情况下,作用是立即隐藏或者显示。不会有动画,会同时减少(增大)内容的高度,宽度和不透明度 - fadeIn(),fadeOut():只改变元素的透明度
- slideDown(),slideUp():只会改变元素的高度
- toggle():切换元素的可见状态,可见切换为隐藏,隐藏切换为可见
- slideToggle():通过高度变化来切换匹配元素的可见性
- fadeTo():把不透明度以渐进的方式调整到指定的值(0-1)
e.g:show() 和 hide() 方法中传入毫秒数以达到动画的效果
$(".head").toggle(function() {
$(".content").show(1000);
}, function() {
$(".content").hide(1000);
});
e.g:只改变高度
$(".head").toggle(function(){
$(".content").slideDown(500);
},function(){
$(".content").slideUp(500);
});
e.g:只改变透明度
$(".head").toggle(function(){
$(".content").fadeIn(500);
},function(){
$(".content").fadeOut(500);
});
$(function(){
$(".content").show();
var i = 1;
$(".head").click(function(){
//$(".content").toggle();
//$(".content").slideToggle();
//$(".content").fadeToggle();
$(".content").fadeTo("slow",i);
i = i - 0.1;
});
});
e.g:改变span背景图片
$("span").css("background","url(img/down.gif) no-repeat 0 0");
url中为文件路径