<!DOCTYPE html>

<html>

<head lang="en">

  <meta charset="UTF-8">

  <title></title>

  <style>

    .score {

      list-style: none;

      margin: 0;

      padding: 0;

    }

    .score li {

      display: inline-block;

      width: 50px;

      height: 50px;

      border: 1px solid #f00;

      border-radius: 50%;

      cursor: pointer;

    }

  </style>

</head>

<body>

<h3>请打分</h3>

<ul class="score">

  <li></li>

  <li></li>

  <li></li>

  <li></li>

  <li></li>

</ul>

<script src="js/jquery-1.11.3.js"></script>

<script>

  //获得当前单击的li在所有li中的位置i,i及其执行的都变为红色，i之后的都变为白色

  $("ul.score").on("click","li",function(){

    var $i=$(this);

    var lis=document.querySelectorAll("ul.score>li");

    var i=//$("ul.score>li").index(this);

         // $(this).index();

         /*这里的this代表当前的li元素，整句话的意思是代表这个的位置是多少，

          结果是数字，这里是有局限性的，必须当前获取的li是都在一个ul的，不然会出错,

          从0开始排列，把获取到的li类数组进行编号*/

          $.inArray(this,lis);//这个API可以获取到当前的li在lis（类数组对象）中的位置

    $("ul.score>li:lt("+(i+1)+")").css("background","red");

    $("ul.score>li:gt("+i+")").css("background","#fff");

  })

</script>

</body>

</html>

jQuery中的index用法与inArray用法的更多相关文章

  1. [转载]Jquery中$.get(),$.post(),$.ajax(),$.getJSON()的用法总结

    本文对Jquery中$.get(),$.post(),$.ajax(),$.getJSON()的用法进行了详细的总结,需要的朋友可以参考下,希望对大家有所帮助. 详细解读Jquery各Ajax函数: ...

  2. Jquery中$.get(),$.post(),$.ajax(),$.getJSON()的用法总结

    本文对Jquery中$.get(),$.post(),$.ajax(),$.getJSON()的用法进行了详细的总结,需要的朋友可以参考下,希望对大家有所帮助. 详细解读Jquery各Ajax函数:  ...

  3. 转载 ： Jquery中$.get(),$.post(),$.ajax(),$.getJSON()的用法总结

    Jquery中$.get(),$.post(),$.ajax(),$.getJSON()的用法总结 投稿:jingxian 字体:[增加 减小] 类型:转载 时间:2013-11-14我要评论 本文是 ...

  4. [转载]jQuery中wrap、wrapAll和wrapInner用法以及区别

    原文地址:jQuery中wrap.wrapAll和wrapInner用法以及区别作者:伊少君 原文: <ul>   <li title='苹果'>苹果</li>   ...

  5. jquery中的index方法

    问题描述:灵活使用jquery中的index方法 方法签名:index([selector|element]) 用法概述:P1.index(P2)  //调用者P1可以为对象或集合 参数为空,返回P1 ...

  6. jQuery中attr()、prop()、data()用法及区别

    .attr(),此方法从jq1.0开始一直存在,官方文档写的作用是读/写DOM的attribute值,其实1.6之前有时候是attribute,有时候又是property..prop(),此方法jq1 ...

  7. JQuery中serialize()、serializeArray()和param()用法举例

    在javascript中,serialize()方法也是作用于一个JQuery对象,它能够将DOM元素内容序列化为字符串,serializeArray()方法不是返回字符串,而是将DOM元素序列化后, ...

  8. jQuery中的index方法介绍

    从jq api手册摘过来的内容,index这个方法在写 tab silder 之类的组件还是比较有用的说. js没有传统的函数重载的概念,但是根据传入参数的不同,js的函数可以完成不同的功能,也可说是 ...

  9. jquery中的index方法和eq方法

    jquery的index()方法 搜索匹配的元素,并返回相应元素的索引值,从0开始计数,如果不给 .index() 方法传递参数,那么返回值就是这个jQuery对象集合中第一个元素相对于其同辈元素的位 ...

随机推荐

  1. 08 在设备树里描述platform_device【转】

    转自:https://blog.csdn.net/jklinux/article/details/78575281 版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原 ...

  2. eslint代码规范检测

    1.如果在 vue init webpack projectname 时选择了eslint(Yes),则   npm uninstall eslint 2.在webpack.base.conf.js里 ...

  3. 【转】Redis常见面试题

    介绍:Redis 是一个开源的使用 ANSI C 语言编写.遵守 BSD 协议.支持网络.可基于内存亦可持久化的日志型.Key-Value 数据库,并提供多种语言的 API的非关系型数据库. 传统数据 ...

  4. 深入了解Python

    一.Python的风格 Python在设计上坚持了清晰划一的风格,这使得Python成为一门易读.易维护,并且被大量用户所欢迎的.用途广泛的语言. 设计者开发时总的指导思想是,对于一个特定的问题,只要 ...

  5. 剑指Offer-7.斐波那契数列(C++/Java)

    题目: 大家都知道斐波那契数列,现在要求输入一个整数n,请你输出斐波那契数列的第n项(从0开始,第0项为0). n<=39 分析: 斐波那契数列是0,1,1,2,3,5,8,13...也就是当前 ...

  6. 用pip命令把python包安装到指定目录

    sudo pip install transforms3d --target=/usr/local/lib/python2.7/site-packages pip install transforms ...

  7. 002Excel冻结窗口（冻结第二行）

    不知道是最近状态不好还是怎么回事Excel冻结前面两行居然弄了很久,而工作上又急需,为此还是记录一下 其实超级简单(不会的话就很难) 如果冻结一行 这个非常简单 那么冻结前面两行呢?我研究了很久,其实 ...

  8. Codeforces Round 589 (Div. 2) 题解

    Is that a kind of fetishism? No, he is objectively a god. 见识了一把 Mcdic 究竟出题有多神. (虽然感觉还是吹过头了) 开了场 Virt ...

  9. OpenCV Error: Unknown error code -10 (Raw image encoder error: Empty JPEG image (DNL not supported)) in throwOnEror 错误

    出现上面这样的错误可以肯定是传了空指针导致的, 刚开始出现这样的问题, 并且是概率性的, 网上找了一遍都没找到解决方案, 然后自己一行一行代码注释, 发现还是会出现这样的问题, 当时就懵逼了, 我从打 ...

  10. [2019BUAA软工助教]助教学期总结

    [2019BUAA软工助教]助教学期总结 一.量化自评 线上 博客点评:https://www.cnblogs.com/ChildishChange/MyComments.html 共 106 条 博 ...