jQuery最基础最全面的选择器大览

时间：2022-04-28 03:16:28

一、基本选择器

    1.标签选择器 （element）:根据给定的标签名匹配元素

eg:$("h2")选取所有h2元素 --- 返回元素集合

2.类选择器 （.class）:根据给定的class匹配元素

eg:$(".title")选取所有class为title的元素 --- 返回元素集合

3.ID选择器 （#id） :根据给定的id匹配元素

eg:$("#title")选取id为title的元素 --- 返回单个元素

4.并集选择器 （select1,select2,...,selectorN）:将每一个选择器匹配的元素合并后一起返回

eg:$("div,p,.title")选取所有div、p和拥有class为title的元素 ---返回元素集合

5.交集选择器 （element.class或element#id）:匹配指定class或id的某元素或元素集合(若在同一个页面中指定id的元素返回值,则一定是单个元素;若指       定class的元素,则可以是单个元素,也可以是元素集合)

eg:$("h2.title")选取所有拥有class为title的h2元素  ---返回单个元素或元素集合

6.全局选择器 （*） :匹配所有元素

eg:$("*")选取所有的元素  ---返回集合元素

 二、层次选择器

      1.后代选择器 （ancestor descendant）选取ancestor元素里所有descendant元素

2.子选择器  （parent>child） 选取parent元素下的child（子）元素

3.相邻元素选择器 （prev+next） 选取紧邻prev元素之后的next元素

4.同辈元素选择器 （prev~sibings） 选取prev元素之后的所有sibings（同辈）元素

*案例

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

    <title>上机练习1</title>

    <script src="js/jquery-1.12.3.min.js"></script>

    <script type="text/javascript">

        $(function () {

            $("p").click(function () {
                //后代

                $(".txt_box .current").css("background", "#6FF");
                //子集

                $("p>span").css("background", "#F9F");

                //相邻
                $("h1+p").css("background", "#F06");
                //同辈

                $("strong~span").css("color", "#00C");

            });

        });

    </script>

</head>

<body>

    <h1>英雄联盟</h1>

    <p>《英雄联盟》,简称LOL</p>

    <p>由<strong>Riot Game</strong>开发,为3D竞技场战游戏,其<span>主创团队由实力强劲的

        <strong>魔兽争霸</strong>

        系列游戏多人即时对战自定义地图开发团队

        </span>

        <a href="#">更多详情</a>

    </p>

    <h2>目录</h2>

    <ul class="txt_box">

        <li class="current">开发团队</li>

        <li>游戏周边</li>

        <li>游戏介绍</li>

        <li>游戏需求</li>

        <li>游戏背景</li>

    </ul>

</body>

</html>

三、属性选择器

1.[attribute] :选取包含给定属性的元素

//改变含有title属性的h2元素的背景颜色

eg:$("h2[title]").css("background","red");

2.[attribute=value]:选取等于给定属性是某个特定值得元素

//改变class属性的值为odds的元素的背景颜色

eg:$("class=pdds").css("backround","red");

3.[attribute!=value] :选取不等于给定属性是某个特定值的元素

//改变id属性的值不为odds的元素的背景颜色

eg:$("#id!=pdds").css("backround","red");

4.[attribute^=value] :选取给定属性是以某特定值开始的元素

//改变title属性的值以h开头的元素的背景颜色

eg:$("title^=h").css("background","red");

5.[attribute$=value]:选取给定属性是以某些特定值结尾的元素

//改变title属性的值中以jp结尾的元素的背景颜色

eg:$("title$=jp").css("backround","red");

6.[attribute*=value] :选取给定属性是包含某些值的元素

//改变title属性的值中含有s的元素的背景颜色

eg:$("title*=s").css("backround","red");

7.[selector][selector2][selectorN] :选取满足多个条件的复合属性的元素

//改变包含class属性,且title属性的值中含有y的<li>元素的背景颜色

eg:$("li[class][title*=y]").css("background","red");

四、基本过滤选择器

        1.:first :选取第一个元素 --- 返回单个元素

2.:last : 选取第一个元素 --- 返回单个元素

         3.:not(selector):选取去除所有与给定选择器匹配的元素 --- 返回集合元素

         4.:even :选取索引是偶数的所有元素（索引index均从0开始） --- 返回集合元素

         5.:odd :选取索引是奇数的所有元素 --- 返回集合元素

         6.:eq : 选取索引等于index的元素--- 返回单个元素

         7.:gt : 选取索引大于index的元素 --- 返回集合元素

         8.:lt  : 选取索引小于index的元素 --- 返集合单元素

9. :header : 选取所有标题的元素,如h1~h6

10. :focus  : 选取当前获取焦点的元素

//$(":focus").css("background", "red");

五、可见性过滤选择器

      1.:visible :选取所有可见的元素 --- 返回集合元素

2.:hidden :选取所有隐藏的元素 --- 返回集合元素

3.其中,显示方法为--show()、隐藏方法为hide()。

* 案例

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

    <title>上机练习3</title>

    <style type="text/css">

        h1 {

            color: green;

        }

        ul {

            margin-left: -40px;

            font-size:30px;

            color:gray;

        }

        li {

            list-style:none;

         }

        span {

            font-size: 22px;

            color: red;

        }

    </style>

    <script src="js/jquery-1.12.3.min.js"></script>

    <script type="text/javascript" >

        $(function () {

            $("li:even").css("background", "#CCC");

            $("li:eq(2)").css("background", "#FF99CC");

            $("li:gt(5)").hide();

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

                $("li:hidden").show();

            });

            $("#xid").mouseover(function () {

                $("li:visible").show();

            });

            $("#xid").mouseover(function () {

                $("li:hidden").show();

            });

            $("#xid").mouseout(function () {

                $("li:gt(5)").hide();

            });

        });

    </script>

</head>

<body>

    <h1>淘宝,发现更多生活,<strong>快乐</strong>就在你身边</h1>

    <ul>

        <li>近期热门........<span><a href="#" id="xid">（更多）</a></span></li>

        <li>言语之庭</li>

        <li>斯托克</li>

        <li>宿醉</li>

        <li>巨人捕手杰克</li>

        <li>副作用</li>

        <li>血肉之躯</li>

        <li>七号房的礼物</li>

        <li>惊声尖笑</li>

    </ul>

    <a href="#" id="hid">更多排名</a>>

</body>

</html>

jQuery最基础最全面的选择器大览的更多相关文章

  1. js进阶 10-4 jquery中基础选择器有哪些

    js进阶 10-4 jquery中基础选择器有哪些 一.总结 一句话总结: 1.群组选择器用的符号是什么? 群组选择器,中间是逗号 2.jquery中基础选择器有哪些? 5种,类,id,tag,群组, ...

  2. &lbrack;DOM Event Learning&rsqb; Section 3 jQuery事件处理基础 on&lpar;&rpar;&comma; off&lpar;&rpar;和one&lpar;&rpar;方法使用

    [DOM Event Learning] Section 3 jQuery事件处理基础 on(),off()和one()方法使用   jQuery提供了简单的方法来向选择器(对应页面上的元素)绑定事件 ...

  3. jQuery 插件基础

    jQuery 插件基础 翻译 How to Create a Basic Plugin 如果你需要在 jQuery 选择器上执行一系列重复操作, 这时候你需要编写 jQuery 插件. jQuery ...

  4. jquery总结01-基本概念和选择器

    dom元素和jquery元素的区别 dom元素支持dom元素自带的属性和方法,jquery元素支持jquery元素自带的属性和方法 dom                  var div = doc ...

  5. jQuery官方基础教程笔记&lpar;转载&rpar;

    本文转载于阮一峰的博文,内容基础,结构清晰,是jquery入门不可多得的资料,非常好,赞一个. 阮一峰:jQuery官方基础教程笔记 jQuery是目前使用最广泛的javascript函数库. 据统计 ...

  6. JQuery（一）---- JQ的选择器，属性，节点，样式，函数等操作详解

    JQuery的基本概念 JQuery是一个javascript库,JQuery凭借着简洁的语法和跨平台的兼容性,极大的简化了js操作DOM.处理事件.执行动画等操作.JQuery强调的理念是:'wri ...

  7. 新知识：JQuery语法基础与操作

     jQuery是一个快速.简洁的JavaScript框架,是继Prototype之后又一个优秀的JavaScript代码库(或JavaScript框架).jQuery设计的宗旨是"write ...

  8. jQuery之基础核心（demo&rpar;

    jQuery之基础核心     作者的热门手记 jQuery之基础核心(demo)   本文主要简单的介绍下jQuery一些基础核心,大致了解jQuery使用模式.适用于有HTML.CSS.javas ...

  9. jQuery -- 光阴似箭（一）：初见 jQuery -- 基本用法，语法，选择器

    jQuery -- 知识点回顾篇(一):初见jQuery -- 基本用法,语法,选择器 1. 使用方法 jQuery 库位于一个 JavaScript 文件中,其中包含了所有的 jQuery 函数. ...

随机推荐

  1. bitnami redmine每日自动备份

    主要思路:在半夜时停止服务,进行完整备份,然后再开启服务. 1.主脚本backup.bat: call backup-stopserver.batping /n 20 127.1 >nul ca ...

  2. iOS开发UI篇—常见的项目文件介绍

    iOS开发UI篇—常见的项目文件介绍 一.项目文件结构示意图 二.文件介绍 1.products文件夹:主要用于mac电脑开发的可执行文件,ios开发用不到这个文件 2.frameworks文件夹主要 ...

  3. spoj 24

    大数  #include<cstdio> #include<cstdlib> #include<cstring> #include<algorithm> ...

  4. c&num;个人记录常用方法&lpar;更新中&rpar;

    1.日期毫秒转换为标准的C#日期格式 //使用时,先将秒Convert.ToInt64,返回格式2015-2-10 14:03:33 public DateTime JavaTimeToC(long ...

  5. java对象和json对象之间互相转换

    import java.util.ArrayList;import java.util.Collection;import java.util.Iterator;import java.util.Li ...

  6. 解决ssh或ftp下root用户认证失败问题

    问题:当连接ssh远程终端或使用ftp方式进行文件传输时,使用普通用户可以进行远程登录,但使用root用户则认证失败,提示密码错误.而我们在普通用户登录下,su - root,验证密码,是可以正常切换 ...

  7. 一般处理程序&plus;htm C&num;l简单的增删查改

    首先引用两个文件一个dll: 数据库表已创建 首先编写数据读取部分 /// <summary> /// 查询 /// </summary> /// <param name ...

  8. 关于Java的散列桶， 以及附上一个案例-重写map集合

    为速度而散列: SlowMap.java说明了创建一个新的Map并不困难.但正如它的名称SlowMap所示,它不会很快,如果有更好的选择就应该放弃它.它的问题在于对键的查询,键没有按照任何特定的顺序保 ...

  9. 【jenkins 忘记密码】忘记Jenkins管理员密码的解决办法

    一.admin密码未更改情况 1.进入\Jenkins\secrets目录,打开initialAdminPassword文件,复制密码: 2.访问Jenkins页面,输入管理员admin,及刚才的密码 ...

  10. 【Restful】三分钟彻底了解Restful最佳实践

    REST是英文representational state transfer(表象性状态转变)或者表述性状态转移;Rest是web服务的一种架构风格;使用HTTP,URI,XML,JSON,HTML等 ...

相关文章