<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.d1,.d2{
width: 300px;
height: 300px;
}
</style>
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.4.1.js"></script>
<script>
//原生JS代码
// window.onload = function(){
//
// alert("哈哈，有绑定了一个。。。。")
// }
//
// window.onload = function(){
//
// var btu1 = document.getElementById("btu1");
// var btu2 = document.getElementById("btu2");
// var div1 = document.getElementById("d1");
// var div2 = document.getElementById("d2");
// btu1.onclick = function(){
// div1.style.border = "1px solid red";
// div2.style.border = "1px solid green";
// }
//
// btu2.onclick = function(){
// div1.innerHTML = "设置的文字1111";
// div2.innerHTML = "设置的文字2222";
// }
//
//
// }
//JQ代码
//入口函数
$(document).ready(function(){
//给按钮1绑定事件
$("#btu1").click(function(){
//操作对应的DIV：CSS（）
$("#d1").css("border","1px solid green");
$("#d2").css("border","1px solid red");
})
//给按钮2绑定事件
$("#btu2").click(function(){
//操作对应的DIV：test（）
$("#d1").text("我是通过JQ设置的值");
$("#d2").text("我是通过JQ设置的值");
})
});
</script>
</head>
<body>
<input type="button" value="设置DIV的边框" id="btu1" />
<input type="button" value="设置DIV的文字" id="btu2"/>
<hr />
<div class="d1" id="d1"></div>
<div class="d2" id="d2"></div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/jquery-3.4.1.js" ></script>
<script>
$(function(){
//获取JQ对象和DOM对象
//DOM对象
var jObject = document.getElementById("name");
// jObject.value = "张泽凡";
//JQ对象
var $Object = $("#name");
// $Object.val("张泽凡....学习。。。。");
//将DOM对象准换为JQ对象
// $(jObject).val("我是JS对象准换的JQ对象");
//将JQ对象准换为DOM对象（2种方式）
//JQ对象是一个类数组可以用下标直接获取，得到DOM对象
// $Object[0].value = "我是JQ对象准换的JS对象";
//JQ对象是一个类数组可以用get()方法得到DOM对象
$Object.get(0).value = "我是JQ对象准换的JS对象";
});
</script>
</head>
<body>
姓名：<input type="text" id="name" />
<div></div>
<div></div>
<div></div>
</body>
</html>
