【JavaScript】JQuery介绍和选择器

JQuery介绍

jQuery概念

jQuery 是一个快速、小型且功能丰富的 JavaScript 库。它通过可在多种浏览器上运行的易于使用的 API，使 HTML 文档遍历和操作、事件处理、动画和 Ajax 等事情变得更加简单。凭借多功能性和可扩展性的结合，jQuery 改变了数百万人编写 JavaScript 的方式。

  • 官网：http://jquery.com/
  • 官网API文档：http://api.jquery.com/

在这里插入图片描述

下载后得到query最新版本,其中第一个是为未压缩版,第二个是压缩版

引入 jQuery 的原因

在用 js 写代码时，会遇到一些问题：

  • window.onload 事件有事件覆盖的问题，因此只能写一个事件。

  • 代码容错性差。

  • 浏览器兼容性问题。

  • 书写很繁琐，代码量多。

  • 代码很乱，各个页面到处都是。

  • 动画效果很难实现。

如下图所示：

在这里插入图片描述

jQuery的出现，可以解决以上问题。

学习jQuery需要学啥

初期，主要学习如何使用jQuery操作DOM，其实就是学习jQuery封装好的那些API。

这些API的共同特点是：几乎全都是方法。所以，在使用jQuery的API时，都是方法调用，也就是说要加小括号()，小括号里面是相应的参数，参数不同，功能不同。

jQuery 的两大特点

（1）链式编程：比如.show()和.html()可以连写成.show().html()。

链式编程原理：return this。

通常情况下，只有设置操作才能把链式编程延续下去。因为获取操作的时候，会返回获取到的相应的值，无法返回 this。

（2）隐式迭代：隐式对应的是显式。隐式迭代的意思是：在方法的内部会为匹配到的所有元素进行循环遍历，执行相应的方法；而不用我们再进行循环，简化我们的操作，方便我们调用。

如果获取的是多元素的值，大部分情况下返回的是第一个元素的值。

jQuery的使用

使用 jQuery 的基本步骤

（1）引包

（2）入口函数

（3）功能实现代码（事件处理）

如下图所示：

在这里插入图片描述

对比原生js

在这里插入图片描述

jQuery 的入口函数和 $ 符号

入口函数

原生 js 的入口函数指的是：window.onload = function() {}; 如下：

        //原生 js 的入口函数。页面上所有内容加载完毕，才执行。//不仅要等文本加载完毕，而且要等图片也要加载完毕，才执行函数。window.onload = function () {alert(1);}

而 jQuery的入口函数，有以下几种写法：

写法一：

       //1.文档加载完毕，图片不加载的时候，就可以执行这个函数。$(document).ready(function () {alert(1);})

写法二：（写法一的简洁版）

       //2.文档加载完毕，图片不加载的时候，就可以执行这个函数。$(function () {alert(1);});

写法三：

       //3.文档加载完毕，图片也加载完毕的时候，在执行这个函数。$(window).ready(function () {alert(1);})

jQuery入口函数与js入口函数的区别：

区别一：书写个数不同：

  • Js 的入口函数只能出现一次，出现多次会存在事件覆盖的问题。

  • jQuery 的入口函数，可以出现任意多次，并不存在事件覆盖问题。

区别二：执行时机不同：

  • Js的入口函数是在所有的文件资源加载完成后，才执行。这些文件资源包括：页面文档、外部的js文件、外部的css文件、图片等。

  • jQuery的入口函数，是在文档加载完成后，就执行。文档加载完成指的是：DOM树加载完成后，就可以操作DOM了，不用等到所有的外部资源都加载完成。

文档加载的顺序：从上往下，边解析边执行。

jQuery的$符号

jQuery 使用 $ 符号原因：书写简洁、相对于其他字符与众不同、容易被记住。

jQuery占用了我们两个变量：$ 和 jQuery。当我们在代码中打印它们俩的时候：

    <script src="query/query-3.7.1.min.js"></script><script>console.log($);console.log(jQuery);console.log($===jQuery);</script>

打印结果如下：

从打印结果可以看出，$ 代表的就是 jQuery。

那怎么理解jQuery里面的 $ 符号呢？

$ 实际上表示的是一个函数名 如下：

	$(); // 调用上面我们自定义的函数$$(document）.ready(function(){}); // 调用入口函数$(function(){}); // 调用入口函数$(“#btnShow”) // 获取id属性为btnShow的元素$(“div”) // 获取所有的div标签元素

如上方所示，jQuery 里面的 $ 函数，根据传入参数的不同，进行不同的调用，实现不同的功能。返回的是jQuery对象。

jQuery这个js库，除了 $ 之外，还提供了另外一个函数：jQuery。jQuery函数跟 $ 函数的关系：jQuery === $。

js中的DOM对象 和 jQuery对象比较（重点）

二者的区别

通过 jQuery 获取的元素是一个数组，数组中包含着原生JS中的DOM对象。举例：

针对下面这样一个div结构：

<div></div>
<div class="box"></div>
<div id="box"></div>
<div class="box"></div>
<div></div>

通过原生 js 获取这些元素节点的方式是：

    var myBox = document.getElementById("box");           //通过 id 获取单个元素var boxArr = document.getElementsByClassName("box");  //通过 class 获取的是数组var divArr = document.getElementsByTagName("div");    //通过标签获取的是数组

通过 jQuery 获取这些元素节点的方式是：（获取的都是数组）

    //获取的是数组，里面包含着原生 JS 中的DOM对象。var jqBox1 = $("#box");var jqBox2 = $(".box");var jqBox3 = $("div");

我们打印出来看看：

在这里插入图片描述

上图显示，由于JQuery 自带了 css()方法，我们还可以直接在代码中给 div 设置 css 属性。

总结：jQuery 就是把 DOM 对象重新包装了一下，让其具有了 jQuery 方法。

二者的相互转换

1、 DOM 对象 转为 jQuery对象：

	$(js对象);

举例：（拿上一段的代码举例）

	//转换。jqBox1 = $(myBox);jqBox2 = $(boxArr);jqBox3 = $(divArr);

DOM 对象转换成了 jquery 对象之后，上面的功能可以直接调用。

2、jQuery对象 转为 DOM 对象：

	jquery对象[index];      //方式1（推荐）jquery对象.get(index);  //方式2

jQuery对象转换成了 DOM 对象之后，可以直接调用 DOM 提供的一些功能。如：

    //jquery对象转换成 DOM 对象之后jqBox3[0].style.backgroundColor = "black";jqBox3.get(4).style.backgroundColor = "pink";

总结：如果想要用哪种方式设置属性或方法，必须转换成该类型。

jQuery 选择器

我们以前在CSS中学习的选择器有：

今天来学习一下jQuery 选择器。

jQuery选择器是jQuery强大的体现，它提供了一组方法，让我们更加方便的获取到页面中的元素。

1、jQuery 的基本选择器

解释如下：

举例：

<!DOCTYPE html>
<html>
<head lang="en"><meta charset="UTF-8"><title></title><script src="query/query-3.7.1.min.js"></script><script>//入口函数jQuery(document).ready(function () {//三种方式获取jquery对象var jqBox1 = $("#box");var jqBox2 = $(".box");var jqBox3 = $("div");//操作标签选择器jqBox3.css("width", 100);jqBox3.css("height", 100);jqBox3.css("margin", 10);jqBox3.css("background", "pink");//操作类选择器(隐式迭代，不用一个一个设置)jqBox2.css("background", "red");//操作id选择器jqBox1.css("background", "yellow");});</script>
</head>
<body><div></div>
<div class="box"></div>
<div id="box"></div>
<div class="box"></div>
<div></div></body>
</html>

效果如下：

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

2、层级选择器

解释如下：

举例：

<!DOCTYPE html>
<html>
<head lang="en"><meta charset="UTF-8"><title></title><script src="query/query-3.7.1.min.js"></script><script>$(function () {//获取ul中的li设置为粉色//后代：儿孙重孙曾孙玄孙....var jqLi = $("ul li");jqLi.css("margin", 5);jqLi.css("background", "pink");//子代：亲儿子var jqOtherLi = $("ul>li");jqOtherLi.css("background", "red");});</script>
</head>
<body>
<ul><li>111</li><li>222</li><li>333</li><ol><li>aaa</li><li>bbb</li><li>ccc</li></ol>
</ul>
</body>
</html>

效果：

在这里插入图片描述

3、基本过滤选择器

解释：

举例：

    <script src="query/query-3.7.1.min.js"></script><script>$(document).ready(function () {// :odd$("li:odd").css("background", "red");// :even$("li:even").css("background", "green");// :eq(index)$("ul li:eq(3)").css("font-size", "30px");  //设置第四个li的字体// :lt(index)$("li:lt(6)").css("font-size", "30px");// :gt(index)$(".ulList1 li:gt(7)").css("font-size", "40px");// :first$(".ulList li:first").css("font-size", "40px");// :last$("li:last").css("font-size", "40px");});</script>

4、属性选择器

5、筛选选择器

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.hqwc.cn/news/544040.html

如若内容造成侵权/违法违规/事实不符，请联系编程知识网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

Java后端面试经验分享，~纯分享

Java后端面试经验分享，~纯分享

本文将从面试、工作、学习三个方面分享最近面试的一些心得以及以后发展的一些规划&#xff0c;仅供参考&#xff0c;哈哈&#xff0c;毕竟本人也很菜&#xff0c;因为菜才要多学习。一会儿也会分享两本Java面试题库&#xff08;题库是b站大学找的&#xff0c;一会儿我也会分享出…
阅读更多...
【力扣白嫖日记】1934.确认率

【力扣白嫖日记】1934.确认率

前言 练习sql语句&#xff0c;所有题目来自于力扣&#xff08;https://leetcode.cn/problemset/database/&#xff09;的免费数据库练习题。 今日题目&#xff1a; 1934.确认率 表&#xff1a;Signups 列名类型user_idinttime_stampdatetime User_id是该表的主键。每一行都…
阅读更多...
【LLM加速】注意力优化（基于位置/内容的稀疏注意力 | flashattention）

【LLM加速】注意力优化（基于位置/内容的稀疏注意力 | flashattention）

note &#xff08;1&#xff09;近似注意力&#xff1a; Routing Transformer采用K-means 聚类方法&#xff0c;针对Query和Key进行聚类&#xff0c;类中心向量集合为 { μ i } i 1 k \left\{\boldsymbol{\mu}_i\right\}_{i1}^k {μi​}i1k​ &#xff0c;其中k 是类中心的…
阅读更多...
Guitar Pro2024中文免费版吉他爱好者必备工具，学习演奏、绘谱创作全覆盖

Guitar Pro2024中文免费版吉他爱好者必备工具，学习演奏、绘谱创作全覆盖

Guitar Pro8是一款功能强大的吉他工具&#xff0c;它支持多种乐器&#xff0c;包括但不限于吉他、贝斯、钢琴和鼓。这意味着&#xff0c;无论是吉他手、贝斯手、钢琴家还是鼓手&#xff0c;都可以利用这款软件进行音乐创作和演奏。 在Guitar Pro8中&#xff0c;用户可以轻松选…
阅读更多...
云计算服务模型：IaaS、PaaS和SaaS

云计算服务模型：IaaS、PaaS和SaaS

IaaS、PaaS和SaaS构成了云服务的三大模型&#xff0c;分别提供了基础设施、平台和软件的即服务解决方案。IaaS提供最大的灵活性和可扩展性&#xff0c;适合需要深度控制基础设施的用户。PaaS简化了开发过程&#xff0c;加速应用部署&#xff0c;适用于开发者和初创公司。而SaaS…
阅读更多...
UE5.1 iClone8 正确导入角色骨骼与动作

UE5.1 iClone8 正确导入角色骨骼与动作

使用iClone8插件Auto Setup 附录下载链接 里面有两个文件夹,使用Auto Setup C:\Program Files\Reallusion\Shared Plugins 在UE内新建Plugins,把插件复制进去 在工具栏出现这三个人物的图标就安装成功了 iClone选择角色,导入动作 选择导出FBX UE内直接导入 会出现是否启动插件…
阅读更多...
软件工程（Software Engineering）

软件工程（Software Engineering）

一、软件工程概述 1.软件生存周期 软件&#xff1a; 包含程序、数据及相关文档 软件工程&#xff1a; 涉及到软件开发、维护、管理等多方面的原理、工具与环境。最终的目的是开发高质量的软件。 目的&#xff1a; 提高软件生产率、提高软件质量、降低软件成本。 文档的作用&…
阅读更多...
Qt教程 — 2.1 如何使用Qt Designer 开发UI程序

Qt教程 — 2.1 如何使用Qt Designer 开发UI程序

目录 1 Qt Designer简介 2 编辑UI界面 2.1 在 UI 界面添加一个Label 2.2 在 UI 界面添加一个按钮 2.3 在 UI 文件里连接信号与槽 方法一&#xff1a;通过信号和槽编辑栏 方法二&#xff1a;通过导航区信号和槽编按钮 方法三&#xff1a;通过跳转编辑代码实现—通过按钮…
阅读更多...
gplearn，一个强大的 Python 库！

gplearn，一个强大的 Python 库！

更多资料获取 &#x1f4da; 个人网站&#xff1a;ipengtao.com 大家好&#xff0c;今天为大家分享一个强大的 Python 库 - gplearn。 Github地址&#xff1a;https://github.com/trevorstephens/gplearn 在机器学习领域&#xff0c;遗传编程是一种基于进化算法的优化方法&am…
阅读更多...
【模拟string函数的实现】

【模拟string函数的实现】

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 目录 前言 模拟string函数的实现 浅拷贝 深拷贝 vs和g下string结构的说明 总结 前言 模拟string函数的实现 浅拷贝 深拷贝 总结 前言 世上有两种耀眼的光芒&#…
阅读更多...
一文全面了解向量数据库

一文全面了解向量数据库

1. 什么是向量数据库&#xff1f;** 首先&#xff0c;我们需要理解什么是向量&#xff1f; 向量是基于不同特征或属性来描述对象的数据表示。每个向量代表一个单独的数据点&#xff0c;例如一个词或一张图片&#xff0c;由描述其许多特性的值的集合组成。这些变量有时被称为“…
阅读更多...
git：码云仓库提交以及Spring项目创建

git：码云仓库提交以及Spring项目创建

git&#xff1a;码云仓库提交 1 前言 码云访问稳定性优于github&#xff0c;首先准备好码云的账户&#xff1a; 官网下载GIT&#xff0c;打开git bash&#xff1a; 查看当前用户的所有GIT仓库&#xff0c;需要查看全局的配置信息&#xff0c;使用如下命令&#xff1a; git …
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023