看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. WinForm 窗体应用程序 (初步)之二

    现在,我们来了解一些基本控件.控件是放置在工具箱里的,你可以在界面的左侧或者通过菜单栏的视图选项找到它. (1)Label 控件 这是一个用于放置文字的控件,因为你不能在窗体上直接输入文字. (2)T ...

  2. 简单的Writer和Reader

    Writer用于写出去到文件中,Reader用于将外面的文件读进来控制台 Writer和Reader有许多子类,但是子类大多都是直接运用父类Writer和Reader的方法,而且Writer和Read ...

  3. 不简单的SQL查询和排序语句

    真不简单!! 一:使用select语句进行查询 语法: SELECT    <列名> FROM      <表名> [WHERE    <查询条件表达式>] [OR ...

  4. 钉钉客户端JS-API权限签名算法.NET版

    前段时间写了一篇博文<钉钉如何进行PC端开发>,在里面并未解决本地生成签名的问题,需要到官网进行生成,由于钉钉门票等认证信息会超期,因此,必须能本地用代码自动更新相关参数信息,来换取签名. ...

  5. C#如何根据配置实现动态窗体

    本文主要讲述如何根据UI配置来动态生成控件, 并添加到窗体上来构建UI窗体,当用户在每个控件上完成输入操作后,程序通过遍历控件并用拼接字符串的方式动态生成Insert SQL语句,进而实现了将UI上的 ...

  6. 不直接登录SharePoint服务器,通过远程直接部署WSP解决方案包

    在这之前不得不说一下Sysinternals,他最初是一个网站,网站上会经常发布一些有用的系统扩展工具,之后运营这个网站的公司被微软收购.像非常著名的Procmon,AutoRuns.Process ...

  7. html框架—多对话框(相同id)处理

    一个网站的数据大多数都是异步刷新的,这没什么好说的,然后现在很多前后端框架,大家都知道框架很好用,不用自己写样式,只要利用框架上的语法就能做出漂亮的动态的效果来,而用框架的话大多数的动态效果都是动态生 ...

  8. NSString的内存管理问题 (转载)

    NSString是一个不可变的字符串对象.这不是表示这个对象声明的变量的值不可变,而是表示它初始化以后,你不能改变该变量所分配的内存中的值,但你可以重新分配该变量所处的内存空间. 生成一个NSStri ...

  9. mysql 数据库服务中的应用程序

    mysql 是一个数据库服务,而实现数据库服务是由mysql中的很多子应用程序来完成的(http://dev.mysql.com/doc/refman/5.7/en/programs-overview ...

  10. iOS Address Book指南

    尽管OC是一门面向对象的语言,但是在你做开发的时候你会发现,并不是所有你用的frameworks都是面向对象的.有些是用C写的,例如Address Book的API,接下来让我们去学习一下Addres ...