JQuery基础_′豸′丶。′′′彳′′jq-CSDN博客

本文链接：https://blog.csdn.net/m0_46573836/article/details/110692436

一、概念

jquery框架是一个JavaScript框架，它简化了JS的开发过程。

jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（或JavaScript框架）。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。

其实js框架：本质上就是一些js文件，这些文件里面封装了js的用原生代码

二、使用步骤

下载JQuery
目前jQuery有三个大版本：
1.x：兼容ie678,使用最为广泛的，官方只做BUG维护，
功能不再新增。因此一般项目来说，使用1.x版本就可以了，
最终版本：1.12.4 (2016年5月20日)
2.x：不兼容ie678，很少有人使用，官方只做BUG维护，
功能不再新增。如果不考虑兼容低版本的浏览器可以使用2.x，
最终版本：2.2.4 (2016年5月20日)
3.x：不兼容ie678，只支持最新的浏览器。除非特殊要求，
一般不会使用3.x版本的，很多老的jQuery插件不支持这个版本。
目前该版本是官方主要更新维护的版本。最新版本：3.2.1（2017年3月20日）
注意：
jquery-xxx.js 与 jquery-xxx.min.js区别：
1. jquery-xxx.js：开发版本。给程序员看的，有良好的缩进和注释。体积大一些
2. jquery-xxx.min.js：生产版本。程序中使用，没有缩进。体积小一些。程序加载更快
导入jquery的js文件
导入的是min.js的文件
使用

右边的代码使用了jqurey，左边的代码没有使用jqurey，是自己定义的js提取出去的一个方法
在这里插入图片描述
由此我们看出使用jquery能够很方便的获取到标签元素

三、JQuery对象和JS对象的区别与转换

1、JQuery对象在操作的时候比js对象更加方便

举例说明
body中的代码如下
在这里插入图片描述
页面上显示的内容为

如果我们想把两个盒子中的内容都改为aaa
我们可以通过js这样子进行改动

得到的结果为

同样我们可以使用jquery进行改动，得到相同的效果

页面上的显示的效果同样也是aaa

很显然使用jq对象来进行操作就比操作js对象更加方便

2、JQuery对象和js对象方法不通用

jquery对象和js对象的方法是不通用的
在这里插入图片描述
我们使用jq对象.html()这个方法完成了innerHTML的效果，但是如果我们使用的是jq对象.innerHTML这个方法的话就不行，这说明了两个对象之间的方法并不通用

得到的结果还是aaa

3、两者相互转换

jq- - - - >js：jq对象[索引]或者jq对象.get(索引)

在这里插入图片描述
$divs[0]是通过jq对象转换为js对象

$divs.get(1)也是通过jq对象转换为js对象

页面上显示的结果为
在这里插入图片描述

js- - - - >jq：$(js对象)

在这里插入图片描述
其中div[i]是js对象，通过$(js对象)的格式来将js对象转换为jq对象

页面展示出来的结果为
在这里插入图片描述

四、选择器

用于筛选具有相似特征的元素

1、基本语法学习

（1）事件绑定

在这里插入图片描述
页面中显示出来的效果为

jq对象.click(function(){})的方式来进行事件绑定；

（2）入口函数

入口函数就是dom文档加载完成后执行函数中的代码
我们原先学习的js的入口函数的写法为
在这里插入图片描述
window.onload=function(){}这样的方式来创建入口函数

而jq中的入口函数这样创建
在这里插入图片描述
$(function(){})这样子创建的

jq中的入口函数和js中的入口函数的区别
① window.onload=function(){}只能定义一次，如果定义了很多次，那么后面的函数中的内容将会覆盖前面函数中的内容
②$(function(){})这样的定义方式可以定义多次，每个函数内容都会执行

（3）样式控制

js中通过style来控制样式
jq中通过一个css方法来控制样式
在这里插入图片描述
页面上显示的结果为

css方法中的参数可以填写两种形式，一种是css中样式标准名称，另一种是DOM的写法，这里我们建议使用第二种DOM的写法。
因为这种写法我们可以通过ctrl加上鼠标悬浮再参数属性上看，如果出现了小手并且会变色，则证明参数拼写正确，如果不出现则表示拼写错误（如图所示按住ctrl然后鼠标放到参数上，鼠标会变成小手，然后参数变色）
在这里插入图片描述

2、选择器分类

（1）基本选择器

① 标签选择器（元素选择器）
语法：$("html标签名") 获取所有匹配标签名称的元素
② id选择器
语法：$("#id的属性值") 获取与指定id属性值匹配的元素
③ 类选择器
语法：$(".class的属性值") 获取与指定的class属性值匹配的元素8

④ 并集选择器
语法：$("选择器1，选择器2....") 获取多个选择器中的所有元素，每个选择器以逗号隔开

（2）层级选择器

① 后代选择器
语法：$("选择器1 选择器2") 选择选择器1元素内部的所有选择器2元素，举例说明：
在这里插入图片描述
此时如果使用console.log($("ul li"));那么获取到的是ul中的七个li，这就是后代
② 子代选择器
语法：$("选择器1 > 选择器2") 选择选择器1元素内部的所有选择器2子元素，还是上面的例子举例，如果我们想使用子代选择器获取console.log($("ul>li"));的话，获取的是ul中的子代，也就是这四个li 在这里插入图片描述

③相邻选择器
语法$("prev+next")标识匹配所有紧接在prev元素后面的相邻元素，还是拿上面的例子举例
如果想要获取console.log($(".li3+"));那么得到的是
在这里插入图片描述

④兄弟选择器
语法$(prev~siblings)表示将匹配prev元素之后的所有兄弟元素，如果我们想要获得的是 console.log($(".li3~li"));，那么得到的就是
在这里插入图片描述
这就是兄弟元素，兄弟元素是和siblings相同的元素，并且在prev后面的

（3）属性选择器

① 属性名选择器
语法：$("A[属性名]") 包含指定属性的选择器
举例说明
在这里插入图片描述

② 属性选择器
语法：$("A[属性名='值']") 包含指定属性等于指定值的选择器
在这里插入图片描述

a.注意这里要匹配不包含指定属性的选择器的时候我们可以这样写$("A[属性名 != '值']")
在这里插入图片描述

b.注意如果我们要匹配某个属性以某几个字母开始的属性值的元素时我们可以这样写$("A[属性名 ^= 'as']")（这代表A标签中某个属性名中属性以as开始的元素）
在这里插入图片描述

c.注意如果我们想要匹配某个属性值以某几个字母结尾的元素时我们可以这样写$("A[属性名 $= est']")（这代表A标签中某属性以est结束的属性值的元素）
在这里插入图片描述

d.注意如果我们想要匹配某属性包含某字母的元素时我们可以这样写$("A[属性名 *= e']")（这代表某属性名的属性值包含e的元素）
在这里插入图片描述

③ 复合属性选择器
语法：$("A[属性名='值'][属性名='值']...") 包含多个属性条件的选择器
这里
在这里插入图片描述

这里注意我们的这个是多个属性条件，不能是相同属性的条件$("li[class='houtai'][class='qiantai']").css("color","blue");这样就是不行的

（4）过滤选择器

① 首选选择器
语法：:first 获得选择器的元素中的第一个元素
② 尾元素选择器
语法：:last 获得选择器的元素中的最后一个元素
③ 非元素选择器
语法：not(selecter) 不包括指定内容的元素
④ 偶数选择器
语法：:even 偶数，从0开始计数
⑤ 奇数选择器
语法：:odd 奇数，从0开始计数
⑥ 等于索引选择器
语法：eq(index) 指定索引元素
⑦ 大于索引选择器
语法：gt(index) 大于指定索引元素
⑧ 小于指定索引元素
语法：:lt(index) 小于指定索引元素
⑨ 标题选择器
语法：:header 获得标题元素，固定写法

（5）表单过滤选择器

① 可用元素选择器
语法：:enabled 获取可用元素
② 不可用元素选择器
语法：:disabled 获取不可用元素
③ 选中选择器
语法：:checked 获得单选/复选框中的元素
④ 选中选择器
语法：:selected 获得下拉框中的元素

在这里插入图片描述

（6）子元素伪类选择器

第一类
注意这个E是父元素下的子元素
在这里插入图片描述

在这里插入图片描述
第二类

五、DOM操作

1、内容操作

(1) html()

获取/设置元素的标签体内容

举例说明：
① 获取div中的标签体中的内容
在这里插入图片描述
页面上的到的效果为

成功获取到标签内的所有内容

② 设置标签中的内容
在这里插入图片描述

页面上展示的效果为：
在这里插入图片描述
将所有内容替换为了aaa

(2) text()

获取/设置元素的标签体中的纯文本内容

举例说明：
获取div的文本内容
在这里插入图片描述
页面上显示的内容

② 设置文本内容
这里不做演示

(3) val()

获取/设置元素的value属性值

举例说明：
① 获取input中的value值
在这里插入图片描述

页面上展示出来的结果为
在这里插入图片描述
说明成功获取到了input中的value

② 设置input中的值
在这里插入图片描述
页面上显示的结果为

说明该方法也可以设置input中的value 值

2、属性操作

(1) 通用属性操作

设置传键值对就行
① attr()：获取/设置元素的属性
② removeAttr()：删除属性
③ prop()：获取/设置元素的属性
④ removeProp()：删除属性

$a t t r 和 p r o p 的区别：$
如果我们操作的是元素的固有属性（自带的属性），则建议使用prop；如果我们操作的是元素自定义的属性，则建议使用attr

(2) 对class属性操作

① addClass()：添加class属性值
② removeClass()：删除class属性值
③ toggleClass()：切换class属性
判断如果元素对象上存在class=“one”，则将属性值one删除掉；如果元素对象上不存在class=“one”，则添加

3、CRUD操作（增删改查的操作）

append()：父元素将子元素追加到末尾（例如：对象1.append(对象2)将对象2添加到对象1内部的末尾）
prepend()：父元素将子元素追加到开头（例如：对象1.prepend(对象2)表示将对象2添加到对象1的内部的开头位置）

注意这里追加到了父元素内部的开头或者末尾了
appendTo()：（例如：对象1.appendTo(对象2)表示将对象1添加到对象2的内部并且再末尾）
prepndTo()：（例如对象1.prependTo(对象2)表示将对象1添加到对象2的内部并且再开头）
after()：添加元素到对应的元素后面（例如：对象1.after(对象2)表示将对象2添加到对象1后面。对象1和对象2是兄弟关系）
这里注意是添加到了同等位置的后面，而不是子类的后面
before()：添加到对应元素的前面（例如：对象1.before(对象2)表示将对象2添加到对象1前面。对象1和对象2是兄弟关系）
insertAfter()：（例如：对象1.insertAfter(对象2)表示将对象1添加到对象2后面。对象1和对象2是兄弟关系）
insertBefore()：（例如：对象1.inserBefore(对象2)表示将对象1添加到对象2前面。对象1和对象2是兄弟关系）
remove()：移除元素（例如：对象.remove()将对象那个删除掉
empty()：清空元素的所有后代元素（例如：对象.empty()将对象后代元素全部清空，但是保留当前对象以其属性节点），如果没有后代元素，那么清除该对象中的内容，保留该对象

在这里插入图片描述

对象.clone()该属性用于克隆标签，这个属性中的参数如果为true，那么它会连着当前对象的方法也克隆过来，如果没有true的话，那么仅仅是克隆这个标签对象

我们发现这个复制出来的4并没有点击事件，我们来示范clone（true）的情况
对象.replaceWith:该标签用于替换对象标签