jQuery基本筛选选择器实例代码


Posted in Javascript onFebruary 06, 2017

本文实例为大家分享了jQuery基本筛选选择器的具体代码,供大家参考,具体内容如下

<!DOCTYPE html>
<html>

<head>
  <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
  <title></title>
  <link rel="stylesheet" href="imooc.css" type="text/css">
  <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
</head>

<body>
  <h2>基本筛选器</h2>
  <h3>:first/:last/:even/:odd</h3>
  <div class="left">
    <div class="div">
      <p>div:first</p>
      <p>:even</p>
    </div>
    <div class="div">
      <p>:odd</p>
    </div>
    <div class="div">
      <p>:even</p>
    </div>
    <div class="div">
      <p>:odd</p>
    </div>
    <div class="div">
      <p>:even</p>
    </div>
    <div class="div">
      <p>div:last</p>
      <p>:odd</p>
    </div>
  </div>
  <script type="text/javascript">
  //找到第一个div
  $(".div:first").css("color", "#CD00CD");
  </script>

  <script type="text/javascript">
  //找到最后一个div
  $(".div:last").css("color", "#CD00CD");
  </script>

  <script type="text/javascript">
  //:even 选择所引值为偶数的元素,从 0 开始计数
  $(".div:even").css("border", "3px groove red");
  </script>

  <script type="text/javascript">
  //:odd 选择所引值为奇数的元素,从 0 开始计数
  $(".div:odd").css("border", "3px groove blue");
  </script>


  <h3>:eq/:gt/:lt</h3>
  <div class="left">
    <div class="aaron">
      <p>:lt(3)</p>
    </div>
    <div class="aaron">
      <p>:lt(3)</p>
    </div>
    <div class="aaron">
      <p>:eq(2)</p>
    </div>
    <div class="aaron">
    </div>
    <div class="aaron">
      <p>:gt(3)</p>
    </div>
    <div class="aaron">
      <p>:gt(3)</p>
    </div>
  </div>
  <script type="text/javascript">
  //:eq
  //选择单个
  $(".aaron:eq(2)").css("border", "3px groove blue");
  </script>

  <script type="text/javascript">
  //:gt 选择匹配集合中所有索引值大于给定index参数的元素
  $(".aaron:gt(3)").css("border", "3px groove blue");
  </script>

   <script type="text/javascript">
  //:lt 选择匹配集合中所有索引值小于给定index参数的元素
  //与:gt相反
  $(".aaron:lt(2)").css("color", "#CD00CD");
  </script>

  <h3>:not</h3>
  <div class="left">
    <div>
      <input type="checkbox" name="a" />
      <p>Aaron</p>
    </div>
    <div>
      <input type="checkbox" name="b" />
      <p>慕课</p>
    </div>
    <div>
      <input type="checkbox" name="c" checked="checked" />
      <p>其他</p>
    </div>
  </div>
  <script type="text/javascript">
    //:not 选择所有元素去除不匹配给定的选择器的元素
    //选中所有紧接着没有checked属性的input元素后的p元素,赋予颜色
    $("input:not(:checked) + p").css("background-color", "#CD00CD");
  </script>
</body>

</html>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript获取隐藏dom的宽高 具体实现
Jul 14 Javascript
JavaScript中的数值范围介绍
Dec 29 Javascript
使用js复制链接中的部分文字的方法
Jul 30 Javascript
jQuery实现的产品自动360度旋转展示特效源码分享
Aug 21 Javascript
vue.js 获取当前自定义属性值
Jun 01 Javascript
使用JS实现图片轮播的实例(前后首尾相接)
Sep 21 Javascript
jQuery实现的简单拖拽功能示例【测试可用】
Aug 14 jQuery
一次Webpack配置文件的分离实战记录
Nov 30 Javascript
从vue源码看props的用法
Jan 09 Javascript
在vue项目中使用Jquery-contextmenu插件的步骤讲解
Jan 27 jQuery
JS前端知识点offset,scroll,client,冒泡,事件对象的应用整理总结
Jun 27 Javascript
vue实现验证用户名是否可用
Jan 20 Vue.js
jQuery层级选择器实例代码
Feb 06 #Javascript
jQuery元素选择器实例代码
Feb 06 #Javascript
对称加密与非对称加密优缺点详解
Feb 06 #Javascript
jquery实现input框获取焦点的方法
Feb 06 #Javascript
jQuery表单元素选择器代码实例
Feb 06 #Javascript
Jquery鼠标放上去显示全名的实现方法
Feb 06 #Javascript
如何获取元素的最终background-color
Feb 06 #Javascript
You might like
PHP中的正规表达式(一)
2006/10/09 PHP
php面向对象全攻略 (十一)__toString()用法 克隆对象 __call处理调用错误
2009/09/30 PHP
PHP 开发环境配置(测试开发环境)
2010/04/28 PHP
php递归实现无限分类生成下拉列表的函数
2010/08/08 PHP
JavaScript 一行代码,轻松搞定浮动快捷留言-V2升级版
2010/04/02 Javascript
js实现动态改变字体大小代码
2014/01/02 Javascript
js和css写一个可以自动隐藏的悬浮框
2014/03/05 Javascript
Egret引擎开发指南之发布项目
2014/09/03 Javascript
JQuery判断radio(单选框)是否选中和获取选中值方法总结
2015/04/15 Javascript
Jquery动态添加输入框的方法
2015/05/29 Javascript
jQuery ajax分页插件实例代码
2016/01/27 Javascript
Javascript中函数名.length属性用法分析(对比arguments.length)
2016/09/16 Javascript
详解nodejs 文本操作模块-fs模块(五)
2016/12/23 NodeJs
jQuery插件form-validation-engine正则表达式操作示例
2017/02/09 Javascript
Javascript实现信息滚动效果
2017/05/18 Javascript
js canvas实现适用于移动端的百分比仪表盘dashboard
2017/07/18 Javascript
ES6学习教程之模板字符串详解
2017/10/09 Javascript
vue 之 css module的使用方法
2018/12/04 Javascript
Vuex实现数据增加和删除功能
2019/11/11 Javascript
python 简易计算器程序,代码就几行
2009/08/29 Python
用Python给文本创立向量空间模型的教程
2015/04/23 Python
python单元测试unittest实例详解
2015/05/11 Python
用ReactJS和Python的Flask框架编写留言板的代码示例
2015/12/19 Python
python复制文件到指定目录的实例
2018/04/27 Python
Python 生成 -1~1 之间的随机数矩阵方法
2018/08/04 Python
Python给定一个句子倒序输出单词以及字母的方法
2018/12/20 Python
python生成带有表格的图片实例
2019/02/03 Python
pandas.read_csv参数详解(小结)
2019/06/21 Python
python读出当前时间精度到秒的代码
2019/07/05 Python
Python实现简单猜数字游戏
2021/02/03 Python
任意一块网页内容实现“活”的背景(目前火狐浏览器专有)
2014/05/07 HTML / CSS
css3实现平移效果(transfrom:translate)的示例
2020/11/13 HTML / CSS
周仰杰(JIMMY CHOO)英国官方网站:闻名世界的鞋子品牌
2018/10/28 全球购物
如何用Java实现列出某个目录下的所有子目录
2015/07/20 面试题
爱国主义电影观后感
2015/06/18 职场文书
解析mybatis-plus中的resultMap简单使用
2021/11/23 Java/Android