<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script src="jquery-1.12.4.js"></script>
<input type="button" value="按钮" id="btn">
<script>
//这个按钮---如果通过DOM获取---DOM对象
//这个按钮--如果通过$或者是jQuery的方式---jQuery对象
//DOM获取的--DOM对象
var btnObj1 =document.getElementById("btn");
//DOM的操作需要解决一些兼容的问题，jQuery中的兼容问题都差不多解决了
//DOM对象--转出JQuery对象，那么就可以使用jQuery中的方法和或者属性了
//DOM对象调用jQuery的方法--不能实现，必须是jQuery对象调用jQuery的方法
//错误的
// btnObj1.click(function () {
// console.log("DOM对象调用jQuery的方法--不能实现");
// });
//如果把DOM对象转---jQuery对象---->$(DOM对象)---jQuery对象
// $(btnObj1).click(function () {
// console.log("$(DOM对象)调用jQuery的方法--能实现");
// });
//jQuery获取的--jQuery对象
var btnObj2=$("#btn");
// console.log(btnObj1==btnObj2);//false
//jQuery对象调用DOM对象的属性和方法，不能实现
//错误的
btnObj2.onclick=function () {
console.log("jQuery对象调用DOM对象的属性和方法，不能实现");
};
//jQuery对象转DOM对象---jQuery对象[0]---DOM对象
btnObj2[0].onclick=function () {
console.log("jQuery对象[0]调用DOM对象的属性和方法，能实现");
};
//DOM对象
var btnObj =document.getElementById("btn");
//jQuery对象
//$(btnObj)
//$(btnObj)[0]--->DOM对象
//$($(btnObj)[0])-->jQuery对象
/* 为什么要把DOM对象转jQuery对象，为什么又把jQuery对象转DOM对象
DOM操作很麻烦（兼容，一个功能写好多代码）-->转jQuery对象，操作简单，不需要写兼容
jQuery操作中，有一些兼容没封装在jQuery中国，转DOM对象，通过原生的js代码实现功能
如果后面都解决了，又想简单的写代码操作内容，再转回jQuery对象
* */
</script>
</body>
</html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script src="jquery-1.12.4.js"></script>
<input type="button" value="按钮" id="btn">
<script>
//这个按钮---如果通过DOM获取---DOM对象
//这个按钮--如果通过$或者是jQuery的方式---jQuery对象
//DOM获取的--DOM对象
var btnObj1 =document.getElementById("btn");
//DOM的操作需要解决一些兼容的问题，jQuery中的兼容问题都差不多解决了
//DOM对象--转出JQuery对象，那么就可以使用jQuery中的方法和或者属性了
//DOM对象调用jQuery的方法--不能实现，必须是jQuery对象调用jQuery的方法
//错误的
// btnObj1.click(function () {
// console.log("DOM对象调用jQuery的方法--不能实现");
// });
//如果把DOM对象转---jQuery对象---->$(DOM对象)---jQuery对象
// $(btnObj1).click(function () {
// console.log("$(DOM对象)调用jQuery的方法--能实现");
// });
//jQuery获取的--jQuery对象
var btnObj2=$("#btn");
// console.log(btnObj1==btnObj2);//false
//jQuery对象调用DOM对象的属性和方法，不能实现
//错误的
btnObj2.onclick=function () {
console.log("jQuery对象调用DOM对象的属性和方法，不能实现");
};
//jQuery对象转DOM对象---jQuery对象[0]---DOM对象
btnObj2[0].onclick=function () {
console.log("jQuery对象[0]调用DOM对象的属性和方法，能实现");
};
//DOM对象
var btnObj =document.getElementById("btn");
//jQuery对象
//$(btnObj)
//$(btnObj)[0]--->DOM对象
//$($(btnObj)[0])-->jQuery对象
/* 为什么要把DOM对象转jQuery对象，为什么又把jQuery对象转DOM对象
DOM操作很麻烦（兼容，一个功能写好多代码）-->转jQuery对象，操作简单，不需要写兼容
jQuery操作中，有一些兼容没封装在jQuery中国，转DOM对象，通过原生的js代码实现功能
如果后面都解决了，又想简单的写代码操作内容，再转回jQuery对象
* */
</script>
</body>
</html>