欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

jQuery02

程序员文章站 2022-03-10 08:21:36
一、使用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中只有数组,没有集合)

  jQuery02

  注:关于方式二,可以遍历对象,例如:

jQuery02

四、文档处理操作: 

  1、追加(插入操作)内容(A、B是jQuery对象)

      apend:  A.append(B)  将B追加到A的内容的末尾处;

      appendTo: A.appendTo(B)  将A加到B内容的末尾处;

    jQuery02

  2、删除

    a、empty();返回值:jQuery,删除匹配的元素集合中所有的子节点。

    jQuery02

    b、remove([expr]);返回值:jQuery;从DOM中删除所有匹配的元素。这个方法不会把匹配的元素从jQuery对象中删除,因而可以在将来再使用这些匹配的元素。但除了这个元素本身得以保留之外,其他的比如绑定的事件,附加的数据等都会被移除。

    jQuery02

    c、detach([expr]);返回值:jQuery;这个方法不会把匹配的元素从jQuery对象中删除,因而可以在将来再使用这些匹配的元素。与remove()不同的是,所有绑定的事件、附加的数据等都会保留下来。

    jQuery02

  3、复制操作:

    jQuery02

  4.替换操作

    jQuery02

五、属性操作、表单对象属性;

  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类操作

    jQuery02

  3、val()、text()、html();

  jQuery02

  html操作:

    jQuery02

  text操作:

    jQuery02

  val操作:

    jQuery02

  3、表单对象属性:

    enabled、disabled、checked、selected,下面以selected为例:

  jQuery02

    结果只显示出被选中的option,即获得了被选中的option对象;

六、jQuery案例

1、省市二级联动

  (1)步骤分析:

第一步:确定事件(change事件),在绑定的函数里面获取用户选择的省份

第二步:创建二维数组来存储省份和城市

第三步:遍历二维数组中的省份(与用户选择的省份进行比较)【使用JQ的遍历操作】

第四步:接着遍历数组中的城市

第五步:创建一个城市文本节点

第六步:创建option元素节点

第七步:将文本节点添加到元素节点中【使用JQ的文档操作方法】

第八步:获取第二个下拉列表并将option元素节点添加进去

第九步:清除第二个下拉列表的option内容

  (2)代码实现:

jQuery02
 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>
View Code

 2、下拉列表左右选择

    效果图:jQuery02

  (1)步骤分析:

第一步:确定事件(鼠标单击事件click)
第二步:获取左侧下拉列表被选中的option($(“#left option:selected”)) [假设左侧select定义了一个id=left]
第三步:将获取到的option添加到右侧的下拉列表中去。(append方法的使用)

  (2)代码实现:

jQuery02
 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">&gt;&gt;</a></p>
32                         <p><a href="#" style="padding-left: 20px;" id="selectAllToRight">&gt;&gt;&gt;</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="#" >&lt;&lt;</a></p>
41                         <p><a href="#" >&lt;&lt;&lt;</a></p>
42                     </span>
43                 </td>
View Code

七、jQuery事件总结(jQuery里的事件都是方法,比如blur(fn)、change(fn)、click(fn),fn代表函数)

  1、ready()页面载入事件(页面加载顺序问题,及解决方案);如:

  jQuery02
 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>
加载遇到的顺序问题
  jQuery02
 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(){})绑定函数事件;如:

  jQuery02
 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>
点击展开
  jQuery02
 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、事件移除:

  jQuery02
 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、事件合成:

  jQuery02
 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>
事件合成hover
  jQuery02
 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>
事件合成toggle