java Web第一章学习内容（jquery bind，hover，toggle，toggleClass，addClass，removeClass，val，resize，节点插入操作）

学习内容：

1.绑定事件   .bind
2.移入移出事件     .hover
3.显示隐藏事件    .toggle
4.添加样式 .toggleClass();addClass()； 删除样式 .removeClass();
5.获取或则添加值       val
6.获取移动框的次数         .resize（）  
7.节点的插入操作  prependTo 等方法

一.绑定事件 bind

bind("click",function())
通过$定位后使用.bing绑定事件，后面是方法

参考代码：

$(document).ready(function () {
    $("#nav li:first").bind("click",function () {
        $(".taskContent").css({"background-color":"#26a6e3"});
        $("#dayTask").show();
        $("#growTask").hide();
    })
    $("#nav li:last").bind("click",function () {
        $(".taskContent").css({"background-color":"#ff9400"});
        $("#dayTask").hide();
        $("#growTask").show();
    })
})

二.hover()方法  等同于鼠标移入和移出的方法使用.hover等同于.mouseover .mouseout参考代码：

$(document).ready(function () {
   $(".nav-box>ul li").hover(function () {
      $(this).find("div").show();
              $(this).toggleClass("sss");
          },function () {
              $(this).find("div").hide();
              $(this).removeClass("sss");
          });
      });

三.toggle()方法 等同于隐藏或则显示元素的方法

使用 .toggle()等同于.hide();.show();

参考代码：

$(document).ready(function () {
    $("input").click(function () {
        $("p").toggle().toggleClass("gettogoyangshi");
    });
});

四.toggleClass();addClass("")添加样式   .removeClass();删除样式

使用.toggleClass("");可以添加自己style样式名里面的样式，也可以.addClass("");
使用.removeClass("");可以删除自己style样式名里面的样式

参考代码：

<style>
 .sss{
    background-color: orange;
 }
</style>

$(document).ready(function () {
   $(".nav-box>ul li").hover(function () {
      $(this).find("div").show();
              $(this).toggleClass("sss");
          },function () {
              $(this).find("div").hide();
              $(this).removeClass("sss");
          });
      });

五. val 获取或则添加值

一种用于是不写东西获取相应的值，另外一种的用途是赋值

1.val.();

2.val.("输入的东西")

参考代码：

$(document).ready(function () {
    $("#tv_btn").click(function () {
        var str = $("input[type='text']").val();

        if(str==""||str==null){
            alert("输入的不能为空")
            str = $("input[type='text']").val("给我输入东西知道吗？");
        }else{
            alert($("input[type='text']").val())
        }
    })
})

六.    .resize（）获取移动框的次数

参考代码：

var num=0;
$(document).ready(function () {
    $("#lianxi a").mouseover(function () {
        $(this).css({"color":"red"});
    }).mouseout(function () {
        $(this).css({"color":"black"});
    })
    $(window).resize(function () {
        $("span").text(num++);
    })
})

七.节点插入的操作

以下代码通过"#tv_but"定位相应位置，使用标签赋值给typeli，再通过转换的形式赋值给str,通过prependTo进行位置的插入

注：以下prependTO输入插入的一种方法，还有其他方法可以查看
http://www.w3school.com.cn/jquery/jquery_ref_manipulation.asp

参考代码：

<script>
    $("#tv_but").click(function () {
        var typeli="<li>新增加的</li>";
        var str = $(typeli);
        $(str).prependTo("ul");
    });