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

来源：互联网发布：wifi的mac地址查询编辑：程序博客网时间：2024/05/06 02:11

一.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>

阅读全文

0 0

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

一.jQuery对象和DOM对象

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

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

3.调用读取方法

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

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

二.jQuery事件

1.事件概述

1)什么是事件

2)事件的分类

2.事件定义

1)直接定义

2)动态绑定(*)

3)取消事件

3.事件对象

1)什么是事件对象

2)如何获取事件对象

直接定义事件时

动态绑定事件时

4.事件机制

1)冒泡机制

2)如何取消冒泡(*)

3)作用

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

购物车案例

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