jQuery02

2018-02-21 19:27:34来源:cnblogs.com作者:limuma人点击

分享

一、使用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()不同的是,所有绑定的事件、附加的数据等都会保留下来。

    

五、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>

 

相关文章

    无相关信息

最新文章

123

最新摄影

微信扫一扫

第七城市微信公众平台