顾名思义,它是 JavaScript 和 查询,是辅助 JavaScript 开发的类库。
它的核心思想是 write less, do more.
所以它实现了很多浏览器的兼容问题。
它现在已经成为最流行的 JavaScript 库,在世界前 10000 个访问最多的网站中,有超过 55% 在使用它。
它是免费、开源的,它的语法设计可以使开发更加便捷,例如操作文档对象、选择 DOM 元素、制作动画效果、事件处理、使用 Ajax 以及其他功能。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery 体验</title>
<!-- CDN-->
<!-- <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>-->
<script type="text/javascript" src="../lib/jquery.js"></script>
<script type="text/javascript">
// 原生方法给按钮绑定单击事件
window.onload = function () {
// dom 对象
let btn01 = document.getElementById("btn01");
btn01.onclick = function () {
alert("JS 原生的单击事件")
}
};
// jQuery 给按钮绑定单击事件
$(function () {
// jQuery 对象
let $btn02 = $("#btn02");
$btn02.click(function () {
alert("jQuery 原生的单击事件")
})
});
</script>
</head>
<body>
<button id="btn01">按钮1</button>
<button id="btn02">按钮2</button>
</body>
</html>
$
是 jQuery 核心函数,能完成 jQuery 的很多功能。$()
就是调用 $
这个函数。
对于 $(Obj)
:
window.inload = function(){}
$(#id 属性值)
),即 id 选择器,会根据 id 属性查询标签对象$(.class 属性值)
),即 class 选择器,会根据 class 属性查询标签对象$(标签名)
),即标签名选择器,会根据标签名查询标签对象DOM 对象:
[object HTML标签名Element]
getElementById()
查询出来的标签对象是 DOM 对象getElementsByName()
查询出来的标签对象是 DOM 对象getElementsByTagName()
查询出来的标签对象是 DOM 对象createElement()
方法创建的对象,是 DOM 对象$( DOM 对象 )
jQuery 对象:
[object Object]
jQuery 对象[下标]
jQuery 对象 是 DOM 对象的数组 和 jQuery 提供的一系列功能函数。
#ID 选择器
:根据 id 查找标签对象.class 选择器
:根据 class 查找标签对象element 选择器
:根据标签名查找标签对象* 选择器
:表示任意的,所有的元素selector1,selector2 组合选择器
:合并选择器 1,选择器 2 的结果并返回ancestor descendant 后代选择器
:在给定的祖先元素下匹配所有的后代元素parent > child 子元素选择器
:在给定的父元素下匹配所有的子元素prev + next 相邻元素选择器
:匹配所有紧接在 prev 元素后的 next 元素prev ~ sibings 之后的兄弟元素选择器
:匹配 prev 元素之后的所有 siblings 元素基本过滤器:
:first
获取第一个元素:last
获取最后个元素:not(selector)
去除所有与给定选择器匹配的元素:even
匹配所有索引值为偶数的元素,从 0 开始计数:odd
匹配所有索引值为奇数的元素,从 0 开始计数:eq(index)
匹配一个给定索引值的元素:gt(index)
匹配所有大于给定索引值的元素:lt(index)
匹配所有小于给定索引值的元素:header
匹配如 h1, h2, h3 之类的标题元素:animated
匹配所有正在执行动画效果的元素内容过滤器:
:contains(text)
匹配包含给定文本的元素:empty
匹配所有不包含子元素或者文本的空元素:parent
匹配含有子元素或者文本的元素:has(selector)
匹配含有选择器所匹配的元素的元素属性过滤器:
[attribute]
匹配包含给定属性的元素[attribute=value]
匹配给定的属性是某个特定值的元素[attribute!=value]
匹配所有不含有指定的属性,或者属性不等于特定值的元素。[attribute^=value]
匹配给定的属性是以某些值开始的元素[attribute$=value]
匹配给定的属性是以某些值结尾的元素[attribute*=value]
匹配给定的属性是以包含某些值的元素[attrSel1][attrSel2][attrSelN]
复合属性选择器,需要同时满足多个条件时使用表单过滤器:
:input
匹配所有 input, textarea, select 和 button 元素:text
匹配所有文本输入框:password
匹配所有的密码输入框:radio
匹配所有的单选框checkbox
匹配所有的复选框:submit
匹配所有提交按钮:image
匹配所有 img 标签:reset
匹配所有重置按钮:button
匹配所有 input type=button
按钮:file
匹配所有 input type=file
文件上传:hidden
匹配所有不可见元素 display:none
或 input type=hidden
表单对象属性过滤器:
:enabled
匹配所有可用元素:disabled
匹配所有不可用元素:checked
匹配所有选中的单选,复选,和下拉列表中选中的 option 标签对象:selected
匹配所有选中的 optioneq()
获取给定索引的元素 功能跟 :eq()
一样first()
获取第一个元素 功能跟 :first
一样last()
获取最后一个元素 功能跟 :last
一样filter(exp)
留下匹配的元素is(exp)
判断是否匹配给定的选择器,只要有一个匹配就返回 truehas(exp)
返回包含有匹配选择器的元素的元素 功能跟 :has
一样not(exp)
删除匹配选择器的元素 功能跟 :not
一样children(exp)
返回匹配给定选择器的子元素 功能跟 parent>child
一样find(exp)
返回匹配给定选择器的后代元素 功能跟 ancestor descendant
一样next()
返回当前元素的下一个兄弟元素 功能跟 prev + next
功能一样nextAll()
返回当前元素后面所有的兄弟元素 功能跟 prev ~ siblings
功能一样nextUntil()
返回当前元素到指定匹配的元素为止的后面元素parent()
返回父元素prev(exp)
返回当前元素的上一个兄弟元素prevAll()
返回当前元素前面所有的兄弟元素prevUnit(exp)
返回当前元素到指定匹配的元素为止的前面元素siblings(exp)
返回所有兄弟元素add()
把 add 匹配的选择器的元素添加到当前 jquery 对象中html()
设置和获取起始标签和结束标签中的内容。跟 dom 属性 innerHTML 一样。text()
设置和获取起始标签和结束标签中的文本。跟 dom 属性 innerText 一样。val()
获取匹配元素集中第一个元素的当前值,或设置每个匹配元素的值。跟 dom 属性 value 一样。它可以同时设置多个表单项的选中状态。attr()
获取匹配元素集中第一个元素的属性值,或为每个匹配元素设置一个或多个属性。不推荐操作 checked、readOnly、selected、disabled 等。它还可以操作非标准的属性,比如自定义属性。prop()
获取匹配元素集中第一个元素的属性值,或为每个匹配元素设置一个或多个属性。只推荐操作 checked、readOnly、selected、disabled 等。不传参数是获取值,传入参数是设置值。
<<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery 属性操作</title>
<script type="text/javascript" src="../lib/jquery.js"></script>
<script type="text/javascript">
$(function () {
// 批量操作单选按钮选中状态
$(":radio").val(["radio2"]);
// 批量操作多选按钮选中状态
$(":checkbox").val(["checkbox3", "checkbox2"]);
// 批量操作多选下拉框选中状态
$("#multiple").val(["mul2", "mul3", "mul4"]);
// 批量操作单选下拉框选中状态
$("#single").val(["sin2"]);
//
alert($("#multiple").val()); // mul2,mul3,mul4
// 也可以简化操作
$(":radio, :checkbox, #multiple, #single").val(["radio2", "checkbox3", "checkbox2", "mul2", "mul3", "mul4", "sin2"])
})
</script>
</head>
<body>
单选:
<input name="radio" type="radio" value="radio1">radio1
<input name="radio" type="radio" value="radio2">radio2
<br>
多选:
<input name="checkbox" type="checkbox" value="checkbox1">checkbox1
<input name="checkbox" type="checkbox" value="checkbox2">checkbox2
<input name="checkbox" type="checkbox" value="checkbox3">checkbox3
<br>
下拉多选:
<select id="multiple" multiple="multiple" size="4">
<option value="mul1">mul1</option>
<option value="mul2">mul2</option>
<option value="mul3">mul3</option>
<option value="mul4">mul4</option>
</select>
<br>
<br>
<br>
下拉单选:
<select id="single">
<option value="sin1">sin1</option>
<option value="sin2">sin2</option>
<option value="sin3">sin3</option>
</select>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery 属性操作 - 选项 </title>
<script type="text/javascript" src="../lib/jquery.js"></script>
<script type="text/javascript">
$(function () {
// 给全选按钮绑定单击事件
$("#checkedAllBtn").click(function () {
$(":checkbox").prop("checked", true);
});
// 给全不选按钮绑定单击事件
$("#checkedNoBtn").click(function () {
$(":checkbox").prop("checked", false);
});
// 给反选按钮绑定单击事件
// 查询全部的球类的复选框
$("#checkedRevBtn").click(function () {
$(":checkbox[name='items']").each(function () {
// 在 each 遍历的 function 函数中,有一个 this 对象,这个 this 对象是当前正在遍历到的 dom 对象
this.checked = !this.checked;
});
// 检查是否是满选
let allCount = $(":checkbox[name='items']").length;
let checkedCount = $(":checkbox[name='items']:checked").length;
$("#checkAllBox").prop("checked", allCount === checkedCount);
});
// 提交按钮的单击事件
$("#sendBtn").click(function () {
//
$(":checkbox[name='items']:checked").each(function () {
alert(this.value);
})
});
// 给全选/全不选单选框绑定单击事件
$("#checkAllBox").click(function () {
$(":checkbox[name='items']").prop("checked", this.checked);
})
// 给全部球类绑定单击事件
$(":checkbox[name='items']").click(function () {
let allCount = $(":checkbox[name='items']").length;
let checkedCount = $(":checkbox[name='items']:checked").length;
$("#checkAllBox").prop("checked", allCount === checkedCount);
})
});
</script>
</head>
<body>
<from method = "post" action="">
您爱好的运动是?<input type="checkbox" id="checkAllBox">全选/全不选
<br>
<input type="checkbox" name="items" value="篮球">篮球
<input type="checkbox" name="items" value="足球">足球
<input type="checkbox" name="items" value="羽毛球">羽毛球
<input type="checkbox" name="items" value="乒乓球">乒乓球
<br>
<input type="button" id="checkedAllBtn" value="全 选">
<input type="button" id="checkedNoBtn" value="全不选">
<input type="button" id="checkedRevBtn" value="反 选">
<input type="button" id="sendBtn" value="提 交">
</from>
</body>
</html>
appendTo
例如 a.appendTo(b),把 a 插入到 b 所有子元素末尾,成为最后一个子元素
prependTo()
例如 a.prependTo(b),把 a 插入到 b 所有子元素前面,成为第一个子元素
insertAfter()
例如 a.insertAfter(b),得到 ba
insertBefore()
例如 a.insertBefore(b),得到 ab
replaceWith()
例如 a.replaceWith(b),用 a 替换掉 b
replaceAll()
例如 a.replaceAll(b),用 a 替换掉所有 b
remove()
例如 a.remove(),删除 a 标签
empty()
例如 a.empty(),清空 a 标签里的内容