【网络公开课总结】会飞的小鸟,removeClass() 方法从被选元素移除一个或多个类。

removeClass() 方法从被选元素移除一个或多个类。
注释:如果没有规定参数,则该方法将从被选元素中删除所有类。
语法
$(selector).removeClass(class)

参数 class     
可选。规定要移除的 class 的名称。
如需移除若干类,请使用空格来分隔类名。
如果不设置该参数,则会移除所有类。

var bird = $("#dbird");
  bird.removeClass().addClass(‘direction-‘ + code)
#dbird 的样式不会被移除掉,只会移除掉css类的。

css

* {
    padding: 0px;
    margin: 0px;
}

body {
    overflow: hidden;
}

#dbird {
    position: absolute;
    width: 206px;
    height: 121px;
}
.direction-37 {
    transform: rotateY(180deg);
}
.direction-38 {
    transform: rotate(-60deg);
}
.direction-40 {
    transform: rotate(60deg);
}

js

/// <reference path="jquery-1.10.2.min.js" />

$(function () {
    var bird = $("#dbird");//获取到了小鸟的对象
    var off = bird.offset();//获取到小鸟的方位的对象
    var icount = 10;//小鸟一次移动的位置
    var keyrecord = 39;
    var birdSize = { width: bird.width(), height: bird.height() };//获取到小鸟的大小
    var docSize = { width: $(window).width(), height: $(window).height() };//获取到当前浏览器的高度和宽度
    $(document).keydown(function (event) {//对网页按下键盘的键的时候触发一个事件,event事件源
        var code = event.keyCode;//获取事件源的编码
        if (keyrecord != code) {
            bird.removeClass().addClass(‘direction-‘ + code)
        }
        keyrecord = code;
        switch (code) {
            case 37://左键
                off.left -= icount;
                if (off.left < -birdSize.width) {
                    off.left = docSize.width;
                }
                break;
            case 38://上键
                off.top -= icount;
                if (off.top < -birdSize.height) {
                    off.top = docSize.height;
                }
                break;
            case 39://右键
                off.left += icount;
                if (off.left > docSize.width) {//当小鸟移动到浏览器的最右边的时候,让它回到浏览器的最左边
                    off.left = -birdSize.width;
                }
                break;
            case 40://下键
                off.top += icount;
                if (off.top > docSize.height) {
                    off.top = -birdSize.height;
                }
                break;

        }
        bird.offset(off);//设置小鸟新的方位值
    });
});
时间: 2024-10-09 07:13:27

【网络公开课总结】会飞的小鸟,removeClass() 方法从被选元素移除一个或多个类。的相关文章

[ jquery 过滤器next(expr) ] 此方法用于在选择器的基础之上搜索被选元素的后一个同级元素,此方法参数只能传递表达式,无法传递其他类型

此方法用于在选择器的基础之上搜索被选元素的后一个同级元素,此方法参数只能传递表达式,无法传递其他类型: 实例: <html lang='zh-cn'> <head> <title>Insert you title</title> <meta http-equiv='description' content='this is my page'> <meta http-equiv='keywords' content='keyword1,key

jQuery 属性操作 - addClass() 和 removeClass() 方法

实例 向第一个 p 元素添加一个类: $("button").click(function(){ $("p:first").addClass("intro"); }); 定义和用法 addClass() 方法向被选元素添加一个或多个类. 该方法不会移除已存在的 class 属性,仅仅添加一个或多个 class 属性. 提示:如需添加多个类,请使用空格分隔类名. 语法 $(selector).addClass(class) 参数 描述 class

[ jquery 效果 show([speed,[easing],[fn]]) hide([speed,[easing],[fn]]) ] 此方法用于显示隐藏的被选元素:show() 适用于通过 jQuery 方法和 CSS 中 display:none type=&#39;hidden&#39; 隐藏的元素(不适用于通过 visibility:hidden 隐藏的元素)

show()显示隐藏的被选元素:show() 适用于通过 jQuery 方法和 CSS 中 display:none type='hidden' 隐藏的元素(不适用于通过 visibility:hidden 隐藏的元素): hide() 方法隐藏被选元素: 参数 描述 speed 可选.规定显示效果的速度. 可能的值: 毫秒 "slow" "fast" easing 可选.规定在动画的不同点上元素的速度.默认值为 "swing". 可能的值: &

[ jquery 文档处理 empty() remove([expr]) detach([expr]) ] 此方法用于把所有匹配的元素移除

此方法用于把所有匹配的元素移除: remove([expr]) 概述 从DOM中删除所有匹配的元素 这个方法不会把匹配的元素从jQuery对象中删除,因而可以在将来再使用这些匹配的元素.但除了这个元素本身得以保留之外,其他的比如绑定的事件,附加的数据等都会被移除 empty() 概述 删除匹配的元素集合中所有的子节点 detach([expr]) 概述 从DOM中删除所有匹配的元素. 这个方法不会把匹配的元素从jQuery对象中删除,因而可以在将来再使用这些匹配的元素.与remove()不同的是

jquery的attr方法禁用表单元素

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <ti

[ jquery 过滤器 nextUntil([exp|ele][,fil]) ] 此方法用于在选择器的基础之上搜索被选元素的后面的所有同级元素,方法返回 selector 与 stop 之间的每个元素之后的所有同级元素,并且提供第二个参数来用于实现过滤效果,多个参数使用逗号相隔

此方法用于在选择器的基础之上搜索被选元素的后面的所有同级元素,方法返回 selector 与 stop 之间的每个元素之后的所有同级元素,并且提供第二个参数来用于实现过滤效果,多个参数使用逗号相隔,参数解释如下: 概述: 查找当前元素之后所有的同辈元素,直到遇到匹配的那个元素为止. 如果提供的jQuery代表了一组DOM元素,.nextUntil()方法也能让我们找遍所有元素所在的DOM树,直到遇到了一个跟提供的参数匹配的元素的时候才会停下来.这个新jQuery对象里包含了下面所有找到的同辈元素

[ jquery 过滤器 offsetParent() ] 此方法用于在选择器的基础之上搜索被选元素有定位的父级元素,仅对可见元素有效

此方法用于在选择器的基础之上搜索被选元素有定位的父级元素,仅对可见元素有效: 返回第一个匹配元素用于定位的父节点,这返回父元素中第一个其position设为relative或者absolute的元素,此方法仅对可见元素有效 实例: <html lang='zh-cn'> <head> <title>Insert you title</title> <meta http-equiv='description' content='this is my pa

[ jquery 过滤器 parent(expr) ] 此方法用于在选择器的基础之上搜索被选元素中符合表达式的父元素

此方法用于在选择器的基础之上搜索被选元素中符合表达式的父元素 取得一个包含着所有匹配元素的唯一父元素的元素集合,你可以使用可选的表达式来筛选: 实例: <html lang='zh-cn'> <head> <title>Insert you title</title> <meta http-equiv='description' content='this is my page'> <meta http-equiv='keywords' c

[ jquery 过滤器nextAll(expr) ] 此方法用于在选择器的基础之上搜索被选元素的后面的所有同级元素,此方法参数只能传递表达式,无法传递其他类型

此方法用于在选择器的基础之上搜索被选元素的后面的所有同级元素,此方法参数只能传递表达式,无法传递其他类型 可以使用此方法向里面传递表达式的方法实现和jqueryObj.next()相同的效果 实例: <html lang='zh-cn'> <head> <title>Insert you title</title> <meta http-equiv='description' content='this is my page'> <meta