看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. servlet的开发流程介绍

    servlet的开发部署流程 1.在%TOMCAT_HOME%/webapps下WEB-INF的文件夹,写一个文件web.xml(该网站的配置信息),建立一个classes的子文件夹,也可以从别的目录 ...

  2. C#如何自定义DataGridViewColumn来显示TreeView

    我们可以自定义DataGridView的DataGridViewColumn来实现自定义的列,下面介绍一下如何通过扩展DataGridViewColumn来实现一个TreeViewColumn 1 T ...

  3. 【今日推荐】移动 Web 开发的10个最佳 JavaScript 框架

    选择正确的 JavaScript 框架,对于开发移动 Web 应用程序是至关重要的,也是移动应用程序开发的一项重要任务.开发人员可以使用框架实现的功能高效地达到他们的开发目标.这些预实现的组件采用优秀 ...

  4. strurts2入门

    MVC :struts2是一个经典开源的mvc框架.主要负责控制器(Controller)   处理请求特点: 核心控制器:  +Actions; 与ServletAPI解耦合: 非单例,线程安全. ...

  5. 腾讯用过的插件jQuery twentytwenty 效果对比

    在线实例 左右对比 上下对比 使用方法 <div class="twentytwenty-container">     <img src="/api/ ...

  6. ABAP 动态生成内表的几种方法

    最近要写个程序,既有更新的,也有删除的,需要涉及到很多系统表,如果一个表一个表进行更新或者删除太慢了,于是就想通过创建动态内表来实现这些功能,在网上找了一些资料,经过多次尝试,终于测试成功了.网上讲述 ...

  7. VSTO开发，转帖

    http://www.cnblogs.com/oneivan/p/4243574.html

  8. JEPF 3.1.2 发布，我们的软件机床(软件快速开发平台)

    JEPF新一代软件快速开发平台(Java Elephant Platform)是一款优秀的平台产品,它本着灵活.快捷开发.高性能.高协作性.高稳定性.高可用性.人性化的操作体验为设计宗旨历经2年研发成 ...

  9. gridView获得每行的值

    前台代码: <asp:GridView ID="GridView1" runat="server" DataKeyNames="ID" ...

  10. List集合概述

    上篇总结了Set集合,这回总结下List集合....先来框架图: 一.List集合 List集合代表一个元素有序,可重复的集合,集合中每个元素都有对应的顺序索引.List接口中增加了一些根据索引操作元 ...