在未加载完文档,使用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. home-界面返回上一级功能

    1,这个主要是用在actionbar上home键,直接上代码 import android.view.MenuItem; /* Vanzo:zhangshuli on: Mon, 23 Mar 201 ...

  2. ASM学习笔记--ASM 4 user guide 第二章要点翻译总结

    参考:ASM 4 user guide 第一部分 core API 第二章  类 2.1.1概观 编译后的类包括: l  一个描述部分:包括修饰语(比如public或private).名字.父类.接口 ...

  3. UVA 488 - Triangle Wave 水~

    http://uva.onlinejudge.org/index.php?option=com_onlinejudge&Itemid=8&page=show_problem&p ...

  4. C_C++指针指针应用详解

    前言:复杂类型说明 要了解指针,多多少少会出现一些比较复杂的类型,所以我先介绍一下如何完全理解一个复杂类型,要理解复杂类型其实很简单,一个类型里会出现很多运算符,他们也像普通的表达式一样,有优先级,其 ...

  5. 每日技术总结:promise,express route,评分,local storage商品浏览历史,

    最近正在用Vue做一个电商项目.利用工作前后空隙时间. 1.promise的使用 点这里 如何在实际项目中使用Promise 2. Express Route 前后端传参的两种方法 (1)req.pa ...

  6. 云服务器搭建 Nginx 静态网站

    第一步:安装 Nginx 在 CentOS 上,可直接使用 yum 来安装 Nginx(当然也可以通过下载压缩包.解压.编译的方式安装,不过太麻烦了) yum install nginx -y 第二步 ...

  7. POJ 2406 Power Strings KMP求周期

    传送门 http://poj.org/problem?id=2406 题目就是求循环了几次. 记得如果每循环输出为1.... #include<cstdio> #include<cs ...

  8. 6、USB Video Class Specification

    关于USB Class 将设备归为既定的类别,并对相应类别的设备的在USB协议的应用级协议和接口作出规范,这样只要按照类设备的标准实现驱动程序和设备,则一套驱动可以驱动这一类的所有设备,而这一类设备可 ...

  9. [Scss Flex] Reuse Flexbox Styles With A Sass Mixin

    This lesson covers flexbox in a reusable mixin that should cover most layout situations on your site ...

  10. 【48.47%】【POJ 2524】Ubiquitous Religions

    Time Limit: 5000MS Memory Limit: 65536K Total Submissions: 32364 Accepted: 15685 Description There a ...