看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. 盒图(boxplot)

    最近在摆弄数据离散度的时候遇到一种图形,叫做盒图(boxplot).它对于显示数据的离散的分布情况效果不错. 盒图是在1977年由美国的统计学家约翰·图基(John Tukey)发明的.它由五个数值点 ...

  2. JS魔法堂：jsDeferred源码剖析

    一.前言 最近在研究Promises/A+规范及实现,而Promise/A+规范的制定则很大程度地参考了由日本geek cho45发起的jsDeferred项目(<JavaScript框架设计& ...

  3. SharePoint 2013 showModalDialog 弹出模式窗口

    1. SharePoint 弹出框 本文讲述SharePoint 2013 中使用 SP.UI.ModalDialog.showModalDialog时 showModalDialog  未定义的问题 ...

  4. Spring Session

    开工开工, 准备条件: 1. 本地Redis,官网:http://redis.io/,windows下 https://github.com/ServiceStack/redis-windows ht ...

  5. Ubuntu 安装系统资源托盘监视应用

    安装 sudo apt-get install indicator-multiload 打开 indicator-multiload 设置开机启动    sudo gedit /etc/rc.loca ...

  6. Mac平台与Windows平台下AndroidStudio增量升级

    Android Studio增量升级什么情况下使用最合适呢? 比如现在的as版本是2.2版本,而你的as版本2.0版本,这个时候点Check For Updates就没有反应了,因为你已经2个有版本没 ...

  7. OC中面向对象2

    一. 定义OC的类和创建OC的对象 接下来就在OC中模拟现实生活中的情况,创建一辆车出来.首先要有一个车子类,然后再利用车子类创建车子对象 要描述OC中的类稍微麻烦一点,分2大步骤:类的声明.类的实现 ...

  8. [Android] android .keystore文件转x509pem工具

    .keystore是android的签名文件,最近在做联通联运的时候,发现他们需要上传x509pem格式的文件来签名所以就研究了一下如何转化 方法一:使用openssl的方法 http://blog. ...

  9. 阿里资深工程师分享支付宝热补丁技术—— AndFix原理

    本文由嵌入式企鹅圈原创团队成员.阿里资深工程师Hao分享. 上次我们介绍了用dexposed方案实施热补丁的原理,它本质上就是hook要修改的函数,这样一来在正式版本发布时就不能直接拿热补丁的代码集成 ...

  10. 转载文章----.NET 框架浅析

    转载地址:http://www.cnblogs.com/yangmingming/archive/2010/01/27/1657850.html .NET 框架概要: .NET框架,即.NET Fra ...