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变量作用域详解
Dec 06 Javascript
javascript 用函数语句和表达式定义函数的区别详解
Jan 06 Javascript
不使用jquery实现js打字效果示例分享
Jan 19 Javascript
在JavaScript中使用timer示例
May 08 Javascript
使用jQuery不判断浏览器高度解决iframe自适应高度问题
Dec 16 Javascript
基于jQuery实现网页打印功能
Dec 01 Javascript
JavaScript的String字符串对象常用操作总结
May 26 Javascript
使用vue-cli webpack 快速搭建项目的代码
Nov 21 Javascript
js嵌套的数组扁平化:将多维数组变成一维数组以及push()与concat()区别的讲解
Jan 19 Javascript
jquery+ajax实现异步上传文件显示进度条
Aug 17 jQuery
微信小程序 接入腾讯地图的两种写法
Jan 12 Javascript
插件导致ECharts被全量引入的坑示例解析
Sep 23 Javascript
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中将数组转成字符串并保存到数据库中的函数代码
2013/09/29 PHP
php foreach循环中使用引用的问题
2013/11/06 PHP
PHP简单实现断点续传下载的方法
2015/09/25 PHP
php使用pdo连接sqlite3的配置示例
2016/05/27 PHP
PHP获取不了React Native Fecth参数的解决办法
2016/08/26 PHP
基于thinkPHP3.2实现微信接入及查询token值的方法
2017/04/18 PHP
Django中的cookie与session操作实例代码
2017/08/17 PHP
Jquery知识点一 Jquery的ready和Dom的onload的区别
2011/01/15 Javascript
鼠标右击事件代码(asp.net后台)
2011/01/27 Javascript
js 鼠标移动显示图片的简单实例
2013/12/25 Javascript
使用npm发布Node.JS程序包教程
2015/03/02 Javascript
详解用vue.js和laravel实现微信支付
2017/06/23 Javascript
详解在Javascript中进行面向切面编程
2019/04/28 Javascript
微信小程序后端实现授权登录
2020/02/24 Javascript
使用vue-cli3+typescript的项目模板创建工程的教程
2020/02/28 Javascript
小程序跳转H5页面的方法步骤
2020/03/06 Javascript
Python cookbook(数据结构与算法)将序列分解为单独变量的方法
2018/02/13 Python
Python网络编程基于多线程实现多用户全双工聊天功能示例
2018/04/10 Python
python实现自动登录
2018/09/17 Python
详解Python logging调用Logger.info方法的处理过程
2019/02/12 Python
浅谈PYTHON 关于文件的操作
2019/03/19 Python
Django处理Ajax发送的Get请求代码详解
2019/07/29 Python
window环境pip切换国内源(pip安装异常缓慢的问题)
2019/12/31 Python
python通过文本在一个图中画多条线的实例
2020/02/21 Python
Python GUI编程学习笔记之tkinter中messagebox、filedialog控件用法详解
2020/03/30 Python
使用Python+Appuim 清理微信的方法
2021/01/26 Python
CSS3动画之流彩文字效果+图片模糊效果+边框伸展效果实现代码合集
2017/08/18 HTML / CSS
HTML5中使用json对象的实例代码
2018/09/10 HTML / CSS
STRATHBERRY苏贝瑞包包官网:西班牙高级工匠手工打造
2020/11/10 全球购物
优良学风班申请材料
2014/02/13 职场文书
师德模范事迹材料
2014/06/03 职场文书
乡镇防汛工作汇报
2014/10/28 职场文书
公务员个人年终总结
2015/02/12 职场文书
结婚通知短信大全
2015/04/17 职场文书
Pyhton模块和包相关知识总结
2021/05/12 Python
kubernetes集群搭建Zabbix监控平台的详细过程
2022/07/07 Servers