jQuery学习笔记（二）

一、css操作

$("li").css({
      backgroundColor:"pink",
      color: "red",
      fontSize:"32px",
      border: "1px solid black"
    });
    注意：1、一般传入一个数组（用大括号）
    	       2、不同属性用逗号隔开

二、class操作

addClass("name"):添加类
      removeClass("name"):移除类
      hasClass("name"):判断类
      toggleClass("name"):切换类
      注意：添加属性只是单纯的添加，而不删除原来的属性
      	         对于toggle： $("li").toggleClass("basic");
      	         判断li有没有basic类，有则移除，无则增加。进行类的切换。

三、tab栏的切换

$(function(){
   $(".tab>li").mouseenter(function(){
     $(this).addClass("active").siblings().removeClass("active");
     var idx=$(this).index();
     $(".main").eq(idx).addClass("selected").siblings().removeClass("selected");
   })
 })

四、属性操作

$("img").attr({
      alt:"图破了",
      title:"错错错",
      aa:"bb"
    })
    注意：1、一般传入一个数组（用大括号）
    	  2、不同属性用逗号隔开

五、美女相册

    $(function(){
      $("#imagegallery a").click(function(){
        var href=$(this).attr("href");
        $("#image").attr("src",href);

        var title = $(this).attr("title");
        $("#des").text(title);
        return false;
      });
    });

六、prop方法

$("#ck").prop("checked",true);    	   
注意：prop方法用来操作布尔类型
  对于布尔类型的属性，不要attr方法，应该用prop方法 prop用法跟attr方法一样。

七、表格全选案例

 $(function(){
        $("#j_cbAll").click(function(){
            $("#j_tb input").prop("checked",$(this).prop("checked"));
        })
        $("#j_tb input").click(function(){
            if($("#j_tb input:checked").length==$("#j_tb input").length){
                $("#j_cbAll").prop("checked",true);
            }else{
                $("#j_cbAll").prop("checked",false);
            }
        })
    })

八、三组基本动画

1、$("div").show(1000, function () {
        console.log("哈哈，动画执行完成啦"); })
2、$("div").hide();
3、$("div").show();

注意：hide和show可以传入参数
九、滑入滑出动画

slideDown();
slideUp();
slideToggle();
注意：可以传入参数

十、淡入淡出

fadeIn();
fadeOut();
fadeToggle();

十一、下拉菜单案例

$li.mouseenter(function () {
        //找到所有的儿子，并且还得是ul
        //stop：停止当前正在执行的动画
        $(this).children("ul").stop().slideDown();
      });
$li.mouseleave(function () {
        $(this).children("ul").stop().slideUp();
      });
stop（）：停止动画，注意加在animate之前

十二、京东轮播图

$(function () {
      var count = 0;
      $(".arrow-right").click(function () {
        count++;
        if(count == $(".slider li").length){
          count = 0;
        }
        $(".slider ul li").eq(count).fadeIn().siblings("li").fadeOut();
      })
      $(".arrow-left").click(function(){
        count--;
        if(count == -1){
          count = $(".slider li").length - 1;
        }
        $(".slider ul li").eq(count).fadeIn().siblings("li").fadeOut();
      })
    })

十三、自定义动画

 $("#box3").animate({left:800}, 8000, "linear", function () {
      });

十四、手风琴案例

$(function(){
    var $li=$("#box ul li");
    for(var i=0;i<$li.length;i++){
      $("#box ul li").eq(i).css("backgroundImage","url('images/"+(i+1)+".jpg')");
    }
    $li.mouseenter(function(){
      $(this).stop().animate({width:800}).siblings().animate({width:100})
    }).mouseleave(function(){
      $li.stop().animate({width:240});
    })
  })

十五、动画队列

 $(function () {
    $("#btn").click(function () {
      //把这些动画存储到一个动画队列里面
      $("div").animate({left:800})
        .animate({top:400})
        .animate({width:300,height:300})
        .animate({top:0})
        .animate({left:0})
        .animate({width:100,height:100})
    })
  });

十六、停止动画

$(function () {
    $("input").eq(0).click(function () {
      $("div").slideDown(4000).slideUp(4000);
    });
       
    $("input").eq(1).click(function () {
      //stop:停止当前正在执行的动画。注意是当前正在执行的动画。
      //clearQueue:是否清除动画队列 true  false
      //jumpToEnd:是否跳转到当前动画的最终效果 true false
     
      //.stop().animate();
      $("div").stop(true, true);
    })
  });

十七、动态创建节点

$(function () {
   var box = document.getElementById("box");
   var a = document.createElement("a");
   box.appendChild(a);
   a.setAttribute("href", "http://web.itcast.cn");
   a.setAttribute("target", "_blank");
   a.innerHTML = "传智大前端";
    
    $("#box").append('<a href="http://web.itcast.cn" target="_blank">传智大前端</a>');
    //qppend:创建节点
  });

十八、jQuery创建、添加节点

添加到子元素的最后面
     $("div").append($("p"));
    $("p").appendTo($("div"));//用这个更方便，更多
     添加到子元素的最前面
    $("div").prepend($("p"));
    $("p").prependTo($("div"));//用这个更方便
    
    $('div').after($("p"));
    $('div').before($("p"));

十九、微博发布案例

  $(function () {
    $("#btn").click(function () {    
      if($("#txt").val().trim().length == 0) {
        return;
      }
      //就是文本框的值
      $("<li></li>").text($("#txt").val()).prependTo("#ul");
  
      $("#txt").val("");
    })
    
  });

二十、清空节点

$("div").html("");会导致内存泄漏
$("div").empty();会把孩子删除，自己留住
$("div").remove();把所有东西全杀了
$(".des").clone(true).appendTo("div");
注意：false:不传参数也是深度复制,不会复制事件（默认）
    true:也是深复制，会复制事件

二十一、弹幕案例

  $(function () {
    //注册事件
    var colors = ["red", "green", "hotpink", "pink", "cyan", "yellowgreen", "purple", "deepskyblue"];
    $("#btn").click(function () {
      console.log(Math.random() * colors.length);
      var randomColor = parseInt(Math.random() * colors.length);
      var randomY = parseInt(Math.random() * 400);
      
      $("<span></span>")//创建span
        .text($("#text").val())//设置内容
        .css("color", colors[randomColor])//设置字体颜色
        .css("left", "2000px")//设置left值
        .css("top", randomY)//设置top值
        .animate({left: -500}, 10000, "linear", function () {
          //到了终点，需要删除
          $(this).remove();
        })//添加动画
        .appendTo("#boxDom");
      
      $("#text").val("");
    });
    
    $("#text").keyup(function (e) {
      if (e.keyCode == 13) {
        $("#btn").click();
      }
    });
    
  });
  // $("#txt").val()---获取文本框的值