jQuery入门基础
jQuery就是一个由JavaScript编写的轻量库，简单的说就是封装了一些JavaScript的操作，所以使用jQuery比使用原生的JavaScript可以达到用更少的代码做更多的事的效果。
1. 配置 jQuery 本地编程环境
- 官网下载: jQuery 下载
- CDN:Bootstrap 中文网,又拍云
Composer:
composer require components/jqueryCDN 与官网下载到本地的对比
- 官网下载总是可以获取最新版本,如果网站需要离线浏览只能选择它, 但资源下载会延缓网站打开速度
- CDN 可以让用户选择最近的节点下载,并且用户浏览器可能在访问其它站点时已经缓存了这个库,速度很快
- composer 下载的 jQuery,就像一个普通文件一样,直接用
<script src=""></script>引入
<!-- 以下为本地的引用方法 --><!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="js/jquery-3.5.1.js"></script></head><body></body></html>
2. 熟悉\$()工厂函数的四种使用场景
2.1 $(选择器, 上下文)或者jQuery(selector,context)
简要的说是：接收一个css选择器表达式(selector)和可选的选择器上下文(context),返回一个包含了匹配的DOM元素的jQuery对象
// $(): 工厂函数// 基本语法: $(选择器).操作();// 1. $(选择器, 上下文)或者jQuery(selector,context): 返回jQuery对象// 原生document.querySelectorAll("li").forEach(function (item) {item.style.color = "red";});// jquery$("li").css("color", "green");// $("li", "#first").css("color", "blue");$("#first li").css("color", "red");
2.2 $(js对象)或者jQuery(js对象)
// 2. $(js对象), 返回一个jQuery对象, 将js对象包装成JQ对象var lis = document.querySelectorAll("#second li");lis.forEach(function (item) {item.style.backgroundColor = "yellow";});// lis===> jQuery对象$(lis).css("background-color", "cyan");
2.3 $(html文本)或者jQuery(html文本)
// 3. $(html文本), 将html文本包装成一个jQuery对象并返回// html文本: hello不是, <p>hello</p>是$("<h3>Laravel开发</h3>").insertBefore("#first");
2.4 $(callback)或者jQuery(callback)
// 4. $(callback): 当html文档结构加载完成后就会立即执行这个回调$(function () {$(document.body).css({"background-color": "wheat","font-size": "18px",});});
3. 实例演示对 jQuery 查询结果的处理方式
3.1 toArray():将查询结果转为真正的数组
// 1. toArray():将查询结果转为真正的数组var lis = $("ul > li");cl(lis);cl(lis.length);cl(lis.get(3));for (var i = 0; i < lis.length; i++) {// 原生lis.get(i).style.color = "red";}lis.toArray().forEach(function (item, index) {if (index >= 2) cl("元素" + index + " : " + item);});
3.2 $.each()
// 2. $.each(): 回调的参数顺序与forEach不一样, $().each(callback)lis.each(function (index, value) {// 原生this.style.color = "green";jQuery$(this).css("color", "blue");});
3.3 $.map()
// 3. $.map(), 必须要有返回值, 回调参数的参数与$.each()的回调参数的参数完全相反var arr = $.map(lis, function (value, index) {if (index % 2) return value;});cl(arr);cl($(arr));$(arr).css("color", "red");
3.4 index(): 返回jQuery查询集合中的索引
// 4. index(): 返回jQuery查询集合中的索引jQuery对象是一个类数组,具有从0开始递增的正整数索引,并有一个length属性cl(lis);lis.click(function () {cl("点击了第: ", $(this).index() + 1, " 个<li>");});
4. 总结
$在JQuery库中，$是JQuery的别名，$()等效于就jQuery()，通过本节课的学习，可以了解jQuery是一个快速的简洁的javascript框架，可以简化查询DOM对象、处理事件、制作动画、处理Ajax交互过程。