<
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 >
< 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 >