jQuery-jQuery的Hello程序示例
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="../script/jquery-3.6.1.js"></script>
<script type="text/javascript">
// window.onload = function () {
// var btnObj = document.getElementById("btnId");
// alert(btnObj);//[object HTMLButtonElement] ===>> dom对象
// btnObj.onclick = function () {
// alert("js 原生的单击事件");
// }
// }
alert($)
$(function () { // 表示页面加载完成 之后，相当window.onload = function () {}
var $btnObj = $("#btnId"); // 表示按id查询标签对象
$btnObj.click(function () { // 绑定单击事件
alert("jQery 的单击事件");
})
});
</script>
</head>
<body>
<button id="btnId">SayHello</button>
</body>
</html>jQuery-jQuery的函数核心介绍、jQuery-如何区分DOM对象和jQuery对象
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="../script/jquery-1.7.2.js"></script>
<script type="text/javascript">
/*
jQuery 核心函数
$ 是 jQuery 的核心函数，能完成 jQuery 的很多功能。$()就是调用$这个函数
1、传入参数为 [ 函数 ] 时：
表示页面加载完成之后。相当于 window.onload = function(){}
2、传入参数为 [ HTML 字符串 ] 时：
会对我们创建这个 html 标签对象
3、传入参数为 [ 选择器字符串 ] 时：
$(“#id 属性值”); id 选择器，根据 id 查询标签对象
$(“标签名”); 标签名选择器，根据指定的标签名查询标签对象
$(“.class 属性值”); 类型选择器，可以根据 class 属性查询标签对象
4、传入参数为 [ DOM 对象 ] 时：
会把这个 dom 对象转换为 jQuery 对象
*/
//核心函数的4个作用
$(function () {
alert("页面加载完成之后，自动调用");
$(" <div>" +
" <span>div-span1</span>" +
" <span>div-span2</span>" +
" </div>").appendTo("body")
alert($("button").length);
var btnObj = document.getElementById("btn01");
alert(btnObj);
alert($(btnObj));
alert($("<h1></h1>"));
alert($("#btn01"));
});
//传入参数为[函数]时：在文档加载完成后执行这个函数
//传入参数为[HTML字符串]时：根据这个字符串创建元素节点对象
//传入参数为[选择器字符串]时：根据这个字符串查找元素节点对象
//传入参数为[DOM对象]时：将DOM对象包装为jQuery对象返回
</script>
</head>
<body>
<div>
<span>div-span1</span>
<span>div-span2</span>
</div>
<button id="btn01">按钮1</button>
<button>按钮2</button>
<button>按钮3</button>
</body>
</html>jQuery-jQuery对象的本质、jQuery-jQuery对象和DOM对象使用上的区别、jQuery-jQuery对象和DOM对象的相互转换
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="../script/jquery-1.7.2.js"></script>
<script type="text/javascript">
/*
jQuery 对象和 dom 对象区分
1、什么是 jQuery 对象，什么是 dom 对象
Dom 对象
1.通过 getElementById()查询出来的标签对象是 Dom 对象
2.通过 getElementsByName()查询出来的标签对象是 Dom 对象
3.通过 getElementsByTagName()查询出来的标签对象是 Dom 对象
4.通过 createElement() 方法创建的对象，是 Dom 对象
DOM 对象 Alert 出来的效果是：[object HTML 标签名 Element]
jQuery 对象
5.通过 JQuery 提供的 API 创建的对象，是 JQuery 对象
6.通过 JQuery 包装的 Dom 对象，也是 JQuery 对象
7.通过 JQuery 提供的 API 查询到的对象，是 JQuery 对象
jQuery 对象 Alert 出来的效果是：[object Object]
2、问题：jQuery 对象的本质是什么？
jQuery 对象是 dom 对象的数组 + jQuery 提供的一系列功能函数。
3、jQuery 对象和 Dom 对象使用区别
jQuery 对象不能使用 DOM 对象的属性和方法
DOM 对象也不能使用 jQuery 对象的属性和方法
4、Dom 对象和 jQuery 对象互转
1、dom 对象转化为 jQuery 对象（*重点）
1、先有 DOM 对象
2、$( DOM 对象 ) 就可以转换成为 jQuery 对象
2、jQuery 对象转为 dom 对象（*重点）
1、先有 jQuery 对象
2、jQuery 对象[下标]取出相应的 DOM 对象
*/
$(function(){
//testDiv.css("color","red")
//testDiv.style.color = "blue";
var arr = [12,"abc",true];
var $btns = $("button");
for (var i = 0; i < $btns.length; i++){
alert($btns[i])
}
// alert(1);
document.getElementById("testDiv").innerHTML = "这是dom对象的属性InnerHTML";
// $("#testDiv").innerHTML = "这是dom对象的属性InnerHTML"; // jQuery 对象不能使用 DOM 对象的属性和方法
$("#testDiv").click(function (){
alert("click是jQuery对象的方法");
})
// document.getElementById("testDiv").click(function (){
// alert("click是jQuery对象的方法");
// }) // DOM 对象也不能使用 jQuery 对象的属性和方法
alert($(document.getElementById("testDiv")));
alert($(document.getElementById("testDiv"))[0]);
alert($("button:first"));
});
</script>
</head>
<body>
<div id="testDiv">qaqaq is Very Good!</div>
<button id="dom2dom">使用DOM对象调用DOM方法</button>
<button id="dom2jQuery">使用DOM对象调用jQuery方法</button>
<button id="jQuery2jQuery">使用jQuery对象调用jQuery方法</button>
<button id="jQuery2dom">使用jQuery对象调用DOM方法</button>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="../script/jquery-1.7.2.js"></script>
<script type="text/javascript">
//使用$()代替window.onload
$(function(){
//使用选择器获取按钮对象，随后绑定单击响应函数
$("#btnId").click(function(){
//弹出Hello
alert('Hello');
});
});
</script>
</head>
<body>
<button id="btnId">SayHello</button>
</body>
</html><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="../script/jquery-1.7.2.js"></script>
<script type="text/javascript">
//$ 是 jQuery 的核心函数，能完成 jQuery 的很多功能。$()就是调用$这个函数
$(function(){
alert($);
});
</script>
</head>
<body>
<button id="btn">Button</button>
</body>
</html>