什么是jquery
- jquery，顾名思义，也就是js和查询，即是JavaScript开发的库。
- jquery是一套跨浏览器的JavaScript库，简化HTML和JavaScript之间的操作。
- 全球前10000个访问最高的网站中，有65%使用了jquery，是目前最受欢迎的JavaScript库。
- Jquery的好处：1、极大地简化了JavaScript开发人员遍历HTML文档 2、操作DOM 3、简化处理事件 4、简化执行动画 5、开发Ajax 6、链式操作 7、隐式迭代
版本
前者开发版本有格式化和备注，后者线上版本没有格式化和备注；
pc端：1.x；手机端：2.x
HelloWorld
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
|
<!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">
window.onload = function(){
var btnEle = document.getElementById("btnId");
btnEle.onclick = function(){
alert("HelloWorld");
}
}
</script> -->
<!-- 1、jQuery是JavaScript的第三库 dbutils.jar -- java
jQuery -- javascript
2、使用jquery必须先引入jquery的库文件 jquery-1.7.2.js jquery-1.7.2.min.js
使用script标签引入
<script type="text/javascript" src="../script/jquery-1.7.2.js"></script>
-->
<script type="text/javascript" src="../script/jquery-1.7.2.js"></script>
<script type="text/javascript">
//编写js代码
//$():调用$方法 $():叫做jquery的核心函数
//为$()方法传入一个 function(){}作为参数:就相当于window.onload=function(){写代码} $(function(){ 写代码 });
//
$(function(){
//使用$();查找元素 使用.click()来绑定点击响应函数 把单击响应函数作为click()的参数传入即可
$("#btnId").click(function(){
alert("HelloWorld2");
});
});
</script>
</head>
<body>
<button id="btnId">SayHello</button>
</body>
</html>
|
$的本质
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
|
<!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="../../jquery-1.7.2.js"></script>
<script type="text/javascript">
//说明$ 是一个function $();称为jquery的核心函数
// Define a local copy of jQuery
/*var jQuery = function( selector, context ) {
// The jQuery object is actually just the init constructor 'enhanced'
return new jQuery.fn.init( selector, context, rootjQuery );
},*/
//$ 本质就是一个方法 alert($);
// $ == jQuery
$(function(){
$("#btn").click(function(){
alert("你好");
});
});
</script>
</head>
<body>
<button id="btn">Button</button>
</body>
</html>
|
核心函数的四种用法
$是jquery的核心函数，能完成jquery的很多功能。$()就是调用$这个函数
-
传入参数为【函数】时：$(function(){})
文档加载完成后执行此方法，window.onload
-
传入参数为【HTML字符串】时：$("<div>html</div>")
根据字符串创建元素节点对象
-
传入参数为【选择器字符串】时：$("#id")
根据选择器查找出元素节点对象
-
传入参数为【DOM对象】时：$(this)
将dom对象包装为jquery对象返回，只有将js中的dom对象转为jquery的对象，才能调用jquery对象的方法。
演示
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" src="../../jquery-1.7.2.js"></script>
<script type="text/javascript">
// 核心函数的4个作用
// 1.传入参数为【函数】时：`$(function(){})`,文档加载完成后执行此方法，window.onload
// $(function () {
// alert("hello")
// });
$(function () {
// 2.传入参数为【HTML字符串】时：`$("<div>html</div>")`,根据字符串创建元素节点对象
// let ele = $("<li>手机</li>")
// ele.appendTo("#ulId");
// appendTo方法， 将前面的元素加到后面的节点中
$("<li>手机</li>").appendTo("#ulId");
// 3.传入参数为【选择器字符串】时：`$("#id")`,根据选择器查找出元素节点对象
$("#aId").click(function () {
// alert("你好");
})
// 4.传入参数为【DOM对象】时：`$(this)`,将dom对象包装为jquery对象返回，只有将js中的dom对象转为jquery的对象，才能调用jquery对象的方法。
/*
dom对象：使用原生的js查找(创建)到的元素
jquery对象：使用jquery查找到的元素(包装了的元素)都是jquery对象
*/
// dom对象-jquery对象：不能相互操作彼此的方法，要相互操作彼此的方法需要相互转化
let btn1 = document.getElementById("btn1");
$(btn1).click(function () {
alert("sayHello");
})
// jquery对象->dom对象
let btn2 = $("#btn2");
// jQuery查出来的都会封装成原生dom对象数组，即使只有一个元素
let btn2Ele = btn2[0];
btn2Ele.onclick = function (){
alert("sayHello2");
}
// 会打印出btn2
alert($("button")[1].id);
})
</script>
</head>
<body>
<ul id="ulId">
<li>相机</li>
</ul>
<a id="aId" href="#">你好</a>
<button id="btn1">hello1</button>
<button id="btn2">hello2</button>
</body>
</html>
|
DOM对象和jQuery对象相互转化练习
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
|
<!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="../../jquery-1.7.2.js"></script>
<script type="text/javascript">
$(function(){
//testDiv.css("color","red")
//testDiv.style.color = "blue";
//点击第一个按钮，让div的文字变为红色，要求使用原生的dom操作
var btn01 = document.getElementById("dom2dom");
btn01.onclick = function(){
var divEleDom = document.getElementById("testDiv");//返回的是dom对象
divEleDom.style.color = "red";
}
//使用dom对象能不操作jquery的css()方法来改变文字颜色呢
var btn02 = document.getElementById("dom2jQuery");
btn02.onclick = function(){
var divEleDom = document.getElementById("testDiv");//返回的是dom对象
//divEleDom.css("color","red");//这样是不可以的
//需要转化为jquery对象，才可以调用jquery .css()方法;
$(divEleDom).css("color","blue");
}
$("#jQuery2jQuery").click(function(){
//找到jquery对象
$("#testDiv").css("color", "green");
});
$("#jQuery2dom").click(function(){
//找到jquery对象
//$("#testDiv").style.color= "red";//这种操作是错误的
//我们将jquery对象转为dom对象
$("#testDiv")[0].style.color = "red";
});
});
</script>
</head>
<body>
<!-- // style="color: red"-->
<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>
|
