jQuery学习笔记
文章目录
1.0jQuery介绍
jQuery 是一个快速，小巧，功能丰富的 JavaScript 库。 它通过易于使用的 API 在大量浏览器中运行，使得 HTML 文档遍历和操作，事件处理，动画和 Ajax 变得更加简单。 通过多功能性和可扩展性的结合，jQuery 改变了数百万人编写 JavaScript 的方式。
1.1DOM 对象
- 用 JQuery 语法创建的对象叫做 JQuery 对象, jQuery 对象只能调用 jQuery 对象的 API。jQuery 对象是一个数组。在数组中存放本次定位的 DOM 对象。
- Query 对象与 JavaScript 对象是可以互相转化的，一般地，由于 Jquery 用起来更加方便，我们都是将 JavaScript 对象转化成 Jquery 对象
使用JavaScript的document对象转化为jQuery对象
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript" src="D:/myjquery/javaScript/jquery-3.6.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
alert("hello jquery")
})
</script>
</head>
<body>
</body>
</html>
1.2DOM 对象和 jQuery 对象
使用 ( D O M 对 象 ) 方 式 ， 可 以 D O M 对 象 转 换 为 j Q u e r y 对 象 ， 转 换 为 j Q u e r y 对 象 才 可 以 使 用 j Q u e r y 中 的 提 供 的 方 法 ， 操 作 D O M 对 象 。 一 般 情 况 下 ， 在 命 名 j Q u e r y 对 象 时 ， 为 了 与 D O M 对 象 进 行 区 分 ， 习 惯 性 的 以 (DOM 对象) 方式，可以 DOM 对象转换为 jQuery 对象， 转换为 jQuery 对象才可以使用 jQuery 中的提供的方法，操作 DOM 对象。一般情况下，在命名 jQuery 对象时，为了与 DOM 对象进行区分，习惯性的以 (DOM对象)方式，可以DOM对象转换为jQuery对象，转换为jQuery对象才可以使用jQuery中的提供的方法，操作DOM对象。一般情况下，在命名jQuery对象时，为了与DOM对象进行区分，习惯性的以 开头，这不是必须的。
转换 DOM 对象
var $btn=$(doBtn)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript" src="D:/myjquery/javaScript/jquery-3.6.0.min.js"></script>
<script type="text/javascript">
btnClick=function(){
var doBtn=document.getElementById("btn")
alert(doBtn.value)
var $btn=$(doBtn)
alert($btn.val())
}
</script>
</head>
<body>
<input type="button" id="btn" value="我是称为jQuery对象" onclick="btnClick()">
</body>
</html>
1.3jQuery 对象转为 DOM 对象
jQuery 对象本身为数组对象，该数组中的第 0 个元素即为该 jQuery 对象对应的 DOM对象。所以有两种方式可以获取到 DOM 对象：get(0) 方式与下标[0]
jQuery 对象.get(0) 或 jQuery 对象[0] 均可完成 jQuery 对象转 DOM 对象
var domobj=$("#txt")[0];
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript" src="D:/myjquery/javaScript/jquery-3.6.0.min.js"></script>
<script type="text/javascript">
btnClick=function(){
var domobj=$("#txt")[0];
var num=domobj.value;
domobj.value=num*num;
alert(domobj.value)
}
</script>
</head>
<body>
<input type="button" id="btn" value="计算平方" onclick="btnClick()">
<input type="text" id="txt" placeholder="输入整数">
</body>
</html>
1.4选择器
1.4.1id 选择器
语法：$(“#id”)
$("#myid")
1.4.2class 选择器
语法：$(“.class 名称”)
$(".myclass")
1.4.3标签选择器
语法：$(“标签名”)
$("myname")
1.4.4案列
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript" src="D:/myjquery/javaScript/jquery-3.6.0.min.js"></script>
<script type="text/javascript">
function fun1(){
$("#one").css("background","blue");
}
function fun2(){
$(".two").css("background","red");
}
function fun3(){
$("div").css("background","orange");
}
</script>
<style text=text/css>
div{
background-color: gray;
width:200PX;
height:100PX;
}
</style>
</head>
<body>
<div id="one">我是id=one的div</div>
<br>
<div class="two">我是class=two的div</div>
<br>
<div >我是没有id的div</div>
<br>
<span>我是第一行数据</span>
操作按钮：<br>
<input type="button" value="选取id=one" onclick="fun1();">
<input type="button" value="选取class=two" onclick="fun2();">
<input type="button" value="选取div" onclick="fun3();">
</body>
</html>
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-oog68PW9-1657519999514)(C:\Users\13417\AppData\Roaming\Typora\typora-user-images\image-20220711104932214.png)]](https://i-blog.csdnimg.cn/blog_migrate/7961d2e50acf21e1fab97c970ad192f0.png)
1.4.5组合选择器
组合选择器是多个被选对象间使用逗号分隔后形成的选择器，可以组合 id，class，标签名等。
语法：$(“id,class,标签名”)
$("#nameid,.myclass,div")
1.4.6 表单选择器
表单相关元素选择器是指文本框、单选框、复选框、下拉列表等元素的选择方式。该方法无论是否存在表单，均可做出相应选择。表单选择器是为了能更加容易地操作表单，表单选择器是根据元素类型来定义的
例如：
$(":text")选取所有的单行文本框
$(":password")选取所有的密码框
$(":radio")选取所有的单选框
$(":checkbox")选取所有的多选框
$(":file")选取所有的上传按钮
1.5过滤器
过滤器就是过滤条件，对已经定位到数组中 DOM 对象进行过滤筛选，过滤条件不能独立出现在 jquery 函数，如果使用只能出现在选择器后方。
1.5.1选择第一个 first, 保留数组中第一个 DOM 对象
语法：$(“选择器:first”)
$("#myid:first")
1.5.2选择最后个 last, 保留数组中后 最后 DOM 对象
语法：$(“选择器:last”)
$("#myid:last")
1.5.3选择数组中指定对象
语法：$(“选择器:eq(数组索引)”)
$("#myid:eq(0)")
1.5.4选择数组中小于指定索引的所有 DOM 对象
语法：$(“选择器:lt(数组索引)”)
$("#myid:lt(0)")
1.5.5选择数组中大于指定索引的所有 DOM 对象
语法：$(“选择器:gt(数组索引)”)
$("#myid:gt(0)")
1.6jquery函数
1.6.1val
操作数组中 DOM 对象的 value 属性.
$(选择器).val() ：无参数调用形式， 读取数组中第一个 DOM 对象的 value 属性值
$(选择器).val(值)：有参形式调用;对数组中所有 DOM 对象的 value 属性值进行统一赋值
1.6.2text
操作数组中所有 DOM 对象的【文字显示内容属性】
$(选择器).text():无参数调用，读取数组中所有 DOM 对象的文字显示内容，将得到内容拼接
为一个字符串返回
$(选择器).text(值):有参数方式，对数组中所有 DOM 对象的文字显示内容进行统一赋值
1.6.3attr
对 val, text 之外的其他属性操作
$(选择器).attr(“属性名”): 获取 DOM 数组第一个对象的属性值
$(选择器).attr(“属性名”,“值”): 对数组中所有 DOM 对象的属性设为新值
1.6.4hide
$(选择器).hide() :将数组中所有 DOM 对象隐藏起来
1.6.5show
$(选择器).show():将数组中所有 DOM 对象在浏览器中显示起来
1.6.6remove
$(选择器).remove() : 将数组中所有 DOM 对象及其子对象一并删除
1.6.7empty
$(选择器).empty()：将数组中所有 DOM 对象的子对象删除
1.6.8append
为数组中所有 DOM 对象添加子对象
$(选择器).append(“
1.6.9html
设置或返回被选元素的内容（innerHTML）。
$(选择器) .html()：无参数调用方法，获取 DOM 数组第一个匹元素的内容。
$(选择器) .html(值)：有参数调用，用于设置 DOM 数组中所有元素的内容。
1.6.10each
ach 是对数组，json 和 dom 数组等的遍历,对每个元素调用一次函数。
语法 1：$.each( 要遍历的对象, function(index,element) { 处理程序 } )
语法 2：jQuery 对象.each( function( index, element ) { 处理程序 } )
index: 数组的下标
element: 数组的对象
1.7事件
1.7.1定义元素监听事件
为页面元素绑定事件，即对于指定页面元素，当某个事件发生后，执行指定动作
语法：$(选择器).监听事件名称(处理函数);
说明：监听事件名称是 js 事件中去掉 on 后的内容， js 中的 onclick 的监听事件名称是 click
例如：
为页面中所有的 button 绑定 onclick,并关联处理函数 fun1
$(“button”).click(fun1)
为页面中所有的 tr 标签绑定 onmouseover，并关联处理函数 fun2
$(“tr”).mouseover(fun2)
1.7.2on() 绑定事件
on() 方法在被选元素上添加事件处理程序。该方法给 API 带来很多便利，推荐使用该方法.
语法： $(选择器) .on(event,data,function)
event：事件一个或者多个，多个之间空格分开
data：可选。规定传递到函数的 额外数据，json 格式
function: 可选。规定当事件发生时运行的函数。
1.8jquery的AJAX
jQuery 提供多个与 AJAX 有关的方法。通过 jQuery AJAX 方法，您能够使用 HTTP Get和 HTTP Post 从远程服务器上请求文本、HTML、XML 或 JSON 同时能够把接收的数据更新到 DOM 对象。
1.8.1$.ajax()
.
a
j
a
x
(
)
是
j
Q
u
e
r
y
中
A
J
A
X
请
求
的
核
心
方
法
，
所
有
的
其
他
方
法
都
是
在
内
部
使
用
此
方
法
。
∗
∗
语
法
：
.ajax() 是 jQuery 中 AJAX 请求的核心方法，所有的其他方法都是在内部使用此方法。 **语法：
.ajax()是jQuery中AJAX请求的核心方法，所有的其他方法都是在内部使用此方法。∗∗语法：.ajax( { name:value, name:value, … } )**
说明：参数是 json 的数据，包含请求方式，数据，回调方法等
async ： 布尔值，表示请求是否异步处理。默认是 true
contentType ：发送数据到服务器时所使用的内容类型。默认是：
“application/x-www-form-urlencoded”。
data：规定要发送到服务器的数据，可以是：string， 数组，多数是 json
dataType：期望从服务器响应的数据类型。jQuery 从 xml, json, text, html 这些中测试最可能
的类型
“xml” - 一个 XML 文档
“html” - HTML 作为纯文本
“text” - 纯文本字符串
“json” - 以 JSON 运行响应，并以对象返回
error(xhr,status,error)：如果请求失败要运行的函数, 其中 xhr, status, error 是自定义的形参名
success(result,status,xhr)：当请求成功时运行的函数，其中 result, status, xhr 是自定义的形参
名
type：规定请求的类型（GET 或 POST 等），默认是 GET， get，post 不用区分大小写
url：规定发送请求的 URL。
以上是常用的参数。
error() , success()中的 xhr 是 XMLHttpRequest 对象。
1.8.2$.get()
.
g
e
t
(
)
方
法
使
用
H
T
T
P
G
E
T
请
求
从
服
务
器
加
载
数
据
。
∗
∗
语
法
：
.get() 方法使用 HTTP GET 请求从服务器加载数据。 **语法：
.get()方法使用HTTPGET请求从服务器加载数据。∗∗语法：.get(url,data,function(data,status,xhr),dataType)**
url 必需。规定您需要请求的 URL。
data 可选。规定连同请求发送到服务器的数据。
function(data,status,xhr)可选。当请求成功时运行的函数。data,status,xhr 是自定义形参名。
参数说明：
data - 包含来自请求的结果数据
status - 包含请求的状态（“success”、“notmodified”、“error”、“timeout”、“parsererror”）
xhr - 包含 XMLHttpRequest 对象
dataType 可选。规定预期的服务器响应的数据类型。默认地，jQuery 会智能判断。可能的
类型：
“xml” - 一个 XML 文档
“html” - HTML 作为纯文本
“text” - 纯文本字符串
“json” - 以 JSON 运行响应，并以对象返回
1.8.3$.post()
.
p
o
s
t
(
)
方
法
使
用
H
T
T
P
P
O
S
T
请
求
从
服
务
器
加
载
数
据
。
语
法
：
.post() 方法使用 HTTP POST 请求从服务器加载数据。 语法：
.post()方法使用HTTPPOST请求从服务器加载数据。语法：.post(URL,data,function(data,status,xhr),dataType)
参数同$get()
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-z5SPtYDy-1657519999517)(C:\Users\13417\AppData\Roaming\Typora\typora-user-images\image-20220711141043662.png)]](https://i-blog.csdnimg.cn/blog_migrate/46fdf67e9b1ce27d7958fceadbc46634.png)
扫一扫
324
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
