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 相关文章推荐
一些技巧性实用js代码小结
Oct 14 Javascript
event对象获取方法总结在google浏览器下测试
Nov 03 Javascript
引用外部脚本时script标签关闭的写法
Jan 20 Javascript
jquery实现pager控件示例
Apr 09 Javascript
jQuery获得子元素个数的方法
Apr 14 Javascript
javascript实现状态栏中文字动态显示的方法
Oct 20 Javascript
js实现遍历含有input的table实例
Dec 07 Javascript
jQuery获取访问者IP地址的方法(基于新浪API与QQ查询接口)
May 25 Javascript
基于axios封装fetch方法及调用实例
Feb 05 Javascript
BootStrap table实现表格行拖拽效果
Dec 01 Javascript
inquirer.js一个用户与命令行交互的工具详解
May 18 Javascript
Javascript三种字符串连接方式及性能比较
May 28 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
windows下PHP APACHE MYSQ完整配置
2007/01/02 PHP
php基于session实现数据库交互的类实例
2015/08/03 PHP
smarty简单应用实例
2015/11/03 PHP
Yii2下session跨域名共存的解决方案
2017/02/04 PHP
PHP中非常有用却鲜有人知的函数集锦
2019/08/17 PHP
yii 框架实现按天,月,年,自定义时间段统计数据的方法分析
2020/04/04 PHP
Three.js源码阅读笔记(Object3D类)
2012/12/27 Javascript
基于jquery自定义的漂亮单选按钮RadioButton
2013/11/19 Javascript
jQuery选择器之基本选择器与层次选择器
2015/03/03 Javascript
Jquery使用val方法读写value值
2015/05/18 Javascript
JavaScript取得WEB安全颜色列表的方法
2015/07/14 Javascript
理解javascript中的严格模式
2016/02/01 Javascript
Javascript的表单验证-提交表单
2016/03/18 Javascript
快速掌握jQuery插件开发
2017/01/19 Javascript
input 标签实现输入框带提示文字效果(两种方法)
2017/10/09 Javascript
详解python中asyncio模块
2018/03/03 Python
Python3.6简单反射操作示例
2018/06/14 Python
在windows下使用python进行串口通讯的方法
2019/07/02 Python
python实现两个字典合并,两个list合并
2019/12/02 Python
Python imageio读取视频并进行编解码详解
2019/12/10 Python
selenium+python实现自动登陆QQ邮箱并发送邮件功能
2019/12/13 Python
python通过对字典的排序,对json字段进行排序的实例
2020/02/27 Python
Python3 mmap内存映射文件示例解析
2020/03/23 Python
Python RabbitMQ实现简单的进程间通信示例
2020/07/02 Python
Python爬虫新手入门之初学lxml库
2020/12/20 Python
法国家具及室内配件店:home24
2017/01/21 全球购物
世界上最大的糖果店:Dylan’s Candy Bar
2017/11/07 全球购物
澳大利亚最好的电动自行车:Leon Cycle
2020/12/19 全球购物
static全局变量与普通的全局变量有什么区别?static局部变量和普通局部变量有什么区别?static函数与普通函数有什么区别?
2015/02/22 面试题
幼儿园教研活动方案
2014/01/19 职场文书
119消防日活动总结
2014/08/29 职场文书
先进班集体事迹材料
2014/12/25 职场文书
表扬稿范文
2015/01/17 职场文书
原告离婚代理词
2015/05/23 职场文书
八年级作文之友情
2019/11/25 职场文书
Linux中各个目录的作用与内容
2022/06/28 Servers