关于页面加载即执行JQuery的三种方法小结

更新时间：2022年10月24日 15:17:23 作者：流烟默

这篇文章主要介绍了关于页面加载即执行JQuery的三种方法小结，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教

页面加载即执行JQuery的方法

【1】$(function( ){ }）；

  $(function(){ 
　　$("#name").click(function(){ 
　　　　//adding your code here 
　　}); 
});

【2】$(document).ready(function( ){ })

  $(document).ready(function(){ 
　　$("#name").click(function(){ 
　　　　//adding your code here　　 
　　}); 
});

第二种是第一种的完整形式。

【3】window.onload = function( ){ }

 window.onload = function(){ 
　　$("#name").click(function(){ 
　　　　//adding your code here 
　　}); 
}

【4】后面两种的区别

1.执行的时机不同

window.onload要等整个窗口（包括图片）都加载完才触发执行
$(document).ready()在 DOM 结构绘制完成后就可执行

2.编写的个数

window.onload 编写多个时，只有最后的那起作用
$(document).ready()可以编写多个，都生效

3.简化写法

window.onload 无
$(document).ready()可简写为()

Tip ：jQuery中真正与 window.onload完全等价的是$(window).load()方法

jQuery页面加载事件

在jQuery对象与js对象之间的转换的案例中，我们看到所有的js代码都放到了body标签之后，如果把js代码放到head标签中，js代码就会报错，这个问题我们已经在js中学过，就是需要让页面加载完成之后再执行.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="js/jquery-1.12.4.js"></script>
    <!‐‐ 测试jQuery ‐‐>

</head>
<body>
<div id="myDiv1">通过不同方式获得文本内容111</div>
<div id="myDiv2">通过不同方式获得文本内容222</div>
</body>
<script type="text/javascript">
    //通过js方式打印div内部的内容
    var divEle = document.getElementById("myDiv1");//js的DOM对象
    alert(divEle.innerHTML);//js对象的innerHTML属性

    //通过jQuery方式打印div内部的内容
    var $divEle = $("#myDiv2");//jQuery对象
    alert($divEle.html());//jQuery对象的html方法

    //使用js的DOM对象调用jQuery对象的方法
    //alert(divEle.html());//错误写法，不能正常执行

    //使用jQuery对象调用js的DOM对象的属性
    //alert($divEle.innerHTML);//错误写法，不能正常执行

    //js转换成jQuery对象后在调用jQuery对象的html方法
    alert($(divEle).html());//转换后正常执行

    //jQuery转换成js的DOM对象后在调用js的innerHTML属性
    alert($divEle[0].innerHTML);
    alert($divEle.get(0).innerHTML);
</script>
</html>

js中的页面加载事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        onload=function(){
//通过js方式打印div内部的内容
            var divEle = document.getElementById("myDiv");
            alert(divEle.innerHTML);
        }
    </script>
</head>
<body>
<div id="myDiv">通过不同方式获得文本内容</div>
</body>
</html>

jquery对页面加载事件也进行了封装,让我们使用起来更加的简单

jQuery中的页面加载事件方式1:(理解)

$(document).ready(function(){
//编写代码
});

方式2:(掌握)

$(function(){
//编写代码
});

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="js/jquery-1.12.4.js"></script>
    <!‐‐ 测试jQuery ‐‐>
    <script type="text/javascript">
        //js
        onload=function(){
            alert("js页面加载");
        }
        //jquery方式
        $(document).ready(function(){
            alert("jquery方式1");
        });
        $(function(){
            alert("jquery方式2");
        })
    </script>
</head>
<body>

</body>
</html>

效果

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

JQuery 风格的HTML文本转义
astinus开发过程中，我自己就在不断的使用。有次贴了一些JS代码进去，于是页面显示错误。显然，把源代码直接放进html文本了——好吧，从05年转去做网游以后，一直没有正经的做过web了。
2009-07-07
jQuery选择器之属性过滤选择器详解
这篇文章主要为大家详细介绍了jQuery选择器之属性过滤选择器，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-09-09
jquery form表单提交插件asp.net后台中文解码
对于jquery form表单提交插件jquery.form.js，在提交表单数据时，如果表单数据有中文，则被提交的数据是要经过编码的。
2010-06-06
基于ajax及jQuery实现局部刷新过程解析
这篇文章主要介绍了基于ajax及jQurey实现局部刷新过程解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
2020-06-06
jQuery Ajax请求状态管理器打包
现在的网站，在一个网页中有异步请求甚至许多个异步请求已经不足为奇。Ajax已经成为了现在网站必须的基本功能，使网页应用更接近于桌面应用
2012-05-05
ztree实现权限横向显示功能
最近在做权限功能的时候，采用的ztree实现的，但是产品要求最后一层的权限节点要横向显示。下面小编把基于ztree实现权限横向显示功能的实现思路分享给大家，供大家参考
2017-05-05
IE中jquery.form中ajax提交没反应解决方法分享
用jquery form插件，进行ajax提交，本来可以用，好好地，突然发现，firefox，opera等可以提交，ie的success函数运行了
2012-09-09
jquery.cookie.js用法实例详解
这篇文章主要介绍了jquery.cookie.js用法,结合实例形式较为详细的分析了jquery.cookie.js针对cookie的获取、创建、设置、删除等常用技巧,需要的朋友可以参考下
2015-12-12
jquerydom对象的事件隐藏显示和对象数组示例
本文为大家介绍下jquery的dom对象的事件隐藏显示和对象数组，感兴趣的朋友可以参下
2013-12-12
概述jQuery的元素筛选
这篇文章主要介绍了jQuery的元素筛选，并举例进行说明，希望对大家有所帮助
2016-11-11