jQuery 入口函数

最新推荐文章于 2021-11-29 15:58:16 发布

邪人君子

最新推荐文章于 2021-11-29 15:58:16 发布

阅读量164

点赞数

分类专栏： jQuery 学习笔记文章标签： jQuery JavaScript 前端入门李南江

本文链接：https://blog.csdn.net/qq_27127385/article/details/86597528

版权

jQuery 学习笔记专栏收录该内容

5 篇文章 0 订阅

订阅专栏

JavaScript和jQuery之间的入口函数有一些区别
JS的window.onload事件必须要等到所有内容，以及外部图片之类的文件加载完之后，才会去执行。
JQuery入口函数是在所有标签加载完之后，就会去执行。

加载模式

原生JS和jQuery入口函数的加载模式不同
原生JS会等到DOM元素加载完毕，并且图片也加载完毕才会执行
jQuery会等到DOM元素加载完毕，但不会等到图片也加载完毕就会执行
代码举例：

<!DOCTYPE>
<html lang="en">
<head>
  <meta="UTF-8">
  <title>JS和jQuery的区别</title>
  <script src = "js/jquery-1.12.4.js">
  <script>
//原生JS
    window.onload = function(ev){
      //1.通过原生的JS入口函数可以拿到DOM元素
      var img = document.getElementByTagName("img")[0];
      console.log(img);   //输出 img 路径
      //2.通过原生的JS入口函数可以拿到DOM元素的宽高
      var width = window.getComputedStyle(img).width;   '//输出 img 宽度（px）'
    }

//jQuery
    $(document).ready(function(){
      //1.通过jQuery入口函数也可以拿到DOM元素
      var $img = $("img")[0];
      console.log($img);  //输出 img 路径
      //2.通过jQuery入口函数拿不到DOM元素的宽高
      var $width = $img.width;
      console,log($width);  // 输出 0
    });
  </script>
</head>
<body>
  <img src="/img/image.jpg">
</body>

函数覆盖问题

原生JS如果编写了多个入口函数，后面编写的入口函数会覆盖前面的
jQuery中编写多个入口函数，后面的不会覆盖前面的
代码举例：

<!DOCTYPE>
<html lang="en">
<head>
  <meta="UTF-8">
  <script src = "js/jquery-1.12.4.js">
  <script>
/*JS*/
    window.onload = function(ev){
      alert("hello oneJS");
    }

    window.onload = function(){
      alert("hello twoJS");
    }
//输出结果：弹出 hello twoJS

//jQuery
    $(document).ready(function(){
      alert("jQuery1");
    });

    $(document).ready(function(){
      alert("jQuery2");
    });
//输出结果为：先弹出 jQuery1 ，然后弹出 jQuery2
  </script>
</head>
<body>
  <img src="img/image">
</body>

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); // <div class=".box1"></div>
 console.log("$box2");// <div id="box2"></div>

 //2.2接受一个字符串代码片段 
 //返回一个jQuery对象，对象中保存了创建的DOM元素
 var $p = $("<p>我是段落</p>");
 console.log($p); //<p>我是段落</p>
 $box1.append($p); //将创建的段落添加到DOM中

//3.接收一个DOM元素
//会被包装成一个jQuery对象返回给我们
var span = document.getElementByTagName("span");
console.log(); //<span></span>
var $span = $(span);
console.log($span);

邪人君子

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery 入口函数

JavaScript和jQuery之间的入口函数有一些区别JS的window.onload事件必须要等到所有内容，以及外部图片之类的文件加载完之后，才会去执行。JQuery入口函数是在所有标签加载完之后，就会去执行。加载模式原生JS和jQuery入口函数的加载模式不同原生JS会等到DOM元素加载完毕，并且图片也加载完毕才会执行jQuery会等到DOM元素加载完毕，但不会等到图...
复制链接

扫一扫

专栏目录