jQuery 简单过滤选择器

时间：2022-09-18 19:34:37
<!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.  jQuery 简单过滤选择器

2.jQuery 简单过滤选择器

3.jQuery 简单过滤选择器

4.jQuery 简单过滤选择器

5.jQuery 简单过滤选择器

6.jQuery 简单过滤选择器

7.jQuery 简单过滤选择器

8.jQuery 简单过滤选择器

9.jQuery 简单过滤选择器

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&lt ...

  3. Jquery的过滤选择器分为哪几种？

    Jquery的过滤选择器分为哪几种? 转载▼ 标签: jquery 过滤选择器 分类 分类: JQuery 所有的过滤选择器分为哪几种: 一.基本过滤选择器(重点掌握下列八个) :first 选取第一 ...

  4. 第一百六十五节，jQuery，过滤选择器

    jQuery,过滤选择器 学习要点: 1.基本过滤器 2.内容过滤器 3.可见性过滤器 4.子元素过滤器 5.其他方法 过滤选择器简称:过滤器.它其实也是一种选择器,而这种选择器类似与 CSS3 (h ...

  5. jquery &colon;checked&lpar;过滤选择器&rpar; 和 空格&colon;checked&lpar;后代选择器&rpar;

    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 &colon;checked&lpar;过滤选择器&rpar; 和 空格&colon;checked&lpar;后代选择器&rpar;【转】

    jquery 过滤选择器 和 后代选择器 <%@ page language="java" contentType="text/html; charset=UTF- ...

随机推荐

  1. Android面试题（一）

    1. 请描述一下Activity 生命周期. 答: 如下图所示.共有七个周期函数,按顺序分别是: onCreate(), onStart(), onRestart(), onResume(), onP ...

  2. 【leedcode】add-two-numbers

    You are given two linked lists representing two non-negative numbers. The digits are stored in rever ...

  3. Eclipse 常用插件

    /* ===================== Eclipse Color Theme 语法高亮 ======================== */ 安装方法同上,软件安装URL http:// ...

  4. js判断各个浏览器

    其实,实际写js的过程中,用功能判断”鸭shi辨形“的方法就可以了,不过,很多地方考试还是会问.所以总结一下,大部分都是分析navigator来实现的. var ua=navigator.userAg ...

  5. C&num; treeview 使用笔记

    treeView默认 展开 treeView1.ExpandAll(); treeview判断点击节点: private void treeView1_AfterSelect(object sende ...

  6. Linq用法笔记

    一.什么是Linq? LINQ即Language Integrated Query(语言集成查询),LINQ是集成到C#和Visual Basic.NET这些语言中用于提供查询数据能力的一个新特性. ...

  7. 持续交付Jenkins使用

    简介 Jenkins是一个独立的开源自动化服务器,可用于自动化各种任务,如构建,测试和部署软件.Jenkins可以通过本机系统包Docker安装,甚至可以通过安装Java Runtime Enviro ...

  8. Django—模板渲染

    参考文档: http://www.cnblogs.com/fnng/p/4373108.html https://code.ziqiangxuetang.com/django/django-intro ...

  9. HDU 2243 Knight Moves

    题目: A friend of you is doing research on the Traveling Knight Problem (TKP) where you are to find th ...

  10. Android Error&colon;Execution failed for task &&num;39&semi;&colon;app&colon;preDebugAndroidTestBuild&&num;39&semi;&period; &gt&semi; Conflict with dependency

    错误内容: Error:Execution failed for task ':app:preDebugAndroidTestBuild'.> Conflict with dependency ...

相关文章