当前位置: 代码迷 >> Web前端 >> jquery的各种选择器的讲授
  详细解决方案

jquery的各种选择器的讲授

热度:338   发布时间:2012-08-29 08:40:14.0
jquery的各种选择器的讲解

<%@ 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>


 

  相关解决方案