HybridApp开发之jQuery选择器-创新互联
什么是选择器？
JQuery选择器通过标签名、属性名或者内容对DOM元素进行快速准确的选择，而不必担心浏览器的兼容性，通过JQuery选择器对页面元素精确定位，进而方便完成处理元素属性和行为事件。
成都创新互联是一家专业提供峡江企业网站建设,专注与成都网站设计、网站建设、外贸网站建设、H5建站、小程序制作等业务。10年已为峡江众多企业、政府机构等服务。创新互联专业的建站公司优惠进行中。选择器的优势
与传统的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">
<h5 align="center">风云</h5>
<div id="content">
×××，一遇风云便化龙。<br>
九霄龙吟惊天变，风云际会潜水游。<br>
</div>
</div>
<div>
<img src="../p_w_picpaths/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 匹配所有的标题元素 h2 h3 h4 h5 h6 h7 返回的是元素集合
: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 >第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" />
:p_w_picpath 获取所有的图像按钮 <input type="p_w_picpath" />
: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>
<h5>表单选择器</h5>
<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>
另外有需要云服务器可以了解下创新互联scvps.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。
网页标题：HybridApp开发之jQuery选择器-创新互联
文章起源：https://www.cdcxhl.com/article15/ccijdi.html
成都网站建设公司_创新互联，为您提供虚拟主机、静态网站、营销型网站建设、定制开发、网站收录、商城网站
声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联
- 整站优化和关键词优化哪个好？ 2023-03-31
- 专业的网站优化人员，应该会使用的基本关键词优化工具有哪些？ 2022-05-01
- 如何做好企业网站关键词优化 2020-02-11
- 七天上首页的关键词优化是真的吗 2021-04-21
- 如何走出多个关键词优化的瓶颈！ 2016-11-01
- 网站关键词优化的五大法则 2023-01-04
- 评估一个关键词优化的难易度 2016-11-06
- 网站URL设计怎么设置才更有利于网站关键词优化 2020-08-01
- 深圳关键词优化：网站上线不收录怎么办？ 2022-11-10
- 网站运营优化面试题概括一下搜索引擎的组成部份 2023-02-08
- 南阳SEO优化教你怎么查询断定关键词优化难易 2022-05-24
- 如果网站被黑SEO关键词优化该怎样做? 2015-08-23