Note that the code in the text needs to reference the jquery.js file
jQuery introduction
common problem
jQuery core functions
$
Is
the core function of
jQuery
, which can complete
many functions of
jQuery
.
$()
is to call
the function
$
Code example:
<!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>
The distinction between jQuery object and dom object
1. What is a jQuery object and what is a dom object
2. Question: What is the nature of the jQuery object?
The jQuery
object is
an array of
dom
objects
+
a series of functions provided by jQuery
.
3. The difference between jQuery object and Dom object
The jQuery
object cannot use
the properties and methods of the
DOM
object
The DOM
object cannot use
the properties and methods of the
jQuery
object
4. Dom object and jQuery object mutual conversion
Code example:
<!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>