<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. 【剑指offer】从上向下打印二叉树

    转载请注明出处:http://blog.csdn.net/ns_code/article/details/26089165 剑指offer上的第23题,实际上就是考察二叉树的层序遍历,详细思想能够參考 ...

  2. JavaWeb图表插件的小研究

    背景 近期的一个项目中,对数据的统计分析有非常大的要求,这就要求有一款非常强大的报表.图表插件.因此,组长给分了任务.让我们各自去研究不同的图表插件.用了一两天的时间,对java这块的图表插件做了一个 ...

  3. java常用内存设置

    Java虚拟机具有一个堆,是运行时的数据区域,所有类实例和数组内存均从此处分配.堆是在java虚拟机启动时创建的. 堆是留给开发人员用的内存区域.非堆就是JVM留给自己用的(方法区,JVM内部处理或优 ...

  4. QT在Windows控制台下输出

    原地址:http://blog.csdn.net/fjb2080/article/details/9013047 在windows的控制台下输出,需要在pro文件中加入: CONFIG += cons ...

  5. Mac os 进行Android开发笔记（2）

    Mac OS X 下开发 Android  1> MAC OS Android环境搭建: 2>MAC OS  配置 Andoid ADB: 3>MAC OS 上进行Android真机 ...

  6. perl eval函数

    29.2.32 eval • eval BLOCK • eval EXPR • eval eval 关键字在Perl 里起两种不同的但相关的作用.这些目的是用两种形式的语法 来表现的, eval BL ...

  7. MFC画二维动态图表[GDI]

    源博客:http://www.codeproject.com/Articles/9350/2D-Animated-Charts 源代码:http://download.csdn.net/detail/ ...

  8. 原始的js代码和jquery对比

    Even a task as simple as this can be complicated without jQuery at our disposal. In plain JavaScript ...

  9. SDUTOJ 1489 求二叉树的先序遍历

    <img src="http://img.blog.csdn.net/20141014212549703?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi ...

  10. java.util.Queue用法

    队列是一种特殊的线性表,它只允许在表的前端(front)进行删除操作,而在表的后端(rear)进行插入操作.进行插入操作的端称为队尾,进行删除操作的端称为队头.队列中没有元素时,称为空队列. 在队列这 ...