jQuery

￡伏笔.

于 2023-08-15 14:12:04 发布

阅读量25

点赞数

文章标签： jquery

本文链接：https://blog.csdn.net/2302_78916178/article/details/132297344

版权

2725人阅读

4.4、设置属性attr()和删除属性removeAttr()

4.5、设置属性prop()和删除属性removeProp()

前言：学习jQuery之前，必须先学习HTML+CSS+JS，后学jQuery才会更加简单。

1、什么是jquery？

jQuery 是一个 JavaScript 库。

jQuery 极大地简化了 JavaScript 编程。

jQuery 学习很容易。

2、jQuery语法

2.1、元素选择器

$(this).hide()

演示 jQuery hide() 函数，隐藏当前的 HTML 元素。

$("#test").hide()

演示 jQuery hide() 函数，隐藏 id="test" 的元素。

$("p").hide()

演示 jQuery hide() 函数，隐藏所有 <p> 元素。

$(".test").hide()

演示 jQuery hide() 函数，隐藏所有 class="test" 的元素。

2.2、属性选择器

jQuery 使用 XPath 表达式来选择带有给定属性的元素。

$("[href]") 选取所有带有 href 属性的元素。

$("[href='#']") 选取所有带有 href 值等于 "#" 的元素。

$("[href!='#']") 选取所有带有 href 值不等于 "#" 的元素。

$("[href$='.txt']") 选取所有 href 值以 ".txt" 结尾的元素。

2.3、CSS选择器

jQuery CSS 选择器可用于改变 HTML 元素的 CSS 属性。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<script src="js/jquery-1.8.3.js"></script>
<body>
<p id="one">我要变绿</p>
<p id="two">我要变蓝</p>
<p id="three">我要变黄</p>
<button id="green">点我变绿</button>
<button id="blue">点我变蓝</button>
<button id="yellow">点我变黄</button>
</body>
<script>
$(document).ready(function(){
$("#green").click(function(){
$("#one").css("background-color","green");
});
$("#blue").click(function(){
$("#two").css("background-color","blue");
});
$("#yellow").click(function(){
$("#three").css("background-color","yellow");
});
});
</script>
</html>

2.4、事件函数

事件函数指的是：当按钮的点击事件被触发时会调用一个函数。事件处理程序指的是当 HTML 中发生某些事件时所调用的方法。术语由事件“触发”（或“激发”）经常会被使用。

事件函数	说明
$(document).ready(function)	将函数绑定到文档的就绪事件（当文档完成加载时）
$(selector).click(function)	触发或将函数绑定到被选元素的点击事件
$(selector).dblclick(function)	触发或将函数绑定到被选元素的双击事件
$(selector).focus(function)	触发或将函数绑定到被选元素的获得焦点事件
$(selector).mouseover(function)	触发或将函数绑定到被选元素的鼠标悬停事件

2.5、hide()隐藏函数

hide()隐藏函数相当于js中的display:none，指的是让元素隐藏功能。

文档就绪函数

$(document).ready(function(){
// jQuery functions go here
});

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/jquery-1.8.3.js"></script>
</head>
<script>
$(document).ready(function(){
//p标签点击事件函数
$("p").click(function(){
//隐藏当前元素
$(this).hide();
});
});
</script>
<body>
<p>点我消失</p>
<p>点我消失</p>
<p>点我消失</p>
</body>
</html>

3、jQuery效果

3.1、隐藏/显示

函数	说明
JQuery hide()	隐藏
JQuery show()	显示
jQuery toggle()	切换 hide() 和 show() 方法

hide()和show()以及toggle()是可以进行填写毫秒值来延迟隐藏/显示效果的。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<script src="js/jquery-1.8.3.js"></script>
<body>
<p id="p1">如果点击“隐藏”按钮，我就会消失。</p>
<button id="hide" type="button">隐藏</button>
<button id="show" type="button">显示</button>
<button type="button" id="button">切换</button>
<p>这是一个段落。</p>
<p>这是另一个段落。</p>
</body>
<script>
// 可选的 speed 参数规定隐藏/显示的速度，可以取以下值："slow"、"fast" 或毫秒。
// 可选的 callback 参数是隐藏或显示完成后所执行的函数名称。
$(document).ready(function(){
$("#hide").click(function(){
$("p").hide(1000);//hide和show里可以添加毫秒值会有延迟显现/消失效果
});
$("#show").click(function(){
$("p").show(1000);//hide和show里可以添加毫秒值会有延迟显现/消失效果
});
$("#button").click(function(){
$("p").toggle(1000);//toggle就是hide和show的整合，可以添加毫秒值会有延迟显现/消失效果
});

3.2、淡入/淡出

函数	说明
fadeIn()	淡入已隐藏的元素
fadeOut()	用于淡出可见元素
fadeToggle	可以在 fadeIn() 与 fadeOut() 方法之间进行切换
fadeTo()	方法允许渐变为给定的不透明度（值介于 0 与 1 之间）

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<script src="js/jquery-1.8.3.js"></script>
<body>
<p>演示带有不同参数的 fadeIn() 方法。</p>
<button id="fadeIn">点击这里，使三个矩形淡入</button>
<button id="fadeOut">点击这里，使三个矩形淡出</button>
<button id="fadeToggle">点击这里，使三个矩形淡入淡出</button>
<button id="fadeTo">点击这里，使三个矩形淡出透明度</button>
<br><br>
<div id="div1" style="width:80px;height:80px;display:none;background-color:red;"></div>
<br>
<div id="div2" style="width:80px;height:80px;display:none;background-color:green;"></div>
<br>
<div id="div3" style="width:80px;height:80px;display:none;background-color:blue;"></div>
</body>
<script>
// 可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。
// 可选的 callback 参数是 fading 完成后所执行的函数名称。
//fadeIn 淡入
$(document).ready(function() {
$("#fadeIn").click(function() {
$("#div1").fadeIn();
$("#div2").fadeIn("slow");
$("#div3").fadeIn(2000);
});
//fadeOut 淡出
$("#fadeOut").click(function(){
$("#div1").fadeOut();
$("#div2").fadeOut("slow");
$("#div3").fadeOut(2000);
});
//fadeToggle()淡入淡出
$("#fadeToggle").click(function(){
$("#div1").fadeToggle();
$("#div2").fadeToggle("slow");
$("#div3").fadeToggle(2000);
});
//fadeTo()函数后面可以填写透明度
$("#fadeTo").click(function(){
$("#div1").fadeTo("slow",0.2);
$("#div2").fadeTo("slow",0.4);
$("#div3").fadeTo(2000,0.7);
});
});
</script>
</html>

3.3、滑动

函数	说明
slideDown()	用于向下滑动元素
slideUp()	用于向上滑动元素
slideToggle()	可以在 slideDown() 与 slideUp() 方法之间进行切换

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.panel,
.flip {
width: 500px;
margin: 0 auto;
padding: 5px;
text-align: center;
background: #e5eecc;
border: solid 1px #c3c3c3;
}
.panel {
height: 120px;
display: none;
}
</style>
</head>
<script src="js/jquery-1.8.3.js"></script>
<script>
$(document).ready(function(){
// jQuery slideDown() 方法用于向下滑动元素。
// $(".flip").click(function(){
// $(".panel").slideDown("slow");
// });
// jQuery slideUp() 方法用于向上滑动元素。
// $(".flip").click(function(){
// $(".panel").slideUp("slow");
// });
// jQuery slideToggle() 方法可以在 slideDown() 与 slideUp() 方法之间进行切换。
$(".flip").click(function(){
$(".panel").slideToggle("slow");
});
});
</script>
<body>
<div class="panel">
<p>欢迎光临本网站</p>
<p>请您先进行注册</p>
</div>
<p class="flip">展开/收起</p>
</body>
</html>

3.4、动画

animate函数

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<script src="js/jquery-1.8.3.js"></script>
<script>
$(document).ready(function(){
// 也可以定义相对值（该值相对于元素的当前值）。需要在值的前面加上 += 或 -=：
$("button").click(function(){
$("div").animate(
{left:'400px',
opacity:'0.5',
// 您可以把属性的动画值设置为 "show"、"hide" 或 "toggle"：
height:'toggle',
width:'+=150px'
},1000);
});
});
</script>
<body>
<button>开始动画</button>
<p>默认情况下，所有 HTML 元素的位置都是静态的，并且无法移动。如需对位置进行操作，记得首先把元素的 CSS position 属性设置为 relative、fixed 或 absolute。</p>
<div style="background:#98bf21;height:100px;width:100px;position:absolute;">
</div>
</body>
</html>

动画的排队执行

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<script src="js/jquery-1.8.3.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
//把元素div赋值到一个变量
var div=$("div");
div.animate({height:'300px',opacity:'0.4'},"slow");
div.animate({width:'300px',opacity:'0.8'},"slow");
div.animate({height:'100px',opacity:'0.4'},"slow");
div.animate({width:'100px',opacity:'0.8'},"slow");
});
});
</script>
<body>
<button>开始动画</button>
<p>默认情况下，所有 HTML 元素的位置都是静态的，并且无法移动。如需对位置进行操作，记得首先把元素的 CSS position 属性设置为 relative、fixed 或 absolute。</p>
<div style="background:#98bf21;height:100px;width:100px;position:absolute;">
</div>
</body>
</html>

动画右移字体变大

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<script src="js/jquery-1.8.3.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
var div=$("div");
div.animate({left:'100px'},"slow");
div.animate({fontSize:'3em'},"slow");
});
});
</script>
<body>
<button>开始动画</button>
<p>默认情况下，所有 HTML 元素的位置都是静态的，并且无法移动。如需对位置进行操作，记得首先把元素的 CSS position 属性设置为 relative、fixed 或 absolute。</p>
<div style="background:#98bf21;height:100px;width:200px;position:absolute;">HELLO</div>
</body>
</html>

3.5、stop函数停止动画

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#panel,#flip
{
padding:5px;
text-align:center;
background-color:#e5eecc;
border:solid 1px #c3c3c3;
}
#panel
{
padding:50px;
display:none;
}
</style>
</head>
<script src="js/jquery-1.8.3.js"></script>
<script>
// stop() 方法适用于所有 jQuery 效果函数，包括滑动、淡入淡出和自定义动画。
$(document).ready(function(){
$("#flip").click(function(){
$("#panel").slideDown(5000);
});
//停止滑动
$("#stop").click(function(){
$("#panel").stop();
});
});
</script>
<body>
<button id="stop">停止滑动</button>
<div id="flip">点击这里，向下滑动面板</div>
<div id="panel">Hello world!</div>
</body>
</html>

3.6、函数链接

一次写一条 jQuery 语句（一条接着另一条）很麻烦，不过，有一种名为链接（chaining）的技术，允许我们在相同的元素上运行多条 jQuery 命令，一条接着另一条。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/jquery-1.8.3.js"></script>
</head>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#p1").css("color","red").slideDown(1000).slideUp(1000);
});
});
</script>
<body>
<p id="p1">jQuery 乐趣十足！</p>
<button>点击这里</button>
</body>
</html>

5、jQuery之DOM操作

5.1、获取内容

方法名	说明
text()	设置或返回所选元素的文本内容
html()	设置或返回所选元素的内容（包括 HTML 标记）
val()	设置或返回表单字段的值

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/jquery-3.4.1.js"></script>
</head>
<body>
<p id="test">这是段落中的<b>粗体</b>文本。</p>
<button id="btn1">显示文本</button>
<button id="btn2">显示 HTML</button>
<p>姓名：<input type="text" id="test2" value="米老鼠"></p>
<button id="show">显示值</button>
</body>
<script>
// text() - 设置或返回所选元素的文本内容
// html() - 设置或返回所选元素的内容（包括 HTML 标记）
// val() - 设置或返回表单字段的值
$(function(){
$("#btn1").click(function(){
alert($("#test").text());
});
$("#btn2").click(function(){
alert($("#test").html());
});
$("#show").click(function(){
alert($("#test2").val());
});
});
</script>
</html>

5.2、获取属性

方法名	说明
attr()	用于获取属性值。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/jquery-3.4.1.js"></script>
</head>
<body>
<p><a href="http://www.w3school.com.cn" id="w3s">W3School.com.cn</a></p>
<button id="show_hf">显示 href 值</button>
</body>
<script>
$(function(){
// 获得链接中 href 属性的值：
$("#show_hf").click(function(){
alert($("#w3s").attr("href"));
});
});
</script>
</html>

5.3、设置内容

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/jquery-3.4.1.js"></script>
</head>
<body>
<p id="test1">这是段落。</p>
<p id="test2">这是另一个段落。</p>
<p>Input field: <input type="text" id="test3" value="Mickey Mouse"></p>
<button id="btn1">设置文本</button>
<button id="btn2">设置 HTML</button>
<button id="btn3">设置值</button>
</body>
<script>
$(function(){
$("#btn1").click(function(){
$("#test1").text("Hello World!");
});
$("#btn2").click(function(){
$("#test2").html("<h1>Hello World!</h1>");
});
$("#btn3").click(function(){
$("#test3").val("Dolly Duck");
});
});
</script>
</html>

text()和html()的区别

text()和html()和js中的innerHtml和innerText是一样的，text()是获取或设置文本内容，而html()不仅可以获取或设置文本，也可以获取文本或设置样式，也就是说html()可以识别样式标签。

5.4、设置属性attr()和删除属性removeAttr()

方法	说明
attr()	获取/设置元素的属性
removeAttr()	删除属性

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<script src="../js/jquery-3.4.1.js"></script>
<body>
<p><a href="http://www.w3school.com.cn" id="w3s">W3School.com.cn</a></p>
<button id="bt1">改变 href 值</button>
<button id="bt2">改变href和title值</button>
<button id="bt3">删除href属性</button>
<p>请把鼠标指针移动到链接上，或者点击该链接，来查看已经改变的 href 值。</p>
</body>
<script>
$(function(){
$("#bt1").click(function(){
$("#w3s").attr("href","http://www.w3school.com.cn/jquery");
});
$("#bt2").click(function(){
$("#w3s").attr({
"href":"http://www.w3school.com.cn/jquery",
"title":"W3School jQuery 教程"
});
});
$("#bt3").click(function(){
$("#w3s").removeAttr("href");
});
});
</script>
</html>

5.5、设置属性prop()和删除属性removeProp()

方法名	说明
prop()	获取/设置元素的属性
removeProp()	删除属性

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<script src="../js/jquery-3.4.1.js"></script>
<body>
<form action="#" method="get">
姓名 <input type="text" name="username" id="username" value="德玛西亚" /> <br />
爱好
<input id="hobby" type="checkbox" name="hobby" value="perm" checked="checked">烫头<br />
<input type="reset" value="清空按钮" />
<input type="submit" value="提交按钮" /><br />
</form>
</body>
<script>
// 方式一： attr
// 选中返回： checked
// 末选中返回: undefined
console.log($("#hobby").attr('checked'));
// jq在1.6版本之后，弥补这个设计缺陷，如果该属性被选中返回true 末被选中返回false
console.info($("#hobby").prop("checked"));//返回属性的值的状态
$("#hobby").prop('checked',false);//设置属性
$("#username").prop("id","user_name");//也可以设置属性，注意不能自定义属性
</script>
</html>

prop()和attr()的区别

attr: 主要用于设置属性的值这一类的操作
prop: 主要用于判断属性是否存在或者操作布尔类型的操作
例如: checked selected

5.6、添加内容

方法名	说明
append()	被选元素的结尾插入内容
prepend()	被选元素的开头插入内容
after()	能够通过参数接收无限数量的新元素添加至元素之前
before()	能够通过参数接收无限数量的新元素添加至元素之后

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<script src="js/jquery-3.4.1.js"></script>
<body>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<ol>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ol>
<button id="btn1">追加尾部文本</button>
<button id="btn2">追加尾部列表项</button>
<button id="btn3">追加头部文本</button>
<button id="btn4">追加头部列表项</button>
</body>
<script>
$(function() {
$("#btn1").click(function() {
$("p").append("<b>Appended text</b>.");
});
$("#btn2").click(function() {
$("ol").append("<li>Appended item</li>");
});
$("#btn3").click(function() {
$("p").prepend("<b>Appended text</b>.");
});
$("#btn4").click(function() {
$("ol").prepend("<li>Appended item</li>");
});
});
</script>
</html>

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<script src="js/jquery-3.4.1.js"></script>
<body>
<img src="/i/eg_w3school.gif" alt="W3School Logo" />
<br><br>
<button id="btn1">在图片前面添加文本</button>
<button id="btn2">在图片后面添加文本</button>
<button id="btn3">在图片前面添加若干文本</button>
<button id="btn4">在图片后面添加若干文本</button>
</body>
<script>
$(function(){
var txt1="<b>I </b>"; // 以 HTML 创建元素
var txt2=$("<i></i>").text("love "); // 通过 jQuery 创建元素
var txt3=document.createElement("big"); // 通过 DOM 创建元素
txt3.innerHTML="jQuery!";
$("#btn1").click(function(){
$("img").before("<b>Before</b>");
});
$("#btn2").click(function(){
$("img").after("<i>After</i>");
});
$("#btn3").click(function(){
$("img").before(txt1,txt2,txt3);
});
$("#btn4").click(function(){
$("img").after(txt1,txt2,txt3);
});
});
</script>
</html>

5.7、删除元素

方法名	说明
remove()	删除被选元素（及其子元素）
empty()	从被选元素中删除子元素

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<script src="js/jquery-3.4.1.js"></script>
<body>
<div id="div1" style="height:100px;width:300px;border:1px solid black;background-color:yellow;">
This is some text in the div.
<p>This is a paragraph in the div.</p>
<p>This is another paragraph in the div.</p>
</div>
<br>
<button>删除 div 元素</button>
</body>
<script>
$(function(){
$("button").click(function(){
$("#div1").remove();
});
});
</script>
</html>

删除指定元素remove(指定元素)

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<script src="js/jquery-3.4.1.js"></script>
<body>
<p>This is a paragraph in the div.</p>
<p class="italic"><i>This is another paragraph in the div.</i></p>
<p class="italic"><i>This is another paragraph in the div.</i></p>
<button>删除 class="italic" 的所有 p 元素</button>
</body>
<script>
$(function(){
$("button").click(function(){
$("p").remove(".italic");
});
});
</script>
</html>

删除子元素empty()

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<script src="js/jquery-3.4.1.js"></script>
<body>
<div id="div1" style="height:100px;width:300px;border:1px solid black;background-color:yellow;">
This is some text in the div.
<p>This is a paragraph in the div.</p>
<p>This is another paragraph in the div.</p>
</div>
<br>
<button>清空 div 元素</button>
</body>
<script>
$(function(){
$("button").click(function(){
$("#div1").empty();
});
});
</script>
</html>

5.8、获取并设置CSS类

方法名	说明
addClass()	向被选元素添加一个或多个类
removeClass()	从被选元素删除一个或多个类
toggleClass()	对被选元素进行添加/删除类的切换操作
css()	设置或返回样式属性

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.important {
font-weight: bold;
font-size: xx-large;
}
.blue {
color: blue;
}
</style>
</head>
<script src="../js/jquery-3.4.1.js"></script>
<body>
<h1>标题 1</h1>
<h2>标题 2</h2>
<p>这是一个段落。</p>
<p>这是另一个段落。</p>
<div>这是非常重要的文本！</div>
<br>
<button id="bt1">向元素添加类</button>
<button id="bt2">删除元素上的类</button>
<button id="bt3">切换类</button>
</body>
<script>
$(function() {
$("#bt1").click(function() {
$("h1,h2").addClass("blue");
$("p").addClass("blue");
$("div").addClass("important blue");
});
$("#bt2").click(function(){
$("h1,h2").removeClass("blue");
$("p").removeClass("blue");
$("div").removeClass("important blue");
});
$("#bt3").click(function(){
$("h1,h2").toggleClass("blue");
$("p").toggleClass("blue");
$("div").toggleClass("important blue");
});
});
</script>
</html>

6、jQuery选择器

6.1、基本选择器

选择器名称	语法
标签选择器	语法： $("html标签名") 获得所有匹配标签名称的元素
id选择器	语法： $("#id的属性值") 获得与指定id属性值匹配的元素
类选择器	语法： $(".class的属性值") 获得与指定的class属性值匹配的元素
并集选择器	语法： $("选择器1,选择器2....") 获取多个选择器选中的所有元素

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<script src="../js/jquery-3.4.1.js"></script>
<body>
<span class="female">古力娜扎</span>
<span class="female" id="dlrb">迪丽热巴</span>
<span class="female hero">黑人</span>
<span class="male hero">钢铁侠</span>
<span class="male hero">超人</span>
</body>
<script>
//标签名选择器
$("span").each(function(){
console.log(this);
});
console.info("===============")
//类选择器
$(".female").each(function(){
console.log(this);
});
console.info("===============")
//id选择器
$("#dlrb").each(function(){
console.info(this);
});
console.info("===============")
//组合选择器
$(".female,.hero").each(function(){
console.info(this);
});
</script>
</html>

6.2、层级选择器

选择器	语法
后代选择器	语法： $("A B ") 选择A元素内部的所有B元素
子选择器	语法： $("A > B") 选择A元素内部的所有B子元素
兄弟选择器	语法： $("A ~ B") 选择A元素同级的所有B兄弟元素
跟班选择器	语法： $("A + B") 选择A元素旁边的B元素

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<script src="../js/jquery-3.4.1.js"></script>
<body>
<div id="kangxi">
<span>儿子：雍正</span>
<p>
<span>孙子：乾隆</span>
</p>
</div>
<div>牛顿</div>
</body>
<script>
$(function(){
//父子
console.log($("#kangxi>span").text());
//祖宗后代
console.log($("div span").text());
//兄弟
console.log($("span ~ p").text());
//跟班
console.log($("span+p").text());
});
</script>
</html>

6.3、基本过滤选择器

选择器	语法
首元素选择器	语法： :first 获得选择的元素中的第一个元素
尾元素选择器	语法： :last 获得选择的元素中的最后一个元素
偶数选择器	语法： :even 索引偶数，从 0 开始计数
奇数选择器	语法： :odd 索引奇数，从 0 开始计数
等于索引选择器	语法： :eq(index) 指定索引元素

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="../js/jquery-3.4.1.js"></script>
</head>
<body>
<h1>表格信息</h1>
<h2>这是一张商品表</h2>
<table border="1" width="600">
<tr>
<th>商品编号</th>
<th>商品名称</th>
<th>售价</th>
<th>数量</th>
</tr>
<tr>
<td>001</td>
<td>冰箱</td>
<td>3000</td>
<td>100</td>
</tr>
<tr>
<td>002</td>
<td>洗衣机</td>
<td>2000</td>
<td>50</td>
</tr>
<tr>
<td>003</td>
<td>热水器</td>
<td>1500</td>
<td>20</td>
</tr>
<tr>
<td>004</td>
<td>手机</td>
<td>2188</td>
<td>200</td>
</tr>
</table>
<div>slideDown(speed, [callback]) 概述
通过高度变化（向下增大）来动态地显示所有匹配的元素，在显示完成后可选地触发一个回调函数。
这个动画效果只调整元素的高度，可以使匹配的元素以“滑动”的方式显示出来。在jQuery
1.3中，上下的padding和margin也会有动画，效果更流畅。参数
speedString,Number三种预定速度之一的字符串("slow", "normal", or
"fast")或表示动画时长的毫秒数值(如：1000) callback (可选)FunctionFunction在动画完成时执行的函数</div>
<div>fadeOut(speed, [callback]) 概述
通过不透明度的变化来实现所有匹配元素的淡出效果，并在动画完成后可选地触发一个回调函数。
这个动画只调整元素的不透明度，也就是说所有匹配的元素的高度和宽度不会发生变化。参数
speedString,Number三种预定速度之一的字符串("slow", "normal", or
"fast")或表示动画时长的毫秒数值(如：1000) callback (可选)Function在动画完成时执行的函数</div>
<button>切换内容</button>
</body>
<script>
$(function(){
//设置表格第一行，显示为红色
$("tr:first").css("background","red");
// 2．设置表格除第一行以外显示为蓝色
$("tr:gt(0)").css("background","blue");
// 3．设置表格偶数行背景色金色 odd索引为奇数
$("tr:odd").css("background","yellow");
// 4．设置表格奇数行背景色绿色
$("tr:even").css("background","green");
// 5．设置页面中所有标题显示为灰色
$(":header").css("background","grey");
// 6．设置页面中正在执行动画效果div背景黄色
$("button").click(function(){
$("div").slideToggle("slow");
$("div:animated").css("background","orange");
});
// 7. 设置<html>背景颜色为金色
$(":root").css("background","pink");
});
</script>
</html>

6.4、内容过滤选择器

方法名	说明
:contains()	包含文本内容
:empty	选取没有子元素的
:has()	包含某个元素
:parent	选取所有子元素

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="../js/jquery-3.4.1.js"></script>
</head>
<body>
<div>今天是个晴天</div>
<div>明天要去人民公园a</div>
<div>
<span>JavaScript</span> 是网页开发中脚本技术
</div>
<div>Ajax 是异步的 JavaScript和 XML</div>
<div>
<p>jQuery</p>
是 JavaScript一个轻量级框架
</div>
<div></div>
</body>
<script>
$(function(){
// 1．设置含有文本内容 ”公园” 的 div 的字体颜色为红色
$("div:contains('公园')").css("color","red");
// 2．设置没有子元素的div元素文本内容 ”这是一个空DIV
$("div:empty").text("这是一个空div");
// 3．设置包含p元素的 div 背景色为黄色
$("div:has(p)").css("background","yellow");
// 4．设置所有含有子元素的span字体为蓝色
$("span:parent").css("color","blue");
});
</script>
</html>

6.5、可见性过滤选择器

方法名	说明
:hidden	选取隐藏元素
:visible	选取可见元素

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<script src="../js/jquery-3.4.1.js"></script>
<body>
<form>
<input type="hidden" />
<input type="text" name="xxx" style="display: none;" />
</form>
<table>
<tr>
<td>洗衣机</td>
</tr>
<tr>
<td>热水器</td>
</tr>
<tr style="display: none">
<td>电冰箱</td>
</tr>
</table>
</body>
<script>
//1、选中from中不可见元素，添加class属性
//匹配所有display:none 或者 input中的 type:hidden 元素
//attr()相当于js中的setAttribute()
$("from:hidden").attr("class", "hd_from");
$("tr:hidden").attr("class", "hd_tr");
$("input:hidden").addClass("hd_input"); //只能添加class属性
//2．设置table所有可见 tr 背景色金色
$("tr:visible").css("background", "yellow");
//3．设置table所有隐藏tr 字体颜色为红色，显示出来
$("tr:hidden").css("color","red").show();
</script>
</html>

6.6、属性过滤选择器

选择器	语法
属性名称选择器	语法： $("A[属性名]") 包含指定属性的选择器
属性选择器	语法： $("A[属性名='值']") 包含指定属性等于指定值的选择器
复合属性选择器	语法： $("A[属性名='值'] []...") 包含多个属性条件的选择器

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<script src="../js/jquery-3.4.1.js"></script>
<body>
<input type="text" name="username" value="用户名" /><br />
<input type="text" name="nickname" value="昵称" /><br />
<input type="password" name="password" value="密码" /><br />
<p class="p-yanqi">我是class="p-yanqi"</p>
</body>
<script>
$(function(){
// 1.获取type 的input标签
$("input[type]").each(function(){
console.info(this);
});
console.info("-----------------");
// 2.获取type=“password”的input标签
$("input[type='password']").each(function(){
console.info(this);
});
console.info("-----------------");
// 3.获取属性名以xx开始
$("p[class^=p]").each(function(){
console.info(this);
});
console.info("-----------------");
// 4.获取属性名以xx结尾
$("input[type$='rd']").each(function(){
console.info(this);
})
console.info("-----------------");
// 5.属性值中包含的属性
$("input[type*='t']").each(function(){
console.info(this);
});
console.info("-----------------");
// 6.获取 type ='text' 并且 name='nickname' 的标签
$("input[type='text'][name='nickname']").each(function(){
console.info(this);
});
});
</script>
</html>

6.7、子元素过滤选择器

方法名	说明
:nth-child(3n)	选取以3为倍数的元素
:nth-child(even)	选取偶数行元素
:nth-child(odd)	选取奇数行元素
:only-child	选取只有一个子元素的元素

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<script src="../js/jquery-3.4.1.js"></script>
<body>
<table border="1" width="400" id="mytable">
<tr>
<td>1</td>
<td>冰箱</td>
</tr>
<tr>
<td>2</td>
<td>洗衣机</td>
</tr>
<tr>
<td>3</td>
<td>热水器</td>
</tr>
<tr>
<td>4</td>
<td>电饭锅</td>
</tr>
<tr>
<td>5</td>
<td>电磁炉</td>
</tr>
<tr>
<td>6</td>
<td>豆浆机</td>
</tr>
<tr>
<td>7</td>
<td>微波炉</td>
</tr>
<tr>
<td>8</td>
<td>电视</td>
</tr>
<tr>
<td>9</td>
<td>空调</td>
</tr>
<tr>
<td>10</td>
<td>收音机</td>
</tr>
<tr>
<td>11</td>
<td>排油烟机</td>
</tr>
<tr>
<td>12</td>
<td>加湿器</td>
</tr>
<tr>
<td>13 电暖气</td>
</tr>
</table>
</body>
<script>
$(function(){
// 1.在每个表格下3的倍数行，字体颜色为红色 3 6 9 12
$("tr:nth-child(3n)").css("color","red");
// 2.每个表格奇数行背景色黄色
$("tr:nth-child(odd)").css("background","yellow");
// 3.每个表格偶数行背景色灰色
$("tr:nth-child(even)").css("background","grey");
// 4.每个tr 只有一个td的字体为蓝色
$("td:only-child").css("color","blue");
});
</script>
</html>

6.8、表单过滤选择器

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<script src="../js/jquery-3.4.1.js"></script>
<body>
<form action="#" method="POST">
用户名 <input type="text" name="username" /><span id="span"></span> <br />
密码 <input type="password" name="password" /> <br />
<input type="button" value="提交" />
</form>
</body>
<script>
$(function(){
// 1．对所有text框和password框，添加离焦事件，校验输入内容不能为空
$(":text,:password").blur(function(){
if($(this).val()==""){
$("#span").html("用户名或密码不能为空").css("color","red");
}
else{
$("#span").html("");
}
});
$("input[type='button']").click(function(){
if($(":text").val()==""||$(":password").val()==""){
$("#span").html("用户名或密码不能为空").css("color","red");
}else{
$("form").submit();
}
});
});
</script>
</html>

6.9、表单对象属性过滤选择器

选择器	语法
可用元素选择器	语法： :enabled 获得可用元素
不可用元素选择器	语法： :disabled 获得不可用元素
单选/复选框选中选择器	语法： :checked 获得单选/复选框选中的元素
下拉框选中选择器	语法： :selected 获得下拉框选中的元素