前端开发 - JQuery

二十五、jquery的事件

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>jquery的事件</title>

</head>

<body>

    <!--        https://www.processon.com/view/link/5ad1c48de4b0b74a6dd65426

        js的事件流 的流程图  。。。

            事件监听器的方法

            事件捕获

            处于目标

            事件冒泡

        jquery的事件 不支持 事件捕获

    -->

    <div id="box">

        <button>按钮</button>

    </div>

</body>

    <script src="jquery-3.2.1.js"></script>

    <script type="text/javascript">

        $('button').click(function () {

            alert('button事件触发')

        });

        $('#box').click(function () {  //冒泡了 会触发box

            alert(222);

        })

    </script>

</html>

二十六、jquery事件对象和事件冒泡

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>jquery事件对象和事件冒泡</title>

    <style type="text/css">

        #box{width: 200px;height: 200px;background-color: gray;}

        p{width: 100px;height: 100px;background-color: red;}

    </style>

</head>

<body>

<div id="box">

    <p class="p1"></p>

    <a href="https://www.luffycity.com">路飞</a>

</div>

</body>

    <script src="jquery-3.2.1.js"></script>

    <script type="text/javascript">

        // 入口函数 事件属性

        $(function () {

            //事件对象

            $('.p1').click(function (ev) {

                console.log(ev.type);

                console.log(ev.target);

                console.log(ev.pageX);

                console.log(ev.pageY);

                alert('当前按钮触发了');

                //常用的事件 方法 1.阻止事件冒泡 2.阻止默认事件

                //1,阻止事件冒泡

                ev.stopPropagation()

                //2.组织默认事件   a href = ''  form submit

            });

            $('#box').click(function () {

                alert('box 事件触发了');

            });

            $('a').click(function (ev) {  //所有额的dom元素都能加 点击事件

                //组织a 标签的默认事件

                // ev.preventDefault();

                // alert('阻止了默认的');

                // ev.stopPropagation();

                // alert('阻止了冒泡');

                return false;  // 阻止了冒泡 和 默认  jquery 是没有捕获的 只有冒泡

            })

        })

        // https://www.processon.com/view/link/5ad1c48de4b0b74a6dd65426

    </script>

</html>

二十七、jquery事件绑定和移除

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>jquery事件绑定和移除</title>

    <style type="text/css">

        #box{width: 200px;height: 200px;background-color: red;}

    </style>

</head>

<body>

    <div id="box">

    </div>

    <button>按钮</button>

</body>

    <script src="jquery-3.2.1.js"></script>

    <script type="text/javascript">

        $(function () {

            //事件的绑定

            //给当前的dom元素添加绑定事件

            $('#box').click(function () {

            });

            //给当前的dom元素绑定事件  语法：jquery对象.bind('事件类型',fn)

            $('#box').bind('click mouseenter',function () {

                alert('事件被绑定了')

            });

            $('body').append('<div style="width: 200px;height: 200px;background-color: yellow;">哈哈</div>')

            function add() {

                console.log('click')

            }

            function add2() {

                console.log('mouseover');

            }

            //给jquery 添加不同的事件 不同的效果

            $('div').bind({

                'click':add,

                'mouseover':add2

            });

            //事件移除

            // 没有参数 表示移除所有事件

            setTimeout(function () {

                // $('#box').unbind();

                // $('#box').unbind('click');  //移除一个事件

            },3000);

            //添加的事件不能发生在未来 --》 动态生成的元素不能直接添加对象 里面的事件也不能发生了-->想让发生，事件代理

            // $('body').append('<div style="width: 200px;height: 200px;background-color: yellow;">哈哈</div>')

            //绑定自定义的事件

            $('button').bind('myclick',function (ev,a,b,c) {

                alert(11111);

                console.log(ev);

                alert(a);

                alert(b);

                alert(c);

            });

            //触发自定义的事件

            // $('button').trigger('myclick')

            $('button').trigger('myclick',[1,2,3])

        })

    </script>

</html>

二十八、事件代理

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>事件代理</title>

</head>

<body>

    <ul>

        <li class="luffy">路飞</li>

        <li>路飞</li>

        <li>路飞</li>

    </ul>

</body>

    <script src="jquery-3.2.1.js"></script>

    <script type="text/javascript">

        $(document).ready(function () {

            //先点击

            $('ul>li').bind('click',function () {

                console.log($(this))

            });

            $('ul>li').click(function () {

                console.log($(this))

            });

            //事件代理  自己完成不了当前的点击事件，交给父级元素做这件事件

            //父级.on('事件名字','点击当前的标签元素选择器',fn)

            $('ul').on('click','#name,.luffy',function () {  // 可绑定多个选择器

                console.log(this);

            });

            $('ul').append('<li id="name">哈哈</li>')  // 这时点击 不起作用 需要 代理

        })

    </script>

</html>

二十九、鼠标事件

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>鼠标事件</title>

    <style type="text/css">

        *{padding: 0;margin: 0;}

        #box{width: 200px; height: 200px;background-color: gray;}

        #child{width: 100px; height: 100px;background-color: yellow;}

    </style>

</head>

<body>

    <div id="box">

        <div id="child"></div>

        <input type="text" value="123">

        <br>

        <input type="password" >

    </div>

</body>

    <script src="jquery-3.2.1.js"></script>

    <script type="text/javascript">

        $(document).ready(function () {

            //点击事件

            //单击

            $('#box').click(function () {

                console.log('click');

            });

            //双击

            $('#box').dblclick(function () {

                console.log('dblclick');

            });

            //鼠标按下不松开

            $('#box').mousedown(function () {

                console.log('mousedown');

            });

            //鼠标松开

            $('#box').mouseup(function () {

                console.log('mouseup');

            });

            //被选元素和子元素被选中时会触发 移入移出

            $('#box').mouseover(function() {

                console.log('mouseover')

            });

            $('#box').mouseout(function() {

                console.log('mouseout')

            });

            //只有被选中元素移入时  才会触发

            $('#box').mouseenter(function() {

                console.log('mouseenter')

            });

            $('#box').mouseleave(function() {

                console.log('mouseleave')

            });

            $('#box').mousemove(function () {

                console.log('mousemove')

            });

            //获取焦点 失去焦点

            $('input[type=text]').focus(function () {

                console.log($(this).val());

            });

            $('input[type=text]').blur(function () {

                console.log($(this).val());

            });

            //键盘按下 弹起

            $('input[type=password]').keydown(function () {

                console.log($(this).val())

            });

            $('input[type=password]').keyup(function () {

                console.log($(this).val())

            });

        })

    </script>

</html>

三十、表单事件

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>表单事件</title>

    <style type="text/css">

        .show{

            color: red;

        }

    </style>

</head>

<body>

   <form action="https://www.luffycity.com">

        <select name="sweets" id="1" multiple=''>

            <option value="">巧克力</option>

            <option value="" selected=''>糖果</option>

            <option value="">焦糖</option>

            <option value="" selected=''>曲奇饼</option>

            <option value="">烧饼</option>

            <option value="">麦香饼</option>

            <option value="">曲奇饼2</option>

        </select>

        <input type="text" value="hello" id='target'>

        <input type="submit" value="Luffy"/>

        <input type="button" name="" id="2" value="按钮" />

    </form>

    <input id="other" type="text" value="Trigger the handler">

   <!--<textarea name="" id="other" cols="30" rows="10">Trigger the handler</textarea>-->

    <!--<div id="other">-->

       <!--Trigger the handler-->

    <!--</div>-->

    <div class="show"></div>

</body>

    <script src="jquery-3.2.1.js"></script>

    <script type="text/javascript">

        //change() 事件

        //此事件仅限于 input元素 textarea select

        $('select').change(function () {

            console.log($('select option:selected').text());

            $('.show').text($('select option:selected').text());

        });

        //select() 事件

        //仅限于用在 input type=text textarea

        $('#other').select(function () {

            // console.log($(this).text())

            console.log($(this).val())

        });

        //form

        $('form').submit(function (ev) {

           // alert(111);

            ev.preventDefault();  // 阻止默认行为 action 就被阻止了

            //form 表单和服务端有很大挂钩

            alert(11);

        })

    </script>

</html>

三十一、jquery的ajax

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Ajax</title>

</head>

<body>

    <button id="btn">演示</button>

    <div id="box">

    </div>

</body>

    <script src="jquery-3.2.1.js"></script>

    <script type="text/javascript">

        $(document).ready(function () {

            $('#btn').click(function () {

                $('#box').load('./test.html');

            });

            //get

            $.ajax({

                // url:'./data.json',

                url:'./test.html',

                type:'get',       // 默认是 get

                // dataType:'json',  // 如果不指定 默认自动识别文件类型

                // dataType:'text',

                success:function (data) {

                    console.log(data);

                },

                error:function () {

                }

            });

            //post 无法演示 学django 会学

            $.ajax({

                url:"/course",

                type:'post',

                data:{

                    username:'zhangsan',

                    password:'123'

                },

                sunccess:function (data) {

                    if(data.state === 'ok' && data.status === '200'){

                        //登录成功

                    }

                },

                error:function () {

                    console.log(err);

                }

            });

        })

        // 插件 == js

        // 组件 = js + css

    </script>

</html>

巴特西

前端开发 - JQuery - 下

二十五、jquery的事件

二十六、jquery事件对象和事件冒泡

二十七、jquery事件绑定和移除

二十八、事件代理

二十九、鼠标事件

三十、表单事件

三十一、jquery的ajax

最新文章

热门文章