js進階 10-3 jquery中爲何用document.ready方法

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 })
相關文章
相關標籤/搜索