JQUERY Unit02： jQuery事件处理、 jQuery动画

最新推荐文章于 2021-08-07 15:55:37 发布

KopWelkin

最新推荐文章于 2021-08-07 15:55:37 发布

阅读量321

点赞数

分类专栏： Java

Java 专栏收录该内容

75 篇文章 0 订阅

订阅专栏

一.jQuery对象和DOM对象

1.通过$所获得的对象是jQuery对象

$(“p”)
$(img)
$(“
“)

2.调用修改方法返回的是jQuery对象

obj.width(218)
obj.html(“abc”)

3.调用读取方法

1)若方法返回元素,则是jQuery对象

obj.parent()
obj.next()

2)若方法返回文本,则是DOM对象

obj.html()
obj.attr(“src”)

二.jQuery事件

1.事件概述

1)什么是事件

和js一样

2)事件的分类

和js一样

2.事件定义

1)直接定义

和js一样

2)动态绑定(*)

页面加载: $(function(){})
$(“”).click(function(){})

3)取消事件

return false

js和jQuery中都采用这样的方式取消事件

3.事件对象

1)什么是事件对象

和js一样

2)如何获取事件对象

直接定义事件时

和js一样

动态绑定事件时

和js一样

获得的event是被jQuery封装后的event

4.事件机制

1)冒泡机制

和js一样

2)如何取消冒泡(*)

e.stopPropagation()

3)作用

和js一样

4)如何获取事件源(*)

e.target

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="../js/jquery-1.11.1.js"></script>
<script>
    $(function(){
        //1.读写节点的内容
        //1) html() == innerHTML
        console.log($("p:first").html());
        $("p:first").html("1.jQuery支持<u>读写</u>节点");
        //2) text() == innerText
        //2.读写节点的值
        //val() == value
        console.log($(":button:first").val());
        $(":button:first").val("BBB");
        //3.读写节点的属性
        //attr() == setAttribute()+getAttribute()
        console.log($("img:first").attr("src"));
        $("img:first").attr("src","../images/02.jpg");

        //根据层次查询节点
        var gz = $("#gz");
        console.log(gz.parent());
        console.log(gz.prev());
        console.log(gz.siblings());
        var ul = $("ul");
        console.log(ul.find("li[id]"));
    });
    function f1() {
        var li = $("<li>天津</li>");
        console.log(li);
        $("ul").append(li);
    }
    function f2() {
        var li = $("<li>澳门</li>");
        $("#gz").after(li);
    }
    function f3() {
        $("#gz").remove();
    }
</script>
</head>
<body>
    <p>1.jQuery支持<b>读写</b>节点</p>
    <p>2.jQuery支持<b>增删</b>节点</p>
    <p>3.jQuery支持<b>查询</b>节点</p>
    <p>
        <input type="button" value="AAA"/>
    </p>
    <p>
        <img src="../images/01.jpg"/>
    </p>
    <ul>
        <li>北京</li>
        <li>上海</li>
        <li id="gz">广州</li>
        <li>深圳</li>
        <li>杭州</li>
    </ul>
    <p>
        <input type="button" value="追加"
            onclick="f1();"/>
        <input type="button" value="插入"
            onclick="f2();"/>
        <input type="button" value="删除"
            onclick="f3();"/>
    </p>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
    .big {
        font-size: 30px;
    }
    .important {
        color: red;
    }
</style>
<script src="../js/jquery-1.11.1.js"></script>
<script>
    $(function(){
        $("p").addClass("big").addClass("important");
        $("p").removeClass("big").removeClass("important");
        console.log($("p").hasClass("big"));
    });
    function f1() {
        $("p").toggleClass("big");
    }
</script>
</head>
<body>
    <p>jQuery专门对象样式操作提供了支持</p>
    <input type="button" value="切换"
        onclick="f1();"/>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
    .big {
        width: 250px;
        height: 250px;
    }
</style>
<script src="../js/jquery-1.11.1.js"></script>
<script>
    //window.onload只能写一次,
    //若写了多次则后者覆盖前者.
    //$(function(){})可以写多次,
    //若写了多次则它们的逻辑会叠加.
    $(function(){
        //给按钮1绑定单击事件
        $(":button:first").click(function(e){
            console.log(1);
            console.log(e);
        });
        //给图片绑定悬停事件
        $("img").hover(
            function(){
                $(this).addClass("big");
                //width()
                //css()
                //addClass("big")
                //toggleClass("big")
            },//悬停时
            function(){
                $(this).removeClass("big");
            } //离开时
        );
        //给按钮2绑定单击事件
        $(":button:eq(1)").click(function(){
            //让图片在显示与隐藏之间切换
            $("img").toggle();
        });
    });
</script>
</head>
<body>
    <input type="button" value="按钮1"/>
    <p>
        <img src="../images/01.jpg" />
    </p>
    <input type="button" value="按钮2"/>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
    #gg {
        border: 1px solid red;
        height: 600px;
    }
    #gg input {
        float: right;
        margin: 5px;
    }
</style>
<script src="../js/jquery-1.11.1.js"></script>
<script>

    $(function(){
        //给按钮绑定单击事件
        $("#gg input").click(function(){
            //让广告区域向上收起
            $("#gg").slideUp(600);
        });
        //3秒之后
        setTimeout(function(){
            //自动点击一下按钮x
            $("#gg input").trigger("click");
        },3000);
    });

</script>
</head>
<body>
    <div id="gg">
        <input type="button" value="x"/>
    </div>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
    div {
        width: 200px;
        height: 200px;
        background-color: red;
    }
</style>
<script src="../js/jquery-1.11.1.js"></script>
<script>
    function f1() {
        $("div").show(3000);
    }
    function f2() {
        $("div").hide(3000);
    }
</script>
</head>
<body>
    <p>
        <input type="button" value="显示"
            onclick="f1();"/>
        <input type="button" value="隐藏"
            onclick="f2();"/>
    </p>
    <div></div>
</body>
</html>

购物车案例

<!DOCTYPE html>
<html>
  <head>
    <title>购物车</title>
    <meta charset="utf-8" />
    <style type="text/css">
      h1 {
        text-align:center;
      }
      table {
        margin:0 auto;
        width:60%;
        border:2px solid #aaa;
        border-collapse:collapse;
      }
      table th, table td {
        border:2px solid #aaa;
        padding:5px;
      }
      th {
        background-color:#eee;
      }
    </style>
    <script src="../js/jquery-1.11.1.js"></script>
    <script>
        function add_shoppingcart(btn) {
            //获取商品名
            //objs.eq(i) == $(objs[i])
            var name = 
                $(btn).parent().siblings().eq(0).html();
            //获取单价
            var price = 
                $(btn).parent().siblings().eq(1).html();
            //创建一个新的行
            var tr = $(
             '<tr>'+
            '<td>'+name+'</td>'+
            '<td>'+price+'</td>'+
            '<td align="center">'+
              '<input type="button" value="-"/>'+
              '<input type="text" size="3" readonly value="1"/>'+
              '<input type="button" value="+" onclick="increase(this);"/>'+
            '</td>'+
            '<td>'+price+'</td>'+
            '<td align="center"><input type="button" value="x"/></td>'+
          '</tr>');
            //追加到tbody下
            $("#goods").append(tr);
        }
        //加法
        function increase(btn) {
            //获取数量
            var amount = $(btn).prev().val();
            //数量+1再写入文本框
            $(btn).prev().val(++amount);
            //获取单价
            var price = 
                $(btn).parent().prev().html();
            //计算并写入金额
            $(btn).parent().next().html(amount*price);
        }
    </script>
  </head>
  <body>
    <h1>真划算</h1>
    <table>
      <tr>
        <th>商品</th>
        <th>单价(元)</th>
        <th>颜色</th>
        <th>库存</th>
        <th>好评率</th>
        <th>操作</th>
      </tr>   
      <tr>
        <td>罗技M185鼠标</td>
        <td>80</td>
        <td>黑色</td>
        <td>893</td>
        <td>98%</td>
        <td align="center">
          <input type="button" value="加入购物车" onclick="add_shoppingcart(this);"/>
        </td>
      </tr>
      <tr>
        <td>微软X470键盘</td>
        <td>150</td>
        <td>黑色</td>
        <td>9028</td>
        <td>96%</td>
        <td align="center">
          <input type="button" value="加入购物车" onclick="add_shoppingcart(this);"/>
        </td>
      </tr>
      <tr>
        <td>洛克iphone6手机壳</td>
        <td>60</td>
        <td>透明</td>
        <td>672</td>
        <td>99%</td>
        <td align="center">
          <input type="button" value="加入购物车" onclick="add_shoppingcart(this);"/>
        </td>
      </tr>
      <tr>
        <td>蓝牙耳机</td>
        <td>100</td>
        <td>蓝色</td>
        <td>8937</td>
        <td>95%</td>
        <td align="center">
          <input type="button" value="加入购物车" onclick="add_shoppingcart(this);"/>
        </td>
      </tr>
      <tr>
        <td>金士顿U盘</td>
        <td>70</td>
        <td>红色</td>
        <td>482</td>
        <td>100%</td>
        <td align="center">
          <input type="button" value="加入购物车" onclick="add_shoppingcart(this);"/>
        </td>
      </tr>
    </table>

    <h1>购物车</h1>
    <table>
      <thead>
        <tr>
          <th>商品</th>
          <th>单价(元)</th>
          <th>数量</th>
          <th>金额(元)</th>
          <th>删除</th>
        </tr>
      </thead>
      <tbody id="goods">

      </tbody>
      <tfoot>
        <tr>
          <td colspan="3" align="right">总计</td>
          <td id="total"></td>
          <td></td>
        </tr>
      </tfoot>
    </table>    
  </body>
</html>