3.1JQuery介绍
什么是JQuery？
jQuery，顾名思义，也就是 JavaScript 和查询（Query），它就是辅助 JavaScript开发的 js 类库。（也可以这么理解JQuery就是在Js的基础之上进行快速的查询）
使用Js与JQuery绑定单击响应事件的对比：
1、 Js绑定单击响应事件
1. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
2. <html>
3. <head>
4. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
5. <title>Insert title here</title>
6. <script type="text/javascript">
7. /**
8. * 使用JavaScript绑定单击响应事件
9. */
10. window.onload = function () {
11. var btnIdObj = document.getElementById("btnId");
12. btnIdObj.onclick = function () {
13. alert("这是使用javaScript绑定的单击响应事件！");
14. }
15. }
16. </script>
17. </head>
18. <body>
19.
20. <button id="btnId">SayHello</button>
21.
22. </body>
23. </html>
2、 JQuery绑定单击响应事件
1. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
2. <html>
3. <head>
4. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
5. <title>Insert title here</title>
6.
7. <script type="text/javascript" src="../script/jquery-1.7.2.js"></script>
8. <script type="text/javascript">
9. /**
10. * 使用jQuery实现单击响应事件
11. * 1、首先要引入jQuery文件，在script标签的末尾使用src引入，注意是使用另外一个script标签进行引入
12. */
13.
14. $(function () {
15. /**
16. * $(function(){}表示：在页面加载完成之后，相当于JavaScript中的，window.onload
17. */
18.
19. var $btnIdObj = $("#btnId");//获取绑定的对象，相当于var btnIdObj = document.getElementById("btnId");
20. $btnIdObj.click(function () {
21. //为对象绑定单击响应事件
22. alert("这是使用jQuery绑定的单击响应事件！");
23. })
24. })
25. alert($)
26. </script>
27. </head>
28. <body>
29.
30. <button id="btnId">SayHello</button>
31. </body>
32. </html>
JQuery中的$是什么？
$代表的是一个查询函数，可以实现对Js的快速查询操作。
3.2JQuery核心函数
$函数的使用方法：
1、 传入参数为 [ 函数 ] 时：表示页面加载完成之后。相当于 window.onload = function(){}；
2、 传入参数为 [ HTML 字符串 ] 时：会对我们创建这个 html 标签对象；
3、 传入参数为 [ 选择器字符串 ] 时：
（1）$(“#id 属性值”); id 选择器，根据 id 查询标签对象；
（2）$(“标签名”); 标签名选择器，根据指定的标签名查询标签对象；
（3）$(“.class 属性值”); 类型选择器，可以根据 class 属性查询标签对象；
4、传入参数为 [ DOM 对象 ] 时：会把这个 dom 对象转换为 jQuery 对象。
1. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
2. <html>
3. <head>
4. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
5. <title>Insert title here</title>
6. <script type="text/javascript" src="../script/jquery-1.7.2.js"></script>
7. <script type="text/javascript">
8.
9. //核心函数的4个作用
10. $(function () {
11. /**
12. * 1、如果$函数中传进来的参数是一个函数，则表示【在页面完成加载之后】，也就是相当于window.onload
13. */
14. alert("表示页面加载完成之后");
15.
16. /**
17. * 2、传入参数为[HTML字符串]时：根据这个字符串创建元素节点对象
18. * 使用jQuery创建标签对象，可以大大地节省时间与步骤
19. */
20. $("<div>\n" +
21. " <span>我是通过jQuery创建的标签</span>\n" +
22. "</div>").appendTo("body");
23.
24. /**
25. * 3、传入参数为[选择器字符串]时：根据这个字符串查找元素节点对象
26. * $(标签名) 根据标签名查找对象
27. * $(#id名） 根据id的值查找对象
28. * $(.class名） 根据class名查找对象
29. */
30. var $buttonObj = $("button");
31. alert($buttonObj);
32.
33. /**
34. * 4、传入参数为[DOM对象]时：将DOM对象包装为jQuery对象返回
35. */
36. var btnObj = document.getElementById("btn");
37. var $1 = $(btnObj);//在这里返回的是一个jQuery对象
38. alert($1);
39. })
40.
41. </script>
42. </head>
43. <body>
44. <button id="btn">按键一</button>
45. </body>
46. </html>
179
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
