<!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. winform对话框控件

    (1)ColorDialog     用户自定义颜色控件 点击颜色按键,改变richTextBox1中字体的颜色 private void button1_Click(object sender, E ...

  2. SBT Assembly - Deduplicate error & Exclude error

    sbt assembly java.lang.RuntimeException: deduplicate: different file contents found in the following ...

  3. vbox下Oracle Enterprise liunx5.4虚拟机安装10G RAC实验(四)

    接第3篇 http://www.cnblogs.com/myrunning/p/4003527.html 5.安装配置数据库 5.1安装数据库软件 5.2配置监听 5.3创建ASM磁盘 5.4创建服务 ...

  4. thinkphp自定义权限管理之名称判断

    权限管理,就是给不同的用户分配不同的权限.当用户登录或者操作时候进行判断,来阻止用户进行权限以外的操作.本次讲的是当用户登录一刻,只显示权限开启的内容. 一.建立数据库. 1.权限表funcla.来存 ...

  5. MySQL配置文件改变了datadir值

    从Noinstall Zip Archive中安装MySQL正在从Noinstall软件包安装MySQL的用户可以使用这个说明来手动安装MySQL.从Zip archive 中安装MySQL的 步骤如 ...

  6. java.io包中的字节流—— FilterInputStream和FilterOutputStream

    接着上篇文章,本篇继续说java.io包中的字节流.按照前篇文章所说,java.io包中的字节流中的类关系有用到GoF<设计模式>中的装饰者模式,而这正体现在FilterInputStre ...

  7. HDU 1565&1569 方格取数系列（状压DP或者最大流）

    方格取数(2) Time Limit: 10000/5000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others) Total S ...

  8. NEC学习 ---- 模块 - 左图右文图文列表

    该模块效果图: 这个模块也是在开发中经常使用的一种: HTML代码: <div class="container"> <div class="m-lis ...

  9. Git command line

    # Pull the repo from master git pull # Create branch for myself in local git branch john/jenkins_cod ...

  10. Linux内核设计第三周——构造一个简单的Linux系统

    Linux内核设计第三周 ——构造一个简单的Linux系统 一.知识点总结 计算机三个法宝: 存储程序计算机 函数调用堆栈 中断 操作系统两把宝剑: 中断上下文的切换 进程上下文的切换 linux内核 ...