您的位置：首页 > Web前端 > JQuery

[JQ权威指南]第四天：使用jQuery子元素过滤选择器

2015-06-16 10:04 656 查看

<!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=utf-8" />
<head>
<title>使用jQuery子元素过滤选择器</title>
<script language="javascript" type="text/javascript"     src="jquery-2.1.4.js"></script>
<style type="text/css">
body {
    font-size: 12px;
    text-align: center
}
ul {
    width: 241px;
    list-style-type: none;
    padding: 0px
}
ul li {
    height: 23px;
    width: 60px;
    line-height: 23px;
    float: left;
    border-top: solid 1px #eee;
    border-bottom: solid 1px #eee;
    margin-bottom: 5px
}
.GetFocus {
    width: 58px;
    border: solid 1px #666;
    background-color: #eee
}
</style>
<script type="text/javascript">           
//              $(function(){ //增加每个父元素下的第2个子元素类别       
//                $("li:nth-child(2)").addClass("GetFocus");          
//                })            
//              $(function(){ //增加每个父元素下的第一个子元素类别      
//                $("li:first-child").addClass("GetFocus");        
//              })            
//              $(function(){ //增加每个父元素下的最后一个子元素类别   
//                $("li:last-child").addClass("GetFocus");         
//              })          
                $(function(){ //增加每个父元素下只有一个子元素类别   
                  $("li:only-child").addClass("GetFocus");       
                })    
     </script>
</head>
<body>
<ul>
  <li>Item 1-0</li>
  <li>Item 1-1</li>
  <li>Item 1-2</li>
  <li>Item 1-3</li>
</ul>
<ul>
  <li>Item 2-0</li>
  <li>Item 2-1</li>
  <li>Item 2-2</li>
  <li>Item 2-3</li>
</ul>
<ul>
    <li>Item 3-0</li>
</ul>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航