JQuery基础知识
程序员文章站
2022-03-27 08:28:02
...
引用jQuery的方法
1、官网下载原代码
jQuery 官网下载
项目中创建一个js文件保存下载的原代码
配置成功验证：
2、CDN引用-引用其它网站的资源
jQuery工厂函数$()``jQuery()的四种使用场景
$()基本语法:$(选择器).操作()
1、$(选择器): 返回 jQuery 对象，然后可以调用jQuery方法
2、$(js 对象): 将 js 对象包装成 jQuery 对象，调用jQuery方法
3、$(html 文本): 将 html 文本包装成一个 jQuery 对象并返回
4、$(callback): 当 html 文档结构加载完成后就会立即执行这个回调
演示代码：
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title><script src="lib/jQuery_v3.5.1.js"></script></head><body><div class="mot"><span>1</span><span>2</span><span>3</span></div><div class="hai"><span>4</span><span>5</span><span>6</span></div></body><script>// console.log($);// 1、`$(选择器)`: 返回 jQuery 对象，然后可以调用jQuery方法$('.mot').css({"background-color": "yellow","font-size": "2rem"})// 2、`$(js 对象)`: 将 js 对象包装成 jQuery 对象，调用jQuery方法var spans = document.querySelectorAll(".hai span");// spans===> jQuery对象$(spans).css("background-color", "green");// 3、`$(html 文本)`: 将 html 文本包装成一个 jQuery 对象并返回$("<h3>jQuery学习</h3>").insertBefore(".hai");// 4、`$(callback)`: 当 html 文档结构加载完成后就会立即执行这个回调$(function () {$(document.body).css({"background-color": "wheat","font-size": "1.5rem",});});</script></html>
效果图：
jQuery查询结果的处理方式
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title><script src="lib/jQuery_v3.5.1.js"></script></head><body><div class="mot"><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span></div></body><script>var spans = $("div > span");// 类数组console.log(spans);// 1. toArray():将查询结果转为真正的数组console.log(spans.toArray());// 2. $.each(): 遍历指定的对象和数组,回调的参数顺序与forEach不一样spans.each(function (index, value) {$(this).css("color", "red");});// 3. $.map(): 处理数组中的每个元素,并将处理结果封装为新的数组返回。var arr = $.map(spans, function (value, index) {if (index % 2) return value;});console.log(arr);$(arr).css("color", "blue");// 4. index(): 返回jQuery查询集合中的索引spans.click(function () {console.log("点击了第: ", $(this).index() + 1, " 个<li>");});</script></html>
效果图：
总结
1、jQuery 宗旨: 写得更少,而做得更多，和我一样—-少说多做。
2、jQuery 常用操作有 DOM 查询, Ajax。