jQuery选择器案例

最新推荐文章于 2023-03-23 09:18:28 发布
最新推荐文章于 2023-03-23 09:18:28 发布
阅读量810 收藏
点赞数
分类专栏： WEB-JQuery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/java_zhaoyanli/article/details/51010139
版权 
<html>
 <head>
 	<meta http-equiv="content-type" content="text/html;charset=utf-8" />

 <style type="text/css">
   div{
    width:200px;
    height: 200px;
    border:1px solid red;
    margin: 2px;
   }
   .mini{
    width: 30px;
    height: 30px;
    background: green;
   }

 </style> 
 </head>
<body>
<input type="button" value="id选择器" id="btn1" /> 
<input type="button" value="类选择器" id="btn2" /> 
<input type="button" value="元素选择器" id="btn3" /> 
<input type="button" value="组合选择器" id="btn4" /> 
<input type="button" value="通配符选择器" id="btn5" /> 

<input type="button" value="父子选择器" id="btn6" /> 
<input type="button" value="祖先后代选择器" id="btn7" /> 
<input type="button" value="下一个兄弟选择器" id="btn8" /> 
<input type="button" value="后面所有兄弟选择器" id="btn9" /> 


<input type="button" value="第一个"   id="btn10" /> 
<input type="button" value="最后一个" id="btn11" /> 
<input type="button" value="偶数"     id="btn12" /> 
<input type="button" value="奇数"     id="btn13" /> 
<input type="button" value="相等" id="btn14" /> 
<input type="button" value="大于" id="btn15" /> 
<input type="button" value="小于" id="btn16" /> 
<input type="button" value="不为" id="btn17" /> 
<input type="button" value="h1~h6" id="btn18" /> 
<input type="button" value="动画" id="btn19" /> 
<input type="button" value="隐藏" id="btn20" /> 
<input type="button" value="可见" id="btn21" /> 


<input type="button" value="第一个子元素" id="btn22" /> 
<input type="button" value="最后一个子元素" id="btn23" /> 
<input type="button" value="第n个子元素" id="btn24" /> 
<input type="button" value="仅有一个子元素" id="btn25" /> 


<input type="button" value="包含指定属性" id="btn26" /> 
<input type="button" value="属性值等于" id="btn27" /> 
<input type="button" value="属性值不于" id="btn28" /> 
<input type="button" value="属性值以t开头" id="btn29" /> 
<input type="button" value="属性值以t结尾" id="btn30" /> 
<input type="button" value="属性值以包含t" id="btn31" /> 
<input type="button" value="包含多个属性" id="btn32" /> 


<input type="button" value="包含指定文本" id="btn33" /> 
<input type="button" value="没有子元素" id="btn34" /> 
<input type="button" value="有子元素" id="btn35" /> 
<input type="button" value="包含指定的值" id="btn36" /> 



<br />
<br />
<!--操作区域-->
<div id="one" title="test">
     <div class="mini" id="two">
       第二个div元素
     </div>
     <div class="mini">
       第三个div元素
     </div>     
     <div class="mini" title="test"></div>  
     第一个div元素
</div>
<div id="three">
    <div class="mini">###</div>
    <div class="mini"></div>
    <div class="mini" title="test"></div>        
</div>
<div class="one">
     <div class="mini"></div>
</div>
<div class="one" title="test" style="display:none">
    这是最后一个div元素
</div>
<h1>第一个h1元素</h1>
<hr/>
你喜欢吃的水果 
<ul id="menu">
   <li>苹果</li>
   <li>梨</li>
   <li class="dd">榴莲</li>
   <li>山竹</li>
   <li>东瓜</li>
</ul>
<form action="#" method="post">
     用户名<input type="text" value="" name="uname" />
     <input type="hidden" value="817812712_9a@Q##!@____" name="acl" />
</form>



<script type="text/javascript" src="jquery-1.11.3.min.js">
</script>
<script type="text/javascript">
  //测试jquery加载是否成功
  //通过点击按钮，改变指定div元素背景颜色，
  //使用对应选择器获取div元素


  //id选择器
  $("#btn1").click(function(){

     $("#two").css("background-color","red");
     //DOM针对错误处理方式
     //var two = document.getElementById("two1");
     //console.log(two.value);


     //jquery如何找错
     //console.log($("#two").length);
  });
  //类选择器
  $("#btn2").click(function(){
    $(".mini").css("background-color","red");
  }); 
   //元素选择器
  $("#btn3").click(function(){
    $("div").css("background-color","red");
  }); 
   //组合选择器
  $("#btn4").click(function(){
    $("div,h1").css("background-color","red");
  }); 
   //通配符选择器
  $("#btn5").click(function(){
    $("*").css("background-color","red");
  });  


  //层级选择器
  //父子
  $("#btn6").click(function(){
    console.log($("body>div").length);
    $("body>div").css("background-color","blue");
  }); 
  //祖先后代
  $("#btn7").click(function(){
    console.log($("body div").length);
    $("body div").css("background-color","blue");
  }); 
  //下一个兄弟元素
  $("#btn8").click(function(){
    $("#three+div").css("background-color","blue")
  });
  $("#btn9").click(function(){
    $("#three~div").css("background-color","blue")
  }); 




  //过滤选择器
  //第一个
  $("#btn10").click(function(){
    $("#menu>li:first").css("background-color","blue");
  }); 
  //第最后一个
  $("#btn11").click(function(){
    $("#menu>li:last").css("background-color","blue");
  }); 
  //偶数 
  $("#btn12").click(function(){
    $("#menu>li:even").css("background-color","blue");
  }); 
  //奇数
  $("#btn13").click(function(){
    $("#menu>li:odd").css("background-color","blue");
  }); 

  //相等
  $("#btn14").click(function(){
    $("#menu>li:eq(0)").css("background-color","blue");
  }); 
  //大于 
  $("#btn15").click(function(){
    $("#menu>li:gt(2)").css("background-color","blue");
  }); 
  //小于
  $("#btn16").click(function(){
    $("#menu>li:lt(1)").css("background-color","blue");
  });
  //不为 
  $("#btn17").click(function(){
    $("#menu>li:not(.dd)").css("background-color","blue");
  });
  //h1---h6
  $("#btn18").click(function(){
    $(":header").css("background-color","blue");
  });

  $("#btn19").click(function(){
    $(":animated").css("background-color","blue");
  });
   //执行jquery小动画,隐藏
   //$("#one").hide(15000);

   //隐藏
  $("#btn20").click(function(){
    console.log($("div:hidden").length);//1
  });
  //可见
  $("#btn21").click(function(){
    console.log($("div:visible").length);
  });


  //子元素过滤器
  $("#btn22").click(function(){
      $("#one :first-child").css("background-color","blue");
   });
  $("#btn23").click(function(){
    $("#one :last-child").css("background-color","blue");
  });
  $("#btn24").click(function(){
     $("#one :nth-child(2)").css("background-color","blue");
  });
  $("#btn25").click(function(){
      $("div :only-child").css("background-color","blue");
  });
  //属性过滤选择器 包含div 包含title
  $("#btn26").click(function(){
      $("div[title]").css("background-color","blue");
  });
  //属性过滤选择器 属性值等于test
  $("#btn27").click(function(){
     $("div[title=test]").css("background-color","blue");
  });
  //属性过滤选择器 属性值不等于test
  $("#btn28").click(function(){
     $("div[title!=test]").css("background-color","blue");
  });
  //属性过滤选择器 属性值以t开头
  $("#btn29").click(function(){
      $("div[title^=t]").css("background-color","blue");
  });
  //属性过滤选择器
  $("#btn30").click(function(){
      $("div[title$=t]").css("background-color","blue");
  });
  //属性过滤选择器
  $("#btn31").click(function(){
      $("div[title*=t]").css("background-color","blue");
  });
  //属性过滤选择器 title=test同时要求有id属性
  $("#btn32").click(function(){
      $("div[title=test][id]").css("background-color","blue");
  });



   //内容过滤选择器   div d字母
   $("#btn33").click(function(){
     $("div:contains(d)").css("background-color","blue");
   });
   // 没有子元素 没有文本
   $("#btn34").click(function(){
     $("div:empty").css("background-color","blue");
   });
   //有子元素，有文本
   $("#btn35").click(function(){
     $("div:parent").css("background-color","blue");
   });
   //匹配父元素
   $("#btn36").click(function(){
    $("div:has(.mini)").css("background-color","blue");
   });


</script>
 </body>
</html>

java_zhaoyanli
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
四大常见的jQuery选择器+案例
ovocc的博客
03-17 6589
常见的jQuery选择器前言四大选择器一.jQuery基础选择器1.ID选择器2.全选选择器3.类选择器4.标签选择器5.并集选择器6.交集选择器二、使用步骤1.引入库2.读入数据总结 前言 jQuery唯一个javascrip库,里面封装了JavaScript常用的的功能代码，优化了DOM操作，事件处理，动画设计和Ajax交互。但因为jQuery对象有自己的封装，dom对象不能使用，所以需要选择器将对象选取出来使用 四大选择器 一.jQuery基础选择器 1.ID选择器 ID选择器可以选择指定id的
JQuery选择器案例
Dnesity的博客
03-08 415
案例一：隔行换色 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script src="../../js/jquery-3.3.1.min.js"></script...
jquery选择器以及案例
m0_59745705的博客
11-03 1114
jquery选择器是jquery为我们提供的一组方法，让我们更加方便的获取到页面中的元素，注意：jquery选择器返回的是jquery对象。 jquery选择器有很多，但是选择器之间可以互相替代，就是说获取到一个元素，会有很多种方法获取到。所以我们平时真正能用到的只是少数的最常用的选择器。 Css()方法：获取/设置样式 1.获取样式：css（）方法设置参数为要获取值的样式名。 $('#getbtn').click(function(){ 1.1获取id为div1这个元素的样式 conso
jQuery 入门&选择器
SAME_LOVE的博客
03-23 588
jQuery 是一个快速、简洁的 JavaScript 库，其设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。
jQuery选择器案例之——index.html
穆雄雄的博客
06-21 1153
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script src="js/jquery-1.8.3.js"></script> <script src="js/index.js"&gt...
jquery选择器案例
three_bird的博客
05-26 922
一、预期效果 实现一个效果，如下。  品牌列表默认精简显示，单击“显示全部品牌”按钮显示全部品牌，同时列表将推荐的品牌的名字高亮显示，按钮里的文字变成“精简显示品牌”。再次点击“精简显示品牌”回到初始页面。 二、实现过程 html结构如下： View Code 1、初始状态 页面加载的时候，只显示前5个品牌和最后一个“其他品牌相机”。所以从第6个开始隐藏后面的品牌（最后一条“其它
jQuery选择器
m0_57774967的博客
06-16 4635
jQuery选择器是jQuery为我们提供的一组方法，让我们更加方便的获取到页面中的元素（注意：jQuery选择器返回的是jQuery对象）jQuery选择器有很多，基本兼容了CSS1到CSS3所有的选择器，并且jQuery还添加了很多更加复杂的选择器jQuery选择器虽然很多，但是选择器之间可以互相替代，就是说获取一个元素，会有很多种方法获取到，所以平时真正能用到的只是少数的最常用的选择器...
jquery奇偶选择器_jQuery选择器
weixin_36486395的博客
12-31 839
1.基本选择器(3种):$("标签名"),如$("p")是选取了所有的p标签节点$("#id名"),如$("#test")是选取了id为test的标签节点$(".class名"),如$(".test")是选取了所有class为test的标签节点上面的$("标签名")和$(".class名")返回的都是所有满足的节点,至于进一步筛选可以添加一些函数,如eq,gt,lt等等.*：匹配所有元素2.组选择...
JQuery 选择器使用详解
闲时不练功，忙时一场空
11-05 2545
文章目录1. 基本选择器2. 层级选择器3. 属性选择器4. 基本过滤器5. 内容过滤器6. 表单过滤器:7. 表单对象属性过滤器8. jQuery 元素筛选 选择器：筛选具有相似特征的元素(标签) 1. 基本选择器 1. 标签选择器（元素选择器） 语法： $("html标签名") 获得所有匹配标签名称的元素 案例： $("div") 选择元素名为<div>的所有元素 2. id选择器 语法： $("#id的属性值") 获得与指定id属性值匹配的元素 案例： $("#one") 选
jQuery 选择器案例.rar
04-09
在这个选择器案例中包含了 3 个基础案例，分别是 呼吸灯特效、手风琴特效、突出展示特效。某些图片可能套用了别人的图片，所有代码是原创。配套与jQuery课程资源。选择器课件详见 ...
jQuery选择器及jquery案例详解(必看)
10-22
本文给大家介绍jquery选择器的相关知识，并通过案例给大家介绍jquery知识，本文介绍的非常详细，具有参考借鉴价值，感兴趣的朋友一起学习吧
jquery日历选择器
06-06
《jQuery日历选择器详解与应用实践》 在网页开发中，日历选择器是一种常见的交互元素，它为用户提供了方便的时间输入方式。本篇文章将深入探讨jQuery日历选择器的实现原理、功能特点以及实际应用，帮助开发者更好地...
jQuery元素选择器用法实例
10-25
主要介绍了jQuery元素选择器用法,通过一个简单的隐藏div元素实例讲述了元素选择器的用法,具有一定的参考借鉴价值,需要的朋友可以参考下
经典的jQuery选择器应用例子
12-16
本篇文章将深入探讨jQuery选择器的详细应用，通过一系列经典实例来帮助你更好地理解和运用这些选择器。 1. 基本选择器： - `$("#id")`：通过ID选取元素，例如`$("#myDiv")`会选择id为"myDiv"的元素。 - `$("....
【202309】毕马威-中国第六届领先汽车科技50_109页.pdf
07-28
【202309】毕马威-中国第六届领先汽车科技50_109页.pdf
毕业设计—流媒体视频直播服务器-可执行内含文档代码-可执行内含文档代码.zip
07-28
毕业设计—流媒体视频直播服务器-可执行内含文档代码-可执行内含文档代码.zip
【202206】中国汽车潮流观察报告-汽车之家研究院_54页.pdf
07-28
【202206】中国汽车潮流观察报告-汽车之家研究院_54页.pdf
tour-project【程序员VIP专用】.zip
最新发布
07-28
【项目简介】 HTML5+CSS实现雪花旅行社
jQuery选择器全解析：48代码片段+21图演示
本文是一篇全面介绍jQuery选择器的教程，共包含48个代码片段和21幅直观的图解，旨在帮助读者深入理解并提升使用jQuery编写代码的效率。以下是主要内容概览： 1. **基本选择器** - **ID选择器**: 通过`.#one`，可以...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值