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类库选择器获得的对象，两者都有各自的方法，不能够混用，否则会报错。例如

Paste_Image.png

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>

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>

事件代理的写法示范

再举个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 动画如何使用？

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>

Paste_Image.png

（七）如何设置和获取元素内部 HTML 内容？如何设置和获取元素内部文本？

可使用.html()来设置和获取元素的内部HTML内容，当.html() 括号里不接受任何参数时表示获取，当里面有htmlString 时或函数表示设置；

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);
});

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>

Paste_Image.png

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

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

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>

Paste_Image.png

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

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>

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>

运行结果

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

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>

运行结果

举个通过函数来设置属性的例子：

<!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>

Paste_Image.png

二、代码

（一）使用 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>

上述代码运行结果：https://github.com/have-not-BUG/task/blob/master/renwu/renwu25/25-1.html

（二）使用 jquery 实现如下效果

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

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

代码题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>

上述代码运行结果：https://github.com/have-not-BUG/task/blob/master/renwu/renwu25/25-2.html#

（三）实现如下效果

代码题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,value) {
               var more=getProductsInfo(value);
                $(".content").append(more);
            })
        })
    </script>

</body>
</html>

上述代码运行结果：https://github.com/have-not-BUG/task/blob/master/renwu/renwu25/25-3.html#

**本文版权归本人即简书笔名：该账户已被查封所有，如需转载请注明出处。谢谢！ *

最后编辑于：2017.11.16 11:33:50

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 202,009评论 5赞 474
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 84,808评论 2赞 378
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 148,891评论 0赞 335
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 54,283评论 1赞 272
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 63,285评论 5赞 363
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 48,409评论 1赞 281
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 37,809评论 3赞 393
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 36,487评论 0赞 256
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 40,680评论 1赞 295
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 35,499评论 2赞 318
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 37,548评论 1赞 329
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 33,268评论 4赞 318
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 38,815评论 3赞 304
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 29,872评论 0赞 19
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 31,102评论 1赞 258
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 42,683评论 2赞 348
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 42,253评论 2赞 341

jQuery 基础知识问答

一、问答

（一）说说库和框架的区别？

（二）jquery 能做什么？

（三）jquery 对象和 DOM 原生对象有什么区别？如何转化？

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

（五）jquery 如何展示/隐藏元素？

（六）jquery 动画如何使用？

（七）如何设置和获取元素内部 HTML 内容？如何设置和获取元素内部文本？

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

二、代码

（一）使用 jquery实现如下效果

（二）使用 jquery 实现如下效果

（三）实现如下效果

推荐阅读更多精彩内容