- JavaScript和jQuery之间的入口函数有一些区别
- JS的window.onload事件必须要等到所有内容,以及外部图片之类的文件加载完之后,才会去执行。
- JQuery入口函数是在所有标签加载完之后,就会去执行。
加载模式
- 原生JS和jQuery入口函数的加载模式不同
- 原生JS会等到DOM元素加载完毕,并且图片也加载完毕才会执行
- jQuery会等到DOM元素加载完毕,但不会等到图片也加载完毕就会执行
代码举例:
JS和jQuery的区别
函数覆盖问题
- 原生JS如果编写了多个入口函数,后面编写的入口函数会覆盖前面的
- jQuery中编写多个入口函数,后面的不会覆盖前面的
代码举例:
jQuery入口函数的几种写法
- 常用的是下面的第三种写法,因为最简短
//1.第一种写法
$(document).ready(function(){
console.log("111");
})
//2.第二种写法
jQuery(document).ready(function(){
console.log("222");
})
//3.第三种写法(推荐写法)
$(function(){
console.log("333");
})
//4.第四种写法
jQuery(function(){
console.log("444");
})
jQuery冲突问题
- 比如其他框架也使用了 $ 符号,后引入的 script 文件会覆盖掉先引入的文件下的 $ 符号
//1.释放 $ 的使用权
//注意点:释放操作必须在编写其他jQuery代码之前编写
// 释放之后引用jQuery代码不能再使用 $ 符号,改为使用jQuery
jQuery.noConflict(); // 释放 $ 的使用权
$(function(){
console.log("其它框架");
})
jQuery(function(){
console.log("jQuery框架");
})
// 2.自定义访问 jQuery 的符号
var nj = jQuery.noConflict();
nj(function(){
console.log("自定义访问 jQuery 符号");
})
jQuery核心函数
// $(); 就代表jQuery的核心函数
//1.接收一个函数
$(function(){
console.log("函数");
})
//2.接收一个字符串
//2.1 接收一个字符串选择器
//返回一个jQuery对象,对象中保存了找到的DOM元素
var $box1 = $(".box1");
var $box2 = $("#box2");
console.log($box1); //
console.log("$box2");//
//2.2接受一个字符串代码片段
//返回一个jQuery对象,对象中保存了创建的DOM元素
var $p = $("我是段落
");
console.log($p); //我是段落
$box1.append($p); //将创建的段落添加到DOM中
//3.接收一个DOM元素
//会被包装成一个jQuery对象返回给我们
var span = document.getElementByTagName("span");
console.log(); //
var $span = $(span);
console.log($span);