一、可见性过滤器的使用
根据元素是否显示来选择
- :hidden：匹配所有的不可见元素
- :visible：匹配所有的可见元素
案例效果如下：
<body>
<div></div>
<div></div>
<input type="button" value="隐藏" id="btn1">
<input type="button" value="显示" id="btn2">
<script>
$(function(){
$('#btn1').click(function(){
// $('div:visible')中的visible是用来获取到可见的元素
$('div:visible').hide(1000)//hide隐藏
})
$('#btn2').click(function(){
// $('div:hidden')中的hidden是用来获取到隐藏的元素
$('div:hidden').show(1000)//show显示
})
})
</script>
</body>二、css()方法
css() 方法设置或返回被选元素的一个或多个样式属性
1、返回 CSS 属性
如需返回指定的 CSS 属性的值，请使用如下语法：
css("propertyname");案例：将返回 p 标签的 background-color 值：
$("p").css("background-color");2、设置 CSS 属性
如需设置指定的 CSS 属性，请使用如下语法：
css("propertyname","value");案例：将为所有匹配设置 p 标签的 background-color 值：
3、设置多个 CSS 属性
如需设置多个 CSS 属性，请使用如下语法：
// 第一种方法
css({"propertyname":"value","propertyname":"value",...});
// 第二种方法：使用链式写法实现
css("propertyname","value").css("propertyname","value");案例：将为所有 p 标签设置 background-color 和 font-size：
// 第一种方式
$("p").css({"background-color":"yellow","font-size":"20px"});
// 第二种方式：使用链式写法实现
$("p").css("background-color","yellow").css("font-size","20px");三、class操作
除了通过设置 css() 方法，也可以修改 class 名来修改样式效果
1、addClass() 方法
addClass() 方法向被选元素添加一个或多个类名。
该方法不会移除已存在的 class 属性，仅仅添加一个或多个 class 属性
提示：如需添加多个类，请使用空格分隔类名
// 语法
$(selector).addClass(class)
// 例如
$("div").addClass("add");
// 多个类名
$("body div:first").addClass("add big");
2、removeClass() 方法
removeClass() 方法向被选元素移除一个类名。
3、hasClass() 方法
hasClass() 方法判断被选元素是否包含这个类名。
4、toggleClass() 方法
toggleClass() 方法判断被选元素是否有该类名，如果有就移除它，如果没有，就添加它。
案例效果：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="js/jquery-3.6.0.min.js"></script>
<style>
ul li{
width: 100px;
line-height: 100px;
text-align: center;
float: left;
margin: 10px;
border: 1px solid cadetblue;
list-style: none;
}
.basic{
background-color: cornflowerblue;
font-size: 32px;
color: green;
}
.bigger{color: red;}
</style>
</head>
<body>
<input style="margin-left: 60px;" type="button" value="添加basic类">
<input type="button" value="添加bigger类">
<input type="button" value="移出bigger类">
<input type="button" value="判断是否有bigger类">
<input type="button" value="切换类">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
<script>
$(function(){
// addClass():给元素添加class,如果元素上已经有其他的classname,那么会将新增加的追加到现在有classname后面
// 找到第一个input标签，绑定单击事件
$('input:first').click(function(){
// 先获取到所有li标签，然后在给li添加class
$('ul li').addClass('basic')
})
// 找到第二个input标签，绑定单击事件
$('input:eq(1)').click(function(){
// 先获取到所有li标签，然后在给li添加class
$('ul li').addClass('bigger')
})
// removeClass():可以将元素的某个class移除，如果未传参数，则可以将元素上的所有class移除掉
// 找到第三个input标签，绑定单击事件
$('input:eq(2)').click(function(){
// 先获取到所有li标签，然后再移出li上面的class
$('ul li').removeClass('bigger')// 移出class为bigger的
// $('ul li').removeClass()// 将元素上所有的class移除掉
})
// 找到第四个input标签，绑定单击事件
$('input:eq(3)').click(function(){
// 先获取到所有li标签，然后判断li是否有class，如果没有就给添加上，有就移出
if(!$('ul li').hasClass('bigger')){
$('ul li').addClass('bigger')
}else{
$('ul li').removeClass('bigger')
}
})
// 找到第五个input标签，绑定单击事件
$('input:eq(4)').click(function(){
// 先获取到所有li标签，然后在给li设置toggleClass,可以实现切换效果
$('ul li').toggleClass('bigger')
})
})
</script>
</body>
</html>四、html() 与 text() 与 val()
1、html() 方法
html() 方法设置或返回被选元素的内容(innerHTML)。
当该方法用于返回内容时，则返回第一个匹配元素的内容。
当该方法用于设置内容时，则重写所有匹配元素的内容。
提示：如只需设置或返回被选元素的文本内容，请使用 text() 方法。
语法：
// 返回内容：
$(selector).html()
// 设置内容：
$(selector).html(content)
// 使用函数设置内容：
$(selector).html(function(index,currentcontent))| 参数 | 描述 |
|---|---|
| content | 必需。规定被选元素的新内容（可包含 HTML 标签）。 |
| function(index,currentcontent) | 可选。规定返回被选元素的新内容的函数。 index - 返回集合中元素的 index 位置。 currentcontent - 返回被选元素的当前 HTML 内容。 |
2、text() 方法
text() 方法设置或返回被选元素的文本内容。
当该方法用于返回内容时，则返回所有匹配元素的文本内容（会删除 HTML 标记）。
当该方法用于设置内容时，则重写所有匹配元素的内容。
提示：如需设置或返回被选元素的 innerHTML（文本 + HTML 标记），请使用 html() 方法。
语法：
// 返回文本内容：
$(selector).text()
// 设置文本内容：
$(selector).text(content)
// 使用函数设置文本内容：
$(selector).text(function(index,currentcontent))3、val() 方法
val() 方法设置或返回被选元素的 value 属性。
当用于返回值时：
该方法返回第一个匹配元素的 value 属性的值。
当用于设置值时：
该方法设置所有匹配元素的 value 属性的值。
提示：val() 方法通常与 HTML 表单元素一起使用。
语法：
// 返回 value 属性：
$(selector).val()
// 设置 value 属性：
$(selector).val(value)
// 通过函数设置 value 属性：
$(selector).val(function(index,currentvalue))五、节点的操作
1、添加元素
① append() 方法在被选元素的结尾插入指定内容（仍然在该元素的内部）。
提示：
是在父元素内末尾插入子元素
如需在被选元素的开头插入内容，请使用 prepend()
语法：
$(selector).append(content,function(index,html))案例：在所有<ul>元素结尾插入内容：
$("ul").append("<li>橘子</li>");| 参数 | 描述 |
|---|---|
| content | 必需。规定要插入的内容（可包含 HTML 标签）。 可能的值：
|
| function(index,html) | 可选。规定返回待插入内容的函数。
|
② appendTo() 方法在被选元素的结尾插入 HTML 元素。
提示：如需在被选元素的开头插入 HTML 元素，请使用 prependTo() 方法。
语法:
$(content).appendTo(selector)案例：在所有<ul>元素结尾插入内容：
$("<li>菠萝</li>").appendTo("ul")③ prepend() 方法在被选元素的开头插入指定内容。
提示：如需在被选元素的结尾插入内容，请使用 append() 方法。
语法与append()相同
④ prependTo() 方法在被选元素的开头插入 HTML 元素。
提示：如需在被选元素的结尾插入 HTML 元素，请使用 appendTo() 方法。
语法与appendTo()相同
⑤ before() 方法在被选元素之前插入指定的内容。
提示：如需在被选元素后插入内容，请使用 after() 方法。
语法：
$(selector).before(content,function(index))| 参数 | 描述 |
|---|---|
| content | 规定要插入的内容（可包含 HTML 标签）。 可能的值：
|
| function(index) | 可选。规定返回待插入内容的函数。
|
⑥ after() 方法在被选元素后插入指定的内容。
提示：如需在被选元素前插入内容，请使用 before() 方法。
区别：
- append(),appendTo(),prepend(),prependTo()：都是给某元素前面/后面添加子元素
before(),after()：指的是给某元素前面/后面添加兄弟元素。
2、删除元素
① remove() 方法移除被选元素，包括所有的文本和子节点。
该方法也会移除被选元素的数据和事件。
提示:如需移除元素，但保留数据和事件，请使用detach()方法代替。
提示:如只需从被选元素移除内容，请使用empty()方法。
语法：
$(selector).remove()② empty() 方法移除被选元素的所有子节点和内容。
注意:该方法不会移除元素本身，或它的属性。
提示:如需移除元素，但保留数据和事件，请使用detach()方法。
提示:如需移除元素及它的数据和事件，请使用remove()方法。
语法：
$(selector).empty()3、替换节点
①replaceWith()方法把被选元素替换为新的内容。
语法：
$(selector).replaceWith(content,function(index))| 参数 | 描述 |
|---|---|
| content | 必需。规定要插入的内容（可包含 HTML 标签）。 可能的值：
|
| function(index) | 可选。规定返回替换内容的函数。
|
② replaceAll()方法把被选元素替换为新的HTML元素。
语法：
$(content).replaceAll(selector)| 参数 | 描述 |
|---|---|
| content | 必需。规定要插入的内容（必须包含 HTML 标签）。 |
| selector | 必需。规定哪一个元素将被替换。 |
4、复制节点
clone() 方法生成被选元素的副本，包含子节点、文本和属性。
语法：
$(selector).clone(true|false)| 参数 | 描述 |
|---|---|
| true | 规定需复制事件处理程序。 |
| false | 默认。规定不复制事件处理程序。 |