jquery 01 js节点与jq节点的互换

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <script src="jquery-3.1.1/jquery-3.1.1.min.js"></script>
    
    <div id="list">
        <ul>
            <li>aaaaaa</li>
            <li>bbbbbb</li>
            <li class="c">cccccc</li>
            <li>dddddd</li>
            <li>eeeeee</li>
        </ul>
    </div>
    
    <script type="text/javascript">
//        window.onload = function(){
//            alert("这是js初始化函数");
//        }
        
//        window.onload = function(){
//            alert("这也是一个js初始化函数");
//        }
        /*js中函数名相同函数会替换*/
        
        
//        $(function(){
//            alert("这是jq的初始化函数");
//        });
//        
//        $(function(){
//            alert("这也是一个jq的初始化函数");
//        })
        /*jq中函数名相同的函数不会被替换，其使用了闭包的技术*/
        
        
        
        
//        $(document).ready(function(){
//            
//        });
        
        //缩写
        $(function(){
            //得到一个js对象
            var list = document.getElementById("list");
            
            //通过$(js对象)就可以把js对象封装成一个jq对象
            $(list).css("color","#F4A460").css("background","#668B8B");
            /*可以级联设置*/
            
            // 每一个jq对象（元素，节点）都是一个包装集(就算用id选择器匹配到的元素也一样)
            // 从包装集中取出元素是js对象 
            $("#list li")[1].innerHTML = "这是一个js对象"
            $(".c")[0].innerHTML = "这也是一个js对象"
            
            list = $("#list ul li");
            for(var i=0;i<list.length;i++){
                var li = list[i];
                //用js对象设置
//                li.innerHTML="["+i+"]"+li.innerHTML;
                
                //用jq对象设置
                $(li).html("["+i+"]"+$(li).html());
            }
        });
        
        
    </script>    
</body>
</html>
Paste_Image.png