看程序学jquery4-选择器

最新推荐文章于 2021-12-06 09:44:03 发布

涂家豪

最新推荐文章于 2021-12-06 09:44:03 发布

阅读量161

点赞数

分类专栏： jquery

本文链接：https://blog.csdn.net/tujiahao1/article/details/93337973

版权

jquery 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

示例 1 : 元素

<script src="http://how2j.cn/study/jquery.min.js"></script>
  
<script>
$(function(){
   $("#b1").click(function(){
      $("div").addClass("pink");
   });
   
});
   
</script>
  <button id="b1">给所有的div元素增加背景色</button>
<br>
<br>
  
<style>
.pink{
   background-color:pink;
}
</style>
   
<div >
Hello JQuery
</div>
 
<div >
Hello JQuery
</div>
 
<div >
Hello JQuery
</div>

示例 2 : id

<script src="http://how2j.cn/study/jquery.min.js"></script>
   
<script>
$(function(){
   $("#b1").click(function(){
      $("#d1").addClass("pink");
   });
    
});
    
</script>
  <button id="b1">给id=d1的div增加背景色</button>
<br>
<br>
   
<style>
.pink{
   background-color:pink;
}
</style>
    
<div id="d1">
Hello JQuery
</div>
  
<div id="d2" >
Hello JQuery
</div>
  
<div  id="d3">
Hello JQuery
</div>

示例 3 : 类

<script src="http://how2j.cn/study/jquery.min.js"></script>
   
<script>
$(function(){
   $("#b1").click(function(){
      $(".d").addClass("pink");
   });
    
});
    
</script>
  <button id="b1">给class='d'的div增加背景色</button>
<br>
<br>
   
<style>
.pink{
   background-color:pink;
}
</style>
    
<div class="d">
Hello JQuery
</div>
  
<div class="d" >
Hello JQuery
</div>
  
<div  >
Hello JQuery
</div>

示例 4 : 层级

<script src="http://how2j.cn/study/jquery.min.js"></script>
    
<script>
$(function(){
   $("#b1").click(function(){
      $("div#d3 span").addClass("pink");
   });
     
});
     
</script>
  <button id="b1">给id='d3'的div 下的 span 增加背景色</button>
<br>
<br>
    
<style>
.pink{
   background-color:pink;
}
</style>
     
<div class="d">
  <span>Hello JQuery</span>
    
</div>
   
<div class="d" >
  <span>Hello JQuery</span>
</div>
   
<div id="d3" >
  <span>Hello JQuery</span>
</div>
试一下

示例 5 : 最先最后

<script src="http://how2j.cn/study/jquery.min.js"></script>
     
<script>
$(function(){
   $("#b1").click(function(){
      $("div:first").addClass("pink");
   });
      
   $("#b2").click(function(){
      $("div:last").addClass("pink");
   });
 
});
      
</script>
  <button id="b1">第一个增加背景色</button>
  <button id="b2">最后一个增加背景色</button>
<br>
<br>
     
<style>
.pink{
   background-color:pink;
}
</style>
      
<div>
  <span>Hello JQuery</span>
     
</div>
    
<div >
  <span>Hello JQuery</span>
</div>
    
<div >
  <span>Hello JQuery</span>
</div>

示例 6 : 奇偶

<script src="http://how2j.cn/study/jquery.min.js"></script>
      
<script>
$(function(){
   $("#b1").click(function(){
      $("div:odd").toggleClass("pink");
   });
       
   $("#b2").click(function(){
      $("div:even").toggleClass("green");
   });
  
});
       
</script>
  <button id="b1">切换奇数背景色</button>
  <button id="b2">切换偶数背景色</button>
<br>
<br>
      
<style>
.pink{
   background-color:pink;
}
.green{
   background-color:green;
}
</style>
       
<div>
  <span>Hello JQuery 0</span>
      
</div>
 
<div>
  <span>Hello JQuery 1</span>
      
</div>
     
<div >
  <span>Hello JQuery 2</span>
</div>
     
<div >
  <span>Hello JQuery 3</span>
</div>
 
<div >
  <span>Hello JQuery 4</span>
</div>
 
</div>
     
<div >
  <span>Hello JQuery 5</span>
</div>
     
<div >
  <span>Hello JQuery 6</span>
</div>

示例 7 : 可见性

<script src="http://how2j.cn/study/jquery.min.js"></script>
        
<script>
$(function(){
   $("#b1").click(function(){
     $("div:visible").hide();
   });
   $("#b2").click(function(){
      $("div:hidden").show();     
   });
});
         
</script>
  <button id="b1">隐藏可见的</button>
  <button id="b2">显示不可见的</button>
  
<br>
<br>
        
<style>
.pink{
   background-color:pink;
}
  
</style>
         
<div>
  <span>Hello JQuery 1</span>
        
</div>
       
<div >
  <span>Hello JQuery 2</span>
</div>
       
<div >
  <span>Hello JQuery 3</span>
</div>
   
<div >
  <span >Hello JQuery 4</span>
</div>
   
</div>
       
<div >
  <span>Hello JQuery 5</span>
</div>
       
<div >
  <span>Hello JQuery 6</span>
</div>

示例 8 : 属性

<script src="http://how2j.cn/study/jquery.min.js"></script>
       
<script>
$(function(){
   $("#b1").click(function(){
      $("div[id]").toggleClass("border");
   });
   $("#b2").click(function(){
      $("div[id='pink']").toggleClass("border");
   });
   $("#b3").click(function(){
      $("div[id!='pink']").toggleClass("border");
   });
   $("#b4").click(function(){
      $("div[id^='p']").toggleClass("border");
   });
   $("#b5").click(function(){
      $("div[id$='k']").toggleClass("border");
   });
   $("#b6").click(function(){
      $("div[id*='ee']").toggleClass("border");
   });
 
});
        
</script>
  <button id="b1">给有id属性的div切换边框</button>
  <button id="b2">给id=pink的div切换边框</button>
  <button id="b3">给有id!=pink属性的div切换边框</button>
  <button id="b4">给有id以p开头的div切换边框</button>
  <button id="b5">给有id以k结尾的div切换边框</button>
  <button id="b6">给有id包含ee的div切换边框</button>
 
<br>
<br>
       
<style>
.pink{
   background-color:pink;
}
.green{
   background-color:green;
}
.border{
   border: 1px blue solid;
    
}
 
button{
   margin-top:10px;
   display:block;
}
 
div{
  margin:10px;
}
</style>
        
<div id="pink">
    id=pink的div
</div>
      
<div id="green">
  id=green的div
</div>
      
<div >
   没有id的div
</div>

示例 9 : 表单对象

<script src="http://how2j.cn/study/jquery.min.js"></script>
 
<script>
$(function(){
   $(".b").click(function(){
      var value = $(this).val();
      $("td[rowspan!=13] "+value).toggle(500);
   });
        
});
        
</script>
 
<style>
table{
    border-collapse:collapse;
        table-layout:fixed;
    width:80%;
}
table td{
    border-bottom: 1px solid #ddd;
    padding-bottom: 5px;
    padding-top: 5px;
}
 
div button{
    display:block;
}
 
</style>
 
<table>
    <tr>
         
        <td rowspan="13" valign="top" width="150px">
            <div >
                <button value=":input" class="b">切换所有的:input</button>
                <button value=":button" class="b">切换:button</button>
                <button value=":radio" class="b">切换:radio</button>     
                <button value=":checkbox" class="b">切换:checkbox</button>       
                <button value=":text" class="b">切换:text</button>       
                <button value=":password" class="b">切换:password</button>       
                <button value=":file" class="b">切换:file</button>       
                <button value=":submit" class="b">切换:submit</button>       
                <button value=":image" class="b">切换:image</button>     
                <button value=":reset" class="b">切换:reset</button>         
            </div>           
        </td>
        <td width="120px">说明</td>
        <td width="120px">表单对象</td>
        <td width="">示例</td>
    </tr>
<tr>
  <td >input按钮</td>
  <td >:button</td>
  <td><input type="button" value="input按钮"/></td>
</tr>
 
<tr>
  <td>button按钮</td>
  <td >:button</td>
  <td><button>Button按钮</button></td>
</tr>
<tr>
  <td>单选框</td>
  <td >:radio</td>
  <td><input type="radio" ></td>
</tr>
<tr>
  <td>复选框</td>
  <td >:checkbox</td>
  <td><input type="checkbox"  ></td>
</tr>
 
<tr>
  <td>文本框</td>
  <td >:text</td>
  <td><input type="text" /></td>
</tr>
<tr>
  <td>文本域</td>
  <td ></td>
  <td><textarea></textarea></td>
</tr>
<tr>
  <td>密码框</td>
  <td >:password</td>
  <td><input type="password" /></td>
</tr>
<tr>
  <td>下拉框</td>
  <td ></td>
  <td><select><option>Option</option></select></td>
</tr>
 
<tr>
  <td>文件上传</td>
  <td >:file</td>
  <td> <input type="file" /></td>
</tr>
 
<tr>
  <td>提交按钮</td>
  <td >:submit</td>
  <td><input type="submit" /></td>
</tr>
<tr>
  <td>图片型提交按钮</td>
  <td >:image</td>
  <td><input type="image" src="http://how2j.cn/example.gif" /></td>
</tr>
 
<tr>
  <td>重置按钮</td>
  <td >:reset</td>
  <td><input type="reset" /></td>
</tr>
 
</table>

示例 10 : 表单对象属性

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<script src="http://how2j.cn/study/jquery.min.js"></script>
 
<script>
$(function(){
   $(".b").click(function(){
      var value = $(this).val();
      $("td[rowspan!=13] "+value).toggle(500);
   });
    
   $(".b2").click(function(){
      var value = $(this).val();
      var options = $("td[rowspan!=13] "+value);
      alert("选中了"+options.length+"条记录！");
   });
        
});
        
</script>
 
<style>
table{
    border-collapse:collapse;
        table-layout:fixed;
    width:80%;
}
table td{
    border-bottom: 1px solid #ddd;
    padding-bottom: 5px;
    padding-top: 5px;
}
 
div button{
    display:block;
}
 
.border{
   border: 1px blue solid;
     
}
 
</style>
 
<table>
    <tr>
         
        <td rowspan="13" valign="top" width="120">
            <div >
                <button value=":enabled" class="b">切换:enabled</button>
                <button value=":disabled" class="b">切换:disabled</button>       
                <button value=":checked" class="b">切换:checked</button>     
                <button value=":selected" class="b2">:selected数量</button>      
            </div>           
        </td>
        <td width="120">说明</td>
        <td width="120">表单对象属性</td>
        <td width="100px">示例</td>
    </tr>
<tr>
  <td >enabled的按钮</td>
  <td >:enabled</td>
  <td><input type="button" enabled="enabled" value="enabled的按钮"/></td>
</tr>
 
<tr>
  <td >disabled的按钮</td>
  <td >:disabled</td>
  <td><input type="button" disabled="disabled" value="disabled的按钮"/></td>
</tr>
 
  <td >选中的复选框</td>
  <td >:checked</td>
  <td>
     
    <input type="radio" checked="checked" ><br>
    <input type="radio" ><br>
    <input type="checkbox" ><br>
    <input type="checkbox" checked="checked" >
  </td>
 
<tr>
  <td>选中的下拉列表</td>
  <td >:selected</td>
  <td>
    <select size="3" multiple="multiple">
       <option selected="selected">苍老师</option>
       <option >高树玛利亚</option>
       <option selected="selected">遥美</option>
    </select>
  </td>
</table>
 
<form>
 
</form>
试一下

示例 11 : 当前元素

<script src="http://how2j.cn/study/jquery.min.js"></script>
   
<script>
$(function(){
   $("#b1").click(function(){
     $(this).hide();
   });
    
});
</script>
  
<button id="b1">点击隐藏</button>

涂家豪

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
看程序学jquery4-选择器

示例 1 : 元素<script src="http://how2j.cn/study/jquery.min.js"></script> <script>$(function(){ $("#b1").click(function(){ $("div").addClass("pink"); }); }); <...
复制链接

扫一扫

专栏目录