注意文中代码需要引用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>