看jquery的在线手册，hasClass的例子给的是这个

html部分：

<div class="protected"></div><div></div>

jquery部分：

$("div").click(function(){

  if ( $(this).hasClass("protected") )

    $(this)

      .animate({ left: -10 })

      .animate({ left: 10 })

      .animate({ left: -10 })

      .animate({ left: 10 })

      .animate({ left: 0 });

});

照抄过来跑了下，怎么点都没有效果。

两个问题：

一、没给div设置样式

二、div没有left属性

最后代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>hasClass</title>

<script type="text/javascript" src="jquery/jquery-1.10.2.min.js"></script>

</head>

<body>

<div style="width:100px; height:100px; border:solid 1px #000;"></div>
<div class="protected" style="height:100px; border:solid 1px #000; position:relative;left:100px;"></div>

<div style="width:100px; height:100px; border:solid 1px #000;"></div>

<script type="text/javascript">

$("div").click(function(){

  if ( $(this).hasClass("protected") ){

	$(this)

      .animate({ left: -100 })

      .animate({ left: 100 })

      .animate({ left: -100 })

      .animate({ left: 100 })

      .animate({ left: 0 });}

});

</script>

</body>

</html>

然后阿姆斯特朗回旋加速喷气式阿姆斯特朗炮就成型啦

悲催，感觉这失误真低级......

PS：

不设置left也行，给个position，不论absolute、relative都行

jquery之hasClass的更多相关文章

  1. jQuery筛选--hasClass(class)和eq(index|-index)

    hasClass(class) 概述 检查当前的元素是否含有某个特定的类,如果有,则返回true 参数 class  用于匹配的类名 <!DOCTYPE html> <html> ...

  2. [ jquery 过滤器 hasClass(class) ] 此方法用于在选择器的基础之上检查当前的元素是否含有某个特定的类，如果有，则返回true

    此方法用于在选择器的基础之上检查当前的元素是否含有某个特定的类,如果有,则返回true 实例: <!DOCTYPE html> <html lang='zh-cn'> < ...

  3. 原生JavaScript实现jQuery的hasClass,removeClass,addClass,toggleClass

    介绍: 1.hasClass:判断DOM元素是否存在类. 2.addClass:为的DOM元素添加类. 3.removeClass:删除DOM元素的类. 4.toggleClass:如果DOM元素存在 ...

  4. jQuery? 回归JavaScript原生API

    如今技术日新月异,各类框架库也是层次不穷.即便当年漫山红遍的JQuery(让开发者write less, do more,So Perfect!!)如今也有被替代的大势.但JS原生API写法依旧:并且 ...

  5. jQuery第二篇 （帅哥）

    1.1 jQuery操作DOM jQuery课程的目标:学会使用jQuery设计常见效果 选择器 基本选择器:#id ..class .element.* . 层级选择器: 空格.>.+.~ 基 ...

  6. jQuery 2.0.3 源码分析 样式操作

    根据API分类 CSS addClass() jQuery.cssHooks .hasClass() .removeClass() .toggleClass() .addClass() 对元素的样式操 ...

  7. jQuery-1.9.1源码分析系列（二）jQuery选择器续2——筛选

    前面分析了选择器的结构和几个解析函数,接下来分析jQuery对象的伪类选择器.这里所谓的jQuery对象的伪类选择器就是从已有的jQuery对象(元素集合)中筛选出指定的集合出来. 4.    jQu ...

  8. You Don't Need jQuery

    前端发展很快,现代浏览器原生 API 已经足够好用.我们并不需要为了操作 DOM.Event 等再学习一下 jQuery 的 API.同时由于 React.Angular.Vue 等框架的流行,直接操 ...

  9. jQuery修改class属性和CSS样式

    jQuery修改class属性和CSS样式 class属性修改 类属性即class属性,规定类名. 用类选择器规定样式的时候,需要为元素指定类名,即class属性的值. 注意每个HTML元素只有一个c ...

随机推荐

  1. [AngularJS] 使用AngularCSS动态加载CSS

    [AngularJS] 使用AngularCSS动态加载CSS 前言 使用AngularAMD动态加载Controller 使用AngularAMD动态加载Service 上列两篇文章里,介绍了如何如 ...

  2. 为友盟消息推送开发的PHP SDK（composer版）：可以按省发Android push

    一直以来APP希望按省市县推送Android push,只能自己分析用户经纬度,打tag发送. 现在终于有服务商提供了. 友盟消息推送 可以“按省推送”,很方便. 我为友盟做了PHP SDK(comp ...

  3. 清除浮动类的css

    .clearfix:after{ content:; visibility:hidden; display:block; clear:both;} .clearfix{ zoom:;}

  4. asp.net中控制反转的理解

    对IOC的解释为:“Inversion of control is a common characteristic of frameworks, so saying that these lightw ...

  5. vs2010 未能将脚本调试器附加到计算机上的进程。已附加了一个调试器

    图片: 上周不小心升级了IE10,今天,VS2010报:未能将脚本调试器附加到计算机XXX上的进程iexplore.exe . 已附加了一个调试器”.启动调试失败. 到网上查找解决办法,最后用这个解决 ...

  6. loading插件（原创）

    前言:服务器这几天都连不上,所以迟迟未更新,今天连上后才把插件文件和文档上传了.良心之作啊,难度虽不高,但命名多文件多啊.我得马上写篇博客絮叨一下,直接上地址. 文档及下载地址:www.chenggu ...

  7. SharePoint 2013 REST 服务使用简介

    1.创建测试使用列表”REST Demo”,插入一些测试数据,如下图: 2.添加内容编辑器,并且添加脚本引用以及HTML代码,如下图: Result的Div为显示结果使用,input标签触发REST服 ...

  8. iOS运用fabric记录crash日志过程

    先前运用友盟记录app闪退,发现有些闪退的记录无法明确定位到详细的位置,决定运用fabric进行闪退的记录:网上也有这方面的记录,有些细节的内容不明确,把今天碰到的坑整理记发不一下: 访问官网地址(进 ...

  9. Android App监听软键盘按键的三种方式与改变软键盘右下角确定键样式

    actionNone : 回车键,按下后光标到下一行actionGo : Go,actionSearch : 放大镜actionSend : SendactionNext : NextactionDo ...

  10. Android实用代码七段（四）

    声明 欢迎转载,但请保留文章原始出处:) 博客园:http://www.cnblogs.com 农民伯伯: http://over140.cnblogs.com 正文 1.发送不重复的通知(Notif ...