zoukankan      html  css  js  c++  java
  • jQuery 加载事件

    1. jquery加载事件实现

    ① $(document).ready(function处理);

    ② $().ready(function处理);

    ③ $(function处理);  对第一种加载的封装而已

      在同一个请求里边,jquery的可以设置多个,而传统方式只能设置一个

           传统方式加载事件是给onload事件属性赋值,多次赋值,后者会覆盖前者

           jquery方式加载事件是把每个加载事件都存入一个数组里边,成为数组的元素,执行的时候就遍历该数组执行每个元素即可,因此其可以设置多个加载事件。

        传统方式加载事件,是全部内容(文字、图片、样式)在浏览器显示完毕再给执行加载事件。

           jquery方式加载事件,只要全部内容(文字、图片、样式)在内存里边对应的DOM树结构绘制完毕就给执行,有可能对应的内容在浏览器里边还没有显示。

    2 jquery加载事件原理

           jquery加载事件是对DOMContentLoaded的封装(而非onload)

    /*********************************************************/

    <script type="text/javascript">
    //jquery加载事件是对 DOMContentLoaded/onload 的封装

    //DOMContentLoaded加载事件执行时机与jquery的一致
    document.addEventListener("DOMContentLoaded",function(){
    alert('hello'); //先看到hello弹出框,后看到图片
    $('img').attr('src','1d.jpg');
    });
    </script>

    <style type="text/css">
    </style>
    </head>
    <body>
    <h2>jquery加载事件原理</h2>
    <img src="./11.php" alt="" /><!--后显示图片-->
    </body>

    /*********************************************************/

    普通事件操作

    ① dom1级事件设置

           <input  type=”text”  onclick=”过程性代码” value=’tom’ />

           <input  type=”text”  onclick=”函数()” />

           itnode.onclick = function(){}

           itnode.onclick = 函数;

    ② dom2级事件设置

           itnode.addEventListener(类型,处理,事件流);

           itnode.removeEventListener(类型,处理,事件流);

           node.attachEvent();

           node.detachEvent();

    ③ jquery事件设置

           $().事件类型(事件处理函数fn);      //设置事件

           $().事件类型();                             //触发事件执行

           事件类型:click、keyup、keydown、mouseover、mouseout、blur、focus等等  

    例如:$(‘div’).click(function(){事件触发过程this});

    (该方式事件函数内部this都代表jquery对象内部的dom节点对象)。

    jquery调用的大部分方法里边的this关键字都代表其对应的dom对象。

  • 相关阅读:
    jmeter入门----安装及简单使用
    python的学习路线
    利用selenium模块来编写网络爬虫
    软件测试的一些建议
    作为面试官的一些心得
    测试中常用的python第三方库
    Bootstrap:Bootstrap_table第一篇:快速用bootstrap_table(支持参数)筛选并展示数据,固定表格前几列,实现表格单元格编辑
    JS插件:fullCalendar图解
    Python脚本:实现对象集合List导入到excel表格,支持mysql,postergrsql,MongoDB
    Python脚本:实现excel表格导入到数据库,支持mysql,postgresql,MongoDB
  • 原文地址:https://www.cnblogs.com/yd09023/p/5872282.html
Copyright © 2011-2022 走看看