Jquery对象与JS中的DOM对象转换
注意：JQ对象只能操作JQ里面的属性和方法
JS对象只能操作JS里面的属性和方法。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<script src="js/jquery-1.8.3.js"></script>
<script>
function JSWrite(){
//document.getElementById("span1").innerHTML="方方哒!";
//js中的DOM对象也不能调jquery中的方法
//document.html("胖胖哒!");
-----------------------------------------------
//将js中DOM对象转为jquery对象
var spaEle = document.getElementById("span1");
$(spaEle).html("美美哒!");
}
$(function(){
//在jquery加载事件里面可以写javascript代码
/*document.getElementById("but1").onclick =function(){
document.getElementById("span1").innerHTML="乱乱哒!";
}*/
$("#but1").click(function(){
//$("#span1").html("疯疯哒!");
//jquery对象不能调js中DOM对象方法
//$("#span1").innerHTML="么么哒!"
//如果强行用jquery对象调js中DOM对象方法
-----------------------------------------------
//将jquery对象转为js中DOM对象方式一
$("#span1").get(0).innerHTML="疯疯哒!"; 为什么是get(0),可能标签有多个,拿第一个。
//将jquery对象转为js中DOM对象方式二
$("#span1")[0].innerHTML="懵懵哒!";
});
});
</script>
<body>
<input type="button" value="JS写入" onclick="JSWrite()"/>
<input type="button" value="JQ写入" id="but1" /><br/>
<span id="span1">ssss</span>
</body>
</html>
