前台技术学习6
作者：互联网
今天开始学习jQuery（下面称呼它为jq）。
1、jq是一个JS库，极大简化了JS编程。
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
//JS的点击事件绑定
var btn = document.getElementById("btn");
btn.onclick = function(){
alert("helllo");
}
//jq点击事件绑定
$(function(){
var btn = $("#btn");
btn.click(function(){
alert("hello");
})
})
</script>
2、使用jq必须导入jq库，否则不能使用，可以根据官网直接导入，也可以下载之后在进行导入，我是直接导入的
官网地址：https://www.jb51.net/zt/jquerydown.htm
3、$()是jq的核心函数，能够完成jq许多功能。
根据传入参数的不同，运行结果也不同。
①传入函数，相当于 onl oad = function()
②传入html字符串，直接创建html标签对象
③传入选择器，$()会根据选择器查询对象
④传入DOM对象，会把DOM对象转化为jq对象
4、①DOM和jq的返回结果不同
②jq对象的本质：dom对象数组+jq提供的一系列功能函数
③jq不能使用DOM对象属性和方法，同理，DOM也不能使用jq属性和方法。可以使用单击事件验证
④DOM和jq对象之间的相互转化，都必须有一个DOM或jq对象，然后进行转化。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="test">hello world</div>
<button id="btn1">貂蝉</button>
<button id="btn2">西施</button>
<button id="btn3">杨玉环</button>
<button id="btn4">王昭君</button>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
// alert($(document.getElementById("test"))[0]);
// var arr = [12,"mn",false];
// var $btn = $("button");
// for(var i = 0; i < $btn.length; i ++){
// alert($btn[i]);
// }
document.getElementById("test").innerHTML = "Dom属性";//dom不能使用jQuery属性和方法
var btn1 = document.getElementById("btn1");
btn1.onclick = function () {
alert("你好");
}
$("#btn2").click(function () {//jQuery不能使用Dom中的属性和方法
alert("世界");
});
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<button id="btn1">按钮1</button>
<div>
<span>你好</span>
</div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
// $(function () {
// var $btn1 = $("#btn1");//根据id查找对象
// $btn1.click(function () {
// alert("单击事件");
// });
// });
// $(f());
//
// function f() {
// alert("hello world");
// }
// $("<div>" +
// " <span>世界</span>\n" +
// "</div>").appendTo("body");
var btn1 = document.getElementById("btn1");
alert(btn1);
alert($(btn1));
</script>
</body>
</html>
标签：function,jq,alert,学习,技术,前台,var,btn,btn1 来源： https://www.cnblogs.com/jzz-111jy/p/15760118.html