<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <!--jQuery选择器详解
根据所获取页面中元素的不同，可以将jQuery选择器分为：基本选择器、层次选择器、过滤选择器、表单选择器四大类。其中，在过滤选择器中有可以分为：简单过滤选择器、内容过滤选择器、可见性过滤选择器、属性过滤选择器、子元素过滤选择器、表单对象属性过滤选择器6种

1.简单过滤选择器：根据某类过滤规则进行元素的匹配，书写时都以冒号（：）开头；简单过滤选择器是过滤选择器中使用最广泛的一种

-->
    <title>使用jQuery基本过滤选择器</title>
    <!--使用jQuery基本过滤选择器选择元素：在页面中，设置一个<h1>标记用户显示主题，创建<ul>标记并在其中放置四个<li>,再创建一个<span>标记，用于执行动画效果。通过简单过滤选择器获取元素，将选中的元素改变其类名称，从而突出其被选中的状态-->
    <script src="jquery-1.9.1.js" type="text/javascript"></script>
    <style type="text/css">
    body{font-size:12px;text-align:center;}
    div{width:240px;height:83px;border:solid 1px #eee}
    he{font-size:13px;}
    ul{list-style-type:none;padding:0px}
    .DefClass,.NotClass{height:23px;width:60px;line-height:23px;float:left;border-top:solid 1px #eee;border-bottom:solid 1px #eee}
    .GetFocus{width:58px;border:solid 1px #666;background-color:#eee}
    #spnMove{width:234px;height:23px;line-height:23px;}
    </style>

<script type="text/javascript">
        $(function () {  //增加第一个元素的类别
            $('li:first').addClass('GetFocus');
        })
        $(function () {  //增加最后一个元素的类别
            $('li:last').addClass('GetFocus');
        })
        $(function () {  //增加去除所有与给定选择器匹配的元素类别
            $('li:not(.NotClass)').addClass('GetFocus');
        })
        $(function () {  //增加所有索引值为偶数的元素类别，从0开始计数
            $('li:even').addClass('GetFocus');
        })
        $(function () {  //增加所有索引值为奇数的元素类别，从0开始计数
            $('li:odd').addClass('GetFocus');
        })
        $(function () {  //增加一个给定索引值的元素类别，从0开始计数
            $('li:eq(1)').addClass('GetFocus');
        })
        $(function () {  //增加所有大于给定索引值的元素类别，从0开始计数
            $('li:gt(1)').addClass('GetFocus');
        })
        $(function () {  //增加所有小于给定索引值的元素类别，从0开始计数
            $('li:lt(4)').addClass('GetFocus');
        })
        $(function () {  //增加标题类元素类别
            $('div h1').css('width', '238');
            $(':header').addClass('GetFocus');
        })
        $(function () {
            animateIt();  //增加动画效果元素类别
            $('#spnMove:animated').addClass('GetFocus');
        })
        function animateIt() {  //动画效果
            $('#spnMove').slideToggle('slow', animateIt);
                }
         
    </script>
</head>
<body>
<div>
<h1>基本过滤选择器</h1>
<ul>
<li class="DefClass">Item 0</li>
<li class="DefClass">Item 1</li>
<li class="NotClass">Item 2</li>
<li class="DefClass">Item 3</li>
</ul>
<span id="spnMove">Span Move</span>
</div>
</body>
</html>

jQuery简单过滤选择器的更多相关文章

  1. jQuery 简单过滤选择器

    <!DOCTYPE HTML> <html> <head> <title> 使用jQuery基本过滤选择器 </title> <scr ...

  2. jQuery基本过滤选择器

    jQuery基本过滤选择器: <h1>this is h1</h1> <div id="p1"> <h2>this is h2< ...

  3. Jquery的过滤选择器分为哪几种？

    Jquery的过滤选择器分为哪几种? 转载▼ 标签: jquery 过滤选择器 分类 分类: JQuery 所有的过滤选择器分为哪几种: 一.基本过滤选择器(重点掌握下列八个) :first 选取第一 ...

  4. 第一百六十五节，jQuery，过滤选择器

    jQuery,过滤选择器 学习要点: 1.基本过滤器 2.内容过滤器 3.可见性过滤器 4.子元素过滤器 5.其他方法 过滤选择器简称:过滤器.它其实也是一种选择器,而这种选择器类似与 CSS3 (h ...

  5. jquery :checked(过滤选择器) 和 空格:checked(后代选择器)

    jquery 过滤选择器 和 后代选择器 <%@ page language="java" contentType="text/html; charset=UTF- ...

  6. JQuery 可见性过滤选择器

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...

  7. JQuery 内容过滤选择器

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...

  8. jQuery内容过滤选择器与子元素过滤选择器用法实例分析

    jQuery选择器内容过滤 一.:contains(text) 选择器::contains(text)描述:匹配包含给定文本的元素返回值:元素集合 示例: ? 1 2 $("div.mini ...

  9. jquery :checked(过滤选择器) 和 空格:checked(后代选择器)【转】

    jquery 过滤选择器 和 后代选择器 <%@ page language="java" contentType="text/html; charset=UTF- ...

随机推荐

  1. 读取中兴3G告警log告警文件到集合

    1.文件格式 ALARM_ID=102305_404205 EVENT_TIME=-- :: NOTIFICATION_TYPE= MANAGED_OBJECT_INSTANCE=NodeId=,Bs ...

  2. C/C++：多个.cpp文件包括同一个.h头文件定义方法

    本文解决multiple definition of `XX'的错误.[出于反爬虫的目的,你不是在http://blog.csdn.net/zhanh1218上看到的,肯定不是最新最全的.] 关于头文 ...

  3. Codeforces Round #277 (Div. 2) 题解

    Codeforces Round #277 (Div. 2) A. Calculating Function time limit per test 1 second memory limit per ...

  4. SPARK在linux中的部署，以及SPARK中聚类算法的使用

    眼下,SPARK在大数据处理领域十分流行.尤其是对于大规模数据集上的机器学习算法.SPARK更具有优势.一下初步介绍SPARK在linux中的部署与使用,以及当中聚类算法的实现. 在官网http:// ...

  5. Python中的继承

    继承: 面向对象程序语言的一个重要特点是继承.继承提供了在已存在类的基础上创建新类的方法.继承的子类 拥有被继承的父类的所有方法,在此基础上,子类还可以添加自己的专有方法.继承是类的强有力的特点.一些 ...

  6. 转换函数CONVERSION_EXIT_TSTRN_OUTPUT

    CONVERSION_EXIT_TSTRN_OUTPUT 在路线表TVRO中字段TDVZND 运输提前时间,取出来的数值没有转换,需要此函数进行转换.如14400,000  转换后为14,400:00 ...

  7. Hbase初体验

    搭建local模式搭建, 官网:http://hbase.apache.org API:http://hbase.apache.org/apidocs/index.html download:http ...

  8. 采用管道处理HTTP请求

    采用管道处理HTTP请求 之所以称ASP.NET Core是一个Web开发平台,源于它具有一个极具扩展性的请求处理管道,我们可以通过这个管道的定制来满足各种场景下的HTTP处理需求.ASP. NET ...

  9. J2EE SSH学习（二）安装Eclipse插件和第一个Eclipse项目

    (一)安装Eclipse插件 Eclipse有很多功能很强大的插件,我现在作为一个菜鸟只知道插件的功能通常都很牛叉实用或者很有趣,那么该怎么安装Eclipse插件呢? 我使用的是Eclipse 4.3 ...

  10. Spring2.5学习3.3_@Autowire注解实现手动装配

    @Autowired默认按类型装配,假设我在personDao 字段上加了@Autowired注解,那么就会默认取personDao 字段的类型在Spring容器中寻找与这个类型匹配的bean,寻找到 ...