JQuery作用
JQuery选择器可用于快速选定需要的HTML元素，并对其进行后续处理。
JQuery的下载和使用
1、通过JQuery官网进行下载：https://jquery.com
2、JQuery实质是JavaScript文件，和其他js文件一样，使用前用户可以HTML文档首部标签和之间添加JQuery引用声明。
语法如下：
<script src="js/jquery-2.1.0.min.js"></script>
一、基础选择器：
| 选择器 | 用法实例 | 描述 |
|---|---|---|
| * | $("*") | 选择文档中所有元素 |
| element | $(“element”) | 选择指定标签名称的元素 |
| #id | $("#id") | 选择指定id的元素 |
| .class | $(".class") | 选择具有指定class的所有元素 |
| sel1,sel2… | $(“sel1,.sel2”) | 选择符合条件的所有元素 |
*JQuery CSS选择器：可以方便的修改指定HTML元素的CSS属性。如$.(" * ").css(“border”,“5px solid red”)可以为文档中所有元素添加宽度为5像素的红色实线边框。
测试代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jq基础选择器</title>
<script src="js/jquery-2.1.0.min.js"></script>
</head>
<body>
<h3>jq选择器实例</h3>
<div id="div01">这是id选择器</div>
<div class="div02">这是类选择器</div>
<script>
$(document).ready(function(){
//1、全局选择
//$("*").css("border","5px solid red");
//2、元素选择
//$("div").css("border","5px solid red");
//3、id选择
//$("#div01").css("border","5px solid red");
//4、类选择器
//$(".div02").css("border","1px solid red");
//5、多重选择器
//$("h3 ,#div01 ,.div02").css("border","1px solid red");
</body>
</html>
二、层次选择器
| 选择器 | 语法结构 | 作用 |
|---|---|---|
| 子元素选择器 | $(“parent>child”) | 选取指定父元素的第一层子元素 |
| 后代选择器 | $(“ancestor descendant”) | 选取指定父元素中任意后代元素 |
| 后相邻选择器 | $(“prev+next”) | 选取与指定元素相邻的后一个元素 |
| 后兄弟选择器 | $(“prev~siblings”) | 选取指定元素后所有符合条件的兄弟元素 |
测试代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jq层次选择器</title>
<script src="js/jquery-2.1.0.min.js"></script>
</head>
<body>
<h3>jq选择器实例</h3>
<div id="div01">
<p>
这是一个
<strong>
测试
</strong>
段落。
</p>
</div>
<div id="div02">div02</div>
<div id="div03">div03</div>
<script>
$(document).ready(function(){
//层次选择器
//1、子选择器
//$("#div01>p").css("border","1px solid red");
//2、后代选择器
//与子选择器不同，后代选择器可以选择符元素后的任意元素
//$("#div01 strong").css("border","1px solid red");
//3、相邻选择器
//$("#div01+div").css("border","1px solid red");
//4、后兄弟选择器
//$("#div01~div").css("border","1px solid red");
});
</script>
</body>
</html>
*表单选择器
用于选择指定类型或处于指定状态的表单元素。
| 用法实例 | 描述 |
|---|---|
| $(":input") | 选择所有的input元素 |
| $(":text") | 选择type="text"的input元素 |
| $(":password") | 选择type="password"的input元素 |
| $(":radio") | 选择type="radio"的input元素 |
| $(":checkbox") | 选择type="checkbox"的input元素 |
| $(“input:submit”) | 选择type="submit"的input元素和button元素 |
| $(":reset") | 选择type="reset"的input元素 |
| $(":button") | 选择type="button"的input元素 |
| $(":image") | 选择type="image"的input元素 |
| $(":file") | 选择type="file"的input元素 |
选择指定装态的表单元素：
| 用法实例 | 描述 |
|---|---|
| $(":enabled") | 所有启用的input元素和button元素 |
| $(":disabled") | 所有被禁用的input元素和button元素 |
| $(":selected") | 下拉列表中处于选中装态的元素 |
| $(":checked") | 所有被选中的单选按钮或复选框 |