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 >