（二）尚硅谷jQuery重点总结（1）【核心函数】【jQuery 对象和 dom 对象区分】_尚硅谷 jquery课件jquery对象是dom对象的数组+ jquery提供的一系列功能函数。-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_41048982/article/details/108975743

注意文中代码需要引用jquery.js文件

jQuery 介绍

常见问题

jQuery 核心函数

$ 是 jQuery 的核心函数，能完成 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">

	//核心函数的4个作用
	//1.传入参数为[函数]时：在文档加载完成后执行这个函数
    $(function () {
        // alert("页面加载完成之后，自动调用");

			//2.传入参数为[HTML字符串]时：根据这个字符串创建元素节点对象
        $("    <div>" +
            "        <span>div-span1</span>" +
            "        <span>div-span2</span>" +
            "    </div>").appendTo("body");

				//3.传入参数为[选择器字符串]时：根据这个字符串查找元素节点对象
        // alert($("button").length);

        var btnObj = document.getElementById("btn01");
        // alert(btnObj);
			//4.传入参数为[DOM对象]时：将DOM对象包装为jQuery对象返回
        // alert( $(btnObj) );

        // alert( $("<h1></h1>") );
        alert($("button"));

    });





</script>
</head>
<body>
    <button id="btn01">按钮1</button>
    <button>按钮2</button>
    <button>按钮3</button>
</body>
</html>

jQuery 对象和 dom 对象区分

1.什么是 jQuery 对象，什么是 dom 对象

2.问题：jQuery 对象的本质是什么？

jQuery 对象是 dom 对象的数组 + jQuery 提供的一系列功能函数。

3.jQuery 对象和 Dom 对象使用区别

jQuery 对象不能使用 DOM 对象的属性和方法

DOM 对象也不能使用 jQuery 对象的属性和方法

4.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">

	$(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]);
		// }

		// document.getElementById("testDiv").innerHTML = "这是dom对象的属性InnerHTML";
		// $("#testDiv").innerHTML = "这是dom对象的属性InnerHTML";

		// $("#testDiv").click(function () {
		// 	alert("click()是jQuery对象的方法");
		// });

		// document.getElementById("testDiv").click(function () {
		// 	alert("click()是jQuery对象的方法");
		// });

		// alert( $(document.getElementById("testDiv"))[0] );

		alert( $("button:first") );
	});

</script>
</head>
<body>
	<div id="testDiv">Atguigu 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>