javascript与jQuery对照学习总结(一)(一些常规操作)

<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>javascript与jQuery对比学习</title>
    <script type="text/javascript" src="style/jquery.min.js"></script>
    <script type="text/javascript">
        function jQueryVsJs(){
        //取得子级元素的不同
            //javascript的方法
            var nodes = document.getElementById("div1").childNodes;//取得子级数组
            for(var i=0;i<nodes.length;i++){
                //alert(nodes.length);//注意这里取得了四个元素，不是三个,文字：click属于一个
                alert(nodes[i].innerHTML);
            }
            //jQuery的方法
            //返回一个jQuery对象,这里取得的元素个数是三个，文字：click不属于数组
            var nodes1 = $("#div1").children();
            for(var i=0;i<nodes1.length;i++){
                //alert(nodes1[i].html());//此法不可行，nodes[i]不是jQuery对象
                alert($(nodes1[i]).html());//通过$()将dom对象转化为jQuery对象
            }
        //取得父级元素,下一个元素，上一个元素
            //javascript的方法
            alert(document.getElementById("div1").parentNode.innerHTML);//父级
            alert(document.getElementById("div1").nextSibling.innerHTML);//下一个
            alert(document.getElementById("div1").previousSibling.innerHTML);//上一个
            //jQuery的方法
            alert($("#div1").parent().html());//父级
            alert($("#div1").next().html());//下一个
            alert($("#div1").prev().html());//上一个
        //根据类名取得元素,javacript不知道怎么实现
            alert($(".class1").get(0).innerHTML);//可以通过get(index)取得数组下标对象
            alert($(".class1")[0].innerHTML);//也可以直接用[下标]实现
            alert($($(".class1")[0]).html());//转化为jQuery对象
        //改变元素样式
            //javascript的方法
            document.getElementById("div1").style.color="red";
            document.getElementById("div1").style.backgroundColor="green";
            //jQuery的方法
            $("#div1").css({"color":"green","background-color":"red"});
        }
    </script>
</head>
<body>
<div>
    dom对象的基本操作<br />
    1.取元素，取子级，取父级，上一个，下一个。<br />
    2.根据id取，根据class取<br />
    3.改变元素样式，子元素内容
</div>

<div>前一个</div>
<div id="div1" onclick="jQueryVsJs();">click
    <div class="class1">1</div>
    <div class="class1">2</div>
    <div class="class1">3</div>
</div>
<div>后一个</div>
</body>
</html>