jQuery
程序员文章站
2022-03-10 19:24:57
jQuery未完待续。。。 ......
一、jQuery简介（write less，do more）
1、jQuery概念
jQuery是一个轻量级（严格意义上说，不能称为一个框架）的js库，辅助js开发，兼容css，多浏览器，jQuery2.0及之后的版本不再支持IE6/7/8，能够使用户更加方便的处理HTML、events、实现动画效果，并且方便的为网站提供AJAX交互；最大的优势是：说明文档很全，各种应用说明的十分详细，还有许多成熟的js插件可供选择。
使用了jQuery之后，就不需要在HTML里边插入大量的js代码，只需要定义一个id即可（有些时候不需要）；
2、jQuery版本
jquery-1.8.3.js：体积大，适合学习使用；jquery-1.8.3.min.js：，压缩版，体积小，适合开发使用；（1.8.3是目前使用较多的版本）
二、jQuery的引入和对象获取
1、jQuery既然是一个js库，使用前就要先引入：<script type="text/javascript" src="xxx/jquery-1.8.3.js"></script>;
/*知识点*/：传统的js页面加载（onload）和jQuery页面加载的区别：
a、传统的js页面加载（onload）只能写一次，多次书写会存在后面覆盖前面的现象，且jQuery的页面加载比js快；
b、jQuery加载会在整个dom树结构绘制完成之后进行加载，而js是在整个页面加载完成之后再加载；
c、jQuery多次书写不存在覆盖的问题，多次加载的话，从上往下顺序执行，如下（包含了几种jQuery的书写规范）：
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="UTF-8">
5 <title>JS与JQ页面加载区别</title>
6 <script type="text/javascript" src="../../js/jquery-1.8.3.js" ></script>
7 <script>
8 window.onload = function(){
9 alert("张三");
10 }
11
12 //传统的方式页面加载会存在覆盖问题，加载比JQ慢(整个页面加载完毕<包括里面的其它内容，比如图片>)
13 window.onload = function(){
14 alert("老王");
15 }
16
17 //JQ的加载比JS加载要快！(当整个dom树结构绘制完毕就会加载)
18 jQuery(document).ready(function(){
19 alert("李四");
20 });
21
22 //JQ不存在覆盖问题，加载的时候是顺序执行
23 $(document).ready(function(){
24 alert("王五");
25 });
26
27 //简写方式
28 $(function(){
29 alert("汾九");
30 });
31
32 </script>
33 </head>
34 <body>
35 </body>
36 </html>
2、jQuery获取对象
(1)语法：var a = $("#id名")；（括号里边实际上放的是选择器，这里写的是id选择器（常用的），也可以使用别的，如：$("p")，指的是p标签选择器）；
例如：$("#id名").click(function(){ alert("dadada"); })；
注：a、DOM对象（js）无法操作JQ对象里面属性和方法；JQ对象也无法操作JS里面的属性和方法；
b、var b = document.getElementById("span1")；其中a是jQuery对象，b是dom对象，两者不同，属性不能混着使用，但是两个对象可以转换；
(2)两种对象之间的转换：
jQuery对象向dom对象的转换(转换后可以使用dom的属性innerHTML)的两种方法：
a、$("#span1").get(0).innerHTML="美美哒！";
b、$("#span1").[0].innerHTML="美美哒！";
dom对象向jQuery对象的转换：
var b = document.getElementById("span1")；——>${b}.html="美美哒";
注：转换为jQuery对象之后，html可以换位css（即：可以使用jQuery的属性）：
比如：$("tbody tr:even").css("background-color","yellow");
（3）在实际开发中，var opEle= xxx；opEle是一个js变量，var $opEle= xxx；$opEle指的是jQuery变量；
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Dom与JQ对象之间的转换</title>
<script type="text/javascript" src="../../js/jquery-1.8.3.js" ></script>
<script>
function write1(){
//1.JS的DOM操作
//document.getElementById("span1").innerHTML="萌萌哒！";
//DOM对象无法操作JQ对象里面属性和方法
//document.getElementById("span1").html("萌萌哒！");
var spanEle = document.getElementById("span1");
//将DOM对象转换成JQ对象
$(spanEle).html("思密达");
}
$(function(){
$("#btn").click(function(){
//JQ对象无法操作JS里面的属性和方法！！！
//$("#span1").innerHTML="呵呵哒！"，innerHTML是js的属性
$("#span1").html("呵呵哒！");//这里只能用html
//JQ对象向DOM对象转换方式一
$("#span1").get(0).innerHTML="美美哒！";
//JQ对象向DOM对象转换方式二
$("#span1")[0].innerHTML="棒棒哒！";
});
});
</script>
</head>
<body>
<input type="button" value="JS写入" onclick="write1()"/>
<input type="button" value="JQ写入" id="btn"/><br />
班长：<span id="span1">你好帅！</span>
</body>
</html>
三、jQuery的方法介绍（具体见jQuery手册，这些方法不要求掌握（原因是效果太low））
1、效果类方法
show（）：显示隐藏的图片等；hide（）：隐藏图片等；
slideDown（）/slideUp（）；fadeIn（）/fadeOut（）；
掌握一种方法：toggle（）：显示/隐藏标签，写一个小代码介绍一下：
当然toggle（switch）参数可为true：显示；false：隐藏；可以用表达式代表true或者false；
1 <script type="text/javascript" src="../js/jquery-1.8.3.js" ></script>
2 <script>
3 $(function(){
4 $("#btn").click(function(){
5 $("#img1").toggle();
6 });
7 });
8 </script>
四、jQuery的选择器
1、基本选择器：#id（id选择器）、element（标签选择器）、.class（类选择器）、*（通用选择器）、（selector1，selector2，selectorN）（群组选择器）；
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="UTF-8">
5 <title>基本选择器</title>
6 <link rel="stylesheet" href="../../css/style.css" />
7 <script type="text/javascript" src="../../js/jquery-1.8.3.js" ></script>
8 <script>
9 $(function(){
10 $("#btn1").click(function(){
11 $("#one").css("background-color","pink");
12 });
13
14 $("#btn2").click(function(){
15 $(".mini").css("background-color","pink");
16 });
17
18 $("#btn3").click(function(){
19 $("div").css("background-color","pink");
20 });
21
22 $("#btn4").click(function(){
23 $("*").css("background-color","pink");
24 });
25
26 $("#btn5").click(function(){
27 $("#two,.mini").css("background-color","pink");
28 });
29 });
30 </script>
31
32 </head>
33 <body>
34 <input type="button" id="btn1" value="选择为one的元素"/>
35 <input type="button" id="btn2" value="选择样式为mini的元素"/>
36 <input type="button" id="btn3" value="选择所有的div元素"/>
37 <input type="button" id="btn4" value="选择所有元素"/>
38 <input type="button" id="btn5" value="选择id为two并且样式为mini的元素"/>
39 <hr/>
40 <div id="one">
41 <div class="mini">
42 111
43 </div>
44 </div>
45
46 <div id="two">
47 <div class="mini">
48 222
49 </div>
50 <div class="mini">
51 333
52 </div>
53 </div>
54
55 <div id="three">
56 <div class="mini">
57 444
58 </div>
59 <div class="mini">
60 555
61 </div>
62 <div class="mini">
63 666
64 </div>
65 </div>
66
67 <span id="four">
68
69 </span>
70 </body>
71 </html>
2、层级选择器：
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="UTF-8">
5 <title>层级选择器</title>
6 <link rel="stylesheet" type="text/css" href="../../css/style.css"/>
7 <script type="text/javascript" src="../../js/jquery-1.8.3.js" ></script>
8 <script type="text/javascript">
9 $(function(){
10 $("#btn1").click(function(){
11 $("body div").css("background-color","gold");
12 });
13
14 $("#btn2").click(function(){
15 $("body>div").css("background-color","gold");
16 });
17
18 $("#btn3").click(function(){
19 $("#two+div").css("background-color","gold");
20 });
21
22 $("#btn4").click(function(){
23 $("#one~div").css("background-color","gold");
24 });
25 });
26 </script>
27
28
29 </head>
30 <body>
31 <input type="button" id="btn1" value="选择body中的所有的div元素"/>
32 <input type="button" id="btn2" value="选择body中的第一级的孩子"/>
33 <input type="button" id="btn3" value="选择id为two的元素的下一个元素"/>
34 <input type="button" id="btn4" value="选择id为one的所有的兄弟元素"/>
35
36 <hr/>
37 <div id="one">
38 <div class="mini">
39 111
40 </div>
41 </div>
42
43 <div id="two">
44 <div class="mini">
45 222
46 </div>
47 <div class="mini">
48 333
49 </div>
50 </div>
51
52 <div id="three">
53 <div class="mini">
54 444
55 </div>
56 <div class="mini">
57 555
58 </div>
59 <div class="mini">
60 666
61 </div>
62 </div>
63
64 <span id="four">
65
66 </span>
67 </body>
68 </html>
3、基本过滤选择器：
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="UTF-8">
5 <title>层级选择器</title>
6 <link rel="stylesheet" href="../../css/style.css" type="text/css"/>
7 <script type="text/javascript" src="../../js/jquery-1.8.3.js" ></script>
8 <script>
9 $(function(){
10 $("#btn1").click(function(){
11 $("body div:first").css("background-color","red");
12 });
13
14 $("#btn2").click(function(){
15 $("body div:last").css("background-color","red");
16 });
17
18 $("#btn3").click(function(){
19 $("body div:odd").css("background-color","red");
20 });
21
22 $("#btn4").click(function(){
23 $("body div:even").css("background-color","red");
24 });
25 });
26 </script>
27
28
29 </head>
30 <body>
31 <input type="button" id="btn1" value="body中的第一个div元素"/>
32 <input type="button" id="btn2" value="body中的最后一个div元素"/>
33 <input type="button" id="btn3" value="选择body中的奇数的div"/>
34 <input type="button" id="btn4" value="选择body中的偶数的div"/>
35
36 <hr/>
37 <div id="one">
38 <div class="mini">
39 111
40 </div>
41 </div>
42
43 <div id="two">
44 <div class="mini">
45 222
46 </div>
47 <div class="mini">
48 333
49 </div>
50 </div>
51
52 <div id="three">
53 <div class="mini">
54 444
55 </div>
56 <div class="mini">
57 555
58 </div>
59 <div class="mini">
60 666
61 </div>
62 </div>
63
64 <span id="four">
65
66 </span>
67 </body>
68 </html>
4、属性选择器：
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="UTF-8">
5 <title>层级选择器</title>
6 <link rel="stylesheet" href="../../css/style.css" />
7 <script type="text/javascript" src="../../js/jquery-1.8.3.js" ></script>
8 <script>
9 $(function(){
10 $("#btn1").click(function(){
11 $("div[id]").css("background-color","red");
12 });
13
14 $("#btn2").click(function(){
15 $("div[id='two']").css("background-color","red");
16 });
17
18 });
19 </script>
20
21
22 </head>
23 <body>
24 <input type="button" id="btn1" value="选择有id属性的div"/>
25 <input type="button" id="btn2" value="选择有id属性的值为two的div"/>
26
27 <hr/>
28 <div id="one">
29 <div class="mini">
30 111
31 </div>
32 </div>
33
34 <div id="two">
35 <div class="mini">
36 222
37 </div>
38 <div class="mini">
39 333
40 </div>
41 </div>
42
43 <div id="three">
44 <div class="mini">
45 444
46 </div>
47 <div class="mini">
48 555
49 </div>
50 <div class="mini">
51 666
52 </div>
53 </div>
54
55 <span id="four">
56
57 </span>
58 </body>
59 </html>
5、表单选择器：
1 <html>
2 <head>
3 <meta charset="UTF-8">
4 <title>表单选择器</title>
5 <link rel="stylesheet" type="text/css" href="../../css/style.css"/>
6 <script type="text/javascript" src="../../js/jquery-1.8.3.js" ></script>
7 <script>
8 $(function(){
9 $("#btn1").click(function(){
10 $(":input").css("background-color","pink");
11 });
12 $("#btn2").click(function(){
13 $(":text").css("background-color","pink");
14 });
15 });
16 </script>
17 </head>
18 <body>
19 <input type="button" id="btn1" value="选择所有input元素" />
20 <input type="button" id="btn2" value="选择文本框" />
21 <br/>
22 <form>
23 <input type="text" /><br />
24 <input type="checkbox" /><br />
25 <input type="radio" /><br />
26 <input type="image" /><br />
27 <input type="file" /><br />
28 <input type="submit" />
29 <input type="reset" /><br />
30 <input type="password" /><br />
31 <input type="button" /><br />
32 <select><option/></select><br />
33 <textarea></textarea><br />
34 <button></button>
35 </form>
36 </body>
37 </html>
五、jQuery案例
1、隔行换色
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="UTF-8">
5 <title>使用jQuery完成表格隔行换色</title>
6 <link rel="stylesheet" href="../css/style.css" />
7 <script type="text/javascript" src="../js/jquery-1.8.3.js" ></script>
8 <script>
9 //1.页面加载
10 $(function(){
11 /*//2.获取tbody下面的偶数行并设置背景颜色
12 $("tbody tr:even").css("background-color","yellow");
13 //3.获取tbody下面的奇数行并设置背景颜色
14 $("tbody tr:odd").css("background-color","green");*/
15
16 //2.获取tbody下面的偶数行并设置背景颜色
17 $("tbody tr:even").addClass("even");
18 $("tbody tr:even").removeClass("even");
19 //3.获取tbody下面的奇数行并设置背景颜色
20 $("tbody tr:odd").addClass("odd");
21 });
22 </script>
23
24 </head>
25 <body>
26 <table border="1" width="500" height="50" align="center" id="tbl" id="tbl">
27 <thead>
28 <tr>
29 <th>编号</th>
30 <th>姓名</th>
31 <th>年龄</th>
32 </tr>
33 </thead>
34 <tbody>
35 <tr >
36 <td>1</td>
37 <td>张三</td>
38 <td>22</td>
39 </tr>
40 <tr >
41 <td>2</td>
42 <td>李四</td>
43 <td>25</td>
44 </tr>
45 <tr >
46 <td>3</td>
47 <td>王五</td>
48 <td>27</td>
49 </tr>
50 <tr >
51 <td>4</td>
52 <td>赵六</td>
53 <td>29</td>
54 </tr>
55 <tr >
56 <td>5</td>
57 <td>田七</td>
58 <td>30</td>
59 </tr>
60 <tr >
61 <td>6</td>
62 <td>汾九</td>
63 <td>20</td>
64 </tr>
65 </tbody>
66 </table>
67 </body>
68 </html>
2、全选和全不选
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="UTF-8">
5 <title>使用jQuery完成复选框的全选和全不选</title>
6 <script type="text/javascript" src="../js/jquery-1.8.3.js" ></script>
7 <!--<script type="text/javascript" src="../js/jquery-1.11.0.js" ></script>-->
8 <script>
9 $(function(){
10 $("#select").click(function(){
11 //获取下面所有的 复选框并将其选中状态设置跟编码的前端 复选框保持一致。
12 //attr方法与JQ的版本有关，在1.8.3及以下有效。
13 //$("tbody input").attr("checked",this.checked);
14 $("tbody input").prop("checked",this.checked);
15 });//prop（）方法适用于高版本和低版本
16 });
17 </script>
18
19 </head>
20 <body>
21 <table border="1" width="500" height="50" align="center" id="tbl" >
22 <thead>
23 <tr>
24 <td colspan="4">
25 <input type="button" value="添加" />
26 <input type="button" value="删除" />
27 </td>
28 </tr>
29 <tr>
30 <th><input type="checkbox" id="select"></th>
31 <th>编号</th>
32 <th>姓名</th>
33 <th>年龄</th>
34 </tr>
35 </thead>
36 <tbody>
37 <tr >
38 <td><input type="checkbox" class="selectOne"/></td>
39 <td>1</td>
40 <td>张三</td>
41 <td>22</td>
42 </tr>
43 <tr >
44 <td><input type="checkbox" class="selectOne"/></td>
45 <td>2</td>
46 <td>李四</td>
47 <td>25</td>
48 </tr>
49 <tr >
50 <td><input type="checkbox" class="selectOne"/></td>
51 <td>3</td>
52 <td>王五</td>
53 <td>27</td>
54 </tr>
55 <tr >
56 <td><input type="checkbox" class="selectOne"/></td>
57 <td>4</td>
58 <td>赵六</td>
59 <td>29</td>
60 </tr>
61 <tr >
62 <td><input type="checkbox" class="selectOne"/></td>
63 <td>5</td>
64 <td>田七</td>
65 <td>30</td>
66 </tr>
67 <tr >
68 <td><input type="checkbox" class="selectOne"/></td>
69 <td>6</td>
70 <td>汾九</td>
71 <td>20</td>
72 </tr>
73 </tbody>
74 </table>
75 </body>
76 </html>
下一篇： plsql储存过程