jQuery02
程序员文章站
2022-06-22 13:05:54
一、使用jQuery为标签添加属性或者样式 1、$("#id名").css("css属性名"，"属性值")；比如：$("tbody tr:even").css("background-color","yellow"); 2、使用addClass（"class名"），然后在引入的css文件中写样式：. ......
一、使用jQuery为标签添加属性或者样式
1、$("#id名").css("css属性名"，"属性值")；比如：$("tbody tr:even").css("background-color","yellow");
2、使用addClass（"class名"），然后在引入的css文件中写样式：.class名{。。。}；比如：$("tbody tr:even").addClass("even"); css中：.even{back-groundcolor：red；}
二、js和jQuery当前对象的区别、事件的区别
1、js中用this来表示当前操作的对象；而jQuery中用${this}来表示当前操作的对象；
注：这里指的是，要使用jQuery属性，或者使用jQuery中的方法时，就必须用${this}.属性名；如：${this}.value；但是，jQuery代码中也可以用this代表当前对象，前提是js和jQuery属性或者方法不混用；
2、jQuery中的事件去掉了前边的on；
三、jQuery中的遍历（遍历集合，js中只有数组，没有集合）
注：关于方式二，可以遍历对象，例如：
四、文档处理操作：
1、追加（插入操作）内容（A、B是jQuery对象）
apend: A.append(B) 将B追加到A的内容的末尾处；
appendTo: A.appendTo(B) 将A加到B内容的末尾处；
2、删除
a、empty()；返回值：jQuery，删除匹配的元素集合中所有的子节点。
b、remove（[expr]）；返回值：jQuery；从DOM中删除所有匹配的元素。这个方法不会把匹配的元素从jQuery对象中删除，因而可以在将来再使用这些匹配的元素。但除了这个元素本身得以保留之外，其他的比如绑定的事件，附加的数据等都会被移除。
c、detach([expr])；返回值：jQuery；这个方法不会把匹配的元素从jQuery对象中删除，因而可以在将来再使用这些匹配的元素。与remove()不同的是，所有绑定的事件、附加的数据等都会保留下来。
3、复制操作：
4.替换操作
五、属性操作、表单对象属性；
1、attr属性操作：
a、attr（name）：$("img").attr("src")获取的是img标签里的src属性的值，返回：/xxx.jpg；
b、attr（key，value）：$("img").attr("height","800px")；设置属性的值；
c、attr（properties）：同时设置多个属性值；$("img").attr({"width":"90px","height":"100px"});
d、removeAttr（name）：删除某个属性和值；$("img").removeAttr("width")；
2、css类操作
3、val（）、text（）、html（）；
html操作：
text操作：
val操作：
3、表单对象属性：
enabled、disabled、checked、selected，下面以selected为例：
结果只显示出被选中的option，即获得了被选中的option对象；
六、jQuery案例
1、省市二级联动
（1）步骤分析：
第一步：确定事件(change事件),在绑定的函数里面获取用户选择的省份 第二步：创建二维数组来存储省份和城市 第三步：遍历二维数组中的省份(与用户选择的省份进行比较)【使用JQ的遍历操作】 第四步：接着遍历数组中的城市 第五步：创建一个城市文本节点 第六步：创建option元素节点 第七步：将文本节点添加到元素节点中【使用JQ的文档操作方法】 第八步：获取第二个下拉列表并将option元素节点添加进去 第九步：清除第二个下拉列表的option内容
（2）代码实现：
1 js代码：
2 <script type="text/javascript" src="../js/jquery-1.8.3.js" ></script>
3 <script>
4 $(function(){
5 //2.创建二维数组用于存储省份和城市
6 var cities = new Array(3);
7 cities[0] = new Array("武汉市","黄冈市","襄阳市","荆州市");
8 cities[1] = new Array("长沙市","郴州市","株洲市","岳阳市");
9 cities[2] = new Array("石家庄市","邯郸市","廊坊市","保定市");
10 cities[3] = new Array("郑州市","洛阳市","开封市","安阳市");
11
12 $("#province").change(function(){
13 //10.清除第二个下拉列表的内容
14 $("#city").empty();
15
16 //1.获取用户选择的省份
17 var val = this.value;
18 //alert(val);
19 //3.遍历二维数组中的省份
20 $.each(cities,function(i,n){
21 //alert(i+":"+n);
22 //4.判断用户选择的省份和遍历的省份
23 if(val==i){
24 //5.遍历该省份下的所有城市
25 $.each(cities[i], function(j,m) {
26 //alert(m);
27 //6.创建城市文本节点
28 var textNode = document.createTextNode(m);
29 //7.创建option元素节点
30 var opEle = document.createElement("option");
31 //8.将城市文本节点添加到option元素节点中去
32 $(opEle).append(textNode);
33 //9.将option元素节点追加到第二个下拉列表中去
34 $(opEle).appendTo($("#city"));
35 });
36 }
37 });
38
39 });
40 });
41 </script>
42
43 html代码（部分）：
44 <tr>
45 <td>籍贯</td>
46 <td>
47 <select onchange="changeCity(this.value)">
48 <option>--请选择--</option>
49 <option value="0">湖北</option>
50 <option value="1">湖南</option>
51 <option value="2">河北</option>
52 <option value="3">河南</option>
53 </select>
54 <select id="city">
55
56 </select>
57 </td>
58 </tr>
2、下拉列表左右选择
效果图：
（1）步骤分析：
第一步：确定事件(鼠标单击事件click) 第二步：获取左侧下拉列表被选中的option($(“#left option:selected”)) [假设左侧select定义了一个id=left] 第三步：将获取到的option添加到右侧的下拉列表中去。(append方法的使用)
（2）代码实现：
1 js代码：
2 <script type="text/javascript" src="../js/jquery-1.8.3.js" ></script>
3 <script>
4 $(function(){
5 /*1.选中单击去右边*/
6 $("#selectOneToRight").click(function(){
7 $("#left option:selected").appendTo($("#right"));
8 });
9
10 /*2.单击全部去右边*/
11 $("#selectAllToRight").click(function(){
12 $("#left option").appendTo($("#right"));
13 });
14
15 /*3.选中双击去右边*/
16 $("#left option").dblclick(function(){
17 $("#left option:selected").appendTo($("#right"));
18 });
19 });
20 </script>
21
22 html代码：
23 <td>
24 <span style="float: left;">
25 <font color="green" face="宋体">已有商品</font><br/>
26 <select multiple="multiple" style="width: 100px;height: 200px;" id="left">
27 <option>IPhone6s</option>
28 <option>小米4</option>
29 <option>锤子T2</option>
30 </select>
31 <p><a href="#" style="padding-left: 20px;" id="selectOneToRight">>></a></p>
32 <p><a href="#" style="padding-left: 20px;" id="selectAllToRight">>>></a></p>
33 </span>
34 <span style="float: right;">
35 <font color="red" face="宋体">未有商品</font><br/>
36 <select multiple="multiple" style="width: 100px;height: 200px;" id="right">
37 <option>三星Note3</option>
38 <option>华为6s</option>
39 </select>
40 <p><a href="#" ><<</a></p>
41 <p><a href="#" ><<<</a></p>
42 </span>
43 </td>
七、jQuery事件总结（jQuery里的事件都是方法，比如blur（fn）、change（fn）、click（fn），fn代表函数）
1、ready（）页面载入事件（页面加载顺序问题，及解决方案）；如：
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 <html xmlns="http://www.w3.org/1999/xhtml">
3
4 <head>
5 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
6 <title>页面未加载执行失败</title>
7 <script type="text/javascript">
8 document.getElementById("panel").onclick = function() {
9 alert("元素已经加载完毕 !");
10 }
11 /*
12 执行错误，为什么？
13 因为dom还未加载完毕。
14 */
15 </script>
16 </head>
17
18 <body>
19 <div id="panel">click me.</div>
20 </body>
21
22 </html>
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 <html xmlns="http://www.w3.org/1999/xhtml">
3
4 <head>
5 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
6 <title>4-1-2</title>
7 </head>
8 <!--解决办法：
9 方式一：将JS代码移到需要操作的html代码后面，一般建议放到body的外面
10 方式二：将JS代码放到一个页面加载函数中去-->
11
12 <body>
13 <div id="panel">click me.</div>
14 <script type="text/javascript">
15 document.getElementById("panel").onclick = function() {
16 alert("元素已经加载完毕 !");
17 }
18 /*正确执行*/
19 </script>
20 </body>
21
22 </html>
2、bind（"click",function(){}）绑定函数事件；如：
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 <html xmlns="http://www.w3.org/1999/xhtml">
3
4 <head>
5 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
6 <title>点击展开</title>
7 <link rel="stylesheet" type="text/css" href="../../../css/style.css" />
8 <script src="../../../js/jquery-1.8.3.min.js" type="text/javascript"></script>
9 <script type="text/javascript">
10 $(function() {
11 $("#panel h5.head").bind("click", function() {
12 var $content = $(this).next();
13 if($content.is(":visible")) {
14 $content.hide();
15 } else {
16 $content.show();
17 }
18 })
19 })
20 </script>
21 </head>
22
23 <body>
24 <div id="panel">
25 <h5 class="head">什么是jQuery?</h5>
26 <div class="content">
27 jQuery是继Prototype之后又一个优秀的JavaScript库，它是一个由 John Resig 创建于2006年1月的开源项目。jQuery凭借简洁的语法和跨平台的兼容性，极大地简化了JavaScript开发人员遍历HTML文档、操作DOM、处理事件、执行动画和开发Ajax。它独特而又优雅的代码风格改变了JavaScript程序员的设计思路和编写程序的方式。
28 </div>
29 </div>
30 </body>
31
32 </html>
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 <html xmlns="http://www.w3.org/1999/xhtml">
3
4 <head>
5 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
6 <title>鼠标滑过</title>
7 <link rel="stylesheet" type="text/css" href="../../../css/style.css" />
8 <script src="../../../js/jquery-1.8.3.min.js" type="text/javascript"></script>
9 <script type="text/javascript">
10 $(function() {
11 $(".head").mouseover(function() {
12 $(this).next().show();
13 }).mouseout(function() {
14 $(this).next().hide();
15 })
16 })
17 </script>
18 </head>
19
20 <body>
21 <div id="panel">
22 <h5 class="head">什么是jQuery?</h5>
23 <div class="content">
24 jQuery是继Prototype之后又一个优秀的JavaScript库，它是一个由 John Resig 创建于2006年1月的开源项目。jQuery凭借简洁的语法和跨平台的兼容性，极大地简化了JavaScript开发人员遍历HTML文档、操作DOM、处理事件、执行动画和开发Ajax。它独特而又优雅的代码风格改变了JavaScript程序员的设计思路和编写程序的方式。
25 </div>
26 </div>
27 </body>
28
29 </html>
3、next（）返回后面那个紧邻的同辈元素；如：
HTML 代码:
<p>Hello</p><p>Hello Again</p><div><span>And Again</span></div>
jQuery 代码:
$("p").next()；
结果：返回的是每个段落的后面紧邻的同辈元素（第一个p后面的p，第二个p对象后面的div对象）：
<p>Hello Again</p><div><span>And Again</span></div>
如果只有一个p：<p>Hello Again</p><div><span>And Again</span></div>
则$("p").next()；结果返回的只有<div><span>And Again</span></div>
4、事件移除：
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 <html xmlns="http://www.w3.org/1999/xhtml">
3
4 <head>
5 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
6 <title>事件移除</title>
7 <style type="text/css">
8 * {
9 margin: 0;
10 padding: 0;
11 }
12
13 body {
14 font-size: 13px;
15 line-height: 130%;
16 padding: 60px;
17 }
18
19 p {
20 width: 200px;
21 background: #888;
22 color: white;
23 height: 16px;
24 }
25 </style>
26 <script src="../../../js/jquery-1.8.3.min.js" type="text/javascript"></script>
27 <script type="text/javascript">
28 $(function() {
29 $('#btn').bind("click", function() {
30 $('#test').append("<p>我的绑定函数1</p>");
31 });
32 $('#delAll').click(function() {
33 $('#btn').unbind("click");
34 });
35 })
36 </script>
37 </head>
38
39 <body>
40 <button id="btn">点击我</button>
41 <div id="test"></div>
42 <button id="delAll">删除所有事件</button>
43 </body>
44
45 </html>
5、事件合成：
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 <html xmlns="http://www.w3.org/1999/xhtml">
3
4 <head>
5 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
6 <title>合成事件hover</title>
7 <link rel="stylesheet" type="text/css" href="../../../css/style.css" />
8 <script src="../../../js/jquery-1.8.3.min.js" type="text/javascript"></script>
9 <script type="text/javascript">
10 $(function() {
11 $(".head").hover(function() {
12 $(this).next().show();
13 }, function() {
14 $(this).next().hide();
15 })
16 })
17 </script>
18 </head>
19
20 <body>
21 <div id="panel">
22 <h5 class="head">什么是jQuery?</h5>
23 <div class="content">
24 jQuery是继Prototype之后又一个优秀的JavaScript库，它是一个由 John Resig 创建于2006年1月的开源项目。jQuery凭借简洁的语法和跨平台的兼容性，极大地简化了JavaScript开发人员遍历HTML文档、操作DOM、处理事件、执行动画和开发Ajax。它独特而又优雅的代码风格改变了JavaScript程序员的设计思路和编写程序的方式。
25 </div>
26 </div>
27 </body>
28
29 </html>
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 <html xmlns="http://www.w3.org/1999/xhtml">
3
4 <head>
5 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
6 <title>合成事件toggle</title>
7 <link rel="stylesheet" type="text/css" href="../../../css/style.css" />
8 <script src="../../../js/jquery-1.8.3.min.js" type="text/javascript"></script>
9 <script type="text/javascript">
10 $(function() {
11 $(".head").toggle(function() {
12 $(this).next().hide();
13 }, function() {
14 $(this).next().show();
15 })
16 })
17 </script>
18 </head>
19
20 <body>
21 <div id="panel">
22 <h5 class="head">什么是jQuery?</h5>
23 <div class="content">
24 jQuery是继Prototype之后又一个优秀的JavaScript库，它是一个由 John Resig 创建于2006年1月的开源项目。jQuery凭借简洁的语法和跨平台的兼容性，极大地简化了JavaScript开发人员遍历HTML文档、操作DOM、处理事件、执行动画和开发Ajax。它独特而又优雅的代码风格改变了JavaScript程序员的设计思路和编写程序的方式。
25 </div>
26 </div>
27 </body>
28
29 </html>