Jquey就是一款跨主流浏览器的JavaScript库，简化JavaScript对HTML操作就是封装了JavaScript，能够简化我们写代码的一个JavaScript库

文章目录

一、JQ的引入
- 1.1、本地文件引入
- 1.2、CDN引入
- 1.3、为什么要引入 jQ
二、基本使用
- 2.1、作为函数使用
- - 2.1.1、作为一般函数使用
  - 2.1.2、参数为选择器字符串
  - 2.1.3、参数为 dom 对象
  - 2.1.4、参数 html 标签字符串
- 2.2、作为对象使用
- - 2.2.1、遍历数组元素
  - 2.2.2、获取所有元素
- 2.3、补充知识点
三、选择器
四、层次选择器

一、JQ的引入

JQ的引入有两种方式：本地文件引入、CDN引入。

1.1、本地文件引入

<script src="jquery-1.11.3.min.js"></script>
<script type="text/javascript">$(function () {alert('hello');});
</script>

注意：jquery-1.11.3.min.js是从官网上下载好的，放在本地。

1.2、CDN引入

打开https://www.bootcdn.cn/jquery/，选择jQ版本，然后选择</>复制<script>标签
(要用CDN引入最重要的一点是：)

代码：

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
<script type="text/javascript">$(function () {alert('hello');});
</script>

1.3、为什么要引入 jQ

回顾 javascript，我们知道 JavaScript 定位到HTML的控件有三种基本的方式：

通过ID属性：document.getElementById()
通过NAME属性：document.getElementsByName()
通过标签名：document.getElementsByTagName()

我们发现，JavaScript 的方法名太长了，不易于书写代码……

引入jQ后，我们就可以用$()根据传入的参数判断它是获取ID属性的控件还是标签名的控件了。

示例：

(这里我就写主要代码部分)
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.slim.min.js"></script>
<body>文本框：<input type="text" id="inp"><button id="btn1">js版本</button><button id="btn2">jQ版本</button><script type="text/javascript">// 使用JavaScriptvar btn1 = document.getElementById('btn1');btn1.onclick = function(){var text1 = document.getElementById("inp").value;console.log(text1);}// 使用jQuery$(function () {   $("#btn2").click(function(){var text2 = $("#inp").val();console.log(text2);});});</script>
</body>

结果：

二、基本使用

2.1、作为函数使用

2.1.1、作为一般函数使用

格式：$(回调函数)

作用：当文件加载完毕之后，执行此回调函数

示例：

(这里我就写主要代码部分)
<script type="text/javascript">$(function () {  //内部代码等到文档加载完毕之后才会执行console.log("你好");});console.log("我不好");
</script>

结果：

2.1.2、参数为选择器字符串

作用：查找所有匹配的标签，并且封装为 jQuery 对象

示例：

(这里我就写主要代码部分)
<body><button id="btn1">点我</button><script type="text/javascript">$(function () {$("#btn1").click(function(){console.log(this);console.log($(this).html());});});</script>
</body>

结果：

补充：注意到示例中获取jQ对象后，用了this ，这里this指代获取的dom对象。

2.1.3、参数为 dom 对象

作用：会将一个 dom 对象转为 jQuery 对象

示例：

(这里我不详细写了，具体看上个示例)
console.log($(this).html())

2.1.4、参数 html 标签字符串

作用：创建标签对象并封装为 jQuery对象

示例：

(这里我就写主要代码部分)
<body><div><button id="btn1">点我，快点我</button></div><script type="text/javascript">$(function () {$("#btn1").click(function(){$('<input type="text" id="inp">').appendTo("div");//把按钮的值显示到文本框中，即向input赋值$("#inp").val($("#btn1").html());});});</script>
</body>

结果：

注意：
①若字符串用' '，如果 html 标签字符串中也要有字符串则全用" "；
②若字符串用" "，如果 html 标签字符串中也要有字符串则全用' '；
如：

$('<input type="text" id="inp">')
$("<input type='text' id='inp'>")

2.2、作为对象使用

2.2.1、遍历数组元素

示例：

<script type="text/javascript">var arr = [1,2,3]$.each(arr,function(index,element){ //index元素下标  element元素console.log("index:"+index+"，element:"+element);});// var arr = [1,'str',3]//   $.each(arr,function(){ //index元素下标  element元素//         console.log(this);//  });
</script>

结果：

index:0，element:1
index:1，element:2
index:2，element:3

2.2.2、获取所有元素

示例：

<body><button type="button">点我，快点我1</button><button type="button">点我，快点我2</button><button type="button" id="btn">点我，快点我3</button><button type="button">点我，快点我4</button><script type="text/javascript">//获取所有的按钮var btns = $("button");//console.log(btns.length);   结果：4// 取出第二个按钮的文本内容// 注意：btns[1]或btns.get(1) 获取的元素是一个dom对象console.log(btns[1].innerHTML);console.log(btns.get(1).innerHTML);// 输出所有按钮的文本btns.each(function(){console.log(this.innerHTML);});// 输出“点我，快点我3”按钮是所有按钮里面的第几个console.log($("#btn").index());</script>
</body>

结果：

2.3、补充知识点

① $符号可以用 jQuery 代替，二者是等价的
如：

consoe.log($ === jQuery)  //结果是：true

② 注意 JavaScript 对象与 jQuery对象的区别：

用JavaScript语法创建的对象叫做JavaScript对象
用JQurey语法创建的对象叫做JQuery对象   $()返回的对象，是jQ对象
Jquery对象只能调用Jquery对象的API
JavaScript对象只能调用JavaScript对象的API

如：

// 使用JavaScript
var btn1 = document.getElementById('btn1');
//这里btn1返回的是js对象，onclick是js的API
btn1.onclick = function(){var text1 = document.getElementById("inp").value;console.log(text1);
}// 使用jQuery
$(function () {
//$()返回的是jQ对象，它不能调用onclick，click是jQ的API$("#btn2").click(function(){var text2 = $("#inp").val();console.log(text2);});
});

三、选择器

选择器的基本语法和 css 使用选择器一致，只不过进行了扩展，只有在进行调用$() 并且将选择器作为参数传入才可以有作用，如：$("选择器"):根据选择器规则在整个页面中查找所有匹配的标签数组，并且封装成 jQuery对象返回。

示例 1：

<body>
<div id="box">div</div><div>div2</div><div class="divclass">div5</div><div class="divclass">div6</div><span>span1</span><span class="divclass">span2</span><span>span3</span><ul><li>编程语言</li><li class="s1">python</li><li class="s2">java</li><li class="s2"><span>C/C++</span></li><span>IT互联网</span></ul><script type="text/javascript">// 标题选择器      设置所有的div颜色$("div").css({"background":"red"});// id选择器        选择id为box的元素，并且设置颜色$("#box").css({"background":"green"});// 类选择器         选择所有类名为divclass的元素，并选择颜色$(".divclass").css({"background":"red"});// 并集选择器        设置所有的span和div$("div,span").css({"background":"red"});// 所有class=divclass的div$("div.divclass").css({"background":"red"});// 通配符选择器      选择所有元素，设置颜色$("*").css({"background":"red"});</script>
</body>

示例 2

<script type="text/javascript">//  1.选中ul下的所有span$("ul span").css("background","red");// 2.选中ul下的所有子元素span$("ul>span").css("background","red");// 3.选中class=sku的下一个li$(".sku+li").css("background","red");//  4.选中ul下class=sku的后面所有兄弟元素$("ul .sku~*").css("background","red");// 过滤选择器// 选中第一个div$("div:first").css("background","red");// 选中最后一个div$("div:last").css("background","red");// 选中class属性不为box$("div:not(.box)").css("background","red");// 选中第二个和第三个li$("li:lt(3):gt(0)").css("background","red");// 选中第二个li$("li:eq(1)").css("background","red");// 选中内容为python学院的li$("li:contains(python学院)").css("background","red");// 选择有class属性为sku的li$("li[class=sku]").css("background","red");// $("li").eq(0);</script>

四、层次选择器

函数	描述
parent( )	父元素
children( )	子元素
siblings( )	兄弟
find( )	后代
parents( )	祖先

示例：


<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><script src="jquery-3.1.1.js"></script><style>* {margin: 0;padding: 0;}ul {list-style: none;}.wrap {width: 330px;height: 30px;margin: 100px auto 0;padding-left: 10px;background-image: url(images/bg.jpg);}.wrap li{background-image: url(images/libg.jpg);}.wrap > ul > li {float: left;margin-right: 10px;position: relative;}.wrap a {display: block;height: 30px;width: 100px;text-decoration: none;color: #000;line-height: 30px;text-align: center;}.wrap li ul {position: absolute;top: 30px;/* 隐藏 */display: none;}</style><body><!-- 给一级菜单设置鼠标移入事件，二级菜单显示给一级菜单设置鼠标移出事件，二级菜单隐藏--><div class="wrap"><ul><li><a href="javascript:void(0);">一级菜单1</a><ul><li><a href="javascript:void(0);">二级菜单1</a></li><li><a href="javascript:void(0);">二级菜单2</a></li><li><a href="javascript:void(0);">二级菜单3</a></li></ul></li><li><a href="javascript:void(0);">一级菜单1</a><ul><li><a href="javascript:void(0);">二级菜单1</a></li><li><a href="javascript:void(0);">二级菜单2</a></li><li><a href="javascript:void(0);">二级菜单3</a></li></ul></li><li><a href="javascript:void(0);">一级菜单1</a><ul><li><a href="javascript:void(0);">二级菜单1</a></li><li><a href="javascript:void(0);">二级菜单2</a></li><li><a href="javascript:void(0);">二级菜单3</a></li></ul></li></ul></div><script type="text/javascript">var o = 0;$(".wrap>ul>li").mouseover(function(){//显示就是更改display属性为block// $(this).children("ul").css("display","block");// 显示函数，本质上还是更改display属性值为block$(this).children("ul").show();});$(".wrap>ul>li").mouseout(function(){// $(this).children("ul").css("display","none");// 隐藏函数，本质上还是更改display属性值为none$(this).children("ul").hide();});</script></body>
</html>

结果：

想学习 jQuery 基本使用的话可以看我这两篇博客：
学习笔记（八）——jQuery（二）

想了解更多关于 jQuery 的 API 使用话推荐查看：
jQuery API 中文文档

学习笔记（七）——jQuery（一）相关推荐

Typescript 学习笔记七：泛型
中文网:https://www.tslang.cn/ 官网:http://www.typescriptlang.org/ 目录: Typescript 学习笔记一:介绍.安装.编译 Typescrip ...
吴恩达《机器学习》学习笔记七——逻辑回归（二分类）代码
吴恩达<机器学习>学习笔记七--逻辑回归(二分类)代码一.无正则项的逻辑回归 1.问题描述 2.导入模块 3.准备数据 4.假设函数 5.代价函数 6.梯度下降 7.拟合参数 8.用训练 ...
websocket 获取连接id_Swoole学习笔记七：搭建WebSocket长连接之使用 USER_ID 作为身份凭证...
Swoole学习笔记七:搭建WebSocket长连接之使用 USER_ID 作为身份凭证 2年前阅读 3678 评论 0 喜欢 0 ### 0.前言前面基本的WebSocket操作,我们基本都 ...
ROS学习笔记七：使用rqt_console和roslaunch
ROS学习笔记七:使用rqt_console和roslaunch 本节主要介绍在调试时使用的rqt_console和rqt_logger_level,以及一次性打开多个节点的工具roslaunch. ...
【K210】K210学习笔记七——使用K210拍摄照片并在MaixHub上进行训练
[K210]K210学习笔记七--使用K210拍摄照片并在MaixHub上进行训练前言 K210准备工作 K210如何拍摄照片准备工作拍摄相关代码定义用K210拍摄到的照片在MaixHub平台 ...
Learning ROS for Robotics Programming Second Edition学习笔记(七) indigo PCL xtion pro live
中文译著已经出版,详情请参考:http://blog.csdn.net/ZhangRelay/article/category/6506865 Learning ROS forRobotics Pro ...
window的dos命令学习笔记七
文章目录一.dos历史学习笔记(后期整合到这里,我想能学到这里的应该不多了,嘿嘿,加油) 二.执行状态返回值(`%errorlevel%`,和shell中`$?`相似): 三.视窗 1.color ...
ESP32学习笔记(七) 复位和时钟
ESP32学习笔记(七) 复位和时钟目录: ESP32学习笔记(一) 芯片型号介绍 ESP32学习笔记(二) 开发环境搭建 VSCode+platformio ESP32学习笔记(三) 硬件资源介绍 ...
逆向脱壳破解分析基础学习笔记七堆栈图（重点）
本文为本人大神论坛逆向破解脱壳学习笔记之一,为本人对以往所学的回顾和总结,可能会有谬误之处,欢迎大家指出. 陆续将不断有笔记放出,希望能对想要入门的萌新有所帮助,一起进步堆栈图首先给定一段反汇 ...
OpenCV学习笔记(七)——图像梯度及边缘检测
图像梯度计算的是图像变化的速度.对于图像的边缘部分,其灰度值变化较大,梯度值也较大:相反,对于图像中比较平滑的部分,其灰度值变化较小,相应的梯度值也较小.一般情况下,图像梯度计算的是图像的边缘信息. ...

学习笔记（七）——jQuery（一）