神刀安全网

jQuery 基础知识问答

一、问答

(一)说说库和框架的区别?

库和框架都是一种有别于软件、面向程序开发者的产品形式。

  • 库的英语为 Library ( 简写 Lib ),库解决的是代码或者是模块级别的复用或者对复杂度的封装问题,例如将一个解决复杂问题的功能模块封装成一个函数,提供一个简单的接口。库它是一种工具,它提供了很多封装好的方法,用与不用取决于我们自身,即使用了也不会影响我们的代码结构。
  • 框架的英语为 Framework,更多的是对模式级别的复用和对程序组织的规范。这里的模式是指比如MVC,为了实现M和V的解耦,把复杂的耦合关系由经常变化的业务代码转移到不经常变化的框架内部消化。是面向一个领域来提供一套解决方案,提高开发效率,如果我们选择了使用某框架,就应该遵循该框架所规定的规则。
      二者最主要的区别是:库(JQuery)以DOM操作为中心,框架,准确来说是MVC框架,是以模型(model)为中心,而DOM操作是附加的。所以,以模型为中心最终达到的目的是带来一整套工作流程的变更,使得后台工程师可以编写前端的模型代码,把后台与前端打通,交互设计师处理UI跟模型的互动关系,UI设计师可以专注、无障碍的处理HTML源码,把它们以界面模板的形式提交给交互工程师。这一整套协作机制能大大提高开发效率。使用MVC框架使得前端任务更好的被解耦。

  • 前端常见的库有:JQuery;

  • 常见的框架有 :react.js, angular.js, vue.js,backbone.js, Bootstrap等
(二)jquery 能做什么?

1.取得页面中的元素
2.修改页面的外观
3.改变页面的内容
4.响应用户的页面操作
5.为页面添加动态效果
6.无需刷新页面即可从服务器获取信息
7.简化常见的JavaScript任务

(三)jquery 对象和 DOM 原生对象有什么区别?如何转化?

DOM原生对象 是由传统的js获得,而jquery 对象是利用jquery类库选择器获得的对象,两者都有各自的方法,不能够混用,否则会报错。例如

jQuery  基础知识问答
Paste_Image.png

jquery转换成原生对象,可在其后面加个下标即可,而原生对象转换成jquery只要在它外面加个括号,并在左括号前加个“$” 即可,例如:

jQuery  基础知识问答
Paste_Image.png

(四)jquery中如何绑定事件?bind、unbind、delegate、live、on、off都有什么作用?推荐使用哪种?使用on绑定事件使用事件代理的写法?

可使用on、 bind、delegate、live绑定事件,对应的解除监听的函数分别是off 、unbind、undelegate、die;其中的live及die,在jQuery 1.7版本中,官方已废除了。【可详见此处: https://api.jquery.com/category/deprecated/deprecated-1.7/

  • 1、 bind 作用及用法

bind()向匹配元素添加一个或多个事件处理器,绑定单个事件的使用方法:

$(selector).bind(event,data,function)

绑定多个事件的使用方法

$(selector).bind({event1:function, event2:function, ...})

当然如果后面的回调函数如果相同时可简写成

$(selector).bind("event1 event2",data,function, ...);

其中的event表示事件,data表示需要传递的参数(可选项),function表示绑定事件后执行的函数;
自从jquery1.7版本以后bind()函数推荐用on()来代替;

  • 2、 live作用及用法
    向当前或未来的匹配元素添加一个或多个事件处理器,绑定单个事件的使用方法:
$(selector).live(event,data,function)

绑定多个事件的使用方法

$(selector).live({event1:function, event2:function, ...})

当然如果后面的回调函数如果相同时可简写成

$(selector).live("event1 event2",data,function, ...);

推荐使用on替代;

  • 3、 delegate的作用及用法
    为指定的元素(被选元素的子元素)添加一个或多个事件处理程序,并规定当这些事件发生时运行的函数。使用 delegate() 方法的事件处理程序适用于当前或未来的元素(比如由脚本创建的新元素)。
    单个事件的用法:
$(selector).delegate(childSelector,event,data,function)

绑定多个事件的用法:

$(selector).delegate(childselector,{event1:function, event2:function, ...})

当多个事件所执行的内容完全相同时可简写如下形式:

$(selector).delegate(childselector,"click dbclick mouseout",data,function);
  • 4、 on的作用和使用方法
    on 为指定的元素,添加一个或多个事件处理程序,并规定当这些事件发生时运行的函数。使用 on() 方法的事件处理程序适用于当前或未来的元素(比如由脚本创建的新元素)。

单事件处理方法

$(selector).on(event,childselector,data,function)

多事件处理方法

$(selector).on({event1:function, event2:function, ...},childselector);

当事件后的回调函数相同时,可简写成如下形式:

$(selector).on("click dbclick mouseout",childseletor,data,function);

其中的 childseletor,data均是可选项;on的方法适用于jQuery 1.7及以上。

下面总结下这四者方式的异同:

  • 1、相同点:
    a、都支持单元素多事件的绑定;空格相隔方式或者大括号替代方式;
    b、均是通过事件冒泡方式,将事件传递到document进行事件的响应;

  • 2、比较和联系:
    a、bind 只针对当前已经存在的元素进行事件绑定,而live(),on(),delegate()均支持未来新添加元素的事件设置;
    b、bind()函数在jquery1.7版本以前比较受推崇,1.7版本出来之后,官方已经不推荐用bind(),替代函数为on(),这也是1.7版本新添加的函数,同样,可以用来代替live()函数,live()函数在1.9版本已经删除;
    c、live()函数和delegate()函数两者类似,但是live()函数在执行速度,灵活性和CSS选择器支持方面较delegate()差些;
    d、bind()支持Jquery所有版本;live()支持jquery 1.8-;delegate()支持jquery 1.4.2+;on()支持jquery 1.7+;

  • 总结
    如果项目中引用jquery版本为低版本,推荐用delegate(),高版本jquery(1.7及以上)可以使用on()来代替;

下面利用on来举个例子:

<!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <title>jQuery</title> </head> <body>     <ul class="myUl">         <li>我是1</li>         <li>我是2</li>         <li>我是3</li>     </ul>     <button class="btn">点我增加li</button>      <script src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.js"></script>     <script>     $(".btn").on("click",function(){         $(".myUl").append("<li>我是4</li>");     })     $(".myUl>li").on("click",function(){         console.log($(this).text())     })       </script>  </body> </html>
jQuery  基础知识问答
Paste_Image.png

上面点击多次“点我增加li”的按钮后,会生成多个“我是4”的li,但是生成完后我点击这里li均无法console.log出,这是可使用事件代理来解决:

<!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <title>jQuery</title> </head> <body>     <ul class="myUl">         <li>我是1</li>         <li>我是2</li>         <li>我是3</li>     </ul>     <button class="btn">点我增加li</button>      <script src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.js"></script>     <script>      $(".btn").on("click",function(){         $(".myUl").append("<li>我是4</li>");     })       $(".myUl").on("click","li",function(){         console.log($(this).text())     })       </script>  </body> </html>
jQuery  基础知识问答
事件代理的写法示范

再举个off的例子:

<!doctype html> <html lang="en"> <head>   <meta charset="utf-8">   <title>off demo</title>   <style>   button {     margin: 5px;   }   button#theone {     color: red;     background: yellow;   }   </style>   <script src="https://code.jquery.com/jquery-1.10.2.js"></script> </head> <body>  <button id="theone">Does nothing...</button> <button id="bind">Add Click</button> <button id="unbind">Remove Click</button> <div style="display:none;">Click!</div>  <script> function flash() {   $( "div" ).show().fadeOut( "slow" ); } $( "#bind" ).click(function() {   $( "body" )     .on( "click", "#theone", flash )     .find( "#theone" )       .text( "Can Click!" ); }); $( "#unbind" ).click(function() {   $( "body" )     .off( "click", "#theone", flash )     .find( "#theone" )       .text( "Does nothing..." ); }); </script>  </body> </html>
(五)jquery 如何展示/隐藏元素?

可使用

$(selector).hide(speed,callback); $(selector).show(speed,callback); $(selector).toggle(speed,callback);

这三种方法可分别隐藏、显示及隐藏/显示切换元素,其中speed参数值可为“slow”,“fast”及毫秒数,callback为这三种方法执行完后,下一步执行的动作;speed,callback这两个参数是可选的;
下面举个例子:

<!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <title>jQuery</title> </head> <body>     <ul class="myUl">         <li>我是1</li>         <li>我是2</li>         <li>我是3</li>     </ul>     <button class="btn1">点我隐藏"我是1"</button>     <button class="btn2">点我显示"我是1"</button>     <button class="btn3">“我是1”慢慢隐藏后我显示出来</button>     <button class="btn4">点我切换显示"我是2"</button>      <script src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.js"></script>     <script>      $(".btn1").on("click",function(){         $("li").eq(0).hide();     })        $(".btn2").on("click",function(){         $("li").eq(0).show();     })      $(".btn3").on("click",function(){         $("li").eq(0).hide("slow",function(){             $("li").eq(2).html("<li>“我是1”慢慢隐藏后我显示出来</li>")          });     })     $(".btn4").on("click",function(){         $("li").eq(1).toggle();     })       </script>  </body> </html>
(六)jquery 动画如何使用?
jQuery  基础知识问答
Paste_Image.png

jQuery官方版介绍: .animate( properties [, duration ] [, easing ] [, complete ] )

中文版介绍:http://www.jquery123.com/animate/

举个例子:

<!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <title>jQuery</title>     <style type="text/css">     *{         margin:0;         padding: 0;     }     #ct{         position: relative;     }     .block{         border: 1px solid #000;         background-color: red;         height: 100px;         width: 100px;         position: absolute;     }      </style> </head> <body>     <div id="ct">       <button class="btn1">点我水平移动</button>     <button class="btn2">点我垂直运动</button>     <div class="block">我是方块</div>      </div>      <script src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.js"></script>     <script>     $(".btn1").on("click",function(){             $(".block").animate({                 left:"400px"             },3000)     })      $(".btn2").on("click",function(){             $(".block").animate({                 top:"400px"             },3000)     })       </script>  </body> </html>
jQuery  基础知识问答
Paste_Image.png

(七)如何设置和获取元素内部 HTML 内容?如何设置和获取元素内部文本?
  • 可使用.html()来设置和获取元素的内部HTML内容,当.html() 括号里不接受任何参数时表示获取,当里面有htmlString 时或函数表示设置;
jQuery  基础知识问答
Paste_Image.png

函数的例子:

$('div.demo-container').html(function() {   var emph = '<em>' + $('p').length + ' paragraphs!</em>';   return '<p>All new content for ' + emph + '</p>'; });

其在原生js DOM 对应着.innerHTML()

  • 可使用.text()来设置和获取元素的内部文本内容,当.text() 括号里不接受任何参数时表示获取,当里面有textString 或函数时表示设置;

函数的例子:

$('ul li').text(function(index) {   return 'item number ' + (index + 1); });
jQuery  基础知识问答
Paste_Image.png

<!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <title>jQuery</title>     <style type="text/css">     *{         margin:0;         padding: 0;     }       </style> </head> <body>     <h1 id="header">我是<span>头部</span></h1>         <p id="footer">我是<strong>尾部</strong></p>     <button class="btn1">点我打印“我是头部”的html内容</button>     <button class="btn2">点我打印“我是头部”的文本内容</button>     <button class="btn3">点我设置“我是头部”的html内容</button>     <button class="btn4">点我设置“我是头部”的文本内容</button>       <script src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.js"></script>     <script>       $(".btn1").on("click",function(){          console.log($("#header").html())      });       $(".btn2").on("click",function(){          console.log($("#header").text())      });       $(".btn3").on("click",function(){          $("#header").html('我是<em>内容</em>')      });       $(".btn4").on("click",function(){          $("#header").text('我是<em>内容</em>')      });      </script>  </body> </html>
jQuery  基础知识问答
Paste_Image.png

(八)如何设置和获取表单用户输入或者选择的内容?如何设置和获取元素属性?

1、使用.val() 括号里不包含任何参数来获取表单用户输入或者选择的内容。

jQuery  基础知识问答
Paste_Image.png

  • 注意:获取匹配的元素集合中第一个元素的当前值,也就是说当有多个值时,它只返回第一个,例如下面的例子,我选中了“看书”和“上网”两个选项,但它只返回第一个值,也就是“看书”
<!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <title>jQuery</title>     <style type="text/css">      </style> </head> <body>         <form action="#">             姓名: <input type="text" id="content" placeholder="请输入的信息" name="content"> <br>             <input type="checkbox" class="duoxuan" value="看书" name="read" > 看书             <input type="checkbox" class="duoxuan" value="上网" name="internet"> 上网  <br>             <input type="radio" class="danxuan1" value="女" name="sex">  女             <input type="radio" class="danxuan2" value="男" name="sex">  男 <br>             手机品牌:<select name="phone" id="xiala" multiple="multiple" >             <option value="苹果">iphone手机</option>             <option value="三星"> 三星手机 </option>            <option value="小米">小米手机</option>         </select> <br>             <button type="submit">提交</button>         </form>         <button class="love">点我获取你的兴趣</button>         <button class="sex">点我获取你的性别</button>         <button class="phone">点我获取你的手机品牌</button>         <h1></h1>         <h2></h2>         <h3></h3>         <h4></h4>             <script src="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script>         <script>             $("#content").on("keyup",function(){                 var $inputContent = $("#content").val();                 $("h1").text("你是:"+ $inputContent)              });             $(".love").on("click",function () {                 var $love=$("input:checkbox:checked").val();                 $("h2").text("你的兴趣: "+$love)              });             $(".sex").on("click",function () {                 var $sex=$("input:radio:checked").val();                 $("h3").text("你的性别: " +$sex);              });             $(".phone").on("click",function () {                 var $phone=$("#xiala").val();                 $("h4").text("你的手机品牌: " +$phone);              })          </script>  </body> </html>
jQuery  基础知识问答
Paste_Image.png

2、当.val()括号里面有值时则是设置匹配的元素集合中每个元素的值;

jQuery  基础知识问答
Paste_Image.png

  • 举个 以一个文本字符串或一个以字符串形式的数组来设定每个匹配元素的值的例子:
<!DOCTYPE html> <html> <head>     <style>         button { margin:4px; cursor:pointer; }         input { margin:4px; color:blue; }     </style>     <script src="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script> </head> <body> <div>     <button>Feed</button>     <button>the</button>     <button>Input</button> </div> <input type="text" value="click a button" /> <script>     $("button").on("click",function () {         var $text=$(this).text();         $("input").val($text)      }) </script>  </body> </html>
jQuery  基础知识问答
Paste_Image.png

  • 举个多个设置值的例子
<!DOCTYPE html> <html> <head>     <style>         body { color:blue; }     </style>     <script src="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script> </head> <body> <select id="single">     <option >Single1</option>     <option selected>Single2</option> </select>  <select id="multiple" multiple="multiple">     <option selected="selected">Multiple1</option>     <option>Multiple2</option>     <option selected="selected">Multiple3</option> </select><br/> <input type="checkbox" name="checkboxname" value="check1"/> check1 <input type="checkbox" name="checkboxname" value="check2"/> check2 <input type="radio"  name="r" value="radio1"/> radio1 <input type="radio"  name="r" value="radio2"/> radio2 <script>     $("#single").val("Single1");     $("input").val(["check1","check2","radio2"]);     $("#multiple").val(["Multiple1","Multiple2"]);  //    $("#single").val("Single2"); //    $("#multiple").val(["Multiple2", "Multiple3"]); //    $("input").val(["check1","check2", "radio1" ]);  </script>  </body> </html>
  • 再举个 一个用来返回设置值的函数的例子。
<!DOCTYPE html> <html> <head>     <script src="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script> </head> <body>  <p>Type something and then click or tab out of the input.</p> <input type="text" value="type something" />  <script> //    方法一、 // //    $("input").on("blur",function () { //        $("input").val($(this).val().toUpperCase()); //    });  //      方法二、        $("input").on("blur",function () {            $("input").val(function (index ,value) {               return $(this).val().toUpperCase();            })        });   //    $('input').bind('blur', function() { //        $(this).val(function( i, val ) { //            return val.toUpperCase(); //        }); //    }); </script>  </body> </html>

3、使用.atrr() 括号里为属性名时可获取元素的属性;【.attr()方法只获取第一个匹配元素的属性值。要获取每个单独的元素的属性值, 我们需要依靠jQuery的 .each()或者.map()方法循环。】
另外值得注意的是,
(1)、若要检索和更改DOM属性,比如元素的checked, selected, 或 disabled状态,需要使用.prop()方法。
(2)、在Jquery1.6之前.attr()取某些attribute值时会返回property的值,这就导致了结果的不一致,因此Jquery1.6之后attr()返回attribute值,prop()返回property值;例如, selectedIndex, tagName, nodeName, nodeType, ownerDocument, defaultChecked, 和 defaultSelected 应使用.prop()方法进行取值或赋值。 在jQuery1.6之前,这些属性使用.attr()方法取得,但是这并不是元素的attr属性。他们没有相应的属性(attributes),只有特性(property)。

下面举个attr()获取属性的例子:

<!DOCTYPE html> <html> <head>     <meta charset="utf-8">     <script src="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script> </head> <body>     ![我的头像](http://upload-images.jianshu.io/upload_images/2166980-fca5b610b6a8f228.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)     <h1></h1>     <h2></h2>     <script>         var $imgSrc=$("img").attr("src");         $("h1").text("该图片地址为: "+$imgSrc);         var $imgAlt=$("img").attr("alt");         $("h2").text("该图片alt为: "+$imgAlt);     </script>  </body> </html>
jQuery  基础知识问答
运行结果

4、.attr() 设置属性的方法

jQuery  基础知识问答
Paste_Image.png

  • 举个设置多个属性的例子:
<!DOCTYPE html> <html> <head>     <meta charset="utf-8">     <script src="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script> </head> <body>     <a href="#">        ![我的头像](http://upload-images.jianshu.io/upload_images/2166980-fca5b610b6a8f228.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)     </a>     <h1></h1>     <h2></h2>     <script>         $("img").attr({             "alt":"照片太帅,无法显示",             "title":"点我刷新",             "class":"myPic"         });         $(".myPic").css({"width":"400px","height":"200px"})     </script>  </body> </html>
jQuery  基础知识问答
运行结果

  • 举个通过函数来设置属性的例子:
<!DOCTYPE html> <html> <head>     <meta charset="utf-8">     <script src="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script> </head> <body>     <a href="#">        ![鼠标放在这里会显示我](http://upload-images.jianshu.io/upload_images/2166980-fca5b610b6a8f228.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)     </a>      <script>         $("img").attr("title",function (index,attr) {             return attr + "- by licai" ;         })      </script>  </body> </html>
jQuery  基础知识问答
Paste_Image.png

二、代码

(一)使用 jquery实现如下效果
jQuery  基础知识问答
代码题1

<!DOCTYPE html> <html> <head>     <meta charset="utf-8">     <style>         *{             padding: 0;             margin: 0;         }         .ct-all{             margin-top: 10px;             margin-left: 10px;          }         ul,li{             list-style: none;         }         .ct-all>li{             background-color: #c7171e;             border-bottom: 1px solid #de272e;             width: 200px;             padding: 8px 10px;             height: 25px;             line-height: 25px;             font-size: 16px;             position: relative;             color: #fff;           }         a{             text-decoration: none;             color: #fff;         }         .cted{             position: absolute;             width: 200px;             left: 220px;             top: 0;             border: 1px solid #ccc;         }         .cted>li{             display: inline-block;             vertical-align: middle;             padding-right: 50px;             padding-left: 10px;         }         .cted>li>a{             color: #000;         }     </style>     <script src="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script> </head> <body>     <ul class="ct-all">         <li class="list"><a href="#">珠宝玉器1 &nbsp &nbsp &nbsp  &nbsp    > </a>             <ul class="cted">                 <li><a href="#">翡翠</a></li>                 <li><a href="#">玉石</a></li>                 <li><a href="#">宝石</a></li>                 <li><a href="#">水晶</a></li>                 <li><a href="#">玛瑙</a></li>                 <li><a href="#">珍珠</a></li>                 <li><a href="#">钻石</a></li>                 <li><a href="#">琥珀</a></li>                 <li><a href="#">和田</a></li>                 <li><a href="#">琥珀</a></li>             </ul>          </li>         <li class="list"><a href="#">珠宝玉器1 &nbsp &nbsp &nbsp  &nbsp    > </a>             <ul class="cted">                 <li><a href="#">翡翠</a></li>                 <li><a href="#">玉石</a></li>                 <li><a href="#">宝石</a></li>                 <li><a href="#">水晶</a></li>                 <li><a href="#">玛瑙</a></li>                 <li><a href="#">珍珠</a></li>             </ul>          </li>         <li class="list"><a href="#">珠宝玉器1 &nbsp &nbsp &nbsp  &nbsp    > </a>             <ul class="cted">                 <li><a href="#">翡翠</a></li>                 <li><a href="#">玉石</a></li>                 <li><a href="#">宝石</a></li>                 <li><a href="#">水晶</a></li>             </ul>          </li>         <li class="list"><a href="#">珠宝玉器1 &nbsp &nbsp &nbsp  &nbsp    > </a>             <ul class="cted">                 <li><a href="#">翡翠</a></li>                 <li><a href="#">玉石</a></li>                 <li><a href="#">宝石</a></li>                 <li><a href="#">水晶</a></li>                 <li><a href="#">玛瑙</a></li>                 <li><a href="#">珍珠</a></li>             </ul>          </li>         <li class="list"><a href="#">珠宝玉器1 &nbsp &nbsp &nbsp  &nbsp    > </a>             <ul class="cted">                 <li><a href="#">翡翠</a></li>                 <li><a href="#">玉石</a></li>                 <li><a href="#">宝石</a></li>                 <li><a href="#">水晶</a></li>             </ul>          </li>     </ul>      <script>         $(".cted").hide();         $(".list").on(" mouseover",function () {             $(this).find(".cted").show();         });         $(".list").on("mouseout",function () {             $(this).find(".cted").hide();         });      </script>  </body> </html>

上述代码运行结果:http://book.jirengu.com/jirengu-inc/jrg-renwu5/%E6%9D%8E%E5%BD%A9/renwu25/25-1.html

范例: http://book.jirengu.com/jirengu-inc/jrg-fe7/%E4%BD%9C%E4%B8%9A%E5%AE%89%E6%8E%92/jscode/JS8-jqery%E8%AF%AD%E6%B3%95/8-1.html

(二)使用 jquery 实现如下效果

问题: 点奢侈品2的时候页面跳到了顶部,可能是什么原因?如何解决?

可能原因是奢侈品2对应的a链接的href等于一个“#”导致,因为等于一个“#”时,默认的锚是#top 也就是网页的上端(当页面很长时,会采用# + id的方式来设定页面的具体位置锚),因此会跳到页面顶部,可采用如下三种方法解决:
1、href让其等于两个或四个“#”;(这种方式最安全);
2、让href等于“javascript:”;
3、让href等于“javascript:void(0)”;(不推荐)

jQuery  基础知识问答
代码题2

<!DOCTYPE html> <html> <head>     <meta charset="utf-8">     <style>         *{             padding: 0;             margin: 0;         }         a{             text-decoration: none;             color: #333;         }         ul,li{             list-style: none;          }          .nav1>li{             padding: 5px 10px;             border-right: dotted 1px #ddd ;             display: inline-block;             vertical-align: middle;           }          .content{             border: 1px solid #ccc;             width: 726px;             height: 464px;             margin-left: -20px;           }         .content>li{             border: 1px solid #ccc;             text-align: center;             float: left;             width: 200px;             height: 200px;             padding: 10px;             margin-left: 20px;             margin-bottom: 20px;             position: relative;          }         .price{             color: #c81623;             font-size: 16px;         }         .name{             font-size: 16px;             color: #333;         }         .clearfix:after{             content: "";             clear: both;             display: block;         }          a.shoppingNow{             text-decoration: none;             color: #c81623;             padding: 10px;             border: 1px solid #c81623;             border-radius: 3px;             position: absolute;             top: 80px;             left: 65px;             background-color: #fff;         }         div.cover{             background-color: #666;             width: 220px;             height: 220px;             opacity: 0.5;             position: absolute;             top: 0;             left: 0;         }         .front{             display: none;         }         .nav1>.active{             background-color: #bbb;             color:#c81623;         }         .content{             display: none;         }         .content.active{             display: block;          }         .active>li:hover .front{             display: block;         }         .wrap1{             margin-bottom: 20px;         }     </style>     <script src="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script> </head> <body>     <div class="wrap1">     <ul class="nav1">         <li class="active"><a  href="#">热门</a></li>         <li><a href="#">珠宝首饰</a></li>         <li><a href="#">奢侈品</a></li>     </ul>          <ul class="content  clearfix active" >             <li>                 ![手链](http://upload-images.jianshu.io/upload_images/2166980-4b4ef8b7a09d1acd.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)                 <p class="name">珂兰 黄金手链 3D猴哥款</p>                 <p class="price">¥45.00</p>                 <div class="cover front"></div>                 <a class="shoppingNow front" href="#">立即抢购</a>              </li>             <li>                 ![手链](http://upload-images.jianshu.io/upload_images/2166980-4b4ef8b7a09d1acd.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)                 <p class="name">珂兰 黄金手链 3D猴哥款</p>                 <p class="price">¥45.00</p>                 <div class="cover front"></div>                 <a class="shoppingNow front" href="#">立即抢购</a>             </li>             <li>                 ![手链](http://upload-images.jianshu.io/upload_images/2166980-4b4ef8b7a09d1acd.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)                 <p class="name">珂兰 黄金手链 3D猴哥款</p>                 <p class="price">¥45.00</p>                 <div class="cover front"></div>                 <a class="shoppingNow front" href="#">立即抢购</a>             </li>             <li>                 ![手链](http://upload-images.jianshu.io/upload_images/2166980-4b4ef8b7a09d1acd.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)                 <p class="name">珂兰 黄金手链 3D猴哥款</p>                 <p class="price">¥45.00</p>                 <div class="cover front"></div>                 <a class="shoppingNow front" href="#">立即抢购</a>             </li>             <li>                 ![手链](http://upload-images.jianshu.io/upload_images/2166980-4b4ef8b7a09d1acd.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)                 <p class="name">珂兰 黄金手链 3D猴哥款</p>                 <p class="price">¥45.00</p>                 <div class="cover front"></div>                 <a class="shoppingNow front" href="#">立即抢购</a>             </li>             <li>                 ![手链](http://upload-images.jianshu.io/upload_images/2166980-4b4ef8b7a09d1acd.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)                 <p class="name">珂兰 黄金手链 3D猴哥款</p>                 <p class="price">¥45.00</p>                 <div class="cover front"></div>                 <a class="shoppingNow front" href="#">立即抢购</a>             </li>         </ul>         <ul class="content clearfix" >             <li>                 ![手链](http://upload-images.jianshu.io/upload_images/2166980-dcd17587513a28d3.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)                 <p class="name">珂兰 黄金手链 3D猴哥款</p>                 <p class="price">¥45.00</p>                 <div class="cover front"></div>                 <a class="shoppingNow front" href="#">立即抢购</a>             </li>             <li>                 ![手链](http://upload-images.jianshu.io/upload_images/2166980-4b4ef8b7a09d1acd.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)                 <p class="name">珂兰 黄金手链 3D猴哥款</p>                 <p class="price">¥45.00</p>                 <div class="cover front"></div>                 <a class="shoppingNow front" href="#">立即抢购</a>             </li>             <li>                 ![手链](http://upload-images.jianshu.io/upload_images/2166980-4b4ef8b7a09d1acd.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)                 <p class="name">珂兰 黄金手链 3D猴哥款</p>                 <p class="price">¥45.00</p>                 <div class="cover front"></div>                 <a class="shoppingNow front" href="#">立即抢购</a>             </li>             <li>                 ![手链](http://upload-images.jianshu.io/upload_images/2166980-4b4ef8b7a09d1acd.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)                 <p class="name">珂兰 黄金手链 3D猴哥款</p>                 <p class="price">¥45.00</p>                 <div class="cover front"></div>                 <a class="shoppingNow front" href="#">立即抢购</a>             </li>             <li>                 ![手链](http://upload-images.jianshu.io/upload_images/2166980-4b4ef8b7a09d1acd.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)                 <p class="name">珂兰 黄金手链 3D猴哥款</p>                 <p class="price">¥45.00</p>                 <div class="cover front"></div>                 <a class="shoppingNow front" href="#">立即抢购</a>             </li>             <li>                 ![手链](http://upload-images.jianshu.io/upload_images/2166980-4b4ef8b7a09d1acd.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)                 <p class="name">珂兰 黄金手链 3D猴哥款</p>                 <p class="price">¥45.00</p>                 <div class="cover front"></div>                 <a class="shoppingNow front" href="#">立即抢购</a>             </li>         </ul>         <ul class="content clearfix" >             <li>                 ![手链](http://upload-images.jianshu.io/upload_images/2166980-15f23385ff7610cb.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)                 <p class="name">珂兰 黄金手链 3D猴哥款</p>                 <p class="price">¥45.00</p>                 <div class="cover front"></div>                 <a class="shoppingNow front" href="#">立即抢购</a>             </li>             <li>                 ![手链](http://upload-images.jianshu.io/upload_images/2166980-4b4ef8b7a09d1acd.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)                 <p class="name">珂兰 黄金手链 3D猴哥款</p>                 <p class="price">¥45.00</p>                 <div class="cover front"></div>                 <a class="shoppingNow front" href="#">立即抢购</a>             </li>             <li>                 ![手链](http://upload-images.jianshu.io/upload_images/2166980-4b4ef8b7a09d1acd.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)                 <p class="name">珂兰 黄金手链 3D猴哥款</p>                 <p class="price">¥45.00</p>                 <div class="cover front"></div>                 <a class="shoppingNow front" href="#">立即抢购</a>             </li>             <li>                 ![手链](http://upload-images.jianshu.io/upload_images/2166980-15f23385ff7610cb.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)                 <p class="name">珂兰 黄金手链 3D猴哥款</p>                 <p class="price">¥45.00</p>                 <div class="cover front"></div>                 <a class="shoppingNow front" href="#">立即抢购</a>             </li>             <li>                 ![手链](http://upload-images.jianshu.io/upload_images/2166980-4b4ef8b7a09d1acd.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)                 <p class="name">珂兰 黄金手链 3D猴哥款</p>                 <p class="price">¥45.00</p>                 <div class="cover front"></div>                 <a class="shoppingNow front" href="#">立即抢购</a>             </li>             <li>                 ![手链](http://upload-images.jianshu.io/upload_images/2166980-4b4ef8b7a09d1acd.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)                 <p class="name">珂兰 黄金手链 3D猴哥款</p>                 <p class="price">¥45.00</p>                 <div class="cover front"></div>                 <a class="shoppingNow front" href="#">立即抢购</a>             </li>         </ul>     </div>     <div class="wrap1">         <ul class="nav1">             <li class="active"><a  href="javascript:void(0)">热门</a></li>             <li><a href="javascript:">珠宝首饰</a></li>             <li><a href="##">奢侈品</a></li>         </ul>         <ul class="content  clearfix active" >             <li>                 ![手链](http://upload-images.jianshu.io/upload_images/2166980-4b4ef8b7a09d1acd.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)                 <p class="name">珂兰 黄金手链 3D猴哥款</p>                 <p class="price">¥45.00</p>                 <div class="cover front"></div>                 <a class="shoppingNow front" href="#">立即抢购</a>              </li>             <li>                 ![手链](http://upload-images.jianshu.io/upload_images/2166980-4b4ef8b7a09d1acd.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)                 <p class="name">珂兰 黄金手链 3D猴哥款</p>                 <p class="price">¥45.00</p>                 <div class="cover front"></div>                 <a class="shoppingNow front" href="#">立即抢购</a>             </li>             <li>                 ![手链](http://upload-images.jianshu.io/upload_images/2166980-4b4ef8b7a09d1acd.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)                 <p class="name">珂兰 黄金手链 3D猴哥款</p>                 <p class="price">¥45.00</p>                 <div class="cover front"></div>                 <a class="shoppingNow front" href="#">立即抢购</a>             </li>             <li>                 ![手链](http://upload-images.jianshu.io/upload_images/2166980-4b4ef8b7a09d1acd.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)                 <p class="name">珂兰 黄金手链 3D猴哥款</p>                 <p class="price">¥45.00</p>                 <div class="cover front"></div>                 <a class="shoppingNow front" href="#">立即抢购</a>             </li>             <li>                 ![手链](http://upload-images.jianshu.io/upload_images/2166980-4b4ef8b7a09d1acd.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)                 <p class="name">珂兰 黄金手链 3D猴哥款</p>                 <p class="price">¥45.00</p>                 <div class="cover front"></div>                 <a class="shoppingNow front" href="#">立即抢购</a>             </li>             <li>                 ![手链](http://upload-images.jianshu.io/upload_images/2166980-4b4ef8b7a09d1acd.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)                 <p class="name">珂兰 黄金手链 3D猴哥款</p>                 <p class="price">¥45.00</p>                 <div class="cover front"></div>                 <a class="shoppingNow front" href="#">立即抢购</a>             </li>         </ul>         <ul class="content clearfix" >             <li>                 ![手链](http://upload-images.jianshu.io/upload_images/2166980-dcd17587513a28d3.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)                 <p class="name">珂兰 黄金手链 3D猴哥款</p>                 <p class="price">¥45.00</p>                 <div class="cover front"></div>                 <a class="shoppingNow front" href="#">立即抢购</a>             </li>             <li>                 ![手链](http://upload-images.jianshu.io/upload_images/2166980-4b4ef8b7a09d1acd.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)                 <p class="name">珂兰 黄金手链 3D猴哥款</p>                 <p class="price">¥45.00</p>                 <div class="cover front"></div>                 <a class="shoppingNow front" href="#">立即抢购</a>             </li>             <li>                 ![手链](http://upload-images.jianshu.io/upload_images/2166980-4b4ef8b7a09d1acd.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)                 <p class="name">珂兰 黄金手链 3D猴哥款</p>                 <p class="price">¥45.00</p>                 <div class="cover front"></div>                 <a class="shoppingNow front" href="#">立即抢购</a>             </li>             <li>                 ![手链](http://upload-images.jianshu.io/upload_images/2166980-4b4ef8b7a09d1acd.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)                 <p class="name">珂兰 黄金手链 3D猴哥款</p>                 <p class="price">¥45.00</p>                 <div class="cover front"></div>                 <a class="shoppingNow front" href="#">立即抢购</a>             </li>             <li>                 ![手链](http://upload-images.jianshu.io/upload_images/2166980-4b4ef8b7a09d1acd.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)                 <p class="name">珂兰 黄金手链 3D猴哥款</p>                 <p class="price">¥45.00</p>                 <div class="cover front"></div>                 <a class="shoppingNow front" href="#">立即抢购</a>             </li>             <li>                 ![手链](http://upload-images.jianshu.io/upload_images/2166980-4b4ef8b7a09d1acd.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)                 <p class="name">珂兰 黄金手链 3D猴哥款</p>                 <p class="price">¥45.00</p>                 <div class="cover front"></div>                 <a class="shoppingNow front" href="#">立即抢购</a>             </li>         </ul>         <ul class="content clearfix" >             <li>                 ![手链](http://upload-images.jianshu.io/upload_images/2166980-15f23385ff7610cb.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)                 <p class="name">珂兰 黄金手链 3D猴哥款</p>                 <p class="price">¥45.00</p>                 <div class="cover front"></div>                 <a class="shoppingNow front" href="#">立即抢购</a>             </li>             <li>                 ![手链](http://upload-images.jianshu.io/upload_images/2166980-4b4ef8b7a09d1acd.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)                 <p class="name">珂兰 黄金手链 3D猴哥款</p>                 <p class="price">¥45.00</p>                 <div class="cover front"></div>                 <a class="shoppingNow front" href="#">立即抢购</a>             </li>             <li>                 ![手链](http://upload-images.jianshu.io/upload_images/2166980-4b4ef8b7a09d1acd.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)                 <p class="name">珂兰 黄金手链 3D猴哥款</p>                 <p class="price">¥45.00</p>                 <div class="cover front"></div>                 <a class="shoppingNow front" href="#">立即抢购</a>             </li>             <li>                 ![手链](http://upload-images.jianshu.io/upload_images/2166980-15f23385ff7610cb.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)                 <p class="name">珂兰 黄金手链 3D猴哥款</p>                 <p class="price">¥45.00</p>                 <div class="cover front"></div>                 <a class="shoppingNow front" href="#">立即抢购</a>             </li>             <li>                 ![手链](http://upload-images.jianshu.io/upload_images/2166980-4b4ef8b7a09d1acd.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)                 <p class="name">珂兰 黄金手链 3D猴哥款</p>                 <p class="price">¥45.00</p>                 <div class="cover front"></div>                 <a class="shoppingNow front" href="#">立即抢购</a>             </li>             <li>                 ![手链](http://upload-images.jianshu.io/upload_images/2166980-4b4ef8b7a09d1acd.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)                 <p class="name">珂兰 黄金手链 3D猴哥款</p>                 <p class="price">¥45.00</p>                 <div class="cover front"></div>                 <a class="shoppingNow front" href="#">立即抢购</a>             </li>         </ul>     </div>      <script>  //        方法一、  //        function indexOf(ele){ //            var parent = ele.parentElement, //                    siblings = parent.children; //            for(var i=0; i<siblings.length; i++){ //                if(ele === siblings[i]) return i; //            } //            return -1; //        } // //        $(".nav1>li").on("click",function () { //            $(this).siblings().removeClass("active"); //            $(this).addClass("active"); //            var i=indexOf(this); //           $(this).parents(".wrap1").find(".content").removeClass("active"); //            $(this).parents(".wrap1").find(".content").eq(i).addClass("active"); //        });  //        方法二、          $(".nav1>li").on("click",function () {             $(this).siblings().removeClass("active");             $(this).addClass("active");             var i=$(this).index();             $(this).parents(".wrap1").find(".content").removeClass("active");             $(this).parents(".wrap1").find(".content").eq(i).addClass("active");         });     </script>  </body> </html>

上述代码运行结果:http://book.jirengu.com/jirengu-inc/jrg-renwu5/%E6%9D%8E%E5%BD%A9/renwu25/25-2.html#

范例:http://book.jirengu.com/jirengu-inc/jrg-fe7/%E4%BD%9C%E4%B8%9A%E5%AE%89%E6%8E%92/jscode/JS8-jqery%E8%AF%AD%E6%B3%95/8-2.html

(三)实现如下效果
jQuery  基础知识问答
代码题3

  • 提示
    1.使用代理
    2.当点击按钮时使用如下数据
    var products = [   {       img: 'http://img10.360buyimg.com/N3/jfs/t2242/92/1446546284/374195/9196ac66/56af0958N1a723458.jpg',       name: '珂兰 黄金手 猴哥款',       price: '¥405.00'   },{       img: 'http://img10.360buyimg.com/N3/jfs/t2242/92/1446546284/374195/9196ac66/56af0958N1a723458.jpg',       name: '珂兰 黄金转运珠 猴哥款',       price: '¥100.00'   },{       img: 'http://img10.360buyimg.com/N3/jfs/t2242/92/1446546284/374195/9196ac66/56af0958N1a723458.jpg',       name: '珂兰 黄金手链 3D猴哥款',       price: '¥45.00'   } ];
<!DOCTYPE html> <html> <head>     <meta charset="utf-8">     <style>         *{             padding: 0;             margin: 0;         }         a{             text-decoration: none;             color: #333;         }         ul,li{             list-style: none;          }          .nav1>li{             padding: 5px 10px;             border-right: dotted 1px #ddd ;             display: inline-block;             vertical-align: middle;           }          .content{              width: 726px;             height: 464px;             margin-right: -20px;            }         .content>li{             border: 1px solid #ccc;             text-align: center;             float: left;             width: 200px;             height: 200px;             padding: 10px;             margin-right: 20px;             margin-bottom: 20px;             position: relative;          }         .price{             color: #c81623;             font-size: 16px;         }         .name{             font-size: 16px;             color: #333;         }         .clearfix:after{             content: "";             clear: both;             display: block;         }          a.shoppingNow{             text-decoration: none;             color: #c81623;             padding: 10px;             border: 1px solid #c81623;             border-radius: 3px;             position: absolute;             top: 80px;             left: 65px;             background-color: #fff;         }         div.cover{             background-color: #666;             width: 220px;             height: 220px;             opacity: 0.5;             position: absolute;             top: 0;             left: 0;         }         .front{             display: none;         }         .nav1>.active{             background-color: #bbb;             color:#c81623;         }         .content{             display: none;         }         .content.active{             display: block;          }         .active>li:hover .front{             display: block;         }         #ct{             margin: 0 auto;             width: 726px;         }         a.add{             text-decoration: none;             color: #c81623;             padding: 10px;             border: 1px solid #c81623;             border-radius: 3px;             background-color: #fff;         }     </style>     <script src="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script> </head> <body>     <div id="ct">         <h1>珠宝首饰</h1>         <ul class="content  clearfix active" >             <li>                 ![手链](http://upload-images.jianshu.io/upload_images/2166980-4b4ef8b7a09d1acd.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)                 <p class="name">珂兰 黄金手链 3D猴哥款</p>                 <p class="price">¥45.00</p>                 <div class="cover front"></div>                 <a class="shoppingNow front" href="#">立即抢购</a>              </li>             <li>                 ![手链](http://upload-images.jianshu.io/upload_images/2166980-4b4ef8b7a09d1acd.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)                 <p class="name">珂兰 黄金手链 3D猴哥款</p>                 <p class="price">¥45.00</p>                 <div class="cover front"></div>                 <a class="shoppingNow front" href="#">立即抢购</a>             </li>             <li>                 ![手链](http://upload-images.jianshu.io/upload_images/2166980-4b4ef8b7a09d1acd.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)                 <p class="name">珂兰 黄金手链 3D猴哥款</p>                 <p class="price">¥45.00</p>                 <div class="cover front"></div>                 <a class="shoppingNow front" href="#">立即抢购</a>             </li>             <li>                 ![手链](http://upload-images.jianshu.io/upload_images/2166980-4b4ef8b7a09d1acd.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)                 <p class="name">珂兰 黄金手链 3D猴哥款</p>                 <p class="price">¥45.00</p>                 <div class="cover front"></div>                 <a class="shoppingNow front" href="#">立即抢购</a>             </li>             <li>                 ![手链](http://upload-images.jianshu.io/upload_images/2166980-4b4ef8b7a09d1acd.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)                 <p class="name">珂兰 黄金手链 3D猴哥款</p>                 <p class="price">¥45.00</p>                 <div class="cover front"></div>                 <a class="shoppingNow front" href="#">立即抢购</a>             </li>             <li>                 ![手链](http://upload-images.jianshu.io/upload_images/2166980-4b4ef8b7a09d1acd.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)                 <p class="name">珂兰 黄金手链 3D猴哥款</p>                 <p class="price">¥45.00</p>                 <div class="cover front"></div>                 <a class="shoppingNow front" href="#">立即抢购</a>             </li>         </ul>         <a href="javascript:" class="add">添加</a>      </div>     <script>  //        方法一、 // //        $(".add").on("click",function () { //            $(".content").append('<li>![手链](http://upload-images.jianshu.io/upload_images/2166980-7bb1f45c1f4bd795.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)<p class="name">珂兰 黄金手 猴哥款</p><p class="price">¥405.00</p><div class="cover front"></div> <a class="shoppingNow front" href="#">立即抢购</a></li>' + //                                 '<li>![手链](http://upload-images.jianshu.io/upload_images/2166980-7bb1f45c1f4bd795.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)<p class="name">珂兰 黄金转运珠 猴哥款</p><p class="price">¥100.00</p><div class="cover front"></div> <a class="shoppingNow front" href="#">立即抢购</a></li>'+ //                                '<li>![手链](http://upload-images.jianshu.io/upload_images/2166980-7bb1f45c1f4bd795.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)<p class="name">珂兰 黄金手链 3D猴哥款</p><p class="price">¥45.00</p><div class="cover front"></div> <a class="shoppingNow front" href="#">立即抢购</a></li>' //            ); // // //        }) //        方法二、         var products = [             {                 img: 'http://img10.360buyimg.com/N3/jfs/t2242/92/1446546284/374195/9196ac66/56af0958N1a723458.jpg',                 name: '珂兰 黄金手 猴哥款',                 price: '¥405.00'             },{                 img: 'http://img10.360buyimg.com/N3/jfs/t2242/92/1446546284/374195/9196ac66/56af0958N1a723458.jpg',                 name: '珂兰 黄金转运珠 猴哥款',                 price: '¥100.00'             },{                 img: 'http://img10.360buyimg.com/N3/jfs/t2242/92/1446546284/374195/9196ac66/56af0958N1a723458.jpg',                 name: '珂兰 黄金手链 3D猴哥款',                 price: '¥45.00'             }         ];          function getProductsInfo(elem) {             var newli = '';             newli='<li>'+'[站外图片上传中……(46)]'+'<p class="name">'+elem.name+'</p>'+'<p class="price">'+elem.price+'</p>'+'<div class="cover front"></div><a class="shoppingNow front" href="#">立即抢购</a></li>';             return newli;         }         $(".add").on("click",function () {             $.each(products,function (index,products) {                var more=getProductsInfo(products);                 $(".content").append(more);             })         })     </script>  </body> </html>

上述代码运行结果:http://book.jirengu.com/jirengu-inc/jrg-renwu5/%E6%9D%8E%E5%BD%A9/renwu25/25-3.html#

范例: http://book.jirengu.com/jirengu-inc/jrg-fe7/%E4%BD%9C%E4%B8%9A%E5%AE%89%E6%8E%92/jscode/JS8-jqery%E8%AF%AD%E6%B3%95/8-3.html

转载本站任何文章请注明:转载至神刀安全网,谢谢神刀安全网 » jQuery 基础知识问答

分享到:更多 ()

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址