<!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. python生产者和消费者模式实现(三)进程池方式

    注意:如果要使用Pool(进程池方式)创建进程,就需要使用multiprocessing.Manager()中的 Queue(),而不是multiprocessing.Queue() import t ...

  2. 函数的名称空间,函数的嵌套(global, nonlocal),函数名的运用

    一 函数的名称空间 内置空间:存放python解释器内置函数的空间 全局空间:py文件运行时开辟的,存放的是执行的py文件(出去函数内部)的所有的变量与值的对用关系,整个py文件结束后才会消失. 局部 ...

  3. springboot + shiro + mysql + mybatis 工程快速搭建

    1. 新建 springboot 工程 2. 随便起个名字 3. 初始化工程 4. 导入 shiro 和 thymeleaf 依赖 <!-- thymeleaf依赖 --> <dep ...

  4. RSA 登陆加密与解密

    最近公司项目验收后,客户请来的信息安全技术人员对我们的网站进行了各种安全测试与排查问题,其中就有一个登陆时的加密问题.本来如果只是单纯的加密,可以直接在前台用MD5加密,将加密的值添加到数据库即可.但 ...

  5. Java学习笔记（1）--- 简介

    简介: 注:和之前的C不一样,本人没有学过java,所以内容上可能会相对详细一些. 主要特性: 1.这跟c++一样是面对对象语言: Java语言提供类.接口和继承等面向对象的特性,为了简单起见,只支持 ...

  6. 【洛谷P4251】[SCOI2015]小凸玩矩阵（二分+二分图匹配）

    洛谷 题意: 给出一个\(n*m\)的矩阵\(A\).现要从中选出\(n\)个数,任意两个数不能在同一行或者同一列. 现在问选出的\(n\)个数中第\(k\)大的数的最小值是多少. 思路: 显然二分一 ...

  7. pytroch 权重初始化和加载词向量的方法

    1.几种不同的初始化方法 import torch.nn as nn embedding = torch.Tensor(3, 5) #如下6种初始化方法 #正态分布 nn.init.normal_(e ...

  8. python将xml文件数据增强（labelimg）

    在处理faster-rcnn和yolo时笔者使用labelimg标注图片 但是我们只截取了大概800张左右的图,这个量级在训练时肯定是不够的,所以我们需要使用数据增强(无非是旋转加噪调量度)来增加我们 ...

  9. MySQL实战45讲学习笔记：第三十八讲

    一.本节内容 我在上一篇文章末尾留给你的问题是:两个 group by 语句都用了 order by null,为什么使用内存临时表得到的语句结果里,0 这个值在最后一行:而使用磁盘临时表得到的结果里 ...

  10. CentOS6.9安装SonarQube7.6

    1 安装前准备 Java (Oracle JRE 8 or OpenJDK 8) MySQL5.6 or MySQL5.7,具体可参考Centos6.9安装MySQL5.6 SonarQube7.6, ...