jQuery学习笔记之三

来源：互联网发布：lua和php 编辑：程序博客网时间：2024/06/10 00:01

事件 event e1.html

事件绑定

bind(type,fn)
绑定方式的简写形式

click(function(){});

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Insert title here</title><script type = "text/javascript" src = "../js/jquery-1.7.min.js"></script><script type = "text/javascript">    $(function(){    //正式形式       $('#d1').bind('click',function(){            $(this).html('hello java');        });         //简写形式        /* $('#d1').click(function(){            $(this).html('hello java');        }); */    });</script></head><body style = "font-size:30px;">    <div id = "d1">hello jquery</div></body></html>

合成事件

hover(enter,leave);模拟鼠标悬停事件
toggle(fn1,fn2..);模拟鼠标连续点击事件

事件冒泡 e4.html

什么是事件冒泡？
子节点产生的事件，会以此向上抛出给相应的父节点。
如何取消冒泡

e.cancelBubble = true;

事件对象有何作用
取消冒泡

e.cancelBubble = true;

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Insert title here</title><script type = "text/javascript" src = "../js/jquery-1.7.min.js"></script><style type="text/css">    #d1{        width:200px;        height: 200px;        border:1px solid red;    }</style><script type="text/javascript">    function f1(e){        alert('点击了一个链接');        //取消冒泡        e.cancelBubble = true;    }    function f2(e){        //alert('点击了div');        //输出点击的x，y坐标        alert(e.clientX+','+e.clientY);    }</script></head><body style = "font-size: 30px;font-style: italic;">    <div id = "d1" onclick="f2(event);">        <a href = "javascript:;" onclick="f1(event);">点击</a>    </div></body></html>

获得光标点击的坐标

e.clientx e.clienty

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Insert title here</title><script type = "text/javascript" src = "../js/jquery-1.7.min.js"></script><style type="text/css">    #d1{        width:200px;        height: 200px;        border:1px solid red;    }</style><script type="text/javascript">    function f1(e){        alert('点击了一个链接');        //取消冒泡        e.cancelBubble = true;    }    function f2(e){        //alert('点击了div');        //输出点击的x，y坐标        alert(e.clientX+','+e.clientY);    }</script></head><body style = "font-size: 30px;font-style: italic;">    <div id = "d1" onclick="f2(event);">        <a href = "javascript:;" onclick="f1(event);">点击</a>    </div></body></html>

找到事件源 e5.html

e.srcElement;e.target;

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Insert title here</title><script type="text/javascript">    function f1(e){        //依据事件对象找到事件源        //ie浏览器 srcElement        var obj = e.target ||  e.srcElement;        alert(obj.innerHTML);    }</script></head><body style = "font-size:30px;font-style: italic;">    <a href ="javascript:;" onclick="f1(event);">click1</a><br/>    <a href ="javascript:;" onclick ="f1(event);">click2</a><br/></body></html>

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Insert title here</title><script type = "text/javascript" src = "../js/jquery-1.7.min.js"></script><script type="text/javascript">    $(function(){        $('a').click(function(e){            //依据事件对象获得事件源            //var obj = e.target;//e是jQuery对象(封装了底层的事件对象)            //target返回的是一个dom对象            //alert(obj.innerHTML);            //通过事件对象获得光标点击的x，y坐标            //alert(e.pageX+','+e.pageY);            alert(e.type); //输出click        });    });</script></head><body style ="font-size:30px;">    <a href = "javascript:;">click1</a><br/>    <a href = "javascript:;">click2</a><br/></body></html>

获得事件对象

click(function(e)){        //e:对底层的事件对象做了一个封装        }

停止冒泡

event.stopPropagation()

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Insert title here</title><script type = "text/javascript" src = "../js/jquery-1.7.min.js"></script><style type="text/css">    #d1{        width:200px;        height: 200px;        border:1px solid red;    }</style><script type="text/javascript">    $(function(){        $('a').click(function(e){            alert('你点击的是一个链接');            //停止冒泡            e.stopPropagation();        });        $('div').click(function(e){            alert('你点击的是一个div');        });    });</script></head><body style = "font-szie:30px;font-style:italic;">    <div id = "d1">        <a href="javascript:;">click</a><br/>    </div></body></html>

停止默认行为 e8.html

event.preventDefault()<a href = "del.do"  onclick = "return false;">

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Insert title here</title><script type = "text/javascript" src = "../js/jquery-1.7.min.js"></script><script type="text/javascript">    $(function(){        $('a').click(function(e){            var flag = confirm('确定删除吗？');            if(!flag){                //阻止浏览器的默认行为，即不再向链接地址发请求                e.preventDefault();            }        });    });</script></head><body style = "font-size:30px;">    <a href="del.do">删除</a></body></html>

事件对象的属性

event.type:获得事件的类型event.target:返回事件源(是dom对象)event.pageX/pageY

模拟操作 e9.html

trigger('click')

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Insert title here</title><script type = "text/javascript" src = "../js/jquery-1.7.min.js"></script><script type="text/javascript">    $(function(){        $('#d1').click(function(){            //模拟用户点击了username文本输入框，即让username文本输入框产生焦点获得事件            //$('#username').trigger('focus');            //简写形式            $('#username').focus();        });    });</script></head><body style ="font-size:30px;">    username:<input name = "username" id = "username"/><br/>    name:<input name = "name"/><br/>    <input type="button" value = "click" id ="d1"/></body></html>

动画

show(“slow”/”normal”/”fast”/100) hide()

作用：通过同时改变元素的宽度和高度来实现显示或隐藏
用法：show(speed,[回调函数]);
回调函数：整个动画执行完毕之后，会执行该函数
速度：’slow’ ‘fast’ ‘normal’ 或者毫秒数

fadeIn()fadeOut():改变不透明度淡入淡出

作用：通过元素的不透明度来实现显示或隐藏
用法同上

css:opacity 0~1

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Insert title here</title><script type = "text/javascript" src = "../js/jquery-1.7.min.js"></script><style type="text/css">    #d1{        display:none;        width:300px;        height: 150px;        background-color: #fff8dc;        border: 1px dotted red;    }</style><script type="text/javascript">    $(function(){        $('a').toggle(function(){            //第一次点击            /* $('#d1').show('slow',function(){                alert('gogogo');            }); */            $('#d1').slideDown(800);        },function(){            //第二次点击            //$('#d1').hide('slow');            $('#d1').slideUp(800);        });    });</script></head><body style ="font-size:30px;font-style:italic;">    <a href="javascript;">显示所有票价</a>    <div id = "d1" style = "display: none;">    头等舱：￥2400<br/>    商务舱：￥2200<br/>    经济舱：￥1200<br/>    </div></body></html>

slideUp()slideDown():改变元素的高度 a1.html

作用：通过同时改变元素的高度来实现显示或隐藏

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Insert title here</title><script type = "text/javascript" src = "../js/jquery-1.7.min.js"></script><style type="text/css">    #d1{        width:100px;        height:100px;        background-color: green;        display: none;    }</style><script type="text/javascript">    $(function(){        $('#b1').toggle(function(){            //淡入            $('#d1').fadeIn('slow');        },function(){            //淡出            $('#d1').fadeOut('slow');        });    });</script></head><body style ="font-size:30px;">    <input type="button" value ="点击" id = "b1"/>    <div id = "d1"></div></body></html>

自定义动画 animate(params,speed,[callback]) a3.html

用法：params:是一个javascript对象，描述动画执行结束之后元素的样式

{'height':'200px','':''}      speed:速度，单位是毫秒，      position absolute:相对于副位置偏移               relative：相对于默认位置偏移

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Insert title here</title><script type = "text/javascript" src = "../js/jquery-1.7.min.js"></script><style type="text/css">    #d1{        width:100px;        height: 100px;        background-color: red;        display:none;        position: absolute;        left: 20px;    }</style><script type="text/javascript">    $(function(){        $('#d1').click(function(){            //动画队列            $(this).animate({'left':'500px'},500);            $(this).animate({'top':'300px'},500).fadeOut('slow');        });    });</script></head><body style = "font-size: 30px;">    <div id = "d1"></div></body></html>

阅读全文

0 0

jQuery学习笔记之三

事件 event e1.html

事件绑定

合成事件

事件冒泡 e4.html

找到事件源 e5.html

动画

show(“slow”/”normal”/”fast”/100) hide()

fadeIn()fadeOut():改变不透明度 淡入 淡出

slideUp()slideDown():改变元素的高度 a1.html

自定义动画 animate(params,speed,[callback]) a3.html

fadeIn()fadeOut():改变不透明度淡入淡出