进阶任务14

2017-05-08  本文已影响20人  dengpan

问答部分

一、说说库和框架的区别？

二、jQuery能做什么？

jQuery能做如下操作：

$("ul li");
$("li").next(".s");
$("li").parent();

$("#ct").append(".newdiv");

$("p").css("color","red");

//绑定事件
$("#btn").on("click",function(){
              console.log("event handling");
          });
//解除事件
$("#btn").off();

$(".box1").hide(1500,function(){
              $(".box2").hide(1500,function(){
                  $(".box3").hide(1500);
              });
          });

三、jQuery对象和DOM原生对象有什么区别？如何转化？

      //DOM原生对象
      var btn = document.getElementById("clickme");
      btn.innerHTML = "jirengu";
      btn.setAttribute("class","btn");
      //jQuery对象
      var $btn = $("#clickme");
      $btn.html("jirengu");
      $btn.attr("class","button");

          //数组下标的转化方式
        var $li = $("li");//jQuery对象
          var li = $li[2];//DOM对象
          //jQuery的get(index)方法
          //当get()不写参数把所有对象转为DOM对象返回
          var $li = $("li");//jQuery对象
          var li = $li.get(3);//DOM对象

          //用$()把DOM原生对象包装起来，就可以转换为jQuery对象，即$(DOM对象)
          var li = document.getElementsByTagName("li");//DOM对象
          var $li = $(li);//jQuery对象

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

$("#btn").bind("mouseenter mouseleave",function(){
       console.log(111);
});

$("#btn").unbind();//移除#btn上所有绑定的处理程序
$("#btn").unbind("click");//移除#btn上所有绑定的click处理程序

$(".pic").live("click",function(){
       $(this).hide("slow");
});

$(".content").delegate(".btn","click",function(){
    console.log("delegate()");
});

//.on()的语法如下
.on(events[,selectors][,data],handler);

            function myHandler(){
                console.log(111);
            }
            //为所有类名为items的元素绑定click事件，定义在test和foo两个命名空间下
            $(".items").on("click.test.foo",myHandler);
            // 触发所有click事件
            $("#btn").trigger("click");
            // 触发定义在test命名空间下的click事件
            $("#btn").trigger("click.test");
            // 触发定义在foo命名空间下的click事件
            $("#btn").trigger("click.foo");
            // 触发同时定义在test和foo两个命名空间下的click事件
            $("#btn").trigger("click.test.foo");

           $("#ct").on("click",".items",function(){
               console.log(111);
           });

            $("#btn").on("click",{name:"dp",age:25},function(event){
                console.log(event.data);
            });

            $("#btn").on("click",function(){
                console.log(111);
            });

           //.off()的语法如下
           .off(events[,selectors][,handler]);
           //移除所有事件
           $("#btn").off();
           //移除元素上所有的代理事件，而不移除任何非代理事件，请使用特殊值 "**"
           $("#btn").off("click","**");
           //通过命名空间来移除事件
           function myHandler(){
               console.log(111);
           }
           $("#btn1").on("click.test.foo",myHandler);
           $("#btn1").off("click.test");
           $("#btn1").off("clck.test.foo");

五、jQuery如何展示元素和隐藏元素？

  $(".pic").show();
  $(".pic").show("fast");
$("#btn").on("click",function(){
   $(".items").show("slow",function(){
           //to do...
       });
});

$(".pic").hide();
$(".pic").hide("fast");
$("#btn").on("click",function(){
   $(".items").hide("slow",function(){
           //to do...
       });
});

$(".pic").toggle();
$(".pic").toggle(200);
$("#btn").on("click",function(){
   $(".items").toggle("slow",function(){
           //to do...
       });
});

比如如下GIF：


show()/hide()/toggle() 
$(".pic").fadeIn();
$(".pic").fadeIn("fast");
$("button").on("click",function(){
   $("div").fadeIn("slow",function(){
           //to do...
       });
});

$(".pic").fadeIn();
$(".pic").fadeIn(200);
$("button").on("click",function(){
   $("div").fadeOut("slow",function(){
           //to do...
       });
});

$(".pic").fadeToggle();
$(".pic").fadeToggle("slow");
$("button").on("click",function(){
   $("div").fadeToggle("slow",function(){
           //to do...
       });
});

$("img").fadeTo("slow", 0.5, function() {
 // to do...
});

比如如下GIF：


渐变 
$(".pic").slideDown();
$(".pic").slideDown("fast");
$("button").on("click",function(){
   $("div").slideDown(1000,function(){
           //to do...
       });
});

$(".pic").slideUp();
$(".pic").slideUp("slow");
$("button").on("click",function(){
   $("div").slideUp(1500,function(){
           //to do...
       });
});

$(".pic").slideToggle();
$(".pic").slideToggle("fast");
$("button").on("click",function(){
   $("div").slideToggle("slow",function(){
           //to do...
       });
});

比如如下GIF：


滑动

六、jQuery动画如何使用？

.animate()~是一种根据一组 CSS 属性，执行自定义动画的方法，其语法如下：

.animate(properties[,duration][,easing][,complete])
.animate( properties, options )

            $("#clickme").on("click",function(){
                $("div").animate({
                    left:"+=50",
                    opacity:0.5,
                    height:"toggle"
                },5000,function(){
                    console.log(111);
                });
            });

            $("li").animate({
                left:"50",
                height:"50%",
                opacity:0.5
            },{step:function(now,fx){
                var data = fx.elem.id +　"" + fx.prop +  "：" + now;
                $("body").append("<div>" + data + "</div>");
            }
            });

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

//获取元素内部的HTML内容，包括HTML标记
$("#ct").html();
//设置元素内部的HTML内容
$("#demo").html("<div>jirengu<strong>hunger</strong></div>")

//获取元素内部的文本内容
$("#ct").text();
//设置元素内部的文本内容
$("#demo").text("here is jirengu")

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

//获取
$( "input:checkbox:checked" ).val();
//设置
$( "#username" ).val("hunger");

//获取
$( "ims" ).val("src");
//设置，当设置多个属性,包裹属性名的引号是可选的
$( "img" ).attr({
    alt:"hunger",
    title:"frank"
});

代码部分

一、使用 jquery实现如下效果

二、使用 jquery 实现如下效果，提问：点奢侈品2的时候页面跳到了顶部，可能是什么原因？如何解决

//将href属性里的值设置为javascript:如下代码
<a href="javascript:">奢侈品2</a>
//使用preventDefault()取消其默认行为
$("a").on("click",function(){
    event.preventDefault();
});

三、实现如下效果

上一篇 下一篇

猜你喜欢

热点阅读