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)显示结果如下图

                                                       


  • 相关阅读:
    curl.class.php方便使用
    php发送邮件
    php部分被弃用方法的代替方法
    正则表达式匹配
    php xml常用函数的集合及四种方法
    PHP5中使用PDO连接数据库的方法
    http协议的状态码
    MySQL数据库中的Date,DateTime和TimeStamp类型
    php中json_decode()和json_encode()的使用方法
    UIIabel自适配高度
  • 原文地址:https://www.cnblogs.com/hzcya1995/p/13315732.html
Copyright © 2011-2022 走看看