* jQuery对象和DOM对象的互转:
* DOM操作太麻烦(实现兼容代码太多),转jQuery对象操作简单,不需要写兼容代码
* jQuery操作中,有一些兼容没有封装在jQuery中,转DOM对象。通过原生js代码实现该功能;如果后面jQuery代码解决了兼容性问题,还可以在转回来
* 如果对象是通过DOM方式获取的,那么就是DOM对象
* 如果对象是通过jQuery方式获取的,那么就是jQuery对象
* 如何把DOM对象转jQuery对象:
* $(DOM对象)--->jQuery对象
* 如何把jQuery对象转DOM对象:
* jQuery对象[0]--->DOM对象;或者是$().get(0)也可以
DOM版本的网页开关灯
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.cls{
background-color: blue;
}
</style>
</head>
<body>
<input type="button" value="关灯" id="btn"/>
<script>
document.getElementById("btn").onclick=function () {
var body=document.body;
if(body.className=="cls"){
body.className="";
this.value="关灯";
}else{
body.className="cls";
this.value="开灯";
}
};
</script>
</body>
</html>
jQuery版本的网页开关灯
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.cls{
background-color: blue;
}
</style>
<script src="../jquery-1.12.1.js"></script>
</head>
<body>
<script>
/*
* DOM中
* 表单标签DOM操作中设置和获取value属性的值---->对象.value
* jQuery中:
* jQuery对象.val();-------表示的是获取该元素的value属性值
* jQuery对象.val("值");----表示的是设置该元素的value属性值
* jQuery对象.css("css的属性名字","属性的值");---->设置元素的样式属性值
* 注意:
* .css("属性","值");属性的写法可以是DOM操作中的js写法,也可以是css中的写法
* */
</script>
<input type="button" value="关灯" id="btn"/>
<script>
$("#btn").click(function () {
//判断body标签是否应用了cls类样式
if ($("body").hasClass("cls")){
$("body").removeClass("cls");
$("#btn").val("关灯");
}else{
$("body").addClass("cls");
$("#btn").val("开灯");
}
});
</script>
<script>
// $("#btn").click(function () {
// //this是DOM对象,需要转化为jQuery对象
// if($(this).val()=="关灯"){
// $("body").css("backgroundColor","black");
// $(this).val("开灯");
// }else{
// $("body").css("backgroundColor","");
// $(this).val("关灯");
// }
// });
</script>
</body>
</html>