博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
jQuery选择器
阅读量:6082 次
发布时间:2019-06-20

本文共 3407 字,大约阅读时间需要 11 分钟。

根据所获取页面中元素的不同,可以将jQuery选择器分为:
-基本选择器
-层次选择器
-过滤选择器
-表单选择器

 

其中,过滤选择器中又可分为:
-简单过滤选择器
-内容过滤选择器
-可见性过滤选择器
-属性过滤选择器
-子元素过滤选择器
-表单对象过滤选择器

 

1. 基本选择器

 

#id: 根据给定的ID一个元素,返回单个元素
例子:
$(function(){
$("#divOne").css("display","block");
})

 

element: 根据给定的元素名匹配所有元素,返回元素集合
例子:
$(function()){
$("div span").css("dispaly","block");
})

 

.class: 根据给定的类匹配元素,返回元素集合
例子:
$(function()){
$(".clsFrame .clsOne").css("dispaly","block");
})

 

*: 匹配所有元素,返回元素集合
例子:
$(function()){
$("*").css("dispaly","block");
})

 

select1,selectN: 将每一个选择器匹配到的元素合并后一起返回
例子:
$(function()){
$("#divOne, span").css("dispaly","block");
})

 

 

综合例子(根据输入的编号显示内容)
<html>
<head>
    <title>练习jQuery基本选择器</title>
    <script language="javascript" type="text/javascript" 
            src="jquery/jquery-1.7.1.js"></script>
    <style type="text/css">
           .mainDiv{width:500px;height:10px}
           .mainDiv div,span{display:none;float:left;
           width:500px;height:50px;border:solid 1px #ccc;margin:8px}
           .subDiv{background-color:#eee}
    </style>
    <script type="text/javascript">
window.οnlοad=function(){
var abc=window.prompt("请输入编号:","");
abc=abc*1;
switch(abc)
{
case 1:
$(function(){ //ID匹配元素
 $("#subDiv1").css("display","block");
});
break;
case 2:
$(function(){ //元素名匹配元素
 $("div span").css("display","block");
})
break;
case 3:
$(function(){ //类匹配元素
 $(".mainDiv .subDiv").css("display","block");
})
break;
case 4:
$(function(){ //合并匹配元素
 $("#subDiv1,span").css("display","block");
})
break;
default
:
   $(function(){ //匹配所有元素
  $("*").css("display","block");
})

break; 

}
};
    </script>
</head>
<body>
<div class="mainDiv">
    <div id="subDiv1">ID</div>
    <div class="subDiv">CLASS</div>
    <span>SPAN</span>
</div>
</body>
</html>

 

2. 层次选择器

ancestor descendant: 根据祖先元素匹配所有的后代元素,返回元素集合
parent>child: 根据父元素匹配所有的子元素,返回元素集合
prev+next: 匹配所有紧接在prev元素后的相邻元素,返回元素集合
prev~siblings: 匹配prev元素之后的所有兄弟元素,返回元素集合
siblings()方法可以获取全部的相邻元素
注意:ancestor descendant与parent>child所选择的元素集合不同,前者的层次关系是祖先与后代,而后者是父子关系;
另外,prev+next可以使用.next()代替,而prev~siblings可以使用nextAll()代堆替。
综合实例:
<html>
<head>
    <title>练习jQuery层次选择器</title>
    <script language="javascript" type="text/javascript" 
            src="jquery/jquery-1.7.1.js"></script>
    <style type="text/css">
           body{font-size:12px;text-align:center}
           div,span{float:left;border:solid 1px #ccc;margin:8px;display:none}
           .clsFraA{width:100px;height:100px}
           .clsFraP{width:80px;height:80px;background-color:#eee}
           .clsFraC{width:60px;height:60px;background-color:#ddd}
    </style>
    <script type="text/javascript">
window.οnlοad=function(){
var abc=window.prompt("请输入编号:","");
abc=abc*1;
switch(abc)
{
case 1:
$(function(){ //匹配后代元素
 $("#divMid").css("display","block");
 $("div span").css("display","block");
})
break;
case 2:
$(function(){ //匹配子元素
 $("#divMid").css("display","block");
 $("div>span").css("display","block");
})
break;
case 3:
$(function(){ //匹配后面元素
 $("#divMid + div").css("display","block");
 $("#divMid").next().css("display","block");
})
break;
case 4:
$(function(){ //匹配所有后面元素
 $("#divMid ~ div").css("display","block");
 $("#divMid").nextAll().css("display","block");
})
break;
default:
$(function(){ //匹配所有相邻元素
 $("#divMid").siblings().css("display","block");
})
break;
}
}
    </script>
</head>
<body>
    <div class="clsFraA">First</div>
    <div class="clsFraA" id="divMid">
Second
         <span class="clsFraP" id="Span1">
SpanA
              <span class="clsFraC" id="Span2">SpanB</span>
         </span>
    </div>
    <div class="clsFraA">Third</div>
    <div class="clsFraA">Four</div>
</body>
</html>

 

转载于:https://www.cnblogs.com/JasonBie/archive/2012/01/18/2325865.html

你可能感兴趣的文章
mochiweb 源码阅读(十五)
查看>>
前端面试中的常见的算法问题
查看>>
计算机语言的基本理论
查看>>
nodejs流之行读取器例子
查看>>
11本Java好书
查看>>
批量文件重命名工具
查看>>
为什么选用 React 创建混合型移动应用?
查看>>
支付宝app支付
查看>>
GitHub又受攻击了
查看>>
flask权限管理
查看>>
Meteor全栈开发平台 - 不仅仅是前端
查看>>
苹果移除openssl头文件
查看>>
前端碎片知识储备
查看>>
Redisson 成为 GitHub 里星星最多的 Redis Java 客户端
查看>>
C缺陷与陷阱(C Traps and Pitfalls)学习笔记
查看>>
strtr+array_combine实现简单的敏感词过滤
查看>>
域名注册商 GoDaddy 被指悄悄在托管网站页面植入脚本
查看>>
微服务架构 - 巧妙获取被墙的Docker镜像
查看>>
java EasyExcel集成及工具类使用
查看>>
服务器故障,报警声介绍
查看>>