<!DOCTYPE HTML>

<html>

<head>

    <title> 使用jQuery基本过滤选择器 </title>

    <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></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="spanMove">Span Move</span>

    </div>

</body>

</html>
body{

    font-size:12px;

    text-align:center

}

div{

    width:241px;

    height:83px;

    border:solid 1px #ccc

}

h1 {

    font-size:13px

}

ul {

    list-style-type:none;padding:0px

}

.DefClass,.NotClass{

    width:60px;

    height:23px;

    line-height:23px;

    float:left;

    border-top:solid 1px #eee;

    border-bottom:solid 1px #eee

}

.GetFocus{

    width:58px;

    border-bottom:solid 1px #666;

    background-color:#eee

}

#spanMove{

    width:238px;

    height:23px;

    line-height:23px

}
$(function (){//jQuery代码

1.  ul中的第一个li元素添加样式；

  $("ul li:first").addClass("GetFocus");

  $("ul li").first().addClass("GetFocus");

2.  ul中的最后一个li元素添加样式；

  $("ul li:last").addClass("GetFocus");

  $("ul li").last().addClass("GetFocus");

3.   ul中的非class=“NotClass” li元素添加样式；

  $("ul li:not(.NotClass)").addClass("GetFocus");

4.  ul中的 li索引值为偶数的元素添加样式；从0开始计数

  $("ul li:even").addClass("GetFocus");

5.  ul中的 li索引值为奇数的元素添加样式；从0开始计数

  $("ul li:odd").addClass("GetFocus");

6.增加一个给定索引值的元素类别，从0开始计数

  $("li:eq(1)").addClass("GetFocus");

7.增加所有大于给定索引值的元素类别，从0开始计数

  $("li:gt(1)").addClass("GetFocus");

8.增加所有小于给定索引值的元素类别，从0开始计数

   $("li:lt(4)").addClass("GetFocus");

9.//增加标题类元素类别

   $("div h1").css("width","238");

    $(":header").addClass("GetFocus");

})

1.  

2.

3.

4.

5.

6.

7.

8.

9.

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

  1. jQuery简单过滤选择器

    <html xmlns="http://www.w3.org/1999/xhtml"> <head>     <!--jQuery选择器详解 根据所获 ...

  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. next()与nextLine的区别

    next():    1.一定要读取到有效字符后才可以结束输入.    2.对输入有效字符之前遇到的空白,next() 方法会自动将其去掉.    3.只有输入有效字符后才将其后面输入的空白作为分隔符 ...

  2. php内网探测脚本&简单代理访问

    <?php $url = isset($_REQUEST['u'])?$_REQUEST['u']:null; $ip = isset($_REQUEST['i'])?$_REQUEST['i' ...

  3. form表单提交controller层接收到的值为乱码的问题

    今天遇到个中文乱码问题,大体情况是这样的:前台有一个form表单,其中有几个input的控件,值是带中文的,form表单只设置了id='form1' method='post'  action='xx ...

  4. zju(1)嵌入式开发环境构建

    1. 实验目的 搭建嵌入式开发环境,安装ubntu,编译交叉工具链,安装配置tftp,nfs.用makefile 编译几个文件,在实验台上运行. 2. 实验内容 1) 安装ubuntu12.04 2) ...

  5. smartlink

    链接:https://www.zhihu.com/question/21783165/answer/20323202 Wi-Fi本身是属于固定频段上的TDD通讯机制,目前尚用的也就是2.4G和5.8G ...

  6. HDU 5416 CRB and Tree（前缀思想+DFS）

    CRB and Tree Time Limit: 8000/4000 MS (Java/Others)    Memory Limit: 65536/65536 K (Java/Others) Tot ...

  7. js判断字符是否包含字母汉字

    <script type="text/javascript"> function check(str) { if (escape(str).indexOf(" ...

  8. 关于队列queue

    1.在多线程和多进程中都有queue.调用方式不同,使用方式一致: 线程中: import queue q = queue.Queue(maxsize = 2) 进程中: from multiproc ...

  9. IIS7配置PHP 报错 "对找不到的文件启用文件监视"

    原文 IIS7配置PHP5.4报错对找不到的文件启用文件监视怎么解决? 案例环境:windows2008+IIS7+PHP5.4+ZEND LOADER用户在配置后遇到报错:错误摘要 HTTP 错误 ...

  10. 【MySQL学习笔记】MySQL权限表

    MySQL权限表,控制用户对数据库的访问,存在mysql数据库中,由mysql_install_db初始化,包括user,db,host,tables_priv,columns_priv,procs_ ...