JQuery学习笔记（六）——css操作、事件处理和动画

最新推荐文章于 2023-04-13 20:18:46 发布

x_k

最新推荐文章于 2023-04-13 20:18:46 发布

阅读量807

点赞数 1

分类专栏：前端文章标签： jquery css 动画

本文链接：https://blog.csdn.net/u011499992/article/details/52294644

版权

前端专栏收录该内容

8 篇文章 0 订阅

订阅专栏

样式操作

获取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中为文件路径

x_k

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JQuery学习笔记（六）——css操作、事件处理和动画

样式操作、事件处理、动画效果
复制链接

扫一扫

专栏目录