jquery的各种选择器的讲解

最新推荐文章于 2020-09-19 18:35:46 发布
最新推荐文章于 2020-09-19 18:35:46 发布
阅读量492 收藏
点赞数
分类专栏： jquery 文章标签： jquery button class div function input
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ch469299503/article/details/7878271
版权

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
   
    <title>My JSP 'jquery3.jsp' starting page</title>
   
 <meta http-equiv="pragma" content="no-cache">
 <meta http-equiv="cache-control" content="no-cache">
 <meta http-equiv="expires" content="0">   
 <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
 <meta http-equiv="description" content="This is my page">
 <!--
 <link rel="stylesheet" type="text/css" href="styles.css">
 -->
  <style type="text/css">
  *{
   font:4;
   color:RosyBrown;
   
  }
  div{
   border:1px solid red;
   width:210px;
   height:210px;
   margin:10px;
   float:left;
   background:SeaShell;
  }
  div.mini{
   width:80px;
   height:80px;
   margin:10px;
  }
 </style>
 <script type="text/javascript" src="js/jquery-1.6.2.min.js"></script>
 <script type="text/javascript">
 //基本选择器
 //1、ID选择器
  $(document).ready(function()
  {
   /*alert($("#test1")[0].href);
   alert($("#test1").length);//只返回一个元素
   alert($("#test1").html());//返回的是<h1>goole</h1>
   alert($("#test1").text());//返回的是goole
   alert($("#test1")[0].innerHTML);*/
   //alert($("#test1")[0].innerHTML);
   //alert($("#test1")[0].innerText);//在IE中显示google，在火狐中显示undefined
  });
 //2、类选择器
 $(document).ready(function(){
  //$(".test").css("fontSize","80px");
  //$("h1.test").css("color","red");
 //3、标签选择器
  //$("p").css("color","green");
 //群选择器
  //$("p,h1.test").css("color","brown");
  $("*").css("fontSize","20px");
 });
 $(document).ready(function()
 {
  $("#test1").click(function(){
   
   $("#one").css("background","red");}
  );
  $("#test2").click(function()
  {
   $(".mini").css("backgroundColor","blue");;
  });
  $("#test3").click(function()
  {
   $("div").css("background","orange");
  }
  );
  $("#test4").click(function()
  {
   $("*").css("background","blue");
  }
  );
  $("#test5").click(function()
  {
   $("span,div.mini").css("background","pink");
  });
  //层级选择器
  $("#test6").click(function()
   {
    $("body div").css("background","red");//选择body内的所有的div元素，然后给它赋值。(不管是直接的后代，还是间接的，只要是再body中的div都要

设置。)
   }
  );
  $("#test7").click(
   function()
   {
    $("body > div").css("background","orange");//选择的是body内的子标签(div)，它只会选择子标签。如果是子标签嵌套的子标签不会起作用
   }
  );
  $("#test8").click(function()
   {
    $(".one + div").css("background","red");//选择的是class = one的最近的那个标签的。
   }
  );
  $("#test9").click(function()
  {
   $(".two~div").css("background","red");//选择的是class = two 的后面的兄弟标签(就是属于同一级别的)
  });
 });
 
 
 </script>

  </head>
 
  <body>
   <div id="asd">asdasd</div>
     <input  type="button" value="button1" id="test1"><br>
     <input type="button" value="button2" id="test2"><br>
     <input type="button" value="button3" id="test3"><br>
     <input type="button" value="button4" id="test4"><br>
     <input type="button" value="button5" id="test5"><br>
     <input type="button" value="button6" id="test6"><br>
     <input type="button" value="button7" id="test7"><br>
     <input type="button" value="button8" id="test8"><br>
     <input type="button" value="button9" id="test9"><br>
     <div id="one" class="one">
      id为one，class为one的div
      <div class="mini">
       class为mini
      </div>
     </div>
     
     <div id="one" class="two" title="test">
      id为one，class为two,title为test的div
      <div class="mini" title="other">
       class为mini,title为other
      </div>
      <div class="mini" title="test">
       class为mini,title为test
      </div>
     </div>
     
     <div>
      
      <div class="mini">
       class为mini
      </div>
      <div class="mini">
       class为mini
      </div>
      <div class="mini">
       class为mini
      </div>
      <div class="mini">
       class为mini
      </div>
     </div>
     
     <div>
      
      <div class="mini">
       class为mini
      </div>
      <div class="mini">
       class为mini
      </div>
      <div class="mini">
       class为mini
      </div>
      <div class="mini" title="test">
       class为mini,title为test
      </div>
     </div>
     <div>
      <input type="hidden">
     
      包含input的type为"hide"的div
     </div>
  </body>
</html>

 

 

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
   
    <title>My JSP 'jquery4.jsp' starting page</title>
   
 <meta http-equiv="pragma" content="no-cache">
 <meta http-equiv="cache-control" content="no-cache">
 <meta http-equiv="expires" content="0">   
 <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
 <meta http-equiv="description" content="This is my page">
 <!--
 <link rel="stylesheet" type="text/css" href="styles.css">
 -->
 <style type="text/css">
  *{
   font:16px;
   color:RosyBrown;
   
  }
  div{
   border:1px solid red;
   width:210px;
   height:210px;
   margin:10px;
   float:left;
   background:SeaShell;
  }
  div.mini{
   width:80px;
   height:80px;
   margin:10px;
  }
 </style>
 <script type="text/javascript" src="js/jquery-1.6.2.min.js"></script>
 <script type="text/javascript">
  //以下三种形式都可以
  /*$(document).ready(
   function(){
   $("#button1").click(function(){
   alert("asd");
    $("div:contains('caohuan')").css("background","red");
   });
  
  });*/
  //$().ready(function(){});
  /*$(function(){
   //内容选择器
   $("#button1").click(function(){
   
    $("div:contains('caohuan')").css("background","red");//返回的是包含'caohuan'的div,包含它的外套div
   });
   $("#button2").click(function(){
    $("div:empty").css("background","red");//返回的是不包含任何子标签，或热河文本元素的div
   });
   $("#button3").click(function(){
   
    $("div:has(p)").css("background","red");//返回包含有所匹配的元素的div
   });
   $("#button4").click(function()
   {
    $("div:parent").css("background","green");匹配含有子元素或者文本的元素
   });
   //可见性的选择器和效果的基本效果
   $("#button5").click(function(){
    $("div:hidden").show(10000).css("background","blue");//只能对display=none的起作用，对visibility=hidden的不起作用
   });
   $("#button6").click(function(){
    $("div:visible").hide("slow",function(){alert("隐藏起来")});
   });
   $("#button7").click(function(){
    $("div").toggle();
   });
  });*/
  //属性选择器
  /*$(function(){
   $("#button1").click(function(){
   
    //$("div[title]").css("background","orange");//含有title的div
    //$("div[title=test]").css("background","red");//含有title的div并且title=test
    //$("div[title!=test]").css("background","red");;//不含有（title的div并且title=test）,而且包含不包含title的div
    //$("div[title^='te']").css("background","red");//包含title以te开头的div
    //$("div[title$='asd']").hide(1000);包含title以asd结束的div
    //$("div[title*='o']").css('background','red');//包含title中包含o的div
    $("div[id='one'][class^='tw']").css("background","red");//包含id=one并且class以tw开头的div
   });
  
  });*/
  /*$(function(){
   //子元素选择器
   $("#button1").click(function(){
    //$("div:nth-child(2)").css("background","red");//取得每个div下的第二个元素
    //$("ul:nth-child(2)").css("background","red");
    //$("div div:nth-child(3)").css("background","red");
    
     //$("ul :first-child").css("background","red");
    //$("div div:first-child").css("background","red");//选择的是div的第一个子元素
    //$("div div:last-child").css("background","pink");
    //$("div div:only-child").css("background","orange");//选择父元素中只含有一个元素的那个元素
  
   });
  
  });*/
  //表单对象的属性的选择器
  $(function(){
   $("#button1").click(function(){
   
   
    //$("input:enabled").css("background","red");//表单中可以使用的元素
    //$("input:disabled").css("background","red");
    //alert($("input:checked").length);
    /*$.each($("input:checked"),function(i,n)//表单中选中后的radio或checkbox
    {
     alert("asd");
     alert(n.checked);
     n.checked = "false";
     alert(n.checked);
    });*/
    $("select option:selected").css("fontSize","20px");
   });
  });
 </script>
  </head>
 
  <body>
  <input type="button" value="button1" id="button1">
  <!-- 
  <input type="text" readonly="readonly">
    <input type="text" disabled="disabled">两者的区别在于，第一种只是文本不能读，但是可以使用；第二种是文本完全不能使用。
     <ul>
      <li>a</li>
      <li>b</li>
      <li>c</li>
      <li>d</li>
      <li>e</li>
      <li>f</li>
     </ul>
     
     <input type="button" value="button2" id="button2">
     <input type="button" value="button3" id="button3">
     <input type="button" value="button4" id="button4">
     <input type="button" value="button5" id="button5">
     <input type="button" value="button6" id="button6">
     <input type="button" value="button7" id="button7">
     <div id="one" class="one">
      id为one，class为one的div
      <div class="mini">
       class为mini
      </div>
      
     </div>
     
     <div id="one" class="two" title="testasd">
      id为one，class为two,title为test的div<p>caohuan</p>
      <div class="mini" title="other" title="asd">
       class为mini,title为other,
      </div>
      <div class="mini" title="test">
       class为mini,title为test
      </div>
     </div>
     
     <div>
      
      <div class="mini">
       class为mini
      </div>
      <div class="mini">
       class为mini
      </div>
      <div class="mini">
       class为mini
      </div>
      <div class="mini">
       class为mini
      </div>
     </div>
     
     <div>
      
      <div class="mini">
       class为mini
      </div>
      <div class="mini">
       class为mini
      </div>
      <div class="mini">
       class为mini
      </div>
      <div class="mini" title="test">
       class为mini,title为test
      </div>
     </div>
     <div style="display: none">我爱你</div>
     <div style="display:  none;">我的妈啊</div>
     <div>
      包含input的type为"hide"的div
      <div style="width: 20px;height: 20px"></div>
      
     </div>
     -->
     
     <form>
      <input type="text" disabled="disabled"><br>
      <input type="button"><br>
      <input type="checkbox" checked="checked"><br>
      <input type="file"><br>
      <input type="hidden"><br>
      <input type="image"><br>
      <input type="radio" checked="checked"><br>
      <select multiple="multiple">
       <option selected="selected">a</option>
       <option>b</option>
       <option selected="selected">c</option>
       <option>d</option>
      </select><br>
     </form>
  </body>
</html>


 

ch469299503
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Jquery选择器
人无远虑,必有近忧.
01-22 2870
文章目录1. Jquery选择器2. Jquery选择器常用类型2.1 元素 选择器2.2 #id 选择器2.3 .class 选择器2.4 属性选择器2.5 CSS选择器3. 总结规律 1. Jquery选择器 jQuery 选择器允许您对 HTML 元素组或单个HTML元素进行操作。 2. Jquery选择器常用类型 2.1 元素 选择器 基于 HTML元素名 选取元素 <!DOCTYPE html> <html lang="en"> <head> &lt
jquery的选择器
qq_27009517的博客
05-12 149
在self._getTopDocument()中，查找div.page-tabs-content， $("div.page-tabs-content",self._getTopDocument()).on("contextmenu","a.J_menuTab",function(event){}); jQuery([selector,[context]]) selector:用来查找的字符串 context:作为待查找的 DOM 元素集、文档或 jQuery 对象。 oncon...
（CSS学习记录）：CSS选择器
baidu_41388533的博客
09-19 405
写在前面：参考哔哩哔哩黑马程序员pink老师教程 地址：https://www.bilibili.com/video/BV14J4114768?t=328&p=26 目录 CSS选择器（重点） CSS选择器作用（重点） 选择器的作用 CSS基础选择器 标签选择器 类选择器 类选择器特殊用法- 多类名 id选择器 通配符选择器 基础选择器总结 CSS选择器（重点） CSS选择器作用（重点） 选择器的作用 找到特定的HTML页面元素 CSS选择器干啥的？ 选择标签.
JQuery 选择器
CH4211148的博客
12-21 125
JQuery选择器 基本选择器 #id 根据id匹配 .class 根据class类名匹配 element 根据给定元素名匹配 * 匹配索引 selector1, selector2…,selectorN 将每个选择器匹配到的元素合并返回 层次选择器 $(“ancestor descendant”) 选取ancestor里所有descendant元素...
jquery选择器
wyqwilliam的博客
12-15 99
<html> <head> <title>jquery选择器学习</title> <meta charset="UTF-8"/> <!-- jQuery的选择器学习:s 基本选择器: ID选择器： $("#ID名");//返回的是存储了指定的HTML元素对象的数组。 标签...
使用jQuery内容过滤选择器选择元素实例讲解
10-27
内容过滤选择器：根据元素中的文字内容或所包含的子元素特征获取元素，其文字内容可以模糊或绝对匹配进行元素定位，接下来为大家详细介绍下jQuery选择器，感兴趣的朋友可以参考下哈
jQuery选择器用法实例详解
10-23
本文将深入讲解jQuery选择器的用法，结合实例解析其具体使用技巧和注意事项。 1. **ID选择器** ID选择器通过在元素名称前添加`#`来指定元素的唯一ID。例如，`$("#msg")`会选取具有ID "msg"的元素。以下是一个简单...
jQuery选择器全集详解
10-25
本文结合图文代码，基本上将所有的jQuery选择器都讲解了一遍，非常的详尽，希望对大家能有所帮助。
JQuery选择器
04-18
**jQuery选择器详解** 在Web开发中，jQuery库极...为了深入学习jQuery选择器，你可以参考压缩包文件中的`ch06-jQuery选择器`资源，其中可能包含详细的讲解和示例代码，通过实践操作，你将更好地理解和应用这些选择器。
jquery之基本选择器practice(实例讲解)
10-19
下面小编就为大家带来一篇jquery之基本选择器practice(实例讲解)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
基于Springboot和Vue的数码论坛系统设计与实现-源码 数码论坛系统设计与实现代码（高分毕设）
07-24
数码论坛系统设计与实现-源码（高分毕设），个人经导师指导并认可通过的98分毕业设计项目，主要针对计算机相关专业的正在做毕设的学生和需要项目实战练习的学习者。也可作为课程设计、期末大作业。包含全部项目源码[代码]、该项目可以直接作为毕设使用。项目技术栈：前端是vue，后端是springboot，项目代码都经过严格调试，代码没有任何bug！ 系统源码（高分毕设），个人经导师指导并认可通过的98分毕业设计项目，主要针对计算机相关专业的正在做毕设的学生和需要项目实战练习的学习者。也可作为课程设计、期末大作业。包含全部项目源码[代码]、该项目可以直接作为毕设使用。项目技术栈：前端是vue，后端是springboot，项目代码都经过严格调试，代码没有任何bug！ 系统源码（高分毕设），个人经导师指导并认可通过的98分毕业设计项目，主要针对计算机相关专业的正在做毕设的学生和需要项目实战练习的学习者。也可作为课程设计、期末大作业。包含全部项目源码[代码]、该项目可以直接作为毕设使用。项目技术栈：前端是vue，后端是springboot，项目代码都经过严格调试，代码没有任何bug！
java程序设计—JAVA局域网飞鸽传书软件设计与实现(源代码+论文)43.rar
07-24
java程序设计，可供正在学习的同学研究参考。
年终总结汇报PPT模板(20)三套材料.pptx
07-24
年终总结汇报PPT模板(20)三套材料.pptx
ListView侧边A-Z快速定位导航.zip
07-24
ListView侧边A-Z快速定位导航
java程序设计—JAVA文件传输(论文+源代码)59.rar
07-24
java程序设计，可供正在学习的同学研究参考。
java程序设计—[信息办公]学校教务管理系统(jsp+servlet+javabean)_school9.rar
07-24
java程序设计，可供正在学习的同学研究参考。
java程序设计—JAVA公共资源模块的设计与开发(源代码+论文)32.rar
07-24
java程序设计，可供正在学习的同学研究参考。
#-ssm-114-mysql-高校自习室预约系统-.zip
07-24
利用JSP技术来开发一款符合高校使用的自习室预约系统，通过该系统的开发来实现自习室的线上化预约，通过线上预约的方式帮助学生和自习室的管理者能够更加精准的完成对自习室的管理。通过利用现代化的计算机技术来实现学生信息查看、自习室查看、自习室在线预约等功能的实现，能够通过提升自习室的利用率水平来营造更好的校园学习氛围。 关键字：JSP技术，Mysql数据库，自习室管理
基于Springboot和Vue的网上书城源码 网上书城代码（98分期末优秀大作业）
最新发布
07-24
网上书城源码（高分毕设），个人经导师指导并认可通过的98分毕业设计项目，主要针对计算机相关专业的正在做毕设的学生和需要项目实战练习的学习者。也可作为课程设计、期末大作业。包含全部项目源码[代码]、该项目可以直接作为毕设使用。项目技术栈：前端是vue，后端是springboot，项目代码都经过严格调试，代码没有任何bug！ 系统源码（高分毕设），个人经导师指导并认可通过的98分毕业设计项目，主要针对计算机相关专业的正在做毕设的学生和需要项目实战练习的学习者。也可作为课程设计、期末大作业。包含全部项目源码[代码]、该项目可以直接作为毕设使用。项目技术栈：前端是vue，后端是springboot，项目代码都经过严格调试，代码没有任何bug！ 系统源码（高分毕设），个人经导师指导并认可通过的98分毕业设计项目，主要针对计算机相关专业的正在做毕设的学生和需要项目实战练习的学习者。也可作为课程设计、期末大作业。包含全部项目源码[代码]、该项目可以直接作为毕设使用。项目技术栈：前端是vue，后端是springboot，项目代码都经过严格调试，代码没有任何bug！
jQuery基础入门与选择器全解析
- **选择器使用**：教程详细介绍了如何通过jQuery选择器来定位和操作DOM元素。选择器包括： - 选择子元素：`.selector`或`#id selector`选择匹配指定类或ID的元素。 - 选择兄弟节点：`prev()`、`next()`、`...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值