<!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. 自己做的一个小demo

    上图: 主段代码: <script type="text/javascript"> var getRandomColor = function(){ return (f ...

  2. mysql主从复制过滤

    主从复制过滤: 配置文件中的[mysqld]块中: master:(考虑到即时点还原一般不在主过滤) binlog_do_db= #数据库白名单 binlog_ignore_db= #数据库白名单 s ...

  3. 数位DP HDU3555

    Bomb Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 131072/65536 K (Java/Others)Total Submi ...

  4. Daily Scrum 10.28

    今天是周一,大家基本都结束了设计阶段转入代码实现的阶段,由于同志们感觉这部分的难度比较大,所以经过讨论延长了这部分的估计时间. 下面是今天的Task统计: 所有迭代的状态:

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

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

  6. 《JAVA开发环境的熟悉》实验报告——20145337

  7. HTTP Status 500 - org.apache.jasper.JasperException: com.sun.org.apache.xerces.internal.impl.io.MalformedByteSequenceException

    HTTP Status 500 - org.apache.jasper.JasperException: com.sun.org.apache.xerces.internal.impl.io.Malf ...

  8. mysql集群 MySQL Cluster

    <?php /* 郑重说明2015年6月11日16:28:14,目前为止MySQL Cluster 社区版不支持INNODB,商业版支持,但是授权价格20W左右,so看此文档之前,考虑下钱 My ...

  9. 无法启动Mysql服务,错误InnoDB: Attempted to open a previously opened tablespace.

    2013-08-04 13:48:22 760 [ERROR] InnoDB: Attempted to open a previously opened tablespace. Previous t ...

  10. xx.substring(x,x)和xx.index()

    [转的]用一个例子解释: ip = "126.168.1.1"; i = ip.indexOf('.');                           这里默认从0开始找到 ...