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

一、总结

一句话总结：

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

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

2、document.ready函数怎么写？

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

3、window.onload函数怎么写？

window.onload=function(){}

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

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

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

1、相关知识：JQuery概述

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

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

目前最新版本为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()

  • 美元符号定义JQuery

    • $就是jquery对象
    • $是JQuery中选取元素的符号
    • $是JQuery中功能函数的前缀(功能函数后边再讲)
  • 选择符(selector)"查询"和"查找"HTML元素
  • JQuery的action()执行对元素的操作
4.document.ready和window.onload的区别

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

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

2、代码

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>演示文档</title>

     <script src="jquery-3.1.1.min.js"></script>

     <script type="text/javascript" src="ktys3.js"></script>

 </head>

 <body>

     <input type="button" value="测试按钮">

     <p id="p1">段落1</p>

     <p id="p2">段落2</p>

     <p id="p3">段落3</p>

     <p id="p4">段落4</p>

     <script>

     //给元素添加事件

     //alert($===jQuery)

     // $('input').click(function(){

     //     alert('jQuery就是这么简单!')

     // })

     jQuery('input').click(function(){

         alert('jQuery就是这么简单!')

     })

     jQuery('p').click(function(){

             jQuery(this).hide()

         })

     </script>

 </body>

 </html>
 // $('#p2').css('color','red').css('font-size','50px')

 // window.onload=function(){

 //     $('#p2').css('color','red').css('font-size','50px')

 // }

 // window.onload=function(){

 //     $('#p4').css('color','red').css('font-size','50px')

 // }

 $(document).ready(function(){

     $('#p1').css('color','green').css('font-size','50px')

 })

 $(document).ready(function(){

     $('#p3').css('color','green').css('font-size','50px')

 })
 

js进阶 10-3 jquery中为什么用document.ready方法的更多相关文章

  1. js进阶 11-4/5 jquery中css的类的操作有哪些

    js进阶 11-4/5  jquery中css的类的操作有哪些 一.总结 一句话总结:jquery中css的类的操作有增删切三种. 1.jquery中css的类的操作有哪些? 增删切三种 addCla ...

  2. js进阶课程 12-9 jquery的事件对象event的方法有哪些？

    js进阶课程 12-9 jquery的事件对象event的方法有哪些? 一.总结 一句话总结:三组六个,阻止默认事件一组,阻止冒泡一组,阻止冒泡和剩余事件一组. 1.事件的默认动作指什么? 比如点a标 ...

  3. jQuery学习笔记(9)--jquery中的事件--$(document).ready()

    1.$(document).ready()方法是事件模块中最重要的一个函数,可以极大地提高web应用程序的相应速度. 2.执行时机:DOM就绪后就会执行,而javascript中window.onlo ...

  4. JQuery中操作Css样式的方法

    JQuery中操作Css样式的方法//1.获取和设置样式 $("#tow").attr("class")获取ID为tow的class属性 $("#tw ...

  5. 【转发】JQuery中操作Css样式的方法

    JQuery中操作Css样式的方法 //1.获取和设置样式 $("#tow").attr("class")获取ID为tow的class属性 $("#t ...

  6. js进阶 12-13 jquery中one方法和trigger方法如何使用

    js进阶 12-13 jquery中one方法和trigger方法如何使用 一.总结 一句话总结: 1.one()方法和on()方法的区别是什么? 除了one()只执行一次,其它和on()一模一样,包 ...

  7. js 进阶 10 js选择器大全

    js 进阶 10 js选择器大全 一.总结 一句话总结:和css选择器很像 二.JQuery选择器 原生javaScript中,只能使用getELementById().getElementByNam ...

  8. js进阶---12-11、jquery如何给动态创建出来的元素绑定事件

    js进阶---12-11.jquery如何给动态创建出来的元素绑定事件 一.总结 一句话总结:通过事件委托的方式,通过on方法 1.on方法在事件绑定的时候,data方式带额外参数时,字符串参数和其它 ...

  9. js进阶---12-10、jquery绑定事件和解绑事件是什么

    js进阶---12-10.jquery绑定事件和解绑事件是什么 一.总结 一句话总结:on和off. 1.jquery如何给元素绑定事件? on方法 22 $('#btn1').on('click', ...

随机推荐

  1. poi完美word转html(表格、图片、样式)

    直入正题,需求为页面预览word文档,用的是poi3.8,以下代码支持表格.图片,不支持分页,只支持doc,不支持docx: /** * */ import java.io.BufferedWrite ...

  2. poj 1191 棋盘切割 （压缩dp+记忆化搜索）

    一,题意: 中文题 二.分析: 主要利用压缩dp与记忆化搜索思想 三,代码: #include <iostream> #include <stdio.h> #include & ...

  3. 解决linux下cocos2dx不能播放声音

    cocos2dx2.2.1在linux下引用#include "SimpleAudioEngine.h".报错找不到该文件. 改动makefile文件,加入 SHAREDLIBS ...

  4. [Node] Convert CommonJS Requires to ES6 Imports

    In this lesson we'll use cjs-to-es6 to convert CommonJS requires to ES6 imports. We'll also show how ...

  5. [Angular2 Form] Reactive form: valueChanges, update data model only when form is valid

    For each formBuild, formControl, formGroup they all have 'valueChanges' prop, which is an Observable ...

  6. Swift3.0 功能一(持续更新)

    修改项目名称两种方式 1.Bundle name 2.Bundle display name try 三种处理异常的方式 // 在swift中提供三种处理异常的方式 // 方式一:try方式 程序员手 ...

  7. php 百度地图 腾讯地图 转换坐标

    /* * 中国正常GCJ02坐标---->百度地图BD09坐标 * 腾讯地图用的也是GCJ02坐标 * @param double $lat 纬度 * @param double $lng 经度 ...

  8. JAVA中try-catch异常逃逸

    有时候一些小的细节,确实比较纠结,对于try-catch-finally代码块中代码依次执行,当try中有exception抛出时,将会有catch拦截并执行,如果没有catch区块,那么except ...

  9. 【Solr专题之九】SolrJ教程 分类： H4_SOLR/LUCENCE 2014-07-28 14:31 2351人阅读 评论(0) 收藏

    一.SolrJ基础 1.相关资料 API:http://lucene.apache.org/solr/4_9_0/solr-solrj/ apache_solr_ref_guide_4.9.pdf:C ...

  10. js课程 2-6 js如何进行类型转换及js运算符有哪些

    js课程 2-6 js如何进行类型转换及js运算符有哪些 一.总结 一句话总结: 1.所有类型->布尔类型(为假的情况)有哪些(6种)? 1)字符串('')2)整型(0)3)浮点型(0.0)4) ...