如何使用JQuery？

  • 下载JQuery库：下载地址：https://code.jquery.com/
  • 引入下载的JQuery库 
  • 编写JQuery代码
  • 下载的JQuery库分为压缩版本和未压缩版本，它们的区别在于压缩版省去了空格，将一些单词进行了简化，空间小了，性能有所提升。同时也失去了未压缩版本的可读性。
  • JQuery版本有1.*，2.*，3.* 这三个大的版本，我们常用的是1.*的最后一个版本：1.12.4版本。它的兼容性最强。

JQuery的使用

原生JS的写法：

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

JQuery的固定写法

$(document).ready(function(){
　　...
});

通过对比：JQuery展现了它代码简洁，写的少做的多的优点。

但是原生Js和JQuery的入口函数的加载模式不同：

  • 原生JS会等到DOM元素加载完毕，并且元素内的所有信息加载完毕才会执行。
  • JQuery会等到DOM元素加载完毕，但是不会等到元素内的信息都加载完毕就会执行。

所以在Jq的入口函数中，我们获取不到元素的属性信息。

JQuery的入口函数

JQuery的入口函数就等同于原生JS的入口函数，也类似于我们后端开发的Main函数，是代码执行的起点。

  • 关于原生JS的入口函数

如下代码，原生JS中如果编写了多个入口函数，后面编写的会覆盖前面编写的。

window.onload = function(){
    alter(\'aaa\');
}

window.onload = function(){
　　alter(\'bbb\');
}
  • 关于JQuery的入口函数

如下代码，如果JQuery中编写多个入口函数，后面的不会覆盖前面的，会从上到下依次执行。

$(document).ready(function(){
　　alter(\'aaa\');
});

$(document).ready(function(){
　　alter(\'bbb\');
})
  •  JQuery入口函数的写法，不必像孔乙己一样固执，这里记住第三种就行了，平时常用的就是第三种
//第一种写法
$(document).ready(function(){
　　...
});
//第二种写法
JQuery(document).ready(function(){
　　...
});
//第三种写法
$(function(){
　　...
});
//第四种写法
jQuery(function(){
　　...
});

JQuery冲突问题

在开发中我们引用JQuery包才能使用$符号，当我们引用多个包，并且其他的包中也同样存在$符号的使用，那么这个时候，我们能使用的只能是最后引用的包中的$符号。

这种情况下，我们一般有两种解决方法：

  • 放弃$的使用权
JQuery.noConflict();
jQuery(function(){
　　...
});
  • 自定义一个访问符号
var jq = jQuery.noConflict();
jq(function(){
　　...
});

JQuery的核心函数

$()：就代表调用jQuery的核心函数

$()的使用：

  1. 接收一个函数
  2. 接收一个字符串、
    1. 接收一个字符串选择器、
    2. 接收一个代码片段
  3. 接收一个DOM元素
//接收一个函数
$(function(){
　　alert(\'OK\');
});

//接收一个字符串选择器
//如下代码，JQuery的核心函数返回的是一个JQuery对象，对象中保存了DOM元素； 

var $box1 = $("#box1");
var $box2 = $(".box2");

//接收一个字符串
//如下代码所示，接收了一个代码块，返回了一个JQuery对象，对象中保存了新建的DOM元素 
var $box3 = $("<p>这是一个段落</P>");

 

版权声明：本文为powerworld原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://www.cnblogs.com/powerworld/p/14214046.html