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

时间  2020-06-03 标签 jquery unit02 unit 02 jquery 事件 处理 jquery 动画

一.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="+" οnclick="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>
联系我们 沪ICP备2021010478号-7