1. 筛选关系节点
以下这些方法都是在通过关系查找节点，返回的都是符合这些关系的jq对象。
| 属性 | 说明 |
|---|---|
| eq(index) | 获取当前 jQ 数组中下标为 index 的 jQ 对象 |
| find | 返回符合条件的 jQ 对象的子节点 |
| parent | 返回 jQ 对象的父节点 |
| children | 返回 jQ 对象的所有子节点 |
| prev | 返回 jQ 对象上一个兄弟节点 |
| prevAll | 返回 jQ 对象的前面所有的兄弟节点 |
| next | 返回 jQ 对象下一个兄弟节点 |
| nextAll | 返回 jQ 对象后面所有的兄弟节点 |
| siblings | 返回当前 jQ 对象所有的兄弟节点 |
还有 prevUntil、not、slice…等等方法，更多请自行查阅 jQ 文档。
示例：
<ul>
<li>li_1</li>
<li>li_2</li>
<li class="act">li_3</li>
<li>li_4</li>
<li>li_5</li>
<li>li_6</li>
</ul>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
// 这些都是通过关系查找节点的方法, 需要注意的是返回的都是jq对象, 不是原生dom对象
// 获取li jQ数组
var $lis = $("li");
var $li4 = $("li").eq(3); // 获取索引为3的jq对象
console.log("第四个li", $li4);
var $prev = $li4.prev(); // 获取上一个jq对象
console.log("第三个li元素", $prev);
var $next = $li4.next(); // 获取下一个jq对象
console.log("第五个li元素", $next);
var $lisLess4 = $li4.prevAll(); // 获取上边所有的jq对象
console.log("第四个前面的所有li", $lisLess4);
var $lisMore4 = $li4.nextAll(); // 获取下边所有的jq对象
console.log("第四个后面的所有li", $lisMore4);
var $siblings = $li4.siblings(); // 获取除自己以外的所有兄弟jq对象
console.log("除第四个li之外所有的li", $siblings);
var $ul = $li4.parent(); // 获取 父元素jq对象
console.log("根据parent选择到ul元素", $ul);
var $find = $ul.find(".act"); // 在$ul的后代中, 查找符合规则的jq对象
console.log("根据find查找带有act类名的li", $find);
console.log("ul的子节点获取", $ul.children()); // 获取所有的子节点jq对象
</script>2. 样式操作
获取和设置元素的行内样式。
$ele.css("样式名") 获取元素的样式
$ele.css("样式名", "样式值") 设置单个元素样式
$ele.css({ 一次设置多个元素的样式
"样式名": "样式值",
"样式名": "样式值",
"样式名": "样式值"
})提示：当设置带单位的值时，可以省略单位。
示例：
<style>
.box {
font-size: 36px;
}
</style>
<body>
<div class="box"></div>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
var $box = $(".box");
$box.css("width", "300px"); // 设置元素宽度
// 当设置带单位的值时，可以省略单位
$box.css("height", 200);
// 同时设置元素多个样式(对象形式)
$box.css({
position: "absolute",
top: 50,
left: 50,
backgroundColor: "#f00"
})
// 获取元素的宽度样式值 和 字号大小, 并且打印
console.log("获取宽度", $box.css("width"));
console.log("获取字体大小", $box.css("font-size"));
</script>
</body>3. 类名操作
$ele.addClass() 向被选元素添加一个或多个类
$ele.removeClass() 从被选元素删除一个或多个类
$ele.hasClass() 判断被选元素是否存在类
$ele.toggleClass() 对被选元素进行添加/删除类的切换操作
示例：
<div class="box"></div>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
var $box = $(".box");
$box.addClass("b1 b3 b2"); // 追加类名
console.log($box.prop("class")); // box b1 b3 b2
$box.removeClass("b1 b3"); // 删除类名
console.log($box.prop("class")); // box b2
$box.toggleClass("b2"); // 切换类名 (之前存在b2, 此时就是删除操作)
console.log($box.prop("class")); // box
console.log("b2存在否", $box.hasClass("b2")); // false
$box.toggleClass("b2"); // 切换类名 (之前没有b2, 此时就是添加操作)
console.log($box.prop("class")); // box b2
console.log("b2存在否", $box.hasClass("b2")); // true
</script>4. 属性操作
$ele.attr("属性名") 获取属性值
$ele.attr("属性名", "属性值") 设置单个属性
$ele.attr({ 设置多个属性值
"属性名": "属性值",
"属性名": "属性值",
"属性名": "属性值",
"属性名": "属性值"
})
$ele.removeAttr("属性名") 删除属性
attr 可以更换为 prop区别：
attr 设置的非官方定义属性会出现在元素标签上，prop 设置的非官方定义属性会出现在元素对象上
attr 获取表单选择属性返回设置的值，prop 获取表单选择属性返回 boolean 值
注意：attr、prop设置的自定义属性不能通过对方获取
示例:
<div class="box"></div>
<input type="checkbox" checked="checked">
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
var $box = $(".box");
// 设置标签官方定义属性
$box.attr("class", "d1 d2"); // 设置class属性
$box.prop("title", "hello world"); // 设置 title属性
$box.attr("style", "width: 300px;height: 300px;background-color: #f00"); // 设置 style 属性
// 设置非官方定义属性
$box.attr("aaa", 0);
$box.prop("ccc", 0);
console.log("互相获取", $box.prop("aaa")); // undefined
console.log("互相获取", $box.attr("ccc")); // undefined
console.log("各自获取", $box.attr("aaa")); // 0
console.log("各自获取", $box.prop("ccc")); // 0
$box.removeAttr("aaa"); // 删除属性
$box.removeProp("ccc"); // 删除属性
console.log("删除后获取", $box.attr("aaa")); // undefined
console.log("删除后获取", $box.prop("ccc")); // undefined
var $ipt = $("input");
// attr 与 prop 的区别
// 双击页面获取多选框是否被选中的属性值
window.ondblclick = function (){
console.log("attr获取", $ipt.attr("checked"));
console.log("prop获取", $ipt.prop("checked"));
}
</script>5. 常见的元素操作
5.1 添加元素
| 方法 | 作用 |
|---|---|
| before | 在 jQ 对象之前插入内容 |
| prepend | 在 jQ 对象的第一个子节点之前插入内容 |
| append | 在 jQ 对象的最后一个子节点之后插入内容 |
| after | 在 jQ 对象之后插入内容 |
| replaceWith | 使用内容替换该 jQ 对象 |
方法参数：DOM节点、字符串、jQ对象
注意：如果被插入内容是某个已经拥有父节点的节点，在被传递给此方法后，它首先会被移除，再被插入到新的位置。
5.2 克隆节点
方法：$ele.clone(是否克隆jQ添加的事件)
5.3 删除节点
方法：$ele.remove()
5.4 示例
<div class="box">疑似地上霜</div>
<h2>=================</h2>
<p>窗前明月光</p>
<span>举头望明月</span>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
var $box = $(".box");
// 参数为：标签字符串。给元素之前添加静夜思标题，方法会解析标签
$box.before("<h2>静夜思</h2>");
// 参数为：DOM元素。给元素第一行添加DOM元素，页面上已经存在的p标签会消失，被移动到box元素中
$box.prepend(document.querySelector("p"));
// 参数为：jQ对象，页面上span元素会消失，被移动到box元素中
$box.append($("span"));
// 参数为：字符串。添加一行普通文本
$box.after("低头思故乡");
// 将box元素中的 span标签替换为p标签
$("span").replaceWith("<p>举头望明月</p>");
// jQ方式绑定事件，下面会提到，这里做演示使用
$box.click(function (){
console.log("aaa");
})
// 克隆box元素，点击事件也会生效，点击克隆的元素，也会在控制台输出 aaa
var $clone = $box.clone(true);
$("body").append($clone);
// 移除克隆元素
$clone.remove();
</script>6. 元素内容操作
| 方法 | 说明 |
|---|---|
| $ele.html() | 获取或设置元素内容HTML字符串 |
| $ele.text() | 获取或设置元素内容文本字符串 |
| $input.val() | 获取或设置input输入框的value值 |
示例:
<div class="box">
黄河之水天上来
<span>奔流到海不复回</span>
</div>
<input type="text" value="input 内容">
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
var $box = $(".box");
var $ipt = $("input");
// 取值
console.log("html文本", $box.html());
console.log("text文本", $box.text());
console.log("value", $ipt.val());
// 赋值
$box.html("<p>hello world</p>");
// $box.text("<p>作为普通文本</p>");
$ipt.val("设置input输入框的值");
</script>
312
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
