经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置：技术经验 » JS/JS库/框架 » jQuery » 查看文章
day04-jQuery
来源：cnblogs　　作者：呆code　　时间：2019/8/15 12:12:23　　对本文有异议

jQ宗旨：write less do more

jq是js的框架，底层封装了js代码。

jq引入：

<script type="text/javascript" src="../js/jquery-3.3.1.min.js" ></script>

 jQ选择器：推荐第一种：

  1. <script type="text/javascript" src="js/jquery-3.3.1.js" ></script>
  2.     <body>
  3.         <script>
  4.             function run(){
  5.                 //alert($("#xi").val());
  6.                 alert(jQuery("#xi").val());
  7.             }
  8.         </script>
  9.         <input type="text" value="西游记" id="xi"/><br />
  10.         <input type="button" value="获取id为xi的值" onclick="run()" />
  11.     </body>

jQ对象和js对象的互转：

JS对象转jq：var  jq =  $(js对象);

JQ对象转js：  var js = jq[0];或者jq.get(0);   因为jQ本质上是一个js数组

jQ页面加载完成时执行的代码：

 

  1. <script>
  2.     $(document).ready(function(){
  3.         //页面加载完成时需要执行的代码
  4.     })
  5.     $(function(){
  6.         //页面加载完成时需要执行的代码
  7.      //推荐这一种
  8.     })
  9. </script>

 

jQ基本选择器：

ID选择器：$("#id");

类选择器：$(".类名");

元素选择器：$("元素名");

jQ数组遍历的两种方式：

 1.$(数组).each(function(index){       

alert(this+index);

})

2.  $.each($(arr)，function（）{});

案例一：重写弹出广告

知识点：jQ动画效果：

jQuery的隐藏和显示相对JS更为动感圆滑。

 

  1.     <style>
  2.             #d1{
  3.                 background-color:lightskyblue;
  4.                 width:300px;
  5.                 height:300px;
  6.             }
  7.         </style>
  8.         <script>
  9.             //展示
  10.             function run1(){
  11.                 //1.选中要显示的元素对象
  12.                 var v1 =$("#d1");
  13.                 //滑动效果
  14.                 //v1.show(2000)
  15.                 v1.slideDown(2000);
  16. //                v1.fadeIn(2000,function(){
  17. //                    alert("展示成功！！")
  18. //                });    
  19.             }
  20.             //隐藏
  21.             function run2(){
  22.                 //1.选中要隐藏的元素对象
  23.                 var v2 = $("#d1");
  24.                 v2.hide(3000);
  25.                 //v2.slideUp(3000);
  26. //                v2.fadeOut(3000,function(){
  27. //                    alert("隐藏成功！！")
  28. //                });
  29.             }
  30.             //切换显示/隐藏
  31.             function run3(){
  32.                 //1.选中要隐藏的元素对象
  33.                 var v2 = $("#d1");
  34.                 //v2.toggle(3000);
  35.                 //v2.slideToggle(3000);
  36.                 v2.fadeToggle(3000,function(){
  37.                     alert("切换成功！！")
  38.                 })
  39.             }
  40.         </script>
  41.         <div id="d1"></div>
  42.             <input  type="button" value="显示" onclick="run1()"/>
  43.             <input  type="button" value="隐藏" onclick="run2()"/>
  44.             <input  type="button" value="切换显示/隐藏" onclick="run3()"/>
  45.     </body>

 案例实现显示，隐藏广告：

  1. <body>
  2.         <img  src="../img/3.jpg" width="100%" style="display: none;"/>
  3.  
  4.         <script>
  5.             //页面加载完成时执行
  6.             $(function(){
  7.                 //两秒后弹出广告
  8.                 setTimeout("show()",2000);
  9.             })
  10.             function show(){
  11.                 // 选中改图片
  12.                 var ad =$("img");
  13.                 //展示（滑动效果）；
  14.                 ad.slideDown(2000,function(){
  15.                     //两秒后再隐藏
  16.                     setTimeout("hide()",2000);
  17.                 });
  18.             }
  19.             function hide(){
  20.                 var ad = $("img");
  21.                 ad.slideUp(2000);
  22.             }
  23.         </script>
  24.     </body>

一.1层级选择器：

 A B    获得A元素内部的所有的B元素。 （子子孙孙）

 A>B   获得A元素下面的所有B子元素。  儿子

 A+B   获得A元素同级下一个B元素    下面的第一个兄弟

 A~B   获得A元素之后的所有B元素 所有的弟弟

 

  1. <body>
  2.         <script>
  3.             $(function(){
  4.                 //1、获取id为main的span标签 内 所有的div标签
  5.                 var arr1= $("#main div"); // jq对象
  6.                  $(arr1).each(function(index){
  7.                      alert($(this).text()+".."+index);
  8.                  })
  9.                 //2、获取id为main的span标签 内 子元素div标签
  10.                 var arr2 =$("#main>div");
  11.                 $(arr2).each(function(index){
  12.                     alert($(this).text()+".."+index);
  13.                 })
  14.             //    3、获取id为main的span标签 后 第一个div兄弟标签
  15.                 var arr3 = $("#main+div");
  16.                 $(arr3).each(function(index){
  17.                     alert($(this).text()+".."+index);
  18.                 })
  19.                 //4、获取id为main的span标签 后 所有的div兄弟标签
  20.                 var arr4 = $("#main~div");
  21.                 $(arr4).each(function(index){
  22.                     alert($(this).text()+".."+index);
  23.                 })
  24.             });
  25.         </script>
  26. <span id="main">
  27.             <div>111111</div>
  28.             <div>222222</div>
  29.             <div>333333</div>
  30.             
  31.              <span>
  32.                     <div>44444</div>
  33.              </span>
  34. </span>
  35.         <div>55555</div>
  36.         
  37.         <span>
  38.             <div>66666</div>
  39.         </span>
  40.         
  41.         <div>77777</div>
  42.     </body>

 

 

 

一.2 属性选择器：

 

 [属性名] 获得有 指定属性名 的标签对象。

 

 [属性名=值]  获得 指定属性名等于指定值 的标签对象     value = man

 

 [属性名*=值]  获得 指定属性名 含有 指定值 的标签对象    value *= a

[属性值$='.jpg'] 所有的属性名包含以".jpg"结尾的元素。

 

多个属性选择器可以组合使用 ：[选择器1][选择器2][选择器3]

实例：

 

  1. <script>
  2.             $(function(){
  3.                 //1、获取所有存在type属性的标签
  4.                 var arr1 = $("[type]");
  5.                 $(arr1).each(function(index){
  6.                     alert(this.value+".."+index);
  7.                 })
  8.                 2、获取所有type属性为radio的标签
  9.                  var arr2=$("[type=radio]")
  10.                 $(arr2).each(function(index){
  11.                     alert(this.value+".."+index);
  12.                 })
  13.                 3、获取所有type属性含有o的标签
  14.                  var arr3 = $("[type*=o]");
  15.                 $(arr3).each(function(index){
  16.                     alert(this.value+".."+index);
  17.                 })
  18.                 //4、获取所有input标签中的单选框，且name为sex的标签
  19.                  var arr4 = $("input[type=radio][name=sex");
  20.                 $(arr4).each(function(index){
  21.                     alert($(this).val()+".."+index);
  22.                 })
  23.             });
  24.     </script>
  25.               用户名：<input type="text" name="uname" value="小刘"/><br />
  26.         密码：<input type="password" name="pwd" value="123"/><br />
  27.         性别：
  28.               <input type="radio" name="sex" value="man" />男
  29.               <input type="radio" name="sex" value="woman" />女<br />
  30.         是否VIP：<input type="radio" name="vip" value="no" />不是
  31.                    <input type="radio" name="vip" value="yes" />是<br />
  32.     </body>

 

一.3 基本过滤选择器：

 :first 第一个

 :last 最后一个

 :even 偶数，索引从 0 开始计数  

 :odd 奇数

 :not(..) 除了指定内容    1234 : not(12)   == >  34

 :eq(index) 获取指定索引的元素

 :gt(index) 大于index索引的元素

 :lt(index) 小于index索引的元素

 

  1. <html>
  2.     <!--在获取到一系列标签对象之后，的一些筛选条件。-->
  3.     <head>
  4.         <meta charset="UTF-8">
  5.         <title></title>
  6.         <script type="text/javascript" src="../js/jquery-3.3.1.js" ></script>
  7.     </head>
  8.     <body>
  9.     <script>
  10.             $(function(){
  11.         
  12.                 //1、在所有DIV标签中，获取第一个div
  13.             //alert($("div:first").html());
  14.             //alert($("div:eq(0)").html());
  15.                 //2、在所有DIV标签中，获取最后一个div
  16.             //alert($("div:last").html());
  17.                 //3、在所有DIV标签中，获取所有偶数位的div
  18.                var arr1 = $("div:even");
  19.                $(arr1).each(function(index){
  20.                     alert($(this).html()+".."+index);
  21.                 })
  22.                 //4、在所有DIV标签中，获取所有奇数位的div
  23.                 var arr2 = $("div:odd");
  24.                 $(arr2).each(function(index){
  25.                     alert($(this).html()+".."+index);
  26.                 })
  27.                 //5、在所有DIV标签中，获取除了第一位以外所有的div
  28.                 var arr3 = $("div:not(div:first)");
  29.                 $(arr3).each(function(index){
  30.                     alert($(this).html()+".."+index);
  31.                 })
  32.                 //6、在所有DIV标签中，获取索引等于1的div
  33.                  alert($("div:eq(1)").html());
  34.                 //7、在所有DIV标签中，获取索引大于1的div
  35.                 var arr4 = $("div:gt(1)");
  36.                 $(arr4).each(function(index){
  37.                     alert($(this).html()+".."+index);
  38.                 })
  39.                 //8、在所有DIV标签中，获取索引小于1的div
  40.                 var arr5 = $("div:lt(1)");
  41.                 $(arr5).each(function(index){
  42.                     alert($(this).html()+".."+index);
  43.                 })
  44.             })
  45.     </script>
  46.         <div>11111111，索引是0</div>
  47.         <div>22222222，索引是1</div>
  48.         <div>33333333，索引是2</div>
  49.         <div>44444444，索引是3</div>
  50.         <div>55555555，索引是4</div>
  51.         <div>66666666，索引是5</div>
  52.         <div>77777777，索引是6</div>
  53.         <div>88888888，索引是7</div>    
  54.     </body>
  55. </html>

 

一.4表单属性选择器:

 

 :checked 选中 ,是单选，复选 的选中

 

 :selected 选择  ，是下拉列表中的算则。

:enabled 可用

 

:disabled 不可用。 

 

 

 

 

  1. <script>
  2.             $(function(){
  3.                 //获取可用的表单输入项
  4.                 var arr1 = $("input:enabled");
  5.                 alert(arr.length);
  6.                 $(arr).each(function(index){
  7.                     alert($(this).val()+index)
  8.                 })
  9.                 获取不可用的表单输入项
  10.                 var arr2 =$("input:disabled");
  11.                 $(arr).each(function(){
  12.                     alert($(this).val());
  13.                 })
  14.                 获取选中的复选框
  15.                 var arr3=$("[type=checkbox]:checked")
  16.                 alert(arr3.length)
  17.                 $(arr3).each(function(){
  18.                     alert($(this).val());
  19.                 })
  20.                 //获取国家下拉框中，被选中的option 
  21.                 var arr4=$("#country>option:selected");
  22.                 $(arr4).each(function(){
  23.                     alert($(this).val());
  24.                 })
  25.             });
  26.         </script>
  27.         <h1>不可用的表单输入项</h1>
  28.         <input type="text" disabled="disabled" />
  29.         <input type="button" value="不可用按钮" disabled="disabled" />
  30.         <h1>复选框</h1>
  31.         <input type="checkbox" name="hobby" value="code"/>编程
  32.         <input type="checkbox" name="hobby" value="swimming" checked="checked"/>游泳
  33.         <input type="checkbox" name="hobby" value="reading" checked="checked"/>阅读
  34.         <hr />
  35.         <h1>下拉选择框</h1>
  36.         城市：<select id="city">
  37.             <option value="">请选择</option>
  38.             <option value="bj">北京</option>
  39.             <option value="sh">上海</option>
  40.         </select>
  41.         <hr />
  42.         国家：<select id="country" multiple="multiple">
  43.             <option value="China" selected="selected">中国</option>
  44.             <option value="America" selected="selected">美国</option>
  45.             <option value="Russia">俄罗斯</option>
  46.             <option value="England">英国</option>
  47.         </select>

案例二：隔行换色：

 addClass(“值”)  给元素对象追加样式

  removeClass()   将元素对象的class删除

 

 代码实例如下：

  1.  1     <style>
  2.  2             .sss{
  3.  3                 background: lightseagreen;
  4.  4             }
  5.  5         </style>
  6.  6         <script>
  7.  7             $(function(){
  8.  8                 $("tr:not(0):odd").addClass("sss");
  9.  9             })
  10. 10         </script>
  11. 11     <body>
  12. 12         <body onload="changeColor()">
  13. 13         <table border="1" cellpadding="0" cellspacing="0" width="80%">
  14. 14             <tr>
  15. 15                 <th>
  16. 16                     <input type="button" value="全选" onclick="fun2()"/>
  17. 17                     <input type="button" value="全不选" onclick="fun3()"/>
  18. 18                     <input type="button" value="反选" onclick="fun4()"/>
  19. 19                 </th>
  20. 20                 <th>序号</th>
  21. 21                 <th>商品名称</th>
  22. 22                 <th>商品描述</th>
  23. 23                 <th>操作</th>
  24. 24             </tr>
  25. 25             <tr>
  26. 26                 <td>
  27. 27                     <input type="checkbox" class="itemSelect"/>        
  28. 28                 </td>
  29. 29                 <td>1</td>
  30. 30                 <td>手机数码</td>
  31. 31                 <td>手机数码商品信息</td>
  32. 32                 <td>
  33. 33                     <a href="#">修改</a>
  34. 34                     <a href="#">删除</a>
  35. 35                 </td>
  36. 36             </tr>
  37. 37             <tr>
  38. 38                 <td>
  39. 39                     <input type="checkbox" class="itemSelect"/>        
  40. 40                 </td>
  41. 41                 <td>2</td>
  42. 42                 <td>电脑办公</td>
  43. 43                 <td>电脑办公商品信息</td>
  44. 44                 <td>
  45. 45                     <a href="#">修改</a>
  46. 46                     <a href="#">删除</a>
  47. 47                 </td>
  48. 48             </tr>
  49. 49             <tr>
  50. 50                 <td>
  51. 51                     <input type="checkbox" class="itemSelect"/>        
  52. 52                 </td>
  53. 53                 <td>3</td>
  54. 54                 <td>鞋靴箱包</td>
  55. 55                 <td>鞋靴箱包商品信息</td>
  56. 56                 <td>
  57. 57                     <a href="#">修改</a>
  58. 58                     <a href="#">删除</a>
  59. 59                 </td>
  60. 60             </tr>
  61. 61             <tr>
  62. 62                 <td>
  63. 63                     <input type="checkbox" class="itemSelect"/>        
  64. 64                 </td>
  65. 65                 <td>4</td>
  66. 66                 <td>家居饰品</td>
  67. 67                 <td>家居饰品商品信息</td>
  68. 68                 <td>
  69. 69                     <a href="#">修改</a>
  70. 70                     <a href="#">删除</a>
  71. 71                 </td>
  72. 72             </tr>
  73. 73         </table>
  74. 74 
  75. 75     </body>
  76. 76 </html>

案例三：全选，全不选：

知识点1.数组遍历：

  1.     <script>
  2.             var  arr =["三国演义","西游记","红楼梦","水浒传"];
  3.             //jQ遍历第一种方式：
  4.             $(arr).each(function(index){
  5.                 //索引
  6.             //    alert(index);
  7.                 //元素
  8.                 //alert(arr[index]);
  9.                 //alert(this);
  10.                 alert("元素为："+this+"，索引为："+index);
  11.             });
  12.             //jQ遍历方式第二种
  13.             $.each($(arr),function(index){
  14.                 alert("元素为："+this+"，索引为："+index);
  15.             } );
  16.         </script>

知识点2：prop（） 和

 prop("属性名");  （attr(“属性名”)）   获取某个属性名对应的值       ==          $(“#bb”).val();       这两种获取属性的值    

prop("属性名",属性值); （attr("属性名",属性值);）   将其属性名设置为某个属性值    ==   $(“#bb”).val(“值”);                 

removeProp("属性名"); 这个可能版本会不兼容，      ==                              removeProp不兼容可用 后面这个代替   移除改属性  removeAttr(“属性名”);

实现反选 ：案例

 

  1.  1         <script>
  2.  2             function quan(){
  3.  3                 $(".itemSelect").prop("checked",true);
  4.  4             }
  5.  5             function bu(){
  6.  6                 $(".itemSelect").prop("checked",false);
  7.  7             }
  8.  8 //            function fan(){
  9.  9                 //
  10. 10 //                //获取所有的复选框，将其checked修改为false
  11. 11 //                var arr1 =$(".itemSelect:checked");
  12. 12 //                //获取所有的未选中复选框，将其checked修改为true
  13. 13 //                var arr2 =$(".itemSelect:not(.itemSelect:checked)");
  14. 14 //                arr1.prop("checked",false);
  15. 15 //                arr2.prop("checked",true);
  16. 16 //            }
  17. 17             //用jQ数组实现反选
  18. 18             function fan(){
  19. 19             var arr =$(".itemSelect");
  20. 20             //遍历
  21. 21              arr.each(function(){
  22. 22                  var temp = $(this).prop("checked");
  23. 23                  //取反
  24. 24                  $(this).prop("checked",!temp);
  25. 25              })
  26. 26             }
  27. 27         </script>
  28. 28     <body>
  29. 29         <table border="1" cellpadding="0" cellspacing="0" width="80%">
  30. 30             <tr>
  31. 31                 <th>
  32. 32                     <input type="button" value="全选" onclick= "quan()"/>
  33. 33                     <input type="button" value="全不选" onclick= "bu()"/>
  34. 34                     <input type="button" value="反选" onclick= "fan()"/>
  35. 35                 </th>
  36. 36                 <th>编号</th>
  37. 37                 <th>姓名</th>
  38. 38             </tr>
  39. 39             <tr>
  40. 40                 <td>
  41. 41                     <input type="checkbox" class="itemSelect" />        
  42. 42                 </td>
  43. 43                 <td>1</td>
  44. 44                 <td>唐三藏</td>
  45. 45             </tr>
  46. 46             <tr>
  47. 47                 <td>
  48. 48                     <input type="checkbox" class="itemSelect" />        
  49. 49                 </td>
  50. 50                 <td>2</td>
  51. 51                 <td>悟空</td>
  52. 52             </tr>
  53. 53             <tr>
  54. 54                 <td>
  55. 55                     <input type="checkbox" class="itemSelect" />        
  56. 56                 </td>
  57. 57                 <td>3</td>
  58. 58                 <td>八戒</td>
  59. 59             </tr>
  60. 60             <tr>
  61. 61                 <td>
  62. 62                     <input type="checkbox" class="itemSelect" />        
  63. 63                 </td>
  64. 64                 <td>4</td>
  65. 65                 <td>沙和尚</td>
  66. 66             </tr>
  67. 67         </table>
  68. 68     </body>

 

案例四：省市二级联动：

jQ中的事件实现方式：

  1.     <input type="text" id="uname" value="黄蓉" /><br />
  2.         <input type="button" value="点击获取输入框的value值" id="aaa"/>
  3.         <input type="button" value="点击设置输入框的value值" id="bbb"/>
  4.         <script>
  5.             $(function(){
  6.                 //jQ中的事件获取格式
  7.                 $("#aaa").click(function(){
  8.                     alert($("#uname").val());
  9.                 })
  10.                 //jQ中的事件获取格式
  11.                 $("#bbb").click(function(){
  12.                     $("#uname").val("郭靖");
  13.                 })
  14.             })

jQ中追加元素的两种方式；

  1.     <ul id="rank">
  2.             <li>Php</li>
  3.             <li>Android</li>
  4.             <li>Ios</li>
  5.         </ul>
  6.         <hr />
  7.         <input type="button" value="列表尾部追加Java" id="aaa"/>
  8.         <input type="button" value="列表头部追加Java" id="bbb"/>
  9.         <script>
  10.             $(function(){
  11.                 //尾部追加
  12.                 $("#aaa").click(function(){
  13.                     //往哪儿追加
  14.                     var ul = $("#rank");
  15.                     //追加什么
  16.                     var li = "<li>JAVA</li>";
  17.                     //追加什么动作（方法）
  18.                     //ul.append(li);
  19.                     $(li).appendTo(ul);
  20.                 })
  21.                 //头部追加
  22.                 $("#bbb").click(function(){
  23.                     //往哪儿追加
  24.                     var ul = $("#rank");
  25.                     //追加什么
  26.                     var li = "<li>JAVA</li>";
  27.                     //追加什么动作（方法）
  28.                     //ul.prepend(li);
  29.                     $(li).prependTo(ul);
  30.               })
  31.         })
  32.         </script>

省市联动代码案例实现：

追加思路：先获取往哪儿追加的值，再获取追加什么，再初始化往哪儿追加的内容体，如果是数组就遍历，得出值，然后用相应的追加方法追加。

  1.         // 定义二维数组,存储城市信息
  2.         var cities = new Array();
  3.         cities[0] = new Array("海淀区","昌平区","朝阳区");
  4.         cities[1] = new Array("郑州市","商丘市","开封市","洛阳市","平顶山市");
  5.         cities[2] = new Array("济南市","青岛市","烟台市","潍坊市","淄博市");
  6.         cities[3] = new Array("石家庄市","唐山市","邯郸市","廊坊市");
  7.         cities[4] = new Array("南京市","苏州市","扬州市","宿迁市");
  8.         </script>
  9.     </head>
  10.     <body>
  11.         <select id="province" onchange= "changeCity(this.value)"  style="width:150px">
  12.             <option value="">----请-选-择-省----</option>
  13.             <option value="0">北京</option>
  14.             <option value="1">河南省</option>
  15.             <option value="2">山东省</option>
  16.             <option value="3">河北省</option>
  17.             <option value="4">江苏省</option>
  18.         </select>
  19.         <select id="city" style="width:150px">
  20.             <option value="">----请-选-择-市----</option>
  21.         </select>
  22.         
  23.         
  24.         <script>
  25.           function    changeCity(val){
  26.               //根据var获取省份对应的下标
  27.               var arr = cities[val];
  28.               //往哪儿加
  29.               var city =$("#city");
  30.               //恢复到初始
  31.               city.html("<option value=''>---请-选-择-市---</option>");
  32.               $(arr).each(function(){
  33.                   //加什么？
  34.                   var temp ="<option value=''>"+this+"</option>";
  35.                   //追加的方法
  36.                   city.append(temp);
  37.               })
  38.           }
  39.         </script>

案例五：列表左右选择

这种下拉列表：主要应用下拉列表的选取和所有的方法做题。

案例实现：

  1. <body>
  2.         <select id="leftSelectId" multiple="multiple" style="width: 100px;height: 200px;">
  3.             <option>左1</option>
  4.             <option>左2</option>
  5.             <option>左3</option>
  6.             <option>左4</option>
  7.             <option>左5</option>
  8.         </select>
  9.         <input type="button" value="》" id="a"/>
  10.         <input type="button" value="》》" id="b"/>
  11.         &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
  12.         <input type="button" value="《"  id="c" />
  13.         <input type="button" value="《《" id="d"/> 
  14.         <select id="rightSelectId" multiple="multiple" style="width: 100px;height: 200px;">
  15.             <option>右1</option>
  16.             <option>右2</option>
  17.             <option>右3</option>
  18.             <option>右4</option>
  19.             <option>右5</option>
  20.         </select>
  21.         <hr />
  22.         <script>
  23.             $(function(){
  24.                 //1.将左边选中的追加到右边末尾
  25.                 $("#a").click(function(){
  26.                     //往哪儿追加
  27.                     var right = $("#rightSelectId");
  28.                     //追加什么？
  29.                     var leftcont = $("#leftSelectId option:selected");
  30.                     //追加方法
  31.                     right.append(leftcont);
  32.                 })
  33.                 //1.将左边所有的追加到右边末尾
  34.                 $("#b").click(function(){
  35.                     //往哪儿追加
  36.                     var right = $("#rightSelectId");
  37.                     //追加什么？
  38.                     var leftcont = $("#leftSelectId option");
  39.                     //追加方法
  40.                     right.append(leftcont);
  41.                 })
  42.                 //1.将右边选中的追加到左边末尾
  43.                 $("#c").click(function(){
  44.                     //往哪儿追加
  45.                     var left = $("#leftSelectId");
  46.                     //追加什么？
  47.                     var rightcont = $("#rightSelectId option:selected");
  48.                     //追加方法
  49.                     left.append(rightcont);
  50.                 })
  51.                 //1.将右边所有的追加到左边末尾
  52.                 $("#d").click(function(){
  53.                     //往哪儿追加
  54.                     var left = $("#leftSelectId");
  55.                     //追加什么？
  56.                     var rightcont = $("#rightSelectId option");
  57.                     //追加方法
  58.                     left.append(rightcont);
  59.                 })
  60.             })
  61.         </script>
  62.     </body>

 ！！！！！！！好累！！！！！！！！！！！！！！！！！！继续坚持！！！！！！！！！！！！！！！！！！！！！！！

  jQ  就是啰嗦点 但是难度还好  加油就ok！！！

 

原文链接：http://www.cnblogs.com/ych961107/p/11342771.html

 友情链接：直通硅谷 　点职佳 　北美留学生论坛

jQuery热门文章

  • 初涉Ajax
  • jQuery 源码分析(十五) 数据操作模块 val详解
  • select 宽度跟随option内容自适应
  • 日期插件rolldate.js的使用
  • layer.prompt 增加placeholder 提示
  • jQuery实现简单五子棋游戏
  • layui+ztree 树状下拉框
  • 在你身边，为你设计PDF下载高清完整扫描原版
  • jQuery实现扫雷小游戏
  • uni-app通过canvas实现手写签名

    • jQuery推荐文章

  • jQuery实现扫雷小游戏
  • jQuery实现简单五子棋游戏
  • 详解jquery方法属性
  • jquery+h5实现九宫格抽奖特效（前后端代码）
  • jQuery实现弹弹球小游戏
  • jQuery常见事件的监听方式
  • JQuery总结 - 小杨-先生
  • jQuery的链式编程风格
  • 初识Vue2（一）：表单输入绑定（附Demo） - 熊泽-学习中的苦与乐
  • jQuery 笔记

    • 本站QQ群：前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

    W3xue 的所有内容仅供测试，对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
    关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接（目前9元/月）请联系QQ：27243702 沸活量
    皖ICP备17017327号-2　皖公网安备34020702000426号