前言:

前面学习了JQuery的简单使用,今天进一步学习一下JQuery的选择器。

什么是选择器?

JQuery选择器通过标签名、属性名或者内容对DOM元素进行快速准确的选择,而不必担心浏览器的兼容性,通过JQuery选择器对页面元素精确定位,进而方便完成处理元素属性和行为事件。

选择器的优势

与传统的JavaScript获取页面元素和事务处理相比,JQuery具备以下几个优势:

  • 代码比较简单
  • 完善的检测机制

1、)代码更简单

在JQuery库中封装了大量可以通过选择器直接调用的函数,使编程更加简单轻松,使用简单的代码就可以使用相对复杂的功能。

2、)完善的检测机制

传统js设置页面元素的事务的时候,先要找到页面上的元素,然后在赋予相应的属性或事件,如果页面元素不存在,则页面会报错。所以要先判断页面元素是否存在。再进行属性或者事件操作。这样会造成代码繁琐。在JQuery定义页面元素的时候,无须考虑页面中是否存在,即使页面中不存在该元素也不会报错,极大的方便了代码的执行效率。

选择器分类

大致分为下面四大类

  • 基本选择器
  • 层次选择器
  • 过滤选择器
  • 表单选择器

过滤选择器又分为以下几个小分类

  • 简单过滤选择器
  • 内容过滤选择器
  • 可见性过滤选择器
  • 属性过滤选择器
  • 子元素过滤选择器
  • 表单对象属性过滤选择器

接下来挨个学习一下。

基础选择器

  • #id       根据Id匹配一个元素             返回的单个元素
  • .class   根据给定的类名匹配一个元素 返回的是元素集合
  • element 根据元素名匹配一个元素       返回的是元素集合
  • *         匹配所有元素                      返回的是元素集合
  • selecttor1,selector2并集,返回两个选择器匹配到的元素 返回的是元素集合

写个小例子学习一下

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<style type="text/css"> .firstDiv{
color: greenyellow;
font-size: 1em;
background-color:aliceblue;
}
#secondDiv{
color: blueviolet;
font-size: 1.5em;
}
p{
color: green;
font-size: 1em;
}
</style>
<script type="text/javascript">
$(function () {
//ID匹配元素
$("#secondDiv").css("display","block");
//匹配类元素
$(".firstDiv").css("display","none");
//元素名匹配元素
$("div, p").css("display","block");
//合并匹配元素
$("#secondDiv, p").css("display","none");
//匹配所有元素
$("body *").css("display","block");
}); </script>
</head>
<body>
<div class="firstDiv">
第一层
</div>
<div id="secondDiv">
第二层
</div>
<p>
段落
</p>
</body>
</html>

层次选择器

  • ancestor descendant   根据祖先匹配所有的后代元素 返回的是元素集合
  • parent>child                根据父元素匹配所有的子元素,直接后代 返回的是元素集合
  • prev+next                 匹配下一个兄弟元素 相当于next()方法 返回的是元素集合
  • prev~siblings             匹配后面的兄弟元素 相当于nextAll()方法,siblings()方法为匹配所有的兄弟元素 返回的是元素集合

写个小例子学习一下

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>层次选择器</title>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<style type="text/css">
#topDiv{
color: black;
background-color: aliceblue;
height: 45px;
display: flex;
display: -webkit-flex;
align-items: center;
}
div.leftDiv{
float: left;
overflow-x: auto;
}
ul#menu{
vertical-align: middle;
}
li{
color: black;
float:left;
overflow-x: auto;
margin-left: 2em;
margin-right: 2em;
vertical-align: middle;
} div#content{
font-size: 1rem;
text-align: center;
text-shadow:khaki;
} </style>
<script type="text/javascript"> $(function () {
//匹配后代元素
$("#topDiv ul").css("display","none");
//匹配子元素
$("#topDiv > ul").css("display","block");
//匹配后面的元素
$("#topDiv + div").css("display","none");
$("#topDiv").next().css("display","none");
//匹配后面的所有相邻元素
$("#topDiv ~div").css("display","block");
$("#topDiv").nextAll().css("display","none");
});
</script>
</head>
<body> <div id="topDiv">
<ul id="menu">
<li>首页</li>
<li>商城</li>
<li>分类</li>
</ul>
</div>
<div>
<div class="leftDiv" align="left">
<h4 align="center">风云</h4>
<div id="content">
金鳞岂是池中物,一遇风云便化龙。<br>
九霄龙吟惊天变,风云际会潜水游。<br>
</div>
</div>
<div>
<img src="../images/bg_post_activity_4.png">
</div>
</div> <div>
<p>
我要成仙
</p>
</div>
</body>
</html>

简单过滤选择器

  • :first或first()   匹配第一个元素  返回的单个元素
  • :last或last()    匹配最后一个元素 返回的单个元素
  • :not(selector)   匹配非selector能匹配到的元素 返回的是元素集合
  • :even       匹配索引值为偶数的元素,索引号从0开始 返回的是元素集合
  • :odd       匹配索引值为奇数的元素,索引号从0开始 返回的是元素集合
  • :eq(index)    匹配指定索引号的元素,索引号从0开始 返回的单个元素
  • :gt(index)    匹配索引号大于给定索引值的元素,索引号从0开始 返回的是元素集合
  • :lt(index)     匹配索引号小于给定索引值的元素,索引号从0开始 返回的是元素集合
  • :header     匹配所有的标题元素  h1 h2 h3 h4 h5 h6 返回的是元素集合
  • :animated    匹配所有正在执行动画的元素 返回的是元素集合
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>简单选择过滤器</title>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<style type="text/css">
li.firstLi {
color: saddlebrown;
} li.lastLi {
color: red;
} li.oddLi {
color: blueviolet;
font-size: 1em;
} li.evenLi {
color: goldenrod;
font-size: 1em;
} li.fiveLi {
color: blueviolet;
font-size: 2em;
} </style>
<script type="text/javascript"> $(function () {
//选中符合条件的第一个元素
$("#list > li:first").addClass("firstLi");
//选中符合条件的最后一个元素
$("#list > li:last").addClass("lastLi");
//符合条件但不能被selector选中的元素
$("#list > li:not('.secondLi')").addClass("lastLi");
//获取指定索引值为奇数的元素(1、3、5、7、9......),注意索引号是从1开始的
$("#list > li:odd").addClass("oddLi");
//获取指定索引值为偶数的元素(0、2、4、6、8……),注意索引号是从0开始的
$("#list > li:even").addClass("evenLi");
//选取指定索引值的元素,索引值从0开始
$("#list > li:eq(4)").addClass("fiveLi");
//获取所有索引值大于index的元素,索引号从0开始
$("#list > li:gt(4)").addClass("fiveLi");
//获取所有索引值小于index的元素,索引号从0开始
$("#list > li:lt(4)").addClass("evenLi");
}) </script>
</head>
<body>
<ol id="list">
<li>第1行</li>
<li id="secondLi">第2行</li>
<li>第3行</li>
<li>第4行</li>
<li>第5行</li>
<li>第6行</li>
<li>第7行</li>
<li>第8行</li>
</ol>
</body>
</html>

内容过滤选择器:

  • :contains(text)  匹配包含给定文本的元素
  • :empty      匹配所有不包含子元素或者文本的空元素
  • :has(selector)    匹配后代中含有selector能匹配上元素的元素
  • :parent      匹配含有子元素或者文本的元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>内容过滤选择器</title>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<style type="text/css">
li.firstLi {
color: saddlebrown;
} li.lastLi {
color: red;
} li.oddLi {
color: blueviolet;
} li.evenLi {
color: goldenrod;
} li.fiveLi {
color: blueviolet;
}
</style>
<script type="text/javascript"> $(function () {
//选中符合条件的第一个元素
$("#list > li:contains('第4行')").addClass("firstLi");
$("#list > li:empty").css("display", "none");
$("#list > li:has('b')").addClass("firstLi");
$("div:parent").css("display", "none");
})
</script>
</head>
<body>
<div>
<ol id="list">
<li>第1行</li>
<li id="secondLi">第2行</li>
<li>第3行</li>
<li>第4行</li>
<li>第5行</li>
<li><b>第6行</b></li>
<li></li>
<li>第7行</li>
<li>第8行</li>
</ol>
</div>
<div>
</div>
</body>
</html>

可见性过滤选择器:

  • :hidden      匹配不可见元素,或者type="hidden"的元素 含有css样式:display:"none";的元素,无论CSS是内联,导入,链接式
  • :visible       获取所有的可见元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>可见性过滤选择器</title>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<style type="text/css"> li.oddLi {
color: blueviolet;
} li.evenLi {
color: goldenrod;
} </style>
<script type="text/javascript">
$(function () {
//选中符合条件的第一个元素
$("#list > li:hidden").show();
$("#list > li:visible").addClass("firstLi");
})
</script>
</head>
<body>
<ol id="list">
<li>第1行</li>
<li style="display: none">第2行</li>
<li>第3行</li>
<li>第4行</li>
<li>第5行</li>
</ol>
</body>
</html>

属性过滤选择器:

  • [attribute]         匹配含有给定属性的元素
  • [attribute=value]       匹配含有属性=value的元素
  • [attribute!=value]      匹配含有属性但!=value的元素
  • [attribute^=value]     匹配属性值是以value开始的元素
  • [attribute$=value]      匹配属性值是以value结束的元素
  • [attribute*=value]      匹配属性值包含某些值的元素,部分前后,中间有也算
  • [selector][selector]     匹配属性选择器的交集
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>属性过滤选择器</title>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<style type="text/css">
li.firstLi {
color: saddlebrown;
} li.lastLi {
color: red;
} li.oddLi {
color: blueviolet;
font-size: 1em;
} li.evenLi {
color: goldenrod;
font-size: 1em;
} </style>
<script type="text/javascript"> $(function () {
//匹配所有含有id的元素
$("#list > li[id]").addClass("firstLi");
//选中id等于testLi的元素
$("#list > li[id='testLi']").addClass("lastLi");
//选中id不等于testLi的元素
$("#list > li[id!='testLi']").addClass("lastLi");
//选中id属性以test开头的元素
$("#list > li[id^='test']").addClass("oddLi");
//选中id属性以Li2结尾的元素
$("#list > li[id$='Li2']").addClass("evenLi");
//选中id属性包含Li的元素
$("#list > li:lt(4)[id*='Li']").addClass("oddLi");
}) </script>
</head>
<body>
<div>
<ol id="list">
<li>第1行</li>
<li id="testLi">第2行</li>
<li id="testLi1">第3行</li>
<li id="testLi2">第4行</li>
<li>第5行</li>
<li><b>第6行</b></li>
<li></li>
<li id="testLi3">第7行</li>
<li>第8行</li>
</ol>
</div>
</body>
</html>

子元素过滤选择器:

  • :nth-child(eq|even|odd|index)  获取所有父元素特定位置的子元素
  • :first            获取所有父元素下的第一个子元素
  • :last            获取所有父元素下最后一个子元素
  • :only-child         获取所有父元素下唯一的一个元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>子元素选择过滤器</title>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<style type="text/css">
li.firstLi {
color: saddlebrown;
} li.lastLi {
color: red;
} li.oddLi {
color: blueviolet;
font-size: 1em;
} li.evenLi {
color: goldenrod;
font-size: 1em;
} </style>
<script type="text/javascript"> $(function () {
//选中li父元素第三个元素
$("li:nth-child(3)").addClass("lastLi");
//选中li父元素第一个元素
$("li:first-child").addClass("lastLi");
//选中li父元素最后一个元素
$("li:last-child").addClass("lastLi");
//选中li父元素只有一个元素的元素
$("li:only-child").addClass("lastLi");
}) </script>
</head>
<body>
<div>
<ol id="list">
<li>第1行</li>
<li id="testLi">第2行</li>
<li id="testLi1">第3行</li>
<li id="testLi2">第4行</li>
<li>第5行</li>
<li><b>第6行</b></li>
<li></li>
<li id="testLi3">第7行</li>
<li>第8行</li>
</ol>
</div>
</body>
</html>

表单对象属性过滤选择器:

  • :enabled   获取表单中所有可用的元素
  • :disabled   获取表单中所有不可用的元素
  • :checked   获取表单张所有被选中的元素
  • :selected   获取表单中所有被选中的option的元素

表单选择器:

  • :input     获取所有的表单元素<input开头的,还有textarea select
  • :text      获取所有的单行文本框  <input type="text" />
  • :password   获取所有的密码框元素      <input type="password" />
  • :radio      获取所有的单选按钮   <input type="radio" />
  • :checkbox   获取所有的复选框    <input type="checkbox">
  • :submit     获取所有的提交按钮   <input type="submit" />
  • :image    获取所有的图像按钮   <input type="image" />
  • :reset      获取所有的重置按钮    <input type="reset" />
  • :button    获取所有的按钮     <input type="button">
  • :file      获取所有的文件上传框  <input type="file" />
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单选择器</title>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<style type="text/css">
.textColor {
color: blue;
}
</style>
<script type="text/javascript"> $(function () {
$("#form1 :text").addClass("textColor");
$("#form1 :radio").addClass("textColor");
$("#ageSelect").addClass("textColor");
}); </script>
</head>
<body>
<div>
<h4>表单选择器</h4>
<form id="form1">
姓名: <input type="text" name="name"><br>
户口:<input type="radio" name="home" value="town" checked>城镇 <input type="radio" name="home" value=="country"> 农村<br>
年龄: <select name="age" id="ageSelect">
<option value="lt18">18岁以下
<option value="bt18and25">18-35岁
<option value="bt36and65">36-65岁
<option value="gt65">65岁以上
</select><br>
</form>
</div>
</body>
</html>

总结:

学习总结了JQuery的选择器使用。

Hybrid App开发之jQuery选择器的更多相关文章

  1. Hybrid App开发之jQuery操作DOM

    前言: 前面学习了JQuery的选择器,今天开始学习新的知识,JQuery操作DOM元素. 元素属性的访问与设置 attr(name) 获取元素属性 attr(name,value) 单个属性设置 a ...

  2. Hybrid App开发之jQuery基础

    前言: 前面学习了JavaScript/Html/Css的基础知识,今天学习一下常用js框架jQuery的使用进行快速的开发. JQuery的基本功能: 方位和操作DOM元素 控制页面样式 对页面事件 ...

  3. Hybrid App开发之css样式使用

    前言: 前面学习了html,今天学习一下css的基本使用,看下html与css之间是如何结合来编写前端网页的. CSS 是什么? CSS 是 Cascading Style Sheets(级联样式表) ...

  4. Hybrid App开发之JavaScript基础

    前言: 前面学习了html和css的基本使用,今天开始学习JavaScript的使用. 什么是JavaScript JavaScript是一种基于对象(Object)和事件驱动(Event Drive ...

  5. Hybrid App开发之Html基本标签使用

    前言: 前面简单学习了html简单标签的使用,今天学习一下其他的标签的使用. HTML的超链接 1.)创建一个超链接 <div> <p> <a href="ht ...

  6. 前端开发之jQuery篇--选择器

    主要内容: 1.jQuery简介 2.jQuery文件的引入 3.jQuery选择器 4.jQuery对象与DOM对象的转换 一.jQuery简介 1.介绍 jQuery是一个JavaScript库: ...

  7. 【python】-- web开发之jQuery

    jQuery jQuery 是一个 JavaScript 函数库,jQuery库包含以下特性(HTML 元素选取.HTML 元素操作.CSS 操作.HTML 事件函数.JavaScript 特效和动画 ...

  8. app开发之deviceone

    deviceone,跨平台.低成本.纯原生的app开发服务,具体介绍见:http://www.deviceone.net/ do不同于dcloud.rn等开发套件,do只是一座桥梁,可以选择使用jav ...

  9. 前端开发之jQuery库

    使用jquery开发的时候,如果我们不想使用自己的jquery文件,那么可以引用现成的地址.方便日常开发使用 jquery-2.0以上版本 (注!不再支持IE 6/7/8) jquery-2.0.0百 ...

随机推荐

  1. 使用Java POI来选择提取Word文档中的表格信息

    通过使用Java POI来提取Word(1992)文档中的表格信息,其中POI支持不同的ms文档类型,在具体操作中需要注意.本文主要是通过POI来提取微软2003文档中的表格信息,具体code如下(事 ...

  2. SOA 下实现分布式 调用 cxf+ webService +动态调用

    近期项目间隙 自学了  webservice   一下 是我写的  一个demo 首先我们在web.xml 里配置如下 <servlet> <servlet-name>CXFS ...

  3. Python 基础 四 面向对象杂谈

    Python 基础  四  面向对象杂谈 一.isinstance(obj,cls) 与issubcalss(sub,super) isinstance(obj,cls)检查是否obj是否是类 cls ...

  4. Debian 8 下安装持续集成的工具Jenkins

    前情提示:Jenkins是一个开源软件项目,旨在提供一个开放易用的软件平台,使软件的持续集成变成可能. 第一种方法: 1.1 配置java环境变量    解压java到相应目录,我一般习惯把安装的软件 ...

  5. 数据转换d2d.js

    d2d.js what? d2d是data2data的简写,用来转换为符合需求的data. why? 我们在开发中定义好了的接口字段,后端工程可能因某些原因修改了字段, 或者我们用的插件或组件用到的数 ...

  6. 荣获MVP感想

    感言 最近特别忙,除了工作之外最开心的算是收到了MVP的奖杯,从到申请到审批通过也不过一个礼拜的时间,从去年就开始想着是否应该一试,通过和张善友大哥的沟通抱着试一试的忐忑结果意外惊喜通过了,由于每月申 ...

  7. hdu698 Just a Hook 线段树-成段更新

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1698 很简单的一个线段树的题目,每次更新采用lazy思想,这里我采用了增加一个变量z,z不等于0时其绝 ...

  8. [笔记]cin、cout与scanf、printf的效率差异对比分析

    之前上传UVa227 puzzle时,好不容易AC了,但发现自己用时50(ms),而在VJ上看到人家都是40ms.20ms,于是打开一个20ms的代码查看人家强在哪里.但结果研究了半天感觉差不多,于是 ...

  9. Java IO详解(六)------序列化与反序列化(对象流)

    File 类的介绍:http://www.cnblogs.com/ysocean/p/6851878.html Java IO 流的分类介绍:http://www.cnblogs.com/ysocea ...

  10. 分布式Java应用与实践 (一)

    一) 分布式Java应用 1.1 基于消息方式实现系统间的通信 数据传输 TCP/IP 可靠的网络传输协议,首先给通信双方建立链接之后再进行数据传输,保证链接及数据传输的可靠,因此会牺牲一些性能 UD ...