jquery儿子选择器 jquery子类选择器

转载

云端小梦 2023-09-25 20:02:06

文章标签 jquery儿子选择器 jquery js javascript 选择器 文章分类 jQuery 前端开发

层级选择器是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>

本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。