每日分享

一、宽高自适应

自适应指的就是指其宽度可以根据浏器窗口的大小自动改变其宽度（随浏览器宽度的改变而改变）,而不会被浏览器遮住。
案例：

<div id="header"></div> 
<div id="left"></div> 
<div id="right"></div>

$(document).ready(function() {  
  initLayout();  
  $(window).resize(function(){  
    initLayout();  
  });  
});  
function initLayout() {  
  $('#right').width(document.documentElement.clientWidth - $("#left").width()-2);  
  var h = document.documentElement.clientHeight - $("#header").height()-5;  
  $('#left').height(h);  
  $('#right').height(h);  
}

二、first-child 和first-of-type

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
    </head>
    <body>
        <ul>
            <p>11</p>
            <li>小明</li>
            <li>小王</li>
            <li>小张</li>
            <li>小刘</li>
            <li>小李</li>
            <li>小吴</li>
            <li>小赵</li>
        </ul>
    </body>
    <script type="text/javascript" src="js/jquery-2.1.0.js" ></script>
    <script type="text/javascript">
    //获取到页面中第一个元素
        $('li:first').css('color','aqua');
    //获取袋页面中的最后一个元素
        $('li:last').css('color','coral')
    //获取索引值为3的元素
        $('li:eq(3)').css('color','red');
    //获取索引值为6的元素
        $('li').eq(6).css('font-weight','bold')
    //偶数行元素
        $('li:even').css('background','greenyellow')
    //奇数行元素
        $('li:odd').css('background','pink')
    //获取当前元素的第一个子元素
    //获取当前元素的父元素点下面的第一个子元素，如果第一个子元素不是li就停止寻找
        $('li:first-child').css('font-size','32px');
        
        $('li:first-of-type').css('font-size','32px');
        
</script>
</html>

posted on 2017-07-18 22:10 Iamgod` 阅读(105) 评论(0) 编辑收藏举报