【初识】jquery入口函数浅谈

jquery官方API地址

juqery 官方API地址 ： http://jquery.cuishifeng.cn/

jquery入口函数基本语法

           //jQuery入口函数写法
			$(document).ready(function(){
				//内容
			})

jquery 与原生JS入口函数的差异

1.原生JS 和 jquery 的加载模式的区别

原生js：会等到网页中dom元素加载完毕，以及图片（远程）等的加载完毕后开始执行
jquery：会等到dom元素加载完毕，但不会等图片加载完毕后执行

代码块如下：
从百度首页中获取图片地址：

<img src="https://www.baidu.com/img/bd_logo1.png" >

对于原生JS：

 		  //原生JS入口函数
			window.onload = function(){
				var img = document.getElementsByTagName("img")[0];
				console.log(img);
				var width = window.getComputedStyle(img).width;
				console.log(width);//结果输出：540px
			}

控制台中，能够获取到图片的dom节点,也能够获取图片的宽度

对于JQ：

		//jQuery入口函数
			$(document).ready(function(){
				var $img = $("img");
				var $width = $img.width;
				console.log($width); //输出：0
			})

控制台中不能得到图片的宽度
ps：由于浏览器的缓存作用，需要首先清除一下浏览器的缓存

2.原生js 和 jquery 入口函数是否被覆盖的问题

原生JS ：
若出现多个入口函数

window.onload = function(){...}

则后书写的入口函数会覆盖前者

//覆盖原生js入口函数
window.onload = function(){
	console.log("hello Jiker")
}		
window.onload = function(){
	console.log("hello Jiker!!!")
}

控制台输出

jquery：
多次出现入口函数，浏览器则会顺序执行函数

$(document).ready(function(){
	console.log("jquery: hello 111"); 
}) 
$(document).ready(function(){
	console.log("jquery: hello 222"); 
}) 

控制台输出

jQuery入口函数其他写法

第一种写法

$(document).ready(function(){
		//内容 
}) ;

第二种写法

jQuery(document).ready(function(){
		//内容
}) ;

第三种写法（推荐使用：write less，do more）

$(function(){
		//内容
});

第四种写法

jQuery(function(){
		//内容				
});

时间：2019-3-17 22：50