佐珥玎

佐珥玎 查看完整档案

北京编辑  |  填写毕业院校  |  填写所在公司/组织 zuoerding.com 编辑
编辑
_ | |__ _ _ __ _ | '_ \| | | |/ _` | | |_) | |_| | (_| | |_.__/ \__,_|\__, | |___/ 该用户太懒什么也没留下

个人动态

佐珥玎 发布了文章 · 2018-09-14

【Ajax】之jQuery中的Ajax

Ajax

1.jQuery中的Ajax

load()方法
异步请求的地址
异步请求的数据
异步请求成功后的回调函数
返回值服务器端的响应结果

<body>
<button>按钮</button>
<script data-original="js/jquery.js"></script>
<script>
    $('button').click(function(){

        $('button').load('data/server2.json', {name:'犬夜叉'}, function(){
            console.log('异步请求成功...');
        });
    });

</script>
</body>

$.get()与$.post()方法

$.get(url, data, callback, type)方法-请求方式GET
$.post()方法-请求方式POST
异步请求的地址
异步请求的数据
异步请求成功后的回调函数
设置服务器端响应结果的格式

<body>
<button>按钮</button>
<script data-original="js/jquery.js"></script>
<script>
    $('button').click(function(){

        $.get('data/server2.json', {name:'犬夜叉'}, function(response){
            console.log(response);
        }, 'json');

    });
</script>
</body>

ajax()方法

url;异步请求的地址
settings-对象类型
data - 发送给服务器端的请求数据
dataType-服务器端响应结果的格式
success-异步请求成功后回调函数

<body>
<button>按钮</button>
<script data-original="js/jquery.js"></script>
<script>
    $('button').click(function(){
        
        $.ajax('data/server2.json', {
            type : 'get',
            dataType : 'text',
            success : function(data){
                console.log(data);
            }
        });
    });
</script>
</body>

$.getScript方法

url;JavaScript文件url地址
callback;该文件成功加载后回调函数
`<body>
<button>按钮</button>
<script data-original="js/jquery.js"></script>
<script>

$('button').click(function () {
    // 动态加载指定JavaScript文件,并且执行
    $.getScript('data/server.js',function (data) {
        console.log(data);
        eval(data);
    });
});

</script>
</body>`

$.getJSON()方法

url;JavaScript文件url地址
data;发送个服务端key/value的数据内容
callback;该文件成功加载后回调函数

<body>
<button>按钮</button>
<script data-original="js/jquery.js"></script>
<script>
    $('button').click(function(){
        // getJSON()方法的请求方式为GET
        $.getJSON('data/server2.json', {name:'张无忌'},function(data){
            console.log(data);
        });
    });
</script>
</body>

2.异步提交表单

获取所有表单组件的数据值
并该数据值拼成指定的字符串和JSON格式的数据
并通过异步交互的方式提交表单

表单序列化

serialize()方法把表单组件数据值转换为字符串内容
serializeArray()方法把表单组件数据值转换为JSON的数据格式

<body>
<form action="#">
    <input type="text" name="username" is="name">
    <input type="text" name="password" is="pwd">
    <input type="submit">
</form>
<script data-original="js/jquery.js"></script>
<script>
    $('form').bind('submit',function (event) {
        event.preventDefault();
//         阻止默认行为
        /*var data = $('form').serialize();*/
        var data = $('form').serializeArray();
//        根据表单默认同步提交获取数据方式
        console.log(data);
        $.post('data/server5.json',daa, function (response) {
//            通过异步交互提交表单
            console.log(response);
        });
    });
</script>
</body>
查看原文

赞 0 收藏 0 评论 0

佐珥玎 发布了文章 · 2018-09-13

【 Ajax 】之异步交互

Ajax

1.同步交互与异步交互

同步交互;就是发送个请求到服务器端,等待返回,然后再发送下个请求
异步交互;就是发送个请求到服务器端,无需等待返回,直接发送下个请求,不过呢,可能会等待上个请求

2.Ajax是什么

关于HTML页面中能够快速加载到界面病展示个用户,不需要再次加载页面
实现Ajax步骤

<body>
<button id="qyc">按钮</button>
<script data-original="js/createXMLHttpRequest.js"></script>
<script>
    var qyc = document.getElementById('qyc');
    qyc.addEventListener('click',function () {
        var xhr = createXMLHttpRequest();
        xhr.open('get','http://localhost:63342/code/02_%E6%B5%8B%E8%AF%95XMLHTTPRequest%E5%AF%B9%E8%B1%A1.html');
        xhr.send(null);

        xhr.onreadystatechange = function () {
            if(xhr.readyState === 4){
               console.log(xhr.responseText);

            }
        }
    });
</script>
</body>

3.实现Ajax异步交互

创建XMLHttpRequest对象
调用XMLHttpRequest对象open()方法
调用XMLHttpRequest对象send()方法
利用XMLHttpRequest对象onreadystatechange事件

readySate属性

<body>
<button id="qyc">按钮</button>
<script data-original="js/createXMLHttpRequest.js"></script>
<script>
    var qyc = document.getElementById('qyc');
    qyc.addEventListener('click',function (){
        var xhr = createXMLHttpRequest();
//        创建XMLHttpRequest对象
        xhr.onreadystatechange = function () {
            if (xhr.readyState === 4){
               console.log(xhr.status);
               if (xhr.status === 200){
                   console.log(responseText);
               }
            }
        }
        xhr.open('get','http://localhost:63342/code/%E6%B5%8B%E8%AF%95XMLHTTPRequest%E5%AF%B9%E8%B1%A1.html');
        xhr.send(null);
    })
</script>
</body>

4.GET与POST请求方式

GET;创建的请求数据增加到open()方法的url地址中
将发送请求数据的send()方法参数为null值
POST;需要通过XMLHttpRequest对象的setRequestHeader()方法设置请求信息
通过XMLHttpRequest对象的send()发送请求数据

<body>

<form action="#" enctype="application/x-www-form-urlencoded">
    <input type="text" id="user" name="user">
    <input type="text" id="pwd" name="pwd">
    <input type="submit">
</form>
<button id="qyc">按钮</button>
<script data-original="js/createXMLHttpRequest.js"></script>
<script>
    var qyc = document.getElementById('qyc');

    qyc.addEventListener('click',function () {
        var xhr = createXMLHttpRequest();
        // 创建XMLHttpRequest对象
        xhr.onreadystatechange = function () {// 监听服务器端的通信状态
            if(xhr.readyState === 4){
                console.log(xhr.status);
                if (xhr.status === 200){
                    console.log(xhr.responseText);
                }
            }
        }
        xhr.open('post','http://localhost:63342/code/02_%E6%B5%8B%E8%AF%95XMLHTTPRequest%E5%AF%B9%E8%B1%A1.html?user=zhangwuji&pwd=123456');
        xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
        // 设置请求头部信息
        xhr.send('user=zhangwuji&pwd=123456');
    });
</script>
</body>

JSON数据格式

1.JavaScript中的JSON

<body>
<script>
    var jsonString = '{"name" : "犬夜叉"}';
//    JSON字符串-该格式符合JSON格式要求,类型就是字符串的类型
    var jsonObject = {
        name : '犬夜叉'
    }
    var jsonArr = [1,2,3,4];
//    JSON对象-该JSON模式在JavaScript中具体表现只有对象与数组
</script>
</body>

2.JSON字符串与JSON对象

    <script data-original="js/json2.js"></script>
</head>
<body>
<script>
    var jsonString = '{"name" : "犬夜叉"}';
    var jsonObject = JSON.parse(jsonString);
    console.log(jsonObject);
    var jsonResult = JSON.stringify(jsonObject);
    console.log(jsonResult);
//    JSON字符串
</script>
</body>

Ajax中的JSON

<body>
<button id="qyc">提交</button>
<script data-original="js/createXMLHttpRequest.js"></script>
<script>
    var qyc = document.getElementById('qyc');
    qyc.addEventListener('click',function(){
        var xhr = createXMLHttpRequest();
        xhr.onreadystatechange = function(){
            if (xhr.readyState === 4 && xhr.status === 200) {
                // 接收数据 - JSON数据格式,是字符串类型
                var data = xhr.responseText;
                // 将符合JSON格式的字符串类型数据进行转换
                var json = JSON.parse(data);
                // 进行具体处理
                console.log(json);
            }
        }

        // 请求数据格式 - user=zhangwuji&pwd=12345
        xhr.open('post','server.json');

        xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');

        var obj = {
            name : '犬夜叉',
            age : 16
        }
        // 将JSON字符串转换成符合请求数据的格式
        xhr.send('name=' + obj.name + '&age=' + obj.age);
    });

</script>
</body>

Ajax中的XML

<body>
<button id="qyc">按钮</button>
<script data-original="js/createXMLHttpRequest.js"></script>
<script>
    var qyc = document.getElementById('qyc');
    qyc.addEventListener('click',function () {
        var xhr = createXMLHttpRequest();
        xhr.onreadystatechange = function () {
            if (xhr.readyState === 4 && xhr.status === 200){
                var data = xhr.responseXML;
                //接收数据-responseXML属性-接收XML数据格式
                var nameElement = data.getElementsByTagName('name')[0];
                // 利用DOM解析XML
                console.log(nameElement.textContent);
            }
            xhr.open('post','server.xml');
            xhr.snd(null);
        }
    });
</script>
</body>
查看原文

赞 3 收藏 3 评论 0

佐珥玎 发布了文章 · 2018-09-11

【jQuery】之工具与插件的运用

jQuery

工具方法

1.类数组操作

<script data-original="js/jquery.js"></script>
</head>
<body>
<div id="q1"></div>
<div></div>
<div></div>
<div></div>
<div></div>
<script>
   console.log('div'.length);//5
    //   length属性-获取jQuery对象包裹DOM的个数
   for(var i=0; i<$('div').length;i++)  {
       var div = $('div')[i];
   }// jQuery对象[索引值]-转换DOM对象
   console.log($('div').get(0));
    //  get(index)方法


   console.log($('div').index(document.getElementById('q1')));
   console.log($('div').index($('#q1')));
   console.log($('div').index('#q1'));

   console.log($.inArray(document.getElementById('q1'),$('div')));
   var arr = [1,2,3,4,5];
   console.log($.inArray(3,arr));
   console.log($.inArray(document.getElementById('q1'),document.getElementsByName('div')));
   console.log($.inArray(8, arr));


   console.log($('div').toArray());
   console.log($.makeArray($('div')));
   console.log($.makeArray(document.getElementsByTagName('div')));

    /*
    * $().toArray()方法
      将jQuery对象转换为数组
      $.makeArray(obj)方法
      将类数组转换为数组
      参数obj-表示类数组对象
     */
</script>
</body>

遍历类数组

主要以$()each()方法 通过两种形式表现
callback:匹配元素要执行的函数 obj;需要遍历对象和数组 callback:匹配元素要执行的函数

<script data-original="js/jquery.js"></script>
</head>
<body>
<div id="q1"></div>
<div id="q2"></div>
<div id="q3"></div>
<div id="q4"></div>
<div id="q5"></div>
<script>
    var $divs = $('div');
    $divs.each(function (index, domEle) {
        console.log(index, domEle);
    });
    /*$().each(callback)方法
    * 遍历jQuery对象
    * */

    $.each(document.getElementsByTagName('div'),function (index, domEle) {
        console.log(index, domEle);
    });
</script>
</body>

字符串操作

以$.TRIM()方法用于去掉字符串开始和结束的空格

<script data-original="js/jquery.js"></script>
</head>
<body>
<script>
    console.log($.trim('my, you love'));
    // $.trim()方法-用来去掉字符串中开始和结束的空格
</script>
</body>

2.插件使用

1.lazyoad懒加载插件

用于加载HTML页面中延迟图片,在浏览器窗口之外的图片不会加载,只有用户操作滚动才会被加载 提高HTML页面加载速度,和减少服务器超负荷

<script data-original="js/jquery.js"></script>
    <script data-original="lazyload/jquery.lazyload.js"></script>
</head>
<body>
<!--
class属性-类选择器(为CSS样式)
class=lazyload-方便JavaScript逻辑定位页面元素
data-original属性-设置图片显示的真是路径
lazyload插件自定义属性替换src属性
-->
<img class="lazyload" data-original="./imgs/a.jpg" height="300px" width="500px"/>
<img class="lazyload" data-original="./imgs/b.jpg" height="300px" width="500px"/>
<img class="lazyload" data-original="./imgs/c.jpg" height="300px" width="500px"/>
<img class="lazyload" data-original="./imgs/e.jpg" height="300px" width="500px"/>
<img class="lazyload" data-original="./imgs/f.jpg" height="300px" width="500px"/>
<img class="lazyload" data-original="./imgs/g.jpg" height="300px" width="500px"/>
<img class="lazyload" data-original="./imgs/h.jpg" height="300px" width="500px"/>
<img class="lazyload" data-original="./imgs/i.jpg" height="300px" width="500px"/>
<img class="lazyload" data-original="./imgs/j.jpg" height="300px" width="500px"/>
<img class="lazyload" data-original="./imgs/k.jpg" height="300px" width="500px"/>
<img class="lazyload" data-original="./imgs/l.jpg" height="300px" width="500px"/>
<img class="lazyload" data-original="./imgs/m.jpg" height="300px" width="500px"/>
<img class="lazyload" data-original="./imgs/n.jpg" height="300px" width="500px"/>
<img class="lazyload" data-original="./imgs/o.jpg" height="300px" width="500px"/>
<img class="lazyload" data-original="./imgs/p.jpg" height="300px" width="500px"/>
<img class="lazyload" data-original="./imgs/q.jpg" height="300px" width="500px"/>
<script>
    $('img').lazyload();
//   实现页面中图片的延迟加载
</script>
</body>

2.masonry瀑布流插件

以多栏布局,大小不一按照一定规格排列,给于用户视觉的表现

<script data-original="js/jquery.js"></script>
    <script data-original="masonry/masonry.pkgd.js"></script>
    <style>
        .qh {
           width: 80%;
           margin: 0 auto;
           overflow: hidden;
        }
        .cq {
           display: block;
           float: left;
           width: 30%;
           margin: 7px;

        }
    </style>
</head>
<body>
<div class="qh">
    <img class="cq" data-original="imgs/a.jpg">
    <img class="cq" data-original="imgs/b.jpg">
    <img class="cq" data-original="imgs/c.jpg">
    <img class="cq" data-original="imgs/d.jpeg">
    <img class="cq" data-original="imgs/e.jpg">
    <img class="cq" data-original="imgs/f.jpg">
    <img class="cq" data-original="imgs/g.jpg">
    <img class="cq" data-original="imgs/h.jpg">
    <img class="cq" data-original="imgs/i.jpg">
    <img class="cq" data-original="imgs/j.jpg">
    <img class="cq" data-original="imgs/k.jpg">
    <img class="cq" data-original="imgs/l.jpg">
    <img class="cq" data-original="imgs/m.jpg">
    <img class="cq" data-original="imgs/n.jpg">
    <img class="cq" data-original="imgs/o.jpg">
    <img class="cq" data-original="imgs/p.jpg">
    <img class="cq" data-original="imgs/q.jpg">
</div>
<script>
    $('.qh').masonry({
       itemSelector:'.cq'
    });
</script>
</body>

3.swiper轮班图插件

依赖jQuery也可以不依赖jQuery 并实现水平滑动的效果

<link rel="stylesheet" href="swiper/swiper.css">
    <style>
        body {
            margin: 0;
        }
        .swiper-container {
            width: 80%;
            height: 400px;
            margin: 100px auto;
        }
        .swiper-slide {
            font-size: 48px;
            line-height: 400px;
            text-align: center;
            color: white;
        }
        .red-swiper {
            background-color: lightcoral;
        }
        .blue-swiper {
            background-color: lightskyblue;
        }
        .green-swiper {
            background-color: darkcyan;
        }

    </style>
</head>
<body>
<!-- 可视窗口容器 -->
<div class="swiper-container">
    <!-- 所有图片的容器 -->
    <div class="swiper-wrapper">
        <div class="swiper-slide red-swiper">Slide 1</div>
        <div class="swiper-slide blue-swiper">Slide 2</div>
        <div class="swiper-slide green-swiper">Slide 3</div>
    </div>
</div>
<script data-original="javascript/jquery.js"></script>
<script data-original="swiper/swiper.js"></script>
<script>
    var swiper = new Swiper('.swiper-container', {
        autoplay: true
    });

</script>
查看原文

赞 0 收藏 0 评论 0

佐珥玎 发布了文章 · 2018-09-09

【jQuery】之动画

jQuery

1.预定义动画

显示与隐藏

show()表示显示
hide()表示隐藏
speed中以(slow,normal,fast)表示动画时长

<script data-original="js/jquery.js"></script>
    <style>
        #qyc {
            width: 200px;
            height: 200px;
            background-color: blue;
        }
    </style>
</head>
<body>
<div id="qyc"></div>
<script>
    $('#qyc').hide(3000, function(){
        $('#qyc').show(3000);
    });
    /*
    * 显示与与隐藏
    * 无动画-改变宽度和高度
    * show()-显示
    * hide()-隐藏

    * 有动画
    * show(speed, callback)
     * speed-动画执行时长
     * callback-动画执行完毕后回调函数*/
</script>
</body>

滑动式动画

以slideUp和slideDown来更改属性的高度值来实现动画效果

<script data-original="js/jquery.js"></script>
    <style>
        #qyc {
            width: 200px;
            height: 200px;
            background-color: blue;
        }
    </style>
</head>
<body>
<div id="qyc"></div>
<script>
    /*
        滑动式动画-slideUp()和slideDown()
        * 注意-没有无动画版本
        * 效果-改变指定元素的高度
     */
    $('#qyc').slideUp(3000);
    $('#qyc').slideDown(3000);

</script>
</body>

淡入淡出效果

fadeln()方法和fadeOut来改变透明度来实现动画效果

<script data-original="js/jquery.js"></script>
<style>
    #qyc {
        width: 200px;
        height: 200px;
        background-color: blue;
    }
</style>
</head>
<body>
<div id="qyc"></div>
<script>
    $('#qyc').fadeOut(3000);
    $('#qyc').fadeIn(3000);
    // 改变元素的透明度
</script>
</body>

动画切换效果

<script data-original="js/jquery.js"></script>
    <style>
        #qh {
            width: 200px;
            height: 200px;
            background-color: blue;
        }
    </style>
</head>
<body>
<button id="qyc">按钮</button>
<div id="qh"></div>
<script>
    $('#qyc').click(function(){
        // $('#qyc').toggle(3000);
        // $('#qyc').slideToggle(3000);
        $('#qh').fadeToggle(3000);
    });
</script>
</body>

2.自定义动画

<style>
        #qyc {
            width: 200px;
            height: 200px;
            background-color: blue;
            position: absolute;
        }
    </style>

</head>
<body>
<div id="qyc"></div>
<script>
    /*
    * animate()方法-自定义动画方法
        1.animate(properties, duration, callback)
          * properties-表示CSS的样式属性
            * 设置动画执行结束的样式属性值
          * duration-表示动画执行的时长,单位为毫秒
          * callback-表示动画执行完毕后的回调函数
        2.animate(properties, options)
          * properties-表示CSS的样式属性
            * 设置动画执行结束的样式属性值
          * options-表示设置动画的相关参数
            * duration-表示动画执行的时长,单位为毫秒
            * complete-表示动画执行完毕后的回调函数
            * queue-布尔值,设置是否添加到动画队列中
    */
    /*$('#qyc').animate({
        width : 100,
        height : 100
    }, 3000);*/

    /*$('#qyc').animate({
        left : 100
    }, 3000);*/

    $('#qyc').animate({
        left : 100
    }, {
        speed : 3000
    });
</script>
</body>

并发与排队效果

指同时进行多个动画效果,并以先后顺序执行

<script data-original="js/jquery.js"></script>
    <style>
        #qyc {
            width: 200px;
            height: 200px;
            background-color: blue;
            position: absolute;
        }
    </style>
</head>
<body>
<div id="qyc"></div>
<script>
    /*$('#qyc').animate({
        left : 400,
        top : 400
    }, 3000);*/
    /*并发效果-就是指多个动画同时执行
     *多个CSS样式属性值同时改变-动画多个值综合效果
     */

    $('#qyc').animate({
        left : 400
    }, 3000, function(){
        $('#qyc').animate({
            top : 400
        }, 3000);
    });
    /*
      排队效果 - 就是指多个动画按照定义先后顺序执行
      多个CSS的样式属性值先后改变
     */
    $('#qyc').animate({
        left : 400
    }, {
        duration : 3000
    }).animate({
        top : 400
    }, {
        duration : 3000,
        queue : true
    });
</script>
</body>

停止动画效果

以stop()方法表示停止指定元素运行的动画 以gotoEnd表示动画立刻执行完成

<script data-original="js/jquery.js"></script>
    <style>
        #qyc {
            width: 200px;
            height: 200px;
            background-color: blue;
            position: absolute;
        }
    </style>
</head>
<body>
<button id="start">开始</button>
<button id="stop">停止</button>
<div id="qyc"></div>
<script>
    $('#start').click(function(){
        $('#qyc').animate({
            left : 800
        }, 3000).animate({
            top : 600
        }, 3000);
    });
    $('#stop').click(function(){
        /*
            * stop()方法没有接收任何参数时-停止执行动画
            * stop(queue)方法的第一个参数
              * false-停止当前动画,但队列中动画继续执行
              * true-停止当前动画,并且清空动画

         */
        $('#qyc').stop(true, false);
    });
</script>
</body>

延迟执行动画

以delay()方法设置延时一定时间,在执行动画效果

<script data-original="js/jquery.js"></script>
    <style>
        #qyc {
            width: 200px;
            height: 200px;
            background-color: blue;
            position: absolute;
        }
    </style>
</head>
<body>
<div id="qyc"></div>
<script>
    $('#qyc').animate({
        left: 800
    }, 5000).delay(1000).animate({
        top: 600
    }, 5000);

</script>
</body>
查看原文

赞 0 收藏 0 评论 0

佐珥玎 发布了文章 · 2018-09-09

【jQuery】之事件

jQuery

事件

1.页面加载

以DOM提供的load事件和jQuery中的ready()方法来加载页面

<script>
        window.onload = function () {
            var qyc = document.getElementById('qyc');
            console.log(qyc);
        }
//        window对象等于浏览器窗口
         /*load事件-当浏览器窗口加载完毕是被触发
         * 事件处理函数中代码逻辑,在浏览器加载中完毕后在执行*/
    </script>
</head>
<body>
<!-- HTML元素 -->
<button id="qyc">按钮</button>
</body>

2.事件绑定

事件绑定和解绑

单事件绑定: type:事件类型的字符串 data:作为event data属性值给事件对象的格外数据对象 callback:绑定每个元素的事件上面处理函数

<script data-original="js/jquery.js"></script>
</head>
<body>
<button id="qyc">按钮</button>
<script>
    /*bind(type, data, callback)方法 - 绑定事件*/
    /*function click1(){
        console.log('this is button.');
    }
    function click2(){
        console.log('this is button too.');
    }
    $('#btn').bind('click', click1);
    $('#btn').bind('click', click2);*/
    /*
        unbind(type, data, callback)方法 - 解绑定事件

     */
    // $('#btn').unbind('click', click1);

    /*
        bind()与unbind()中data参数
        * data参数的值-利用event事件对象data属性进行接收
        * 该参数的数据内容只能在事件的处理函数中被使用
      */
    // var obj = { a : '犬夜叉' };
    $('#btn').bind('click', { a : '犬夜叉' }, function(event){
        // var obj = { a : '犬夜叉' };
        console.log(event.data);
    });

</script>
</body>

多事件绑定和解绑

多事件绑定: type:事件类型的字符串一个或多个,有空格分隔多个事件 data:作为event data属性值给事件对象的格外数据对象 callback:绑定每个元素的事件上面处理函数

<script data-original="js/jquery.js"></script>
    <style>
        #qh {
            width: 100px;
            height: 20px;
            border: 1px solid black;
        }
        ul {
            list-style: none;
            padding: 0;

            display: none;
        }
        li {
            width: 100px;
            height: 20px;
            border: 1px solid black;
        }
    </style>
</head>
<body>
<div id="qh">游戏列表</div>
<ul>
    <li>端游</li>
    <li>手游</li>
    <li>页游</li>
</ul>
<script>
    /*$('#title').bind('mouseover', function(){
        $('ul').css('display','block');
    });
    $('#qh').bind('mouseover mouseout', function(){
        if ($('ul').is(':hidden')) {
            $('ul').css('display','block');
        } else {
            $('ul').css('display','none');
        }
    });
$('#title').bind('mouseout', function(){
        $('ul').css('display','none');
    });*/
    /* jQuery支持链式操作
   $('#title').bind('mouseover', function(){
       $('ul').css('display','block');
   }).bind('mouseout', function(){
       $('ul').css('display','none');
   });
   */


    $('#qh').bind('mouseover mouseout', function(){
        if ($('ul').is(':hidden')) {
            $('ul').css('display','block');
        } else {
            $('ul').css('display','none');
        }
    });
    // bind()方法-多事件绑定,事件名称之间使用空格分隔
    /*
        unbind()方法
        1.没有指定任何事件时-将指定元素的所有事件全部解绑定
        2.一个事件名称时-将该元素的指定当个事件解绑定
        3.多个事件名称时-将该元素的指定多个事件解绑定
     */
    $('#title').unbind('mouseover mouseout');
</script>
</body>

事件绑定方法对比

<script data-original="js/jquery.js"></script>
</head>
<body>
<script>
    /*
        jQuery中提供多组事件绑定与解绑定的方法
        * bind()与unbind()-jQuery 3.0版本后删除方法
        * on()与off()方法-jQuery 1.7版本后新增方法
          * 其实bind()与unbind()的底层方法就是on()和off()
        * live()与die()-jQuery 1.7版本后删除方法
          * 作用-实现事件委托
        * delegate()与undelegate() - jQuery 1.6版本后新增方法,jQuery 
       3.0版本后删除方法
          * 作用-实现事件委托
        * one()-为事件绑定一次性的函数
     */

</script>

3.事件切换

hover()方法:over:鼠标移动到元素上触发函数 out:鼠标移开元素触发函数

<script data-original="js/jquery.js"></script>
    <style>
        #qh {
            width: 100px;
            height: 20px;
            border: 1px solid black;
        }
        ul {
            list-style: none;
            padding: 0;

            display: none;
        }
        li {
            width: 100px;
            height: 20px;
            border: 1px solid black;
        }

    </style>
</head>
<body>
<div id="qh">游戏类型</div>
<ul>
    <li>端游</li>
    <li>手游</li>
    <li>页游</li>
</ul>
<script>
    /*
        鼠标悬停事件
        * mouseover-表示鼠标悬停在指定元素之上
        * mouseout-表示鼠标从指定元素上移开
     */
    $('#qh').bind('mouseover', function(){
        $('ul').css('display','block');
    });

    $('#qh').bind('mouseout', function(){
        $('ul').css('display','none');
    });

    // jQuery提供hover(over, out)方法
    $('#qh').hover(function(){
        $('ul').css('display','block');
    },function(){
        $('ul').css('display','none');
    });

</script>
</body>

4.事件模拟

以trigger()方法模拟触发元素绑定的事件

<script data-original="js/jquery.js"></script>
</head>
<body>
<button id="qyc">按钮</button>
<script>
    $('#qyc').bind('click',function() {
//    绑定事件-由用户行为进行触发,调用处理函数
        console.log('you my button');
    });
    $('#qyc').trigger('click');
//    模拟用户触发事件
</script>
</body>
查看原文

赞 0 收藏 0 评论 1

佐珥玎 发布了文章 · 2018-09-07

【jQuery】之DOM操作

jQuery

DOM操作

查找节点

查找元素节点

以选择器来查找元素节点

查找文本节点

以text()方法来查找文本节点

查找属性节点

以attr()方法来查找属性节点

<body>
<script data-original="js/jquery.js"></script>
<script></script>
</body>
<script is="qyc">  name="button"</script>
<script>
    var $qyc = $('#qyc');
    console.log('$qyc');
    console.log($qyc.text);
    console.log($qyc.attr('neme'));
    $qyc.text('新按钮')
    $qyc.attr('class','cls');

    /*
    * jQuery查找元素-
    * text()方法-等于DOM的textContent属性
    * 获取-text()
    * text(textContent)
    * textContent新的的文本内容
    *
    * attr()方法
    * 获取- attr(name,value)-等于DOM的setAttribute(mnm,valus)*/

</script>

获取父节点

selector:便是jQurery中的选择器 另外parent():获取父级元素 parents():获取祖先级元素 closest():匹配上级元素,并返回相同的元素

<body>
<div class="qh">
    <ul>
        <li id="dy">端游</li>
        <li>单机</li>
        <li>手游</li>
    </ul>
</div>
<script>
    var $dy = $('#dy');
    console.log($dy.psrent('div'));

    /*获取端游节点所有祖先节点
   * parent(expr)方法
   * 获取元素所有父元素
   * expr-表示选择器,并有过滤的作用
    */
    console.log($dy.psrent('div'));
    /*获取端游节点所有祖先节点
    * parents(expr)方法
    * 获取元素所有祖先元素
    * expr-表示选择器,并有过滤的作用
     */

    console.log($dy.chosect('div'));
    /*closest()方法
    * 获取元素指定祖先元素;返回第一个匹配元素
    * expr-表示为选择器,并有过滤的作用
    * 注意- jQuery用不报错,不会提供结果
     */

</script>
</body>

获取子节点

children()只获取子级元素(不获取后代元素)

<script data-original="js/jquery.js"></script>
</head>
<body>
<div class="qh">
    <ul id="dy">端游
        <li>联盟</li>
        <li>地下城</li>
        <li>火线</li>
    </ul>
    <ul>手游</ul>
    <ul>页游</ul>
</div>
<script>
    var $ul = $('ul:first');
    console.log($ul.children());
//    获取元素所有的子元素
    console.log($ul.find('li'));
//    获取元素的后代元素
</script>
</body>

获取兄弟节点

next():获取元素的下一个相邻兄弟元素 prev():获取元素的上一个相邻兄弟元素 siblings:获取元素所有兄弟元素

<body>
<div class="qh">
    <ul>
        <li id="dy">端游</li>
        <li>单机</li>
        <li>手游</li>
    </ul>
</div>
<script>
    var dy = document.getElementById('dy');
    var ul = dy.parentElement;
    var div = ul.parentElement;
    var body = div.parentElement;
    var html = body.parentElement;
    var root = html.parentElement;//null
    console.log(root);
    var arr = [];//用于存储元素的所有祖先元素
    function parents(element) {
        var parent = element.parentElement;
//        获取元素的父元素
        if(parent === null){ return; }
        arr.push(parent);
//        获取父元素,并增加到数组中
        parents(parent);
//        定义个递归函数
    }
    parents(dy);
    console.log(arr);
</script>
</body>

查找后代元素

以find:获取所有匹配其元素的选择器

<body>
<div class="qh">
    <ul id="qh">
        <li>端游</li>
        <li>单机</li>
        <li id="sy">手游</li>
        <li>掌机</li>
    </ul>
</div>
<script>
    var $sy = $('#sy');
    console.log($sy.next());//获取下个相邻兄弟元素
    console.log($sy.prev());//获取上个相邻兄弟元素
</script>
</body>

3.创建节点

工厂函数:以attr()该属性来建立属性节点

<script data-original="js/jquery.js"></script>
</head>
<body>
<ul id="qh">
    <li>端游</li>
    <li>单机</li>
    <li id="sy">手游</li>
    <li>掌机</li>
</ul>
<script>
    //    var $newli = $('<li></li>');
    //    $newli.text('掌机');
    //    $newLi.attr('id','zj');
    var $newli = $('<li id="q1">页游</li>');
    //    jQuery的工厂函数接收字符串类型HTML代码
    $('#qh').append($newli);
</script>
</body>

4.插入节点

插入内部节点

append()方法
表示插入到指定节点列表中的最后面
appendTo()方法
表示插入到指定节点列表中的最后面
prepend()方法
表示插入到指定节点列表中的最前面
prependTo()方法
表示插入到指定节点列表中的最前面
<body>

   <script data-original="js/jquery.js"></script>
</head>
<body>
<ul id="qh">
    <li>端游</li>
    <li>单机</li>
    <li id="sy">手游</li>
    <li>掌机</li>
</ul>
<script>
    //    var $newli = $('<li></li>');
    //    $newli.text('掌机');
    //    $newLi.attr('id','zj');
    var $newli = $('<li id="q1">页游</li>');
    //    jQuery的工厂函数接收字符串类型HTML代码
    $('#qh').append($newli);
</script>
</body>

插入外部节点

before()方法
表示插入到指定元素节点前一个位置
insertBefore()方法
表示插入到指定元素节点前一个位置
after()方法
表示插入到指定元素节点后一个位置
insertAfter()方法
表示插入到指定元素节点后一个位置

<script data-original="js/jquery.js"></script>
</head>
<body>
<ul>
    <li>端游</li>
    <li>单机</li>
    <li>手游</li>
</ul>
<script>
    var $li = $('<li id="q1">页游</li>');
    //    创建新li元素
    // $('ul').before($li);
    //    插入li元素的上方
    $('ul').after($li);
    //    插入li元素下方
</script>
</body>

5.删除节点

remove():用来删掉DOM所有的元素 empty():用来删除DOM的所有子节点

    <script data-original="js/jquery.js"></script>
</head>
<body>
<ul id="yx">
    <li id="lm">联盟</li>
    <li>火线</li>
    <li>地下城</li>
</ul>
<script>
//元素调用remove()该元素被删除
//    $('#lm').remove();
//    empty()表示删除后代节点;保留自身节点-清空
</script>
</body>

6.替换节点`

replaceWith()方法将所有匹配元素替换成HTML和DOM元素

   <script data-original="js/jquery.js"></script>
</head>
<body>
<ul id="yx">
    <li id="lm">联盟</li>
    <li>火线</li>
    <li>地下城</li>
</ul>
<script>
//    替换的元素调用replaceWith(),该方法接收参数是替换元素
//    $('#lm').replaceWith($('<li id="zj">战甲</li>'));
//    replaceAll()就是颠倒replaceWith()
    $('<li id="zj">战甲</li>').replaceAll(('#lm'));
</script>
</body>

7.复制节点

jQuery的clone方法 - 参数表示是否复制事件
DOM的cloneNode方法 - 参数表示是否复制后代节点

    <script data-original="js/jquery.js"></script>
</head>
<body>
<button id="qyc">按钮</button>
<script>
    $('#qyc').click(function () {
        console.log('you my button');
    });
    var $copy = $('#qyc').clone(true);
    $('body').append($copy);
    /*jQuery的clone方法 - 参数表示是否复制事件
      DOM的cloneNode方法 - 参数表示是否复制后代节点
     */
</script>
</body>

8.属性节点

    <script data-original="js/jquery.js"></script>
</head>
<body>
<ul id="yx">
    <li id="lm">联盟</li>
    <li>火线</li>
    <li>地下城</li>
</ul>
<script>
    $('#bj').removeAttr('id');
//    removeAttr()-相当于DOM中的removeAttribute()
</script>
</body>

9.样式操作

  <style>
        .qh {
            width: 200px;
            height: 200px;
            border: 1px solid blue;
        }
        .cq {
            width: 100px;
            height: 100px;
            border: 1px solid blue;
            background-color: red;
        }
    </style>
    <script data-original="js/jquery.js"></script>
</head>
<body>
<div id="qyc"></div>
<script>
    // $('#qyc').attr('style','width:100px;height:100px;background-color:red;');
//    attr设置style属性的样式
    $('#qyc').attr('class','qh');
    // 通过设置class属性为<div>元素添加外联样式
    $('#qyc').addClass('cq');
    // $('#qyc').attr('class','cq');// 替换样式
    // addClass(className)方法 - 表示添加样式(并不影响指定元素原本的样式)
    console.log($('#qyc').hasClass('qh'));
    // hasClass(className)方法 - 判断指定元素中是否包含指定样式名称

    console.log($('#qyc').css('width'));
   /* removeClass()方法 - 删除样式
    * removeClass()方法 - 删除所有样式
    * removeClass(className) - 删除指定样式
    */

    // $('#qh').removeClass('cq');

    // toggleClass()方法 - 在删除指定样式与添加指定样式之间切换
    // $('#qh').toggleClass('cq');

    // hasClass(className)方法 - 判断指定元素中是否包含指定样式名称


    $('#qyc').css({
        width: '600px',
        height: '600px'
    });
</script>
</body>

10.HTML操作


      <script data-original="js/jquery.js"></script>
</head>
<body>
<ul id="yx">
    <li id="lm">联盟</li>
    <li>火线</li>
    <li>地下城</li>
</ul>
<script>
    console.log($('#yx').html());

    var $html = $('#yx').html();
    $html += '<li>战甲</li>';
    $('#yx').html($html);

    console.log($('input').val());

    $('input').val('密码');
</script>
</body>
查看原文

赞 0 收藏 0 评论 0

佐珥玎 发布了文章 · 2018-09-06

【jQuery】之选择器

jQuery

JS类库 其实就是简化Js的开发,主要是DOM的操作,JS类库会预定义一系列对象和函数,降低对JS的使用难度,兼容各个浏览器

工厂函数

主要是简化通过函数 定位页面元素,将
DOM对象包装成jQuery对象,建立页面元素

<script data-original="js/jquery.js"></script>
    <!--引入jQuery-->
</head>
<body>
<button id="qyc">按钮</button>
<script>
    var qyc = document.getElementById('qyc');
//    DOM对象(返回该对象),获取页面中的按钮元素
    console.log(qyc);
//    var qyc = $('#qyc');
    var qyc = jQuery('#qyc');
    /*获取页面中按钮元素
    jQuery()是jQuery的工厂函数
    * 函数是jQuery的人口
    * 定位页面中元素
    * 另一个用法;$()=jQuery()
     */
    console.log(qyc);
</script>
</body>

DOM对象与jQuery对象

DOM对象和jQuery对象是可以互相转换的,是为了简化DOM的

<script data-original="js/jquery.js"></script>
</head>
<body>
<button id="qyc">按钮</button>
<script>
    var qyc = document.getElementById('qyc');
//    DOM操作()返回该对象
    var $qyc = $(qyc);
    console.log($qyc);
//    DOM对象转换为jQuery对象-工厂函数
    var qyc1 = $qyc[0];
    console.log(qyc1);
//    jQuery对象转换为DOM对象-jQuery对象[索引值]
    var qyc2 = $qyc.get(0);
    console.log(qyc2);
//    jQuery对象提供了get(index)方法-index为索引值
</script>
</body>

选择器

基本选择器

ID选择器 - ID匹配指定个元素
元素选择器 - 匹配所有元素名的元素
类选择器 - 匹配CSS属性名的元素
通配符选择器 - 匹配页面所有

 <title>基本选择器</title>
    <script data-original="js/jquery.js"></script>
</head>
<body>
<div id="qi">爱新觉罗</div>
<div id="q2" class="cla">呼延觉罗</div>
<script>
    console.log($('#q1'));
    console.log($('div'));
    console.log($('.cla'));
    console.log($('*'));
    // 通配符选择器-匹配所有
    console.log($('#d1, .cls'));
//    组合选择器-多个选择器使用逗号分隔(并集)
    console.log($('#q2.cla'));
//    组合选择器-多个选择器没有分隔(交集)
</script>
</body>

层级选择器

后代选择器-匹配祖先元素中后代元素
子选择器-匹配父元素中子元素
相邻兄弟选择器-匹配该元素下一个兄弟元素
普通兄弟选择器-匹配该元素后所有兄弟元素

<body>
<div id="qh">
    <div id="cq">
        <div id="q6"></div>
        <div id="q1"></div>
        <div id="q2"></div>
        <div id="q4"></div>
        <div id="q5"></div>
    </div>
    <div id="cq2">
        <div id="q3"></div>
    </div>
</div>
<script>
    console.log('#qh div');
    console.log('#qh>div');
    // 指定元素的下个相邻兄弟元素
    console.log('#q1~div');
    // 指定元素后面所有的兄弟元素
    console.log('#q1').siblings('div');
    // siblings()方法-获取指定元素所有兄弟元素(前面+后面)
</script>
</body>

基本过滤选择器

 <script data-original="js/jquery.js"></script>
    <style>
        #qyc {
           width: 100px;
           height: 200px;
           background-color: blue;
        }
    </style>
</head>
<body>
<h1>标题</h1>
<h2>标题</h2>
<div id="q1">
    <div id="qh"></div>
</div>
<div></div>
<div></div>
<div id="animated"></div>
<script>
    console.log($('div:first'));
    console.log($('div:last'));
//  在指定范围匹配元素中进行筛选
    console.log($('div:even'));
    console.log($('div:odd'));
//  索引值为偶数时-奇数元素;索引值为奇数十-偶数元素
    console.log($('div:eq(0)'));//等于
    console.log($('div:gt(2)'));//大于
    console.log($('div:lt(2)'));//小于

    console.log(':header');
//  :header-匹配h1到h6元素
    function animated() {
        $('animated').slideToggle(animated);
    }
    animated();
    console.log($(':animated'));
//    :animated-只匹配由jQuery实现动画
    console.log($('div:not("#qh")'));
</script>
</body>

内容过滤选择器

<script data-original="js/jquery.js"></script>
</head>
<body>
<div>div元素</div>
<div></div>
<div>
    <div id="qh"></div>
</div>
<script>
    console.log($('div:contains("q1")'));
    console.log(('div:empty'));
    console.log($('div:parent'));
    console.log($('div:has("#qh")')[0]);
//    :has()-表示包含匹配指定选择器元素父级元素
</script>
</body>

可见性过滤选择器

<script data-original="js/jquery.js"></script>
    <style>
        #q1 {
            display: none;
        }
        #q2 {
            visibility: hidden;
        }
    </style>
</head>
<body>
<div id="q1">呼延觉罗</div>
<div id="q2">爱新觉罗</div>
<input type="hidden" value="用户名">
<input type="text" name="username">
<script>
    /*
        :hidden选择器
        * 不能匹配CSS样式属性visibility设置为hidden的隐藏元素
        * 还能匹配HTML页面中不做任何显示效果的元素
        * 用法 - 尽量确定元素类型或指定范围
     */
    console.log($(':hidden'));
    /*
        :visible选择器
        * 匹配CSS样式属性visibility设置为hidden的隐藏元素
          * 当visibility设置为hidden时的元素,依旧占有页面空间
        * 还能匹配HTML页面中<html>和<body>元素
     */
    console.log($(':visible'));

</script>
</body>

属性过滤选择器

<script data-original="js/jquery.js"></script>
</head>
<body>
<div id="username" name="q1" class="mydiv"></div>
<div id="PASSWORD" name="d2" class="mycls"></div>
<div id="d1"></div>
<div class="myq"></div>
<script>
    console.log($('div[name]'));
    console.log($('div[class=mydiv]'));
    // [attr!=value]选择器-包含没有attr属性的元素
    console.log($('div[class!=mydiv]'));

    console.log($('div[class^=my]'));
    // 属性过滤选择器组合用法-交集
    console.log($('div[name=q1][class^=my]'));

</script>

</body>

子元素过滤选择器

<script data-original="js/jquery.js"></script>
</head>
<body>
<div id="q1">id为qi的div元素</div>
<div id="q2">id为qi的div元素</div>
<div id="q3">id为qi的div元素
    <div id="qh"></div>
</div>
<script>
    console.log($('div:first-child'));
//    :first-child- 当前元素是否为第个子元素
    console.log($('div:last-child'));

    console.log(('div:nth-child'));
    console.log(('div:only-child'));
//    匹配当前元素作为第index个字元素
//    index是从1开始,便是第几个
</script>
</body>

表单对象属性过滤选择器

<body>
<form action="#">
    <input type="text" disabled>
    <input type="checkbox">html
    <input type="checkbox" checked>css
    <select>
        <option>端游</option>
        <option selected>单机</option>
        <option>页游</option>
    </select>
</form>
<script>
    console.log($('input:disabled'));
    console.log($('input:checked'));
    console.log($('option:selected'));
</script>
</body>
查看原文

赞 0 收藏 0 评论 0

佐珥玎 发布了文章 · 2018-09-05

【JavaScript】DOM之BOM

BOM

1.BOM是什么

提供了独立页面内容,与浏览器相关的一系列对象,管理窗口之间通信

2.Window对象

具有双重角色,对象即是允许JS访问浏览器窗口的一个对象,和ECMAScript规范中的Global全局对象,在浏览器运行JS逻辑时,在全局作用域定义的对象,变量和函数

<body>
<form action="#">
    <input type="text" id="username">
    <input type="submit">
</form>
<script>
    var form = document.forms[0];
    form.addEventListener('submit',function (event) {
        console.log('该表单已被提交');
    });
</script>
</body>

window对象的属性

<script>
    // BOM中其他对象是作为window对象的属性存在
    console.log(window.navigator);
    console.log(window.location);
    console.log(window.history);
    console.log(window.document);
    console.log(window);
    // window对象的self属性-表示window对象本身(是只读属性)
    console.log(window.self);// 还是window对象
    console.log(window.innerWidth, window.innerHeight);
    // window对象的innerWidth和innerHeight - 浏览器窗口的内部宽度和高度
</script>

window对象的方法

<style>
        #qh {
            width: 300px;
            height: 200px;
            border: 1px solid black;
            display: none;
        }
    </style>
</head>
<body>
<!-- 点击按钮时,打开提示框 -->
<button id="btn">按钮</button>
<div id="qh"></div>

<script>
    // 提示框
    // window.alert('xxxx');
    // 确定框
    // var flag = window.confirm('你确定退出吗?');
    // alert(flag);
    // 输入框
    /*var result = window.prompt('请输入你的用户名:');
    alert(result);*/

    var btn = document.getElementById('btn');
    btn.addEventListener('click',function(){
        var dialog = document.getElementById('qh');
        dialog.style.display = 'block';
    });

    /*
        * window.setTimeout()和window.clearTimeout()方法
          * 该组方法表示延迟执行
        * window.setInterval()和window.clearInterval()方法
          * 该组方法表示循环(周期)执行
     */

</script>

Navigator对象

<body>
<script>
    console.log('浏览器代码名: ' + navigator.appCodeName);
    console.log('浏览器名称: ' + navigator.appName);
    console.log('浏览器平台和版本信息: ' + navigator.appVersion);
    console.log('运行浏览器操作系统平台: ' + navigator.platform);

    console.log(navigator.userAgent);

</script>
</body>

定时器

延时执行

setlnterval()方法设置个定时器,将该定时器只执行一次函数

`<script>
    console.log('this is message...');

    /*
        setTimeout(function, delay)方法
        * 设置个定时器
        * 参数
          function-表示延迟执行的代码逻辑
          delay-表示延迟执行时间,单位为毫秒
        * 返回值-表示当时器的标识
        * 注意-打乱代码默认的顺序执行流程
     */
    var t = setTimeout(function(){
        console.log('you my timeout...');
    },10000);

    // clearTimeout(t);

    console.log('you my message too...');

</script>`

周期执行

以setlnterval()方法,重复调用个函数或执行段代码

<script>
    console.log('you my message...');

    /*
        setInterval(function, delay)方法
        * 设置个周期执行的定时器
        *
          function - 表示延迟执行的代码逻辑
          delay - 表示延迟执行的时间,单位为毫秒
        * 返回值 - 表示当前定时器的标识
     */
    /*setInterval(function(){
        console.log('you my interval...');
    },1000);*/


    /*function fun(){
        console.log('you my interval...');
        setTimeout(fun,1000);
    }
    fun();*/
    (function fun(){
        console.log('you my interval...');
        setTimeout(fun,1000);
        // setTimeout(arguments.callee,1000);
    })();

    console.log('this is message too...');

</script>
查看原文

赞 0 收藏 0 评论 0

佐珥玎 发布了文章 · 2018-09-04

【JavaScript】DOM之表单操作

DOM

表单操作

1.获取表单

获取表单元素

以Document对象中forms属性来获取当前HTML页面所有表单集合
以Document对象中表单的name属性值来获取表单元元素

<body>
<form action="#">
    <input type="submit">
</form>
<form name="mylove" action="#">
    <input type="submit">
</form>
<script>
    console.log(document.forms);
//    获取当前HTML页面所有表单元素
    console.log(document.mylove);
//    document表单名称-有些新浏览器是不支持
</script>
</body>

获取表单组件元素

以HTMLFormElement对象的elements属性来获取表单组件的集合

<body>
<form action="#">
    <input type="text" name="username">
    <input type="submit">
</form>
<script>
    var form = document.forms[0];
    console.log(form.elements);
</script>
</body>

2.表单操作

文本内容的选择

以HTMLElement对象和HTMLTextAreaElement对象中select()方法来获取文本框所有文本框的内容

<body>
<form action="#">
    <input type="text" id="username" value="请输入你用户名">
    <!---->
    <input type="submit">
    <!--定义提交按钮-->
</form>
<script>
    var username = document.getElementById(username);
//    获取ID属性
    username.addEventListener('focus',function(){
        username.select();
    })
    username.addEventListener('select',function () {
        console.log(username.selectionStart.username.selectionEnd);
        var value = username.getAttribute('value');
        var result = value.substring(username.selectionStart,username.selectionEnd);
        console.log(result);
    })

</script>
</body>

设置文本内容

在HTML5新增中setSelectionRange()方法,来获取一个焦点文本框的文本内容

body>
<form action="#">
    <input type="text" id="username" value="请输入你用户名">
    <!---->
    <input type="submit">
    <!--定义提交按钮-->
</form>
<script>
    var username = document.getElementById(username);
//    获取ID属性
    username.addEventListener('focus',function(){
        username.select();
    })
    username.addEventListener('select',function () {
        console.log(username.selectionStart.username.selectionEnd);
        var value = username.getAttribute('value');
        var result = value.substring(username.selectionStart,username.selectionEnd);
        console.log(result);
    })

</script>
</body>

操作剪切板

以copy;cut,paste 来设置 操作剪切板的复制,剪切和粘贴

<body>
<form action="#">
    <input type="text" id="username" value="请输入你用户名">
    <input type="text" id="username1">
    <input type="submit">
</form>
<script>
    var username = document.getElementById('username');
    username.addEventListener('copy',function (event) {
        var data = event.clipboardData || window.clipboardData;
        console.log(data);
        console.log('这是复制操作');
        var value = username.value;
        var result = value.substring(selectionStart,username.selectionEnd);
        console.log(result);
        data.setData('text',result);
    });
    username.addEventListener('cut',function () {
        console.log('这是个剪切操作');
    });
    var username1 = document.getElementById('username1');
    username1.addEventListener('paste',function (event) {
        event.preventDefault();
        var data = event.clipboardData || window.clipboardData;
        var result = data.getData('text');
        /*得到DataTransfer对象
        * geData()方法-获取数据内容*/

        if (result === '用户名') {
            result ='***';
        }
        username1.value = result;
    })
</script>
</body>

下拉列表的操作

是以select和option对象来创建病提供一些属性和方法

<form action="#">
    <select id="yx">
        <option id="dj" value="dj">单机</option>
        <option value="wy">网页</option>
        <option value="dy">端游</option>
    </select>
    <select id="cyx1" multiple size="5">
        <option value="dj">单机</option>
        <option value="wy">网页</option>
        <option value="dy">端游</option>
    </select>
</form>
<script>

    var yx = document.getElementById('yx');
    // HTMLSelectElement对象
    console.log(yx.length);
    console.log(yx.options);
    console.log(yx.selectedIndex);// 被选中<option>的索引值
    // 属性
    var yx1 = document.getElementById('yx1');
    // size属性默认值是 0
    console.log(yx1.size);

    console.log(yx1.item(1));
    yx1.remove(2);

    var dj = document.getElementById('dj');
    console.log(dj.index);
    console.log(dj.selected);
    console.log(dj.text);
    console.log(dj.value);

</script>

3.表单验证

以checkValidity()如元素值不存在验证问题,会是true,如不是则返回false
以setCustomValidity(message)会为元素自定义个错误信息,如果设置了,该元素未无效,并显示

<body>
<form action="#">
    <input type="text" id="username">
    <input type="submit">
</form>
<script>
    var username = document.getElementById('username');
    username.addEventListener('blur',function () {
        var value = username.value;
        if (value === '' || value === undefined || vaiue === null) {
            console.log('请输入你用户名');
        }
    });
</script>
</body>

4.表单提交

submit事件

以submit表示提交表单

<body>
<form action="#">
    <input type="text" id="username">
    <input type="submit">
</form>
<script>
    var form = document.forms[0];
    form.addEventListener('submit',function (event) {
        console.log('该表单已被提交');
    });
</script>
</body>

submit()方法

以submit表示提交表单,并用使用任意普通按钮即可完成提交

<body>
<form action="#">
    <input type="text" id="username">
    <input id="qyc" type="button" value="提交">
</form>
<script>
    var qyc = document.getElementById('qyc');
    qyc.addEventListener('click',function () {
        var form = document.forms[0];
        form.submit();//提交表单
    });
</script>
</body>
查看原文

赞 0 收藏 0 评论 0

佐珥玎 发布了文章 · 2018-09-03

【JavaScript】DOM之事件

DOM

事件

1.事件是什么

让JS知道程序用户行为,比如用户点击HTML页面中的某个按钮和用户输入用户名与密码等操作

 <script>
        var button = document.getElementById('btn');
//        获取按钮元素
        button.onclick = function () {
//        事件绑定
            console.log('你已点了我');
        }
    </script>

2.注册事件
JS函数与指定事件相关联,被绑定函数成为事件的句柄
事件被激发时,会绑定函数会被调用

HTML元素的事件属性

表示实注册事件功能
该方式并没有与HTML结构与行为有效的分离

<body>
<button onclick="mylove()" id="btn">按钮</button>
<script>
    function mylove() {
        console.log('你已点了我');
    }
</script>
</body>

DOM对象的事件属性

将Document对象定位在THML页面元素
并返回DOM对象体属性,通过它实现各种注册事件功能

<body>
<button id="btn">按钮</button>
<script>
    var btn = document.getElementById('btn');
    btn.onclick = mylove;
    function mylove() {
        console.log('你已点了我');
    }
</script>
</body>

事件监听器

以addEvantLisener()方法,调用该方法表示元素增加事件监听器

body>
<button id="btn">按钮</button>
<script>
    var btn = document.getElementById('btn');
    btn.attachEvent('onclick',function () {
        console.log('XXX');
    })
    function bind(element,eventName, functionName) {
        if (element.addEventListener) {
            element.addEventListener()
        }
    }
</script>

</body>

事件监听器中的this

使用addEventListener()方法为页面注册事件时候,this是指注册事件元素
使用attachEent()方法为页面注册事件时候,this是指Window对象,,不是注册事件

<script>
    var qyc =document.getElementById('qyc');
    /*qyc.addEventListener('click',function () {
        console.log(this);//this指当前绑定事件的元素
    });*/
    /*qyc.attachEvent('onclick',function () {
        console.log(this);//this指当前环境的全局对象(Window对象)
    });*/
    bind(qyc,'click',function () {
        console.log(this);//在不同的浏览器中,this会有不同的表示
    });
    function bind(element, eventName, functionName) {
        if (element.addEventListener) {
        } else {
            element.attachEvent('on' + eventName, function () {
                functionName.call(element)

            });
        }
    }//此为IE8之前的版本兼容的解决方案
</script>
</body>

3.移除注册事件

removeEventListener()方法,调用此方法表示元素移除事件听器

<body>
<button id="qyc">按钮</button>
<script>
    var qyc = document.getElementById('qyc');
    function mylove() {
        console.log('XXX');
    }
    qyc.addEventListener('click',mylove);
    qyc.addEventListener('click',function () {
        console.log('YYY');
    });
    qyc.removeEventListener('click',mylove);
    function unbind(element,eventName,functionName) {
        if (element.removeEventListener) {
            element.removeEventListener(eventName, functionName);
        }else {
            element.detachEvent('on' + eventName, functionName);
        }
    }
</script>
</body>

4.Event事件对象

表示移除注册事件在IE8之前版本的
浏览器不支持removeEventListener()方法

<body>
<button id="qyc" onclick="mylove(event)">按钮</button>
<script>
    var qyc = document.getElementById('qyc');
    qyc.addEventListener('click',function (event) {
        console.log(event);
    });
    qyc.attachEvent('onclick',function () {
        console.log(window.event);
    });

    function bind(element,eventName, functipnName) {
        if (element.addEventListener){
            element.addEventListener(eventName,functipnName)
        } else {
          element.attachEvent('on' + eventName, function(){
             functipnName.call(element);
          });
        }
    }
</script>

5.获取目标

Event事件对象提供target属性,获取触发当前事件的HTML元素
Event事件对象提供currentTarget属性,获取注册当前事件的HTML元素

<style>
        ul {
           background-color: red;
        }
        #wl {
           background-color: blue;
        }
        a {
           background-color: yellow;
        }
    </style>
</head>
<body>
<ul id="yx">
    <li>单机游戏</li>
    <li id="wl"><a href="#">网络游戏</a></li>
    <li>手机游戏</li>
</ul>
<script>
    var yx = document.getElementById('yx');
    yx.addEventListener('click',function (event) {
        console.log(event.target);
//        target属性-获取绑定当前事件目标元素
        console.log(event.currentTarget);
//        currentTarget属性-获取绑定当前事件目标元素
        console.log(this);
    });
    yx.attachEvent('onclick',function (event) {
//    IE8以下浏览器提供srcElement属性为target目标元素
        var e = event || window.event;
        console.log(e.srcElement);
    });
</script>
</body>

6.阻止默认行为

不使用默认,而是

<body>
<a href="#">链接</a>
<script>
    var aElement = document.getElementsByName('a');
    /*aElement.addEventListener('click',function(event){
        event.preventDefault();// 阻止默认行为
    });*/
    
    aElement.onclick = function (event) {
        event.preventDefault();
        return false;

    }
    aElement.attachEvent('onclick',function (event) {
        var e = event || window.event;
        e.returnValue = false;
    })
</script>
</body>

7.获取鼠标

pageX和pageY表示相对于页面中
clientX和clientY表示可视区域
screenX和screenY表示在当前屏幕的

<body>
<script>
    var html = document.documentElement;
    html.addEventListener('click',function(event){
        console.log(event.pageX, event.pageY);
        // 鼠标坐标值相对于当前HTML页面
        console.log(event.clientX, event.clientY);
        // 鼠标坐标值相对于当前可视区域
        console.log(event.screenX, event.screenY);
        // 鼠标坐标值相对于当前屏幕的

        // 鼠标坐标值只能获取,不能设置
    });

</script>
</body>

8.事件流

<style>
        #q1 {
            width: 200px;
            height: 200px;
            background-color: red;
            padding: 50px;
        }
        #q2 {
            width: 100px;
            height: 100px;
            background-color: yellow;
            padding: 50px;
        }
        #q3 {
            width: 100px;
            height: 100px;
            background-color: blue;
        }
    </style>
</head>
<body>
<div id="q1">
    <div id="q2">
        <div id="q3"></div>
    </div>
</div>
<script>
    var q1 = document.getElementById('q1');
    q1.addEventListener('click',function(){
        console.log('这是d1... ...');
    }, false);
    var q2 = document.getElementById('q2');
    q2.addEventListener('click',function(){
        console.log('这是d2... ...');
    }, false);
    var q3 = document.getElementById('q3');
    q3.addEventListener('click',function(event){
        console.log('这是q3... ...');
        event.stopPropagation();
    }, false);
</script>
</body>

9.事件委托

大量的HTML元素注册相同事件,并事件句柄逻辑安全相同,会造成页面速度下降,不果事件流允许这些HTML元素同父级元素注册事件

<body>
<div id="qh">
    <button id="qyc1">按钮</button>
    <button id="qyc2">按钮</button>
    <button id="qyc3">按钮</button>
</div>
<script>
    var qyc1 = document.getElementById('qyc1');
    qyc1.addEventListener('click',function(){
        console.log('这是个按钮');
    });
    var qyc2 = document.getElementById('qyc2');
    qyc2.addEventListener('click',function(){
        console.log('这是个按钮');
    });
    var qyc3 = document.getElementById('qyc3');
    qyc3.addEventListener('click',function(){
        console.log('这是个按钮');
    });
    var qh = document.getElementById('qh');
//    不把事件绑定给指定元素,绑定给共同父级和祖先元素
    qh.addEventListener('click',function (event) {
        var target = event.target;//触发事件目标元素
        if(targe.nodeName === 'BUTTON') {
           console.log('这是个按钮');
        }
    })
</script>
</body>
查看原文

赞 0 收藏 0 评论 0

认证与成就

  • 获得 13 次点赞
  • 获得 1 枚徽章 获得 0 枚金徽章, 获得 0 枚银徽章, 获得 1 枚铜徽章

擅长技能
编辑

(゚∀゚ )
暂时没有

开源项目 & 著作
编辑

(゚∀゚ )
暂时没有

注册于 2018-07-31
个人主页被 532 人浏览