zoukankan      html  css  js  c++  java
  • :first选择器(jQuery)

    1、:first:获取第一个元素

    2、示例

    (1)源码

    first.html:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>:first选择器</title>
    <script type="text/javascript" src="jquery-2.0.3.js"></script>
    <style type="text/css">
       body{
              7%;
    	  height:100%;
    	  font-size:24px;
    	  font-weight:bold;
    	  background-color:#CCCCFF;
    	  text-align:center;
    	  }
    </style>
    <script type="text/javascript">
         $(function(){
    	      //设置ul中的第一个li的背景色,运用到:first选择器
    	     $("li:first").css("background-color","#00DDDD");
    		 //设置ol中的第一个li的背景色,运用到:first选择器
    		 $(".two li:first").css("background-color","#0000CC");
    		  //设置ol中的第一个li的字体颜色,运用到:first选择器
    		 $(".two li:first").css("color","#FFFFFF");
    	 });
    </script>
    </head>
    
    <body>
       <div>
           <ul class="one">
    	     <li>苹果</li>
    		 <li>梨子</li>
    		 <li>橘子</li>
    		 <li>西瓜</li>
    		 <li>荔枝</li>
    		 <li>葡萄</li>
    		 <li>香蕉</li>
    		 <li>香瓜</li>
    	   </ul>
    	   <ol class="two">
    	     <li>苹果</li>
    		 <li>梨子</li>
    		 <li>橘子</li>
    		 <li>西瓜</li>
    		 <li>荔枝</li>
    		 <li>葡萄</li>
    		 <li>香蕉</li>
    		 <li>香瓜</li>
    	   </ol>
       </div>
    </body>
    </html>
    
    (2)显示结果如下图

                                                       


  • 相关阅读:
    使用HttpURLConnection
    使用HttpURLConnection
    HTTP基本工作原理
    HTTP基本工作原理
    【杭电】[2022]海选女主角
    【杭电】[2022]海选女主角
    【吐槽】这是第200篇博文
    【吐槽】这是第200篇博文
    【NYOJ】[8]一种排序
    【NYOJ】[8]一种排序
  • 原文地址:https://www.cnblogs.com/hzcya1995/p/13315732.html
Copyright © 2011-2022 走看看