jQuery中的基本选择器

最新推荐文章于 2022-11-03 22:33:30 发布
最新推荐文章于 2022-11-03 22:33:30 发布
阅读量160 收藏
点赞数
分类专栏： 入门 文章标签： jquery js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/syyyyyyyyyyyyyyh/article/details/106751830
版权

层级选择器是jQuery根据DOM元素之间的层级关系获取元素的选择器


$("parent>child")获取元素内的子元素(所有子类元素)
格式 $("parent>child")

<script type="text/javascript">
   //文档就绪函数
   $(function(){
      var data=$("#test>input");
      console.log(data);    
    })
</script>        
<body>
  <div id="test">
    <input type="text">  //选择
    <input type="text">  //选择
         <div>
             <input type="text"/>
        </div>
</body>

$("ancestor children") 获取元素内的后代元素(所有后代元素)

<script type="text/javascript">
   //文档就绪函数
   $(function(){
      var data=$("#test input");
      console.log(data);    
    })
</script>        
<body>
  <div id="test">
    <input type="text"> //选中
    <input type="text"> //选中
         <div>
             <input type="text"/> //选中
        </div>
</body>

$("prev+next") 获取元素紧挨着的下一个同辈元素

<script type="text/javascript">
  //文档就绪函数
 $(function(){
      var data=$("#prev+input");
      console.log(data); 
   })   
</script>        
<body>
  <div id="test">
    <input type="text" value="北京" id="prev"/>
    <input type="text" value="上海" id="next"/> //选中
    <input type="text" value="广州"/>
  </div>    
</body>

$("prev~siblings")

<script type="text/javascript">
//文档就绪函数
 $(function(){
      var data=$("#prev~input");
      console.log(data);    
  })
</script>        
<body>
  <div id="test">
     <input type="text" value="北京" id="prev"/>
     <input type="text" value="上海" /> //选中
     <input type="text" value="广州"/>  //选中
   </div>    
</body>

表单域选择器是jQuery 根据表单元素或类型来获取元素的选择器

$(":input")

<script src="js/jquery-1.8.2.min.js"></script>
<script type="text/javascript">
//文档就绪函数
 $(function(){
      var data=$(":input");
      console.log(data);    
  })
</script>        
<body>
  <form>
     <input type="text" value="北京" id="prev"/> //选中
     <button value="按钮">按钮</button> //选中
   </form>    
</body>    

$(":text") 获取所有type属性值为text的元素

<script src="js/jquery-1.8.2.min.js"></script>
<script type="text/javascript">
  //文档就绪函数
 $(function(){
             var data=$(":text");
             console.log(data);    
  })
</script>    
<body>
   <form>
       <input type="text" value="北京" /> //选中
       <input type="text" value="上海" />    //选中
       <input type="button" value="提交"/>
   </form>
</body>

$(:password) 获取所有type属性值为password的元素

<script src="js/jquery-1.8.2.min.js"></script>
<script type="text/javascript">
  //文档就绪函数
 $(function(){
     var data=$(":password");
      console.log(data);    
  })
</script>            
<body>
   <form>
        <input type="password" value="密码"/> //选中
        <input type="text" value="北京" />
        <input type="button" value="提交"/>
 </form>
</body>

$(:radio) 获取所有type属性值 radio的元素

$(:checkbox) 获取所有type属性值为checkbox的元素

$(:button) 获取所有type属性值和button和<button>元素 
注：和$(“button”)不同。$(“button”)只获取<button>元素。

表单域属性选择器是jQuery根据表单域的属性帅选元素的选择器

$(":checked") 获取所有被选中单选框或者复选框元素

<script src="js/jquery-1.8.2.min.js"></script>
<script type="text/javascript">
  //文档就绪函数
 $(function(){
      var data=$(":checkbox:checked");
      console.log(data);    
  })
</script>          
<body>
   <form>
        <input type="checkbox"  value="篮球"/>篮球
        <input type="checkbox"  value="足球" checked />足球 //轩重工
   </form>    
</body>

$(":selected") 获取下拉框中被选中元素

<script type="text/javascript">
  //文档就绪函数
 $(function(){
      var data=$("select option:selected");
      console.log(data);    
  })
</script>  
<form>
 <select>
    <option >北京</option>
   <option selected>上海</option> //选中
   <option >广州</option></select>
</form>    

位置选择器是jQuery根据元素所在位置获取元素的选择器

$(":first") 获取匹配元素中的第一个元素

<script src="js/jquery-1.8.2.min.js"></script>
<script type="text/javascript">
  //文档就绪函数
 $(function(){
      var data=$("input:first");
      console.log(data);    
  })
</script>     
<body>
   <div>
       <input type="text" value="北京" />  //选中
       <input type="text" value="上海" />
       <input type="text" value="广州" />
   </div>    
</body>

$(":last") 获取匹配元素中的最后一个元素

<script src="js/jquery-1.8.2.min.js"></script>
<script type="text/javascript">
   //文档就绪函数
 $(function(){
      var data=$("input:last");
      console.log(data);    
  })
</script>         
<body>
    <div>
       <input type="text" value="北京" />
      <input type="text" value="上海" />
      <input type="text" value="广州" /> //选中
   </div>
</body>    

$(":even") 匹配一类元素中索引为偶数的元素,从0开始计数

<script src="js/jquery-1.8.2.min.js"></script>
<script type="text/javascript">
   //文档就绪函数
 $(function(){
     var data=$("input:even");
     console.log(data);    
  })
</script>         
<div>
    <input type="text" value="北京" /> //选中
    <input type="text" value="上海" />
    <input type="text" value="广州" /> //选中
    <input type="text" value="深圳" />
</div>  

 

$("odd")匹配一类元素中索引为奇数的元素，从0开始计数

<script src="js/jquery-1.8.2.min.js"></script>
<script type="text/javascript">
   //文档就绪函数
 $(function(){
     var data=$("input:odd");
     console.log(data);    
  })
</script>    
<div>
    <input type="text" value="北京" />
    <input type="text" value="上海" /> //选中
    <input type="text" value="广州" />
    <input type="text" value="深圳" /> //选中
</div>

:eq(index) 匹配一个给定索引值得元素

<script src="js/jquery-1.8.2.min.js"></script>
<script type="text/javascript">
  //文档就绪函数
 $(function(){
     var data=$("input:eq(2)");
     console.log(data);    
  })
</script>        
<div>
    <input type="text" value="北京" />
    <input type="text" value="上海" />
    <input type="text" value="广州" /> //选中
    <input type="text" value="深圳" />
</div>

:gt(index) 匹配所有大于给定索引值的元素

<script src="js/jquery-1.8.2.min.js"></script>
<script type="text/javascript">
//文档就绪函数
 $(function(){
     var data=$("input:gt(2)");
     console.log(data);    
  })
</script>        
<div>
    <input type="text" value="北京" />
    <input type="text" value="上海" />
    <input type="text" value="广州" />
    <input type="text" value="深圳" /> //选中
</div>

:it(index) 匹配所有小于给定索引值的元素

<script src="js/jquery-1.8.2.min.js"></script>
<script type="text/javascript">
  //文档就绪函数
 $(function(){
     var data=$("input:lt(2)");
     console.log(data);    
  })
</script>        
<div>
    <input type="text" value="北京" /> //选中
    <input type="text" value="上海" /> //选中
    <input type="text" value="广州" />
    <input type="text" value="深圳" />
</div>    

属性选择器
属性选择器是jQuery根据元素的属性来获取元素的选择器
$("[属性名]") 匹配所有包含该属性的元素

<script type="text/javascript">
 $(function(){
    var data=$("[name]");
    console.log(data);    
  })
</script>        
<div>
    <input type="text" name="beijing" value="北京" />   //选中
    <input type="text" name="shanghai" value="上海" />//选中
    <input type="text"  value="广州" />
    <input type="text"" value="深圳" />
</div>

    

$("[属性名=属性值]") 匹配所有该元素和该属性值的元素

<script type="text/javascript">
 $(function(){
    var data=$("[name='beijing']");
    console.log(data);    
  })
</script>        
<div>
    <input type="text" name="beijing" value="北京" /> //选中
    <input type="text" name="shanghai" value="上海" />
    <input type="text"  value="广州" />
   <input type="text"" value="深圳" />
</div>

$("[属性选择器1],[属性选择器2]") 匹配所有包含这些元素属性的元素

<script type="text/javascript">
 $(function(){
    var data=$("[id][name='beijing']");
    console.log(data);    
  })
</script>            
<div>
    <input type="text" name="beijing" id="bj" value="北京" /> //选中
    <input type="text" name="shanghai" value="上海" />
    <input type="text" id="gz" value="广州" />
    <input type="text"" value="深圳" />
</div>    


 

syyyyyyyyyyyyyyh
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
jQuery选择器之表单元素选择器
04-13 107
无论是提交还是传递数据，表单元素在动态交互页面的作用是非常重要的。jQuery中专门加入了表单选择器，从而能够极其方便地获取到某个类型的表单元素 表单选择器的具体方法描述： 注意事项： 除了input筛选选择器，几乎每个表单类别筛选器都对应一个input元素的type值。大部分表单类别筛选器可以使用属性筛选器替换。比如 $(':password') == $('[type=pa...
jQuery表单选择器
还没想好
05-08 1436
...... 所有表单选择器：前都要加空格（直接标签的不用） 1  :input表单选择器可以实现，它的功能是返回全部的表单元素，不仅包括所有标记的表单元素，而且还包括、 和 标记的表单元素   $("#frmTest:input") 2  :text表单文本选择器可以获取表单中全部单行的文本输入框元素  $("#frmTest:text") 3 :password选择器，它的功能
jquery学习记录三（表单选择器）
Aart123456789的博客
03-21 140
　　表单选择器包括以下内容： 　　　　（1）:input表单选择器。 　　　　（2）:text表单文本选择器。 　　　　（3）:password表单密码选择器。 　　　　（4）:radio单选按钮选择器。 　　　　（5）:checkbox复选框选择器。 　　　　（6）:submit提交按钮选择器。 　　　　（7）:image图像域选择器。 　　　　（8）:button表单...
登录验证码的实现
henryzhang2009的专栏
06-13 4838
jsp页面： --> if(self!=top){top.location=self.location;} // 重载验证码 function reloadVerifyCode(){ var timenow = new Date().getTime();
Jquery中基本选择器用法实例详解
10-24
主要介绍了Jquery中基本选择器用法,以实例形式较为详细的分析了jQuery中常见选择器的使用方法,并备有较为详细的备注说明,需要的朋友可以参考下
jQuery中的基本选择器用法学习教程
10-22
本教程将深入探讨jQuery的基本选择器，分为简单、进阶和高阶三个层次。 1. 简单选择器： - 元素标签名选择器：通过元素的HTML标签名来选取元素，例如`$('div')`将选取所有`<div>`元素。 - ID选择器：使用`#`符号...
jquery基本过滤选择器
10-24
jquery基本过滤选择器举例、代码、html、可直接运行、学习jquery入门篇
jQuery基本过滤选择器使用介绍
12-12
简单过滤选择器是过滤选择器中使用最广泛的一种 jQuery选择器详解 根据所获取页面中元素的不同，可以将jQuery选择器分为：基本选择器、层次选择器、过滤选择器、表单选择器四大类。其中，在过滤选择器中有可以分为：...
jQuery的选择器
weixin_44106237的博客
08-15 3534
jQuery的四种选择器，基本选择器，层级选择器，过滤选择器，筛选选择器（方法）
jquery获取当前元素索引值index()方法（总结）
热门推荐
叶落无痕的博客
10-24 1万+
jquery的index()方法 搜索匹配的元素，并返回相应元素的索引值，从0开始计数。 如果不给 .index() 方法传递参数，那么返回值就是这个jQuery对象集合中第一个元素相对于其同辈元素的位置。 如果参数是一组DOM元素或者jQuery对象，那么返回值就是传递的元素相对于原先集合的位置。 如果参数是一个选择器，那么返回值就是原先元素相对于选择器匹配元素中的位置。如果找不到匹配的元素，则返回-1。 1 <ul> 2 <li id="foo">foo</li.
jQuery快速入门以及相关练习题
燃灬初者
07-11 681
1 jQuery简介l 为了简化 JavaScript 的开发, 一些 JavsScript 库诞生了. JavaScript库封装了很多预定义的对象和实用函数。能帮助使用者建立有高难度交互的页面, 并且兼容各大浏览器l 当前流行的 JavaScript 库有l jQuery是继prototype之后又一个优秀的Javascript框架。其宗旨是——WRITE LESS,DO MORE。优势如下:...
jquery选择器以及案例
最新发布
m0_59745705的博客
11-03 1111
jquery选择器是jquery为我们提供的一组方法，让我们更加方便的获取到页面中的元素，注意：jquery选择器返回的是jquery对象。 jquery选择器有很多，但是选择器之间可以互相替代，就是说获取到一个元素，会有很多种方法获取到。所以我们平时真正能用到的只是少数的最常用的选择器。 Css()方法：获取/设置样式 1.获取样式：css（）方法设置参数为要获取值的样式名。 $('#getbtn').click(function(){ 1.1获取id为div1这个元素的样式 conso
jQuery中的选择器
wan_da的博客
03-25 756
一、jQuery中选择器的作用 jQuery的选择器是为了选中DOM对象中的元素 二、基本选择器 基本选择器是jQuery中最常用的选择器，直接通过元素的id、class和标签名来查找DOM元素。 1.#id 用法：$("#myEle"); 返回值：单个元素组成的集合 说明：直接选择html中的id="myEle"标签对象; 2.Element 用法：$("div"); 返回值：集合元素 说明：element就是html已经定义的标签元素，如div span a input; 3.clas
19、Query九类选择器
yungcs的专栏
10-10 1642
要求 1）掌握jQuery九类选择器及应用 2）掌握jQuery常用Method-API 3）掌握jQuery常用Event-API一）jQuery九类选择器【参见jQueryAPI.chm手册】 目的：通过九类选择器，能定位web页面（HTML/JSP/XML）中的任何标签 （1）基本选择器【参见01_selector.html】 /1)查找ID为"div1
Jquery实现父子类复选框，选择父类子类全选，选择子类父类显示中间状态，并传值到java后台
dianzijinglin的博客
05-24 3368
父子类复选框，选择父类子类全选，选择子类父类显示中间状态。先看一下图片效果是不是各位想要的，下面的方法我会从选择样式以及判断选择了那些值传入java后台，以及修改时的回显。包括html代码，css代码，js代码。 上图是做的一个二级的权限功能，左边为一级父类，右边为二级子类。
Jquery结点遍历
叫我安森
08-02 856
jQuery.parent(expr) 找父亲节点，可以传入expr进行过滤，比如$("span").parent()或者$("span").parent(".class") jQuery.parents(expr),类似于jQuery.parents(expr),但是是查找所有祖先元素，不限于父元素 jQuery.children(expr).返回所有子节点，这个方法只会返回直接的孩子节点，
sql实现四舍五入保留两位小数，小数不足自动补0
syyyyyyyyyyyyyyh的博客
08-05 9987
round round实现四舍五入(小数位>2) select round(123.4567,2) round(小数位小于2) select round(123.4,2) round小数位小于2，不足补0 select round(123,2) || '' cast (xx as decimal( x, x)) cast 保留两位小数(直接隔断，小数位大于2) select cast(123.456 as decimal(20,2)) cast 小数位小于2 select c
FlinkTime与Window以及Event Time计算规则详解
syyyyyyyyyyyyyyh的博客
09-25 638
在Flink的流式处理中，会涉及到时间的不同概念、 Event Time：是事件创建的时间。它通常由事件中的时间戳描述，例如采集的日志数据中，每一条日志都会记录自己的生成时间，Flink通过时间戳分配器访问的事件时间戳 Ingestion Time：是数据进入Flink的时间。 Processing Time：是每一个执行基于时间操作的算子的本地系统时间，与机器相关，默认的时间属性就是Processing Time。 例如，一条日志进入Flink的时间为2017-11-12 10:00:00...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值