一、Jquery的基本过滤选择器：

基本过滤选择器： 
1、 :first 选取第一个元素 
2、 :last 选取最后一个元素 
3、:not(selector) 去除所有与给定的选择器匹配的元素 
4、:even 选取索引时偶数的所有元素,索引从0开始 
5、:odd 选取索引时奇数的所有元素,索引从0开始 
6、:eq(index) 选取索引等于index的元素,索引从0开始 
7、:gt(index) 选取索引大于index的元素,索引从0开始 
8、:lt(index) 选取索引小于index的元素,索引从0开始 
9、:header 选取所有的标题元素 如：h1 ,h2等 
10、:animated 选取当前执行 动画的所有元素

效果：

源码：

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>jquery 学习1</title>

<!--  导入jquery库 -->

<script type="text/javascript" src="jquery/jquery.js"></script>

<script type="text/javascript">

$(function(){

    function sanmatt(){

        $("#d5").slideToggle("fast",sanmatt);

    }

    sanmatt();

    $("#btn1").click(function(){

        $("div:first").css("background","#FFBBAA");

    });

    $("#btn2").click(function(){

        $("div:last").css("background","#FFBBAA");

    });

    $("#btn3").click(function(){

        $("div:even").css("background","#FFBBAA");

    });

    $("#btn4").click(function(){

        $("div:odd").css("background","#FFBBAA");

    });

    $("#btn5").click(function(){

        $("div:eq(2)").css("background","#FFBBAA");

    });

    $("#btn6").click(function(){

        $("div:gt(2)").css("background","#FFBBAA");

    });

    $("#btn7").click(function(){

        $("div:lt(2)").css("background","#FFBBAA");

    });

    $("#btn8").click(function(){//选取不等于某个元素的所有

        $("div:not('#d1')").css("background","#FFBBAA");

    });

    $("#btn9").click(function(){//选取所有的header元素

        $(":header").css("background","#FFBBAA");

    });

    $("#btn10").click(function(){//选取所有的header元素

        $(":animated").css("background","#FFBBAA");

    });

})

</script>

</head>

<body>

Jquery的基本过滤器：

基本过滤器选择：

<br>

1、 :first     选取第一个元素

<br>

2、  :last      选取最后一个元素

<br>

3、:not(selector)   去除所有与给定的选择器匹配的元素

<br/>

4、:even        选取索引时偶数的所有元素,索引从0开始

<br/>

5、:odd         选取索引时奇数的所有元素,索引从0开始

<br/>

6、:eq(index)         选取索引等于index的元素,索引从0开始

<br/>

7、:gt(index)         选取索引大于index的元素,索引从0开始

<br/>

8、:lt(index)         选取索引小于index的元素,索引从0开始

<br/>

9、:header            选取所有的标题元素 如：h1 ,h2等

<br/>

10、:animated         选取当前执行 动画的所有元素

<br/>

<hr>

<button id="btn1">获取第一个div</button>

<button id="btn2">获取最后一个div</button>

<button id="btn3">选取偶数列</button>

<button id="btn4">选取奇数列</button>

<button id="btn5">索引等于2(从0开始)</button>

<button id="btn6">索引大于2的div</button>

<button id="btn7">索引小于2的div</button>

<button id="btn8">不等于某个选择器的所有元素</button>

<button id="btn9">选取所有的标题header</button>

<button id="btn10">选取当前执行的动画</button>

<p>

子层

<div id="d1"> 孙子层d1  </div>

<span>  这是一个行信息</span>

<div>

div 孙子层

</div>

</p>

<h1>这是h1 不在div内</h1>

<hr>

<div  id="d3"> 

<h2>这是h2 在div内</h2>

子层2

<div style="background:#FFFFFF"> 孙子层2   </div>

<br/>

<span> 这是一个行信息2</span>

<div id="d2">

div 孙子层2

</div>

</div>

<br/>

<div>

这是第三个div层

</div>

<br/>

<span>这是第四个span</span>

<p>

<div id="d5"> 这是第5个层</div>

</p>

</body>

</html>

(6)Jquery1.8.3快速入门_过滤选择器的更多相关文章

  1. (8)Jquery1.8.3快速入门_可见性选择器

    一.Jquery的可见性选择器: 可见性选择器: 1.:visable 筛选可以见的元素 2. :hidden 筛选不可见的元素 效果: 源码: <!DOCTYPE html> <h ...

  2. (5)Jquery1.8.3快速入门_层次选择器

    一.Jquery的选择器: 层级选择器: 1.空格                div    span              div中的包含的所有span后代元素 2. >        ...

  3. (4)Jquery1.8.3快速入门_基本选择器

    一.Jquery选择器: 基本选择器: 1.id                           #id      根据元素的id获取的唯一元素. 2.class                  ...

  4. (7)Jquery1.8.3快速入门_内容过滤选择器

    一.Jquery的内容过滤选择器: 内容过滤选择器: 1.:contains(text) 选取含有文本内容为text的元素 2. :empty 选取不包含子元素或者文本为空的元素 3.:has(sel ...

  5. Spring_MVC_教程_快速入门_深入分析

    Spring MVC 教程,快速入门,深入分析 博客分类: SPRING Spring MVC 教程快速入门  资源下载: Spring_MVC_教程_快速入门_深入分析V1.1.pdf Spring ...

  6. 【笔记目录2】【jessetalk 】ASP.NET Core快速入门_学习笔记汇总

    当前标签: ASP.NET Core快速入门 共2页: 上一页 1 2  任务27:Middleware管道介绍 GASA 2019-02-12 20:07 阅读:15 评论:0 任务26:dotne ...

  7. (1)Jquery1.8.3快速入门_helloworld

    jquery 快速入门 学习记录 1.第一个jquery程序 helloworld: 需要导入Jquery1.8.3的库 ,下载地址: jQuery1.8.3   代码令另存到本地 保存为jquery ...

  8. Robot Framework 快速入门_中文版

    目录 介绍 概述 安装 运行demo 介绍样例应用程序 测试用例 第一个测试用例 高级别测试用例 数据驱动测试用例 关键词keywords 内置关键词 库关键词 用户定义关键词 变量 定义变量 使用变 ...

  9. 【笔记目录1】【jessetalk 】ASP.NET Core快速入门_学习笔记汇总

    当前标签: ASP.NET Core快速入门 共2页: 1 2 下一页  任务50:Identity MVC:DbContextSeed初始化 GASA 2019-03-02 14:09 阅读:16 ...

随机推荐

  1. mysql case when then else end 的写法

    select t.colum1,t.colum2 (case when t.colum1 = '' then '' t.when colum2 = '' then '' else '' end ) a ...

  2. weblogic.xml 精妙设置

    1.一:weblogic 页面访问速度比tomcat慢的原因和解决办法 一:weblogic 页面访问速度比tomcat慢的原因和解决办法 公司有个项目,部署在weblogic8.1上之后,发现比在t ...

  3. 使用MXNet的NDArray来处理数据

    NDArray.ipynb NDArray介绍 机器学习处理的对象是数据,数据一般是由外部传感器(sensors)采集,经过数字化后存储在计算机中,可能是文本.声音,图片.视频等不同形式. 这些数字化 ...

  4. Go语言结构

    目录 结构体定义 创建结构体实例 普通方式创建结构体实例 new()创建结构体实例 结构体实例初始化 结构体类型实例和指向它的指针内存布局 结构体的方法 面向对象 组合(继承) 结构体使用注意事项 G ...

  5. Transaction rolled back because it has been marked as rollback-only

    出现这种错误的原因 1.接口A 调用了接口B 2.接口B报异常了,没有在B里面进行try catch捕获 3.接口A对 接口B进行了try catch捕获 因为接口B报异常 会把当前事物A接口的事物( ...

  6. 第二节：Web前端-ASP.NET之C#基础

    第二节:Web前端-ASP.NET之C#基础 学习ASP.NET,要掌握学习语言,控件等技能, <div style="text-align: center; line-height: ...

  7. 第42节：Java知识点回顾复习

    Java介绍 Java是一门面向对象的程序设计的编程语言,在1995年,sun公司发布了Java这门编程语言,有咖啡的名称,是当时灵机一动的想法.在2010年的时候被Oracle公司收购了,目前jdk ...

  8. CSS3实现背景透明文字不透明

    最近遇到一个需求,如下图,input框要有透明效果 首先想到的方法是CSS3的 opacity属性,但事实证明我想的太简单了 这个属性虽然让input框有透明效果,同时文字和字体图标也会有透明效果,导 ...

  9. Metasploit Framework（5）弱点扫描

    文章的格式也许不是很好看,也没有什么合理的顺序 完全是想到什么写一些什么,但各个方面都涵盖到了 能耐下心看的朋友欢迎一起学习,大牛和杠精们请绕道 当我们发现了目标机器开放的端口,开启的服务等等之后 就 ...

  10. [Postman]响应(7)

    Postman响应查看器有助于确保API响应的正确性.API响应由正文,标题和状态代码组成.邮递员在不同的标签中组织正文和标题.选项卡旁边会显示API调用的状态代码和完成时间. 响应还包含HTTP规范 ...