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 相关文章推荐
分享一个自己写的table表格排序js插件(高效简洁)
Oct 29 Javascript
如何将JS的变量值传递给ASP变量
Dec 10 Javascript
JavaScript字符串对象replace方法实例(用于字符串替换或正则替换)
Oct 16 Javascript
JavaScript实现俄罗斯方块游戏过程分析及源码分享
Mar 23 Javascript
JavaScript在Android的WebView中parseInt函数转换不正确问题解决方法
Apr 25 Javascript
javascript与jquery中的this关键字用法实例分析
Dec 24 Javascript
使用RequireJS库加载JavaScript模块的实例教程
Jun 06 Javascript
jQuery旋转插件jqueryrotate用法详解
Oct 13 Javascript
Angularjs 1.3 中的$parse实例代码
Sep 14 Javascript
微信小程序提交form操作示例
Dec 30 Javascript
详解如何使用微信小程序云函数发送短信验证码
Mar 13 Javascript
Vue-router编程式导航的两种实现代码
Mar 04 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
如何开发一个虚拟域名系统
2006/10/09 PHP
IIS6.0中配置php服务全过程解析
2013/08/07 PHP
PHP查找数值数组中不重复最大和最小的10个数的方法
2015/04/20 PHP
JS的反射问题
2010/04/07 Javascript
jquery弹出关闭遮罩层实例
2013/08/06 Javascript
用Javascript获取页面元素的具体位置
2013/12/09 Javascript
jquery中push()的用法(数组添加元素)
2014/11/25 Javascript
jQuery中slice()方法用法实例
2015/01/07 Javascript
JS实现自动切换文字的导航效果代码
2015/08/27 Javascript
jQuery操作iframe中js函数的方法小结
2016/07/06 Javascript
AngularJS ng-bind 指令简单实现
2016/07/30 Javascript
js前端面试题及答案整理(一)
2016/08/26 Javascript
JS排序之选择排序详解
2017/04/08 Javascript
vue 子组件向父组件传值方法
2018/02/26 Javascript
浅析vue-router原理
2018/10/19 Javascript
Nodejs 数组的队列以及forEach的应用详解
2021/02/25 NodeJs
python在windows命令行下输出彩色文字的方法
2015/03/19 Python
python爬虫爬取淘宝商品信息
2018/02/23 Python
python用户管理系统
2018/03/13 Python
pandas使用apply多列生成一列数据的实例
2018/11/28 Python
tensorflow使用指定gpu的方法
2020/02/04 Python
python GUI库图形界面开发之PyQt5滑块条控件QSlider详细使用方法与实例
2020/02/28 Python
详解pycharm配置python解释器的问题
2020/10/15 Python
浅谈HTML5新增及移除的元素
2016/06/27 HTML / CSS
HTML5 embed标签定义和用法详解
2014/05/09 HTML / CSS
瑜伽国际:Yoga International
2018/04/18 全球购物
某IT外企面试题-二分法求方程!看看大家的C++功底
2015/07/04 面试题
介绍一下内联、左联、右联
2013/12/31 面试题
业务副厂长岗位职责
2014/01/03 职场文书
高三英语教学反思
2014/01/13 职场文书
机关门卫制度
2014/02/01 职场文书
六一儿童节活动总结
2014/08/27 职场文书
2014入党积极分子破除“四风”思想汇报
2014/09/14 职场文书
公司环境卫生管理制度
2015/08/05 职场文书
党校团干班培训心得体会
2016/01/06 职场文书
嵌入式Redis服务器在Spring Boot测试中的使用教程
2021/07/21 Redis