HTML示例代码

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--HTML区域-->
<h1>第一个标题</h1>
<div class="nav-2014">
<div class="w">
<div class="w-spacer"></div>
<div class="categorys">
<div class="dt">家用电器分类</div>
</div>
<span class="hr"></span>
<div class="navitems-2014">
<div id="treasure"></div>
<span class="clr"></span>
<span class="chr"></span>
男:<input type="checkbox" checked="checked" value="nan">
女:<input type="checkbox" value="nv">
</div>
</div>
</div>
<h2>第二个标题</h2>
<div id="electronic">
<div id="firstScreen">1
<div class="w">2</div>
</div>
<ul>
<div class="u_c" lang="en-us"></div>
<li class="ui-switch-curr"></li>
<li class="ui-switch-item"></li>
<li class="ui-switch-next"></li>
<li class="ui-switch-sub"></li>
</ul>
<div class="secord_screen"></div>
<div class="third_screen"></div>
</div>
</body>
</html>

  伪类选择器:即以:开头的

  :first  获取第一个元素

  :not(selector) 去除所有选定的元素

  :even 匹配索引为偶数的元素

  :odd 匹配索引为奇数的元素

  :eq(index) 匹配给定的索引

  :gt(index) 大于指定的索引

  :lt(index) 小于指定的索引

  :last 匹配获取的最后一个元素

  :header 匹配所有标题元素

  示例:

    <!--jquery区域-->
<script src="jquery-3.1.0.js"></script>
<script>
// 获取id为electronic下所有孩子div中的第一个,即id为firstScreen的div
$("#electronic > div:first")
// 获取所有li元素中最后一个元素
$("li:last")
// 获取所有input元素中非checked的元素,即女:<input type="checkbox" value="nv">
$("input:not(:checked)")
// 获取所有li元素中索引为0,2,4...的元素
$("li:even")
// 获取所有li元素中索引为1,3,5...的元素
$("li:odd")
// 获取所有li元素中索引为1的元素
$("li:eq(1)")
// 获取所有li元素中索引大于1的元素
$("li:gt(1)")
// 获取所有li元素中索引小于1的元素
$("li:lt(1)")
// 给所有标题加上背景色
$(":header").css("background","red")
console.log(cls)
</script>

  

jquery选择器之基本筛选器的更多相关文章

  1. jQuery选择器之基本筛选选择器

    <h2>基本筛选器</h2> <h3>:first/:last/:even/:odd</h3> <div class="left&quo ...

  2. jquery选择器之基本筛选选择

    1.基本选择器 2.内容筛选选择器 3.可见性筛选选择器 4.属性筛选选择器 5.子元素筛选选择器 6.表单元素选择器 7.表单对象属性筛选器

  3. jQuery选择器之属性筛选选择器

    在这么多属性选择器中[attr="value"]和[attr*="value"]是最实用的 [attr="value"]能帮我们定位不同类型 ...

  4. jQuery查找标签--选择器,筛选器,模态对话框, 左侧菜单栏

    查找标签 选择器: 基本选择器(同css) id选择器 $("#id") 标签选择器 $('tagName') class选择器 $(".className") ...

  5. jQuery选择器之表单对象属性筛选选择器

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-type" content ...

  6. 解密jQuery内核 Sizzle引擎筛选器 - 位置伪类(一)

    本章开始分析过滤器,根据API的顺序来 主要涉及的知识点 jQuery的组成 pushStack方法的作用 sizzle伪类选择器 首页我们知道jQuery对象是一个数组对象 内部结构 jQuery的 ...

  7. jQuery选择器之全面总结

    选择器是jQuery的根基,在jQuery中,对事件处理,遍历DOM和Ajax操作都依赖于选择器.如果能熟练的使用选择器,不仅能简化代码,而且可以达到事半功倍的效果. jQuery中的选择器完全继承了 ...

  8. jQuery选择器之表单元素选择器

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-type" content ...

  9. jQuery选择器之属性选择器Demo

    测试代码: 06-属性选择器.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &quo ...

随机推荐

  1. 百度地图 判断marker是否在多边形内

    昨天画了圆形,判marker是否存在圆形内.今天来画多边形,判断marker在多边形内. 需要引入一个js      <script type="text/javascript&quo ...

  2. MTF(Move-to-front transform)数据转换

    1.什么是MTF MTF(move-to-front)是一种数据编码方式,用于提高数据压缩技术效果. 在数据压缩算法中,MTF可以作为一个额外的步骤.也就是说 ,可以先进行MTF编码,在进行数据压缩. ...

  3. Quartz 基本概念及原理

    最近项目要用quartz,所以记录一下: 概念   Quartz是OpenSymphony开源组织在Job scheduling领域又一个开源项目,它可以与J2EE与J2SE应用程序相结合也可以单独使 ...

  4. [笔记]JavaScript获得对象属性个数的方法

    //扩展对象的count方法 Object.prototype.count = ( Object.prototype.hasOwnProperty(‘__count__’) ) ? function ...

  5. SQL Server中开发常用的数据类型

    我们在日常开发过程中,在进行数据库设计的时候,经常会遇到如果选择数据类型的问题,选择什么样的数据类型最合适,然后当我们在项目中建立对应实体的时候,如何选择对应的CLR类型.针对这些问题,于是这篇文章诞 ...

  6. iOS开发拓展篇—音频处理(音乐播放器4)

    iOS开发拓展篇—音频处理(音乐播放器4) 说明:该文主要介绍音乐播放器实现过程中的一些细节控制. 实现的效果: 一.完整的代码 YYPlayingViewController.m文件 // // Y ...

  7. Makefile三个有用变量$@,$^,$<

    $@:目标文件 $^:所有的依赖文件 $<:第一个依赖文件 使用上面三个变量就可以简化我们的Makefile文件: #简化后的Makefile main : main.o log.o test_ ...

  8. QT快速使用ntohs

    QT快速使用ntohs,需要注意3点:1. ntohs只是转换相邻的2个字节2. 引入头文件#include <windows.h>3. 需要加上win32{LIBS+=-lws2_32} ...

  9. IT公司100题-27-跳台阶问题

    问题描述: 一个台阶总共有n阶,一次可以跳1级或者2级.求总共有多少种跳法.   分析: 用f(n)表示n阶台阶总共有多少种跳法.n阶台阶,第一可以选择跳1阶或者2阶,则f(n) = f(n-1) + ...

  10. .Net中的加密与解密

    加密与解密概述 加密与解密属于数据安全的范畴.在消息传输时,通过对消息进行特殊编码(加密),建立一种安全的交流方式,使得只有发送者所期望的接收者能够理解(解密).这里我们定义一个场景:发送方,接收方, ...