「jQuery 学习笔记01」选择器、DOM操作
¶Chapter 1. 概述
¶1.1 概念
jQuery 是一个快速、简洁的 JavaScript 框架，是继 Prototype 之后又一个优秀的 JavaScript 代码库。
它封装了 JavaScript 常用的功能代码，提供一种简便的 JavaScript 设计模式，优化 HTML 文档操作、事件处理、动画设计和 Ajax 交互。
¶1.2 快速入门
（下载并）引入 jQuery 到网页中，可使用两种方法：
从 https://jquery.com/download/ 下载 jQuery 库
1
2
3<head>
<script src="jquery-1.10.2.min.js"></script>
</head>从 CDN（内容分发网络） 中载入 jQuery，如：jsdelivr
1
2
3<head>
<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.min.js"></script>
</head>
使用：
jQuery 基础语法：
$(selector).action()1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery学习</title>
<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.min.js"></script>
</head>
<body>
<div id = "div1">我是div1</div>
<div id = "div2">我是div2</div>
<script>
var div1 = $("#div1");
var div2 = $("#div2");
alert(div1.html() + " AND " + div2.html());
</script>
</body>
</html>
¶1.3 jQuery 对象和 DOM 对象
在 JavaScript 中，通过 getElementById()、getElementByClassName() 和 querySelector() 等方法来获取页面中的 HTML 元素，如：
1 | |
jQuery 对象和 DOM 对象的方法是不通用的。
两者相互转换：
将 jQuery 对象转换为 JS 对象：
jQuery对象[索引]或者jQuery对象.get(索引)：将 jQuery 对象转换成 DOM 对象时，可把 jQuery 对象看作一个 DOM 对象数组1
2
3var $divs = $("div"); //通过jQuery方式，来获取div标签的所有HTML元素对象
$divs[0].innerHTML = "我变成DOM对象了!";
$divs.get(1).innerHTML = "我也变成DOM对象了!";将 DOM 对象转换为 jQuery 对象：
$(你的DOM对象)：该方法将 DOM 对象封装起来，并返回一个 jQuery 对象1
2
3
4var divs = document.getElementByTagName("div");
for(var i = 0; i < divs.length; i++){
$(divs[i]).html("我变成jQuey对象啦!");
}
¶Chapter 2. 选择器
¶2.1 基础语法
¶2.1.1 事件绑定
1 | |
¶2.1.2 入口函数
1 | |
等效于 JavaScript 的入口函数：
1 | |
window.onload | $(document).ready() | |
|---|---|---|
| 执行时机 | 必须等待网页全部加载完毕 （包括图片等），然后再执 行包裹代码 | 只需等待网页中 DOM结构加载完毕 就能执行包裹的代码。 |
| 执行次数 | 只能执行一次，若代码中有 第二个 window.onload ，则第一个的执行会被覆盖。 | 可执行多次，第 N 次都不会被 上一次执行所覆盖 |
程序的执行顺序是：加载完页面（其中包括定义在 HTML 头中 JS，比 body 优先加载）–>jQuery的入口函数
¶2.1.3 样式控制：CSS 方法
举例使用：
1 | |
¶2.2 选择器
¶2.2.1 基本选择器
| 选择器 | 语法 | 描述 |
|---|---|---|
| 标签选择器 | $("html标签名") | 根据元素的标签名进行匹配 |
| id 选择器 | $("#id属性值") | |
| 类选择器 | $(".class属性值") | |
| 并集选择器 | $("选择器1,选择器2,...") | 将每个选择器匹配的结果合并在一起返回 |
| 通配选择器 | $("*") | 匹配页面的所有元素，包括 HTML、head、body 等 |
¶2.2.2 层级选择器
| 选择器 | 语法 | 描述 |
|---|---|---|
| 后代选择器 | $("ancestor descendant") | 获得 ancestor 元素中所有子元素 |
| 子选择器 | $("parent > child") | 选取 parent 元素中的直接子元素 |
| 选择下一个兄弟 | $("prev+next") | 选取紧邻 prev 元素之后的 next 元素 |
| 选择下面所有兄弟 | $("prev~siblings") | 选取 prev 元素之后的 siblings 兄弟元素 |
¶2.2.3 属性选择器
| 选择器 | 语法 | 描述 |
|---|---|---|
| 属性名称选择器 | $("A[属性名]") | |
| 属性选择器 | $("A[属性名='值']") | |
$("A[属性名!='值']") | ||
$("A[属性名^='值']") | 选取属性以某个值开始的元素 | |
$("A[属性名$='值']") | 选取属性以某个值结尾的元素 | |
$("A[属性名*='值']") | 选取属性中包含某个值的元素 | |
| 复合属性选择器 | $("A[属性名1='值'][...]...") | 需要同时满足多个条件时使用 |
¶2.2.4 简单过滤选择器
| 选择器 | 语法 | 描述 |
|---|---|---|
| 首元素选择器 | :first | |
| 尾元素选择器 | :last | |
| 非元素选择器 | :not(selector) | |
| 偶数选择器 | :even | 从0开始计数 |
| 奇数选择器 | :odd | 从1开始计数 |
| 等于索引选择器 | :eq(index) | |
| 大于索引选择器 | :gt(index) | |
| 小于索引选择器 | :lt(index) | |
| 标题选择器 | :header | 获取标题(h1~h6)元素 |
¶2.2.5 内容过滤选择器
| 语法 | 描述 | 举例 |
|---|---|---|
:contains(text) | 选取包含 text 内容的元素。 | $("td:contains('滑雪')") |
:has(selector) | 选取含有 selector 所匹配的元素。 | $("td:has('span')") |
:empty | 选取所有不包含文本或子元素的空元素 | $("td:empty") |
:parent | 选取含有子元素或文本的元素 |
¶2.2.6 表单过滤选择器
| 选择器 | 语法 | 描述 |
|---|---|---|
| 可用元素选择器 | :enabled | 选取表单中属性为可用的元素 |
| 不可用元素选择器 | :disabled | 选完表单中属性不可用的元素 |
| 选中选择器 | :checked | 选取表单中被选中的元素（单选按钮、复选框） |
| 选中选择器 | :selected | 选取表单中被选中的选项元素（下拉列表） |
1 | |
¶案例：隔行换色
1 | |
¶案例：全选与全不选
1 | |
¶Chapter 3. DOM 操作
¶3.1 内容操作
html()：获取/设置元素的标签体内容text()：获取/设置元素的标签体纯文本内容val()：获取/设置元素的value值
1 | |
¶3.2 属性操作
（一）通用属性操作
attr()：获取/设置元素的自定义属性prop()：获取/设置元素的固有属性removeAttr()：删除元素的自定义属性removeProp()：删除元素的固有属性1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery学习</title>
<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.min.js"></script>
</head>
<body>
<script type = "text/javascript">
$(function () {
var name = $("#gz").attr("name"); //获取广州节点的name属性
$("#gz").attr("name", "LargerGuangzhou"); //设置广州节点的name属性为LargerGuanggzhou
$("#hn").attr("discription", "school"); //新增湖南节点的discription属性
$("#hn").removeAttr("name"); //删除它的name属性
var checked = $("#hobbies").prop("checked"); //获取（或新增）id为hobby的复选框的选中状态
alert(checked);
});
</script>
<ul>
<li id = "gz" name = "Guangzhou" xxx="yyy">我是广州</li>
<li id = "hn" name = "Hunan" >我是湖南</li>
</ul>
<input type = "checkbox" id = "hobbies"/>
</body>
</html>
（二）对 class 属性操作
addClass()：添加 class 属性值1
2
3
4
5
6
7$("#mybutton").click(function () {
$("#NoOne").prop("class", "secondClass");
});
//等效于
$("#mybutton").click(function () {
$("#NoOne").addClass("secondClass");
})removeClass()：删除 class 属性值toggleClass("属性")：若元素对象原本就存在该属性，则该方法能够使该属性删除；若元素对象本不存在该属性，则该方法能够添加该属性。
¶3.3 CRUD 操作
clone()：生成被选元素的副本，包含子节点、文本和属性。append()：在被选元素内部结尾插入内容若内容是已经存在的标签对象，则
append()会使该对象的位置发生变化1
2
3
4
5
6<p>
<span class = "s1">s1</span>
</p>
<script>
$("p").append('<span class="s2">s2</span>');
</script>结果展示的 HTML 为：
1
2
3
4<p>
<span class = "s1">s1</span>
<span class = "s2">s2</span>
</p>prepend()：在被选元素内部开头插入内容after()：在被选元素外部之后插入内容1
2
3
4
5
6<p>
<span class = "s1">s1</span>
</p>
<script>
$("p").after('<span class="s2">s2</span>');
</script>结果展示的 HTML 为：
1
2
3
4<p>
<span class = "s1">s1</span>
</p>
<span class = "s2">s2</span>before()：在被选元素外部之前插入内容
¶案例：表情选择
1 | |
¶案例：多选下拉列表的项进行左右移动
1 | |
本博客所有文章除特别声明外，均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自 JoyDee's Blog！
- 支付宝
相关推荐
评论