<!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. [CareerCup] 16.3 Dining Philosophers 哲学家聚餐问题

    16.3 In the famous dining philosophers problem, a bunch of philosophers are sitting around a circula ...

  2. SurfaceView的简单使用

    package com.example.administrator.mystudent.surfaceView; import android.content.Context; import andr ...

  3. CMD中常用命令

    打开CMD的几种方法: 搜索一下 1: 打开我的电脑,在地址栏输入该地址后按回车键打开:C:\WINDOWS\system32\cmd.exe 2: 打开我的电脑,进入C盘WINDOWS\system ...

  4. Linux_shell脚本_遍历文件夹下所有文件

    参考:lunar1983的专栏 实现:从给定目录树中grep出含制定字符串的行,并给出所在路径 代码如下所示: #!/bin/sh - if [ $# -ne 2 ] then echo " ...

  5. alpha发布之小组评论

    在alpha发布之后,让我看到了,大家都很努力,在alpha发布前大家都尽量完成自己的项目,虽然大家都很忙,但是,都在抽出时间趟黑起早的完成项目,在你们身上有很多很值得我学习的地方,虽然我认为半夜睡觉 ...

  6. Android课程---时间日期对话框

    activity_ui2.xml <?xml version="1.0" encoding="utf-8"?> <LinearLayout x ...

  7. 奥迪--Q5

    -型号:Q5 -价格:40-53W -动力:2T -变速箱:8挡手自一体 -长宽高:4.63,1.90,1.66 -油箱:75L -发动机:EA888 -大灯:氙气

  8. MVC4脚本压缩 BundleTable bundles 404错误

    在发布网站的时候,因为使用了MVC4的新特性BundleTable,造成访问的时候js和css报了404错误, google了以后, 有朋友说是因为要在webservice添加 <modules ...

  9. cookie的作用

    Cookies是一种能够让网站服务器把少量数据储存到客户端的硬盘或内存,或是从客户端的硬盘读取数据的一种技术.Cookies是当你浏览某网站时,由Web服务器置于你硬盘上的一个非常小的文本文件,它可以 ...

  10. 优化SQL Sever查询语句的几个要点

    1.不要在Where子句中的“=”左边进行函数.算术运算或其他表达式运算,否则系统将可能无法正确使用索引. 2.尽量不要在Where条件中使用函数,否则将不能利用索引. 3.在Where条件中使用明确 ...