在未加载完文档,使用jquery选择器选择元素后,如果立即绑定事件进行调用,会引起js的报错(can not read property of undefined),导致事件不能绑定成功.

alert($("p")[1].firstChild.nodeValue);

这时就需要js的页面加载函数

一般有三种

window.onload = function(){
$("p").bind("click", function() {
$(this).hide();
})
} $(document).ready(function(){
$("p").click(function(){
$(this).hide();
})
})
$(function(){
$("p").click(function(){
$(this).hide();
})
}) //$(function(){})是 $(document.ready(function(){})) 的简写

另外jQuery绑定事件的方式有两种

一种 是直接 click(callback(){});

一种是使用 bind函数 bind("click",callback(){});

js页面加载函数的更多相关文章

  1. js页面加载完后执行(document.onreadystatechange 和 document.readyState)

    js页面加载完后执行javascript(document.onreadystatechange 和 document.readyState) document.onreadystatechange ...

  2. JS 页面加载触发事件 document.ready和window.onload的区别

    document.ready和onload的区别——JavaScript文档加载完成事件页面加载完成有两种事件: 一是ready,表示文档结构已经加载完成(不包含图片等非文字媒体文件): 二是onlo ...

  3. JS 页面加载触发事件 document.ready和onload的区别(转)

    原博地址:http://blog.163.com/zhaoyanping_1125/blog/static/20132915320111129113723710/ * document.ready和o ...

  4. js页面加载进度条(这个就比较正式了,改改时间就完事儿)

    不废话,直接上代码 思路不难,就是一个animate方法配合随机数 duration内个三秒钟,是自定义的,可以改成页面加载时间,这样就完美了 <!doctype html> <ht ...

  5. js页面加载进度条

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  6. js页面加载完成事件

    jquery的一种简写形式: $(function(){ alert("页面加载完成!"); });  其对应的完整形态为: $(document).ready(function( ...

  7. JS 页面加载触发事件 document.ready和onload的区别

    document.ready和onload的区别——JavaScript文档加载完成事件页面加载完成有两种事件: 一是ready,表示文档结构已经加载完成(不包含图片等非文字媒体文件): 二是onlo ...

  8. js页面加载的几种方式的速度: window.onload、 $(window).load、 $(function(){})、 $(document).ready(function () {})、onload=‘asd()’

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  9. jquery和js的几种页面加载函数的方法以及执行顺序

    参考博客:http://www.cnblogs.com/itslives-com/p/4646790.html    https://www.cnblogs.com/james641/p/783837 ...

随机推荐

  1. magento getCarriers 分析

    完整的设置订单追踪信息的时候我们可能会用到它.在后台中他在这里设置: 有的时候我们想要设置自己定义的 carrier 比如 顺丰 申通 圆通 ..等等 我们能够先从 magento api 入手分析 ...

  2. OC文件操作、获取文件属性

    #import <Foundation/Foundation.h> //获取文件的属性 int main(int argc, const char * argv[]) { @autorel ...

  3. gogodroid--android 上的IPV6工具

    gogodroid--android 上的IPV6工具 系统需求是 Android 1.6以上的系统,已经root,能够执行modprobe命令(在终端里输入modprobe,如果显示了帮助便可以), ...

  4. ProgressBar-style属性分析

    首先我们看下framework下关于进度条的style定义,如下 <style name="Widget.ProgressBar"> <item name=&qu ...

  5. 使用@Order调整配置类加载顺序

    转自:https://blog.csdn.net/qq_15037231/article/details/78158553 4.1 @Order Spring 4.2 利用@Order控制配置类的加载 ...

  6. 39.Intellij导入子项目时,maven列表子项目灰色不可用---解决方法

    转自:https://blog.csdn.net/jackieriver/article/details/79046326 导入子项目的module时,左侧project目录中有一个module图标右 ...

  7. swiper轮播控件配置项

    var mySwiper = new Swiper ('.swiper-container', {    direction: 'horizontal',    loop: true,    auto ...

  8. vue 自定义modal 模态框组件

    参数名 类型 说明 visible Boolean 是否显示,默认false title String 标题 update:visible Boolean 更新visible, 使用:visible. ...

  9. 深度解析VC中的消息

    消息是指什么? 消息系统对于一个win32程序来说十分重要,它是一个程序运行的动力源泉.一个消息,是系统定义的一个32位的值,他唯一的定义了一个事件,向Windows发出一个通知,告诉应用程序某个事情 ...

  10. Java Web学习总结(11)——Session使用示例教程

    一.Session简单介绍 在WEB开发中,服务器可以为每个用户浏览器创建一个会话对象(session对象),注意:一个浏览器独占一个session对象(默认情况下).因此,在需要保存用户数据时,服务 ...