一、JQuery概述
JQuery是一个快速、小型、功能丰富的JavaScript库。它使HTML文档遍历和操作、事件处理、动画和Ajax等变得更为简单，使用易于使用的API，可以跨多个浏览器工作。由于通用性和可扩展性的结合，jQuery已经改变了数百万人编写JavaScript的方式。
特点：
- 写更少的代码，做更多的事情
- 我们的页面js代码和HTML页面代码分离(动态绑定)
二、JQ入门
简写JQ代码：
1
2
3
| $((function(){
// 在这里写你的代码...
});
|
五种文件加载写法：
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
|
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<!--导包,引入JQ的文件-->
<script type="text/javascript" src="../../js/jquery-1.11.0.js" ></script>
<script>
//js文档加载完成的事件
window.onload = function()
{
alert("window.onload 111");
}
window.onload = function()
{
alert("window.onload 222"); //覆盖上一个的111
}
/*文档加载完成的事件*/
jQuery(document).ready(function(){
alert("jQuery(document).ready(function()");
});
/*
jQuery 简写成 $
*/
$(document).ready(function(){
alert("$(document).ready(function()");
});
/*
最简单的写法
*/
$(function(){
alert("$(function(){");
});
</script>
</head>
<body>
</body>
</html>
|
三、JQ操作
- JQ和JS之间的转换
JQ对象只能调用JQ的属性和方法
JS对象只能调用JS的属性和方法
触发click事件—>p/div标签的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
|
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript" src="../js/jquery-1.11.0.js"></script> //jq一定要有的调用外部js文件
<script>
//JS的方式
function changeJS(){
var div=document.getElementById("div1");//获取div标签内容
//div.innerHTML="JS成功了!" //通过innerHTML更改内容
//JS对象 转成 JQ对象
$(div).html("转成JQ对象!");
}
//JQ的方式
$(function(){
//按钮绑定事件
$("#b2").click(function(){ //第二个按钮的id名为b2
//找到div标签
$("#div1").html("JQ成功了!");
//JQ对象 转成 JS对象
var $div=$("#div1");
var jsDiv=$div[0];//用中间量把div的值放在数组第一位
jsDiv.innerHTML="转成JS对象!";
});
});
</script>
</head>
<body>
<input type="button" value="JS修改div内容" onclick="changeJS()" > //JS通过事件触发函数，函数实现功能
<input type="button" value="JQ修改div内容" id="b2"> //JQ通过事件对于标签的jQuery代码格式
<div id="div1">
这里的内容一会就要被JS或者JQ改掉了!
</div>
</body>
</html>
|
四、开发步骤
