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