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. CodeVs——T 3305 水果姐逛水果街Ⅱ

    http://codevs.cn/problem/3305/  时间限制: 2 s  空间限制: 256000 KB  题目等级 : 钻石 Diamond 题解  查看运行结果     题目描述 De ...

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

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

  3. <meta name="viewport" content="width=device-width,initial-scale=1.0">

    meta name="viewport" content="width=device-width,initial-scale=1.0" 解释  <meta ...

  4. 微服务实战（三）：深入微服务架构的进程间通信 - DockOne.io

    原文:微服务实战(三):深入微服务架构的进程间通信 - DockOne.io [编者的话]这是采用微服务架构创建自己应用系列第三篇文章.第一篇介绍了微服务架构模式,和单体式模式进行了比较,并且讨论了使 ...

  5. echarts同一页面四个图表切换的js数据交互

    需求:点击tab页,切换四个不同的图表,ajax向后台请求数据,展示在四个不同的图表中. 其余的就不多说,直接上js代码了 $(function() { $("#heart").o ...

  6. MySQL字符编码问题，Incorrect string value

    MySQL上插入汉字时报错例如以下.详细见后面分析. Incorrect string value: '\xD0\xC2\xC8A\xBEW' for column 'ctnr' at row 1 M ...

  7. MySql基本的语法（学习笔记)

    MySQL语法大全_自己整理的学习笔记 select * from emp;  #凝视 #--------------------------- #----命令行连接MySql--------- #启 ...

  8. iTestin云测工具

    软件概述 iTestin是免费服务移动App开发者的真机自动化云测试客户端工具.基于真实的智能终端设备录制一个测试脚本然后运行,并输出运行结果.覆盖Android和iOS两大设备平台,支持Pad/Ph ...

  9. 辛星笔记之高质量JavaScript代码书写要点

    首先本文章是http://www.zhangxinxu.com/wordpress/?p=1173 的读书笔记,读者能够自己到鑫旭的空间去阅读原文.这里我对其进行了简化. 可维护的代码的一些要求: ( ...

  10. TCP套接字编程模型及实例

    摘要:     本文讲述了TCP套接字编程模块,包括服务器端的创建套接字.绑定.监听.接受.读/写.终止连接,客户端的创建套接字.连接.读/写.终止连接.先给出实例,进而结合代码分析. PS:本文权当 ...