js进阶 10-3 jquery中为何用document.ready方法

时间 2019-11-24

标签进阶 jquery 中为何用 document.ready document ready 方法栏目 JavaScript 繁體版

原文原文链接

js进阶 10-3 jquery中为何用document.ready方法

1、总结

一句话总结：

一、document.ready和window.onload的区别：用哪一个好？

document.ready直接加载完dom树便可加载，document.ready可加载多个javascript

二、document.ready函数怎么写？

$(document).ready(匿名函数)
css

三、window.onload函数怎么写？

window.onload=function(){}html

四、js中某个元素的某个方法好比click，在js中动态怎么写？

元素.方法=匿名函数 window.onload=function(){}java

2、js进阶 10-3 js语法二

一、相关知识：JQuery概述

1.JQuery简介

JQuery是一个JavaScript库。极大地简化了JavaScript编程。
JQuery拥有强大的选择器支持，支持CSS1-CSS3几乎全部的选择器，以及JQ首创的高级而复杂的选择器。
解决了不一样浏览器间的兼容问题
代码简洁，功能强大，易于理解......

2.JQuery的引入

注：jquery1.x版本支持IE 6/7/8;jquery-2.x以上版本再也不支持IE 6/7/8jquery

目前最新版本为jquery-3.1.1(最新），你们能够随时关注官网最新版本的动态，对于初学者来讲，看教程的时候，你看之前版本的教程书籍依然有用，很对新版本增长的功能对于初学者未必用得上，另你掌握了一个版本的用法以后，即便版本后续有更新，只要关注更新部分便可，不会对学习形成太大的困扰.......编程

JQuery各版本下载地址浏览器

官网下载到本地引入
百度压缩版本引用地址1：
http://libs.baidu.com/jquery/2.0.0/jquery.min.js
百度压缩版本引用地址2：
https://code.jquery.com/jquery-3.1.1.min.js
.....

3.JQuery的语法

基础语法是：$(selector).action()dom

美圆符号定义JQuery
- $就是jquery对象
- $是JQuery中选取元素的符号
- $是JQuery中功能函数的前缀(功能函数后边再讲)
选择符(selector)"查询"和"查找"HTML元素
JQuery的action()执行对元素的操做

4.document.ready和window.onload的区别

Jquery中$（document).ready()的做用相似于传统javaScript中的window.onload方法，不过与window.onload方法仍是有区别的。ide

$（function(){})和$（document).ready(function(){})这两个方法的效果都是同样的，都是在dom文档树加载完以后执行一个函数 Window.onload必须等到页面内包括图片的全部元素加载完毕后才能执行。
Window.onload必须等到页面内包括图片的全部元素加载完毕后才能执行。
Window.onload不能同时编写多个,若是有多个window.onload方法,只会执行一个$(document).ready()能够同时编写多个,而且均可以获得执行

二、代码

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>演示文档</title>
 6     <script src="jquery-3.1.1.min.js"></script>
 7     <script type="text/javascript" src="ktys3.js"></script>
 8 </head>
 9 <body>
10     <input type="button" value="测试按钮">
11     <p id="p1">段落1</p>
12     <p id="p2">段落2</p>
13     <p id="p3">段落3</p>
14     <p id="p4">段落4</p>
15     <script>
16     //给元素添加事件
17     //alert($===jQuery)
18 
19     // $('input').click(function(){
20     //     alert('jQuery就是这么简单!')
21     // })
22 
23     jQuery('input').click(function(){
24         alert('jQuery就是这么简单!')
25     })
26  jQuery('p').click(function(){
27  jQuery(this).hide()
28         })
29     </script>
30 
31 </body>
32 </html>

 1 // $('#p2').css('color','red').css('font-size','50px')
 2 // window.onload=function(){
 3 //     $('#p2').css('color','red').css('font-size','50px')
 4 // }
 5 
 6 // window.onload=function(){
 7 //     $('#p4').css('color','red').css('font-size','50px')
 8 // }
 9 $(document).ready(function(){
10     $('#p1').css('color','green').css('font-size','50px')
11 })
12 
13 $(document).ready(function(){
14     $('#p3').css('color','green').css('font-size','50px')
15 })